domingo, 20 de junio de 2010

PANDA3D: Modelos para ejemplos

Hemos creado un par de modelos muy simples y cutres (no somos modeladores :D) pero que cubrirán nuestras necesidades para los futuros tutoriales, ya que podremos ver cómo mover el coche sobre el escenario, las colisiones, la física, sonidos, luces, sombras, etc. Para los que tengan interés en seguir los tutoriales, subimos los modelos a Megaupload para que los puedan usar. Los archivos .egg debéis copiarlos a la carpeta models de Panda3D y los .tga en la carpeta maps dentro de models. Listo.



sábado, 19 de junio de 2010

PANDA3D: Exportar modelos desde Blender para usarlos en nuestro juego con Panda3D

Vamos a explicar cómo exportar correctamente desde Blender un modelo que creemos para poder utilizarlo en nuestro juego desarrollado en Panda3D. No voy a explicar cómo usar Blender ni cómo modelar en él, ya que se escapa del alcance del tutorial. Para ello podeis acudir a webs como:
o dando una vuelta por Google, ya que la comunidad es inmensa.

Partamos de la situación en la que tenemos un modelo y queremos añadirle una textura para que el exportador a Panda3D la reconozca correctamente (si no, no se verá la textura al cargar el modelo en nuestra aplicación). El exportador que utilizaremos se llama Chicken Exporter, y en su web podeis descargar la última versión del plugin para Blender.

Para instalar el plugin debéis buscar la carpeta .blender que este crea y es donde se encuentran los plugins y scripts de python que utiliza el mismo. Descomprimiremos lo que descarguemos de la web de Chicken Exporter y copiaremos las carpetas y los .py de su interior directamente en la carpeta scripts dentro de .blender, respondiendo afirmativamente si nos pregunta sobreescribir archivos.

Abrimos Blender y podemos verificar si está correctamente instalado el plugin accediendo a la ventana de Scripts y en el menú Scripts > Export debería de haber una opción llamada Chicken que exporta en .egg

Pasamos a abrir el modelo que queremos texturizar. Para los que sepan manejar Blende, lo que vamos a hacer es crear texturas UV (no se el nombre técnico), desdoblando las caras del modelo y luego con la plantilla de estas colocar la textura como queramos que se vea mediante un programa de manipulación de imágenes. Tras abrir el modelo lo tendremos en pantalla tal que así.


Añadimos una ventana donde visualizaremos la vista UV/Image editor. Tras esto, seleccionaremos el modelo con el botón derecho del ratón y pulsaremos TAB para entrar en modo edición. Pulsaremos la tecla A para seleccionar todos los vértices y aristas si no lo están ya y pulsamos la tecla U. En el menú que aparece seleccionamos Unwrap o Unwrap (smart projections) dependiendo de la complejidad de nuestra figura y de con cual opción dibuje mejor plantilla para luego crear la textura. Quedando una cosa así.


Ahora realizaremos un paso opcional que solo seguiremos si queremos crear una textura detallada de un modelo, por ejemplo si tenemos una puerta y queremos darle distintas texturas a cada parte de esta, los bordes, la puerta, el pomo, etc.

OPCIONAL: En la vista UV/Image editor nos dirigimos al menú UVs > Scripts > Save UV Face Layouts... y pulsamos OK en la ventana que se abre. Seleccionamos en el explorador dónde queremos guardar el fichero .tga que generará la plantilla para crear la textura con cada cara del modelo. Usaremos esta plantilla con un programa de edición de imágenes para crear la textura a nuestro gusto ya que al tener la plantilla, sabremos dónde debe de ir la textura del borde, de la puerta, el pomo, etc. (en el caso que fuera, por ejemplo, una puerta). Guardaremos la textura con la extensión que queramos.

Para cargar nuestra textura iremos al menú Image > Open... y buscaremos la imagen que queremos usar como textura (si seguimos el paso opcional, buscaremos esta imagen que al abrirse se verá debajo de la plantilla y podremos verificar que todo está en su sitio). Obteniendo como resultado algo así.



Ahora debemos decirle a Blender que utilice esa imagen como textura y que sea UV. Para ello salimos del modo edición pulsando en TAB de nuevo. Para acceder a las opciones de los materiales y texturas pulsamos la opción de Shading en el menú de botones teniendo el modelo seleccionado. Apareciendo algo así.



Pulsamos en Add New y nos creará un material para el modelo. Ahora vamos a la derecha del todo (para moverse si las opciones se salen de la pantalla, dejamos pulsado el botón central del ratón y lo movemos) y en la sección de Texture pulsamos en el botón Add new. Debemos indicarle a Blender (para que al exportarlo podamos modificar la ruta de las texturas) que debe tratar las texturas como UV. Para ello vamos a la pestaña Map Input y pulsamos la opción UV (junto a Orco). Ahora accedemos a las opciones de textura, que se vería así.



En Texture Type seleccionamos Image y nos aparecerán más opciones. A la derecha del todo está la opción Load. No la pulsamos, en su lugar le damos al botón con flechas que hay pegado a la izquierda de este botón y en la lista aparecerá la imagen que queremos usar como textura, la seleccionamos.

Pulsamos F12 para ver cómo ha quedado nuestro modelo texturizado.



Ahora procederemos a exportar el modelo. Para ello abrimos una ventana de Script y accedemos al menú Scripts > Export > Chicken (.egg)... Aparecerá una ventana como la siguiente.



Seleccionamos el modelo que queremos importar (botón derecho del ratón) y pulsamos en Update Selection, cada vez que seleccionemos un modelo distinto debemos pulsar ese botón. A continuación en Select indicaremos dónde se almacenará el archivo con el modelo en egg, en nuestro caso podemos ponerlo en la carpeta models de Panda3D. Pulsamos Export y esperamos hasta que nos indique de que esta ha terminado.


Esto nos generará un archivo .egg con nuestro modelo, este no es mas que un archivo de texto plano con los datos que usará Panda3D para mostrarnos este en el entorno 3D. Si lo intentáramos usar ahora mismo, seguramente obtendríamos una figura completamente blanca o si colocamos luces, gris. Esto es porque no está utilizando la textura que le indicamos en Blender, para ello accedemos a la carpeta donde hemos colocado el archivo .egg y lo editamos con cualquier editor de texto (aunque recomiendo Notepad++) y buscamos la etiqueta . Veremos que está indicando una ruta relativa que seguramente será incorrecta (si no lo es, no tocamos nada), algo como “./../../ruta/a/la/textura.png” donde ./ es la carpeta donde se encuentra el archivo .egg . Para solucionarlo debemos indicar una ruta relativa de donde se encuentra la imagen de la textura respecto donde se encuentre el .egg, en nuestro caso hemos copiado la textura a la carpeta maps dentro de models, por lo que sustituiremos la ruta por “./maps/textura.png”

Para ver si todo está correcto, abrimos una consola y en la carpeta donde se encuentra el .egg ejecutamos el comando pview modelo.egg sustituyendo modelo.egg por el tengamos. Debería de abrirse una ventana con nuestro modelo y su textura. Si queremos verlo con iluminación pulsamos L para añadir unas luces a la escena.


Ahora sí podremos usar el modelo en nuestro juego con su textura perfectamente definida.

martes, 8 de junio de 2010

PANDA3D: Primer contacto

En estos primeros tutoriales de panda, vamos a explicar lo mas basico, para representar  modelos, como animarlos y como mover la camara. En este ejemplo hay que tener en cuenta que los ejes, por defecto en panda estan cambiados, donde la Y es profundidad y Z, es vertical.

En el codigo intentamos explicar los pasos a seguir de este ejemplo basico.


 from math import pi, sin, cos  
 from direct.showbase.ShowBase import ShowBase  
 from direct.task import Task  
 from direct.actor.Actor import Actor  
 from direct.interval.IntervalGlobal import Sequence  
 from panda3d.core import Point3  
   
 class MyApp(ShowBase):  
   def __init__(self):  
     ShowBase.__init__(self)  
     # Cargamos los modelos del fondo  
     self.environ = self.loader.loadModel("models/environment")  
     # Pinta el modelo en la pantalla  
     self.environ.reparentTo(self.render)  
     # Aplicamos una escala y posicion  
     self.environ.setScale(0.25, 0.25, 0.25)  
     self.environ.setPos(-8, 42, 0)  
     # Aplicamos un tarea repetitiva, pasandole como parametro el nombre el metodo y un ID  
     self.taskMgr.add(self.spinCameraTask, "SpinCameraTask")  
     # Cargamos el modelo del panda creando un Actor, con el nombre del EGG para cargar y  
     # un atributo walk para realizar la animacion de andar  
     self.pandaActor = Actor("models/panda-model",{"walk": "models/panda-walk4"})  
     #Le damos una escala al panda y lo pintamos en la pantalla  
     self.pandaActor.setScale(0.005, 0.005, 0.005)  
     self.pandaActor.reparentTo(self.render)  
     # Llamamos a un metodo repetitivo pasandole el ID de los atributos de la animacion  
     self.pandaActor.loop("walk")  
     # Creamos los intervalos donde se ubicara el panda, hasta donde llegara, y que realizara.  
     # un giro de 180 grados, en 13 segundos y 3 segundos el giro.  
     pandaPosInterval1 = self.pandaActor.posInterval(13,Point3(0, -10, 0),startPos=Point3(0, 10, 0))  
     pandaPosInterval2 = self.pandaActor.posInterval(13,Point3(0, 10, 0),startPos=Point3(0, -10, 0))  
     pandaHprInterval1 = self.pandaActor.hprInterval(3,Point3(180, 0, 0),startHpr=Point3(0, 0, 0))  
     pandaHprInterval2 = self.pandaActor.hprInterval(3,Point3(0, 0, 0),startHpr=Point3(180, 0, 0))  
     # Aqui creamos la sequencia en la que utilizara uno u otro  
     # Primero empieza en y=-10 y acaba en y=10 en 13 segundos, da un giro de 180 grados  
     # en 3 segundos y despues empieza en 10 y acaba en -10.  
     self.pandaPace = Sequence(pandaPosInterval1,pandaHprInterval1,pandaPosInterval2,pandaHprInterval2,name="pandaPace")  
     # Llamada al metodo repetitivo de la sequencia de intervalos  
     self.pandaPace.loop()  
     
   # Define el procedimiento de la camara, rotanto sobre el centro de la escena  
   def spinCameraTask(self, task):  
     angleDegrees = task.time * 6.0  
     angleRadians = angleDegrees * (pi / 180.0)  
     self.camera.setPos(20 * sin(angleRadians), -20.0 * cos(angleRadians), 3)  
     self.camera.setHpr(angleDegrees, 0, 0)  
     return Task.cont  
   
 # El Main de la aplicacion.  
 app = MyApp()  
 app.run()  

Este es el resultado:



En los proximos tutoriales explicaremos, como implementar este ejemplo en la Web.

miércoles, 2 de junio de 2010

PANDA3D: Creando el entorno de desarrollo

Bueno, comenzaremos esta nueva etapa configurando nuestro entorno de desarrollo para Panda3D. Dado que hemos decidido desarrollar en Python vamos a utilizar Eclipse con el plugin PyDev, por lo que aunque el tutorial lo explico para Windows, se podrá seguir fácilmente en otros sistemas como Linux o Mac.

Para empezar necesitamos descargarnos nuestras herramientas:
  1. Eclipse IDE for Java Developers (es el más básico ya que solo queremos instalarle el plugin de PyDev)
  2. Panda3D (en el momento en que escribo estas líneas se encuentra por la versión 1.7.0)

Comenzamos instalando Panda3D que instalará en nuestro sistema el SDK para trabajar con el framework, una versión integrada de Python 2.6 configurada y lista para trabajar con Panda3D y algunos ejemplos de lo que se puede hacer con el framework. En Windows es tan simple como ejecutar, siguiente, siguiente... al final de la instalación os realizará una pregunta, yo recomiendo pulsar en SI, pero si vuestra máquina de trabajo tiene recursos limitado no lo hagáis. En otros sistemas operativos no creo que supongan mucha dificultad ya que está preparado para que sea fácil de instalar para empezar a desarrollar rápidamente.
NOTA: Puede que os indique durante la instalación de que existe otra copia de Python instalado en vuestro sistema y que Panda3D trae la suya propia preguntándoos si queréis que se use por defecto el Python de Panda3D o el que tengáis instalado en el sistema. La decisión es vuestra, solo que si seleccionáis no usar la versión de Panda3D por defecto tendréis que configurar para que reconozca las librerías de Panda3D.
A continuación descomprimimos Eclipse donde queramos y lo ejecutamos para instalarle el plugin, PyDev. Seleccionamos la carpeta donde se encontrará nuestro Workspace (en mi caso me he creado una distinta a la que indica por defecto y lo he cambiado). Para instalar el plugin nos dirigimos al menú Help y seleccionamos la opción Install new software... Aparecerá una nueva ventana donde pulsamos el botón Add... y rellenamos con un nombre el nuevo repositorio, por ejemplo "PyDev", y en Location indicamos la dirección http://pydev.org/updates. Pulsamos Ok y aparecerán los plugin de PyDev, seleccionamos el checkbox junto a PyDev (si queremos integración con el plugin Mylyn seleccionamos el otro también, en mi caso no lo usaré) y pulsamos en Next, aceptamos los términos de licencia y al final Finish. Durante la instalación nos indicará que debemos aceptar los certificados de autenticidad de Eclipse, pulsamos en Ok y en la ventana pulsamos en Select All y luego en Ok de nuevo. Tras terminar de instalar nos pedirá reiniciar Eclipse, yo recomiendo hacerlo.

Con esto tendremos Panda3D y el entorno de desarrollo instalado, solo nos falta indicarle al plugin PyDev las versiones de Python instaladas en nuestro sistema (si no tenéis ninguna otra será la de Panda3D) para utilizar la que trae el framework. Para ello nos dirigimos al menú Window y seleccionamos Preferences. Buscamos en la lista de secciones PyDev >> Interpreter - Python y en las opciones pulsamos sobre el botón Auto Config, esto escaneará el sistema buscando distintas versiones de Python instaladas. Aparecerán las carpetas que importará (deben de ser la carpeta python de Panda3D y todas sus subcarpetas) que tras pulsar en Ok quedará configurado.
NOTA: si por algún motivo da error al usar Auto Config o encuentra otras versiones de Python que tengáis instaladas en el sistema y no la de Panda3D, debéis pulsar sobre New.. y en la ventana que aparece indicáis un nombre para el intérprete de Python de Panda3D y la ruta donde se encuentre el archivo python.exe (en la carpeta python dentro de donde se instaló Panda3D). Tras pulsar en Ok aparecerá una lista de carpetas que importará (deben de ser la carpeta python de Panda3D y todas sus subcarpetas), pulsamos Ok y quedará configurado.
Para poder utilizar las librerías de Panda3D en los proyectos de Eclipse debemos añadir la carpeta de Panda3D a las carpetas del intérprete de Python (esto debemos hacerlo utilicemos el intérprete que trae Panda3D como uno que tengamos instalado), para ello vamos a la pestaña Libraries de la misma ventana y pulsamos sobre New folder y buscamos la carpeta donde hemos instalado Panda3D. Escaneará esta en busca de las librerías del framework (encontrará de nuevo las librerías que acaba de añadir, pero no lo volverá a hacer ni se solaparán). Cuando termine, pulsamos Ok en la ventana de preferencias y terminará de configurar los intérpretes. De esta forma tendremos Panda3D instalado y nuestro IDE instalado y configurado para usar la versión de Python que incluye el framework lista para trabajar.
EDITADO: Para poder añadir un autocompletado a las librerías de Panda3D, es necesario que añadáis también en el paso anterior, la carpeta bin dentro de donde esté instalado Panda3D. Pulseis en la pestaña Forced builtins y pulseis en New..., escribís la palabra direct, y repetís el proceso 2 veces más pero con las palabras pandac, panda3d y Pmw (con la P en mayúsculas). Con esto tendréis un autocompletado más o menos decente para las librerías de Panda3D.
Para los primerizos en Python (como yo :D) aquí os dejo un magnífico tutorial en PDF creado por Raúl González Duque para iniciarse en este lenguaje.



P.D Intentaré actualizar este post con la instalación en Linux y/o Mac por si aparece alguna dificultad extra que no ocurra en Windows.