Como hacer un sistema de GUI en un motor 3D

[Vicente]

Hola!

estamos pensando en el tema de meter GUI a Jade. Pero básicamente no tengo ni idea del tema (he hecho cosas de GUI pero con GDI+). Alguién por aquí tiene consejos o links del tema?

Un saludo!

Vicente

[Astat]

Hace mil años, cuando entraba alguien al canal #programacion_d_juegos de IRC, algunos domingos se organizaban charlas tematicas.

En esa epoca di una sobre creacion de GUIs. Todo a nivel muy basico, pero te podria servir para empezar:

http://www.martinbr.com/index.php?page=tut_miniui

[Shaitan]

Si no también puede intentar meter alguna librería como CEGUI (http://www.cegui.org.uk/). Es la que se usa en Ogre...

J.

[Warchief]

Si quieres hacer toda la estructura propia, mira el código fuente (y sobre todo la ayuda) de Irrlicht. En la ayuda está el diseño de clases. Es muy sencillo/básico pero es muy cómodo.

[tamat]

Yo he programado un GUI bastante bonito y potente en mi framework, es de las pocas cosas que me han quedado bien. De mi experiencia te puedo decir algunas cosas:

- si quieres que se vea profesional necesitaras un buen render de fonts, que permita renderizarlas con antialiasing, diferentes tamaños, que tenga en cuenta los saltos de linea, que si te pasas del ancho haga el salto automaticamente, que cuando salta de linea lo haga sin romper la palabra, etc.
- la composición del GUI es clavada a la composición de una escena, es decir es un patron composite, tienes elementos con elementos anidados, y cada elemento aplica una transformación.
- el truco es hacer una clase muuuy completa llamada Widget, que lo tenga todo, y despues cada widget lo heredas de esa clase. Digo esto porque a la larga te das cuenta de que todos los widgets comparten el 90% del codigo. Además facilitas que los desarrolladores creen sus propios widgets.
- la gestión de eventos se propaga a lo largo del arbol que contiene la escena. En algunos casos se propaga de forma inversa (si pulso un boton primero le envio el mensaje al boton, luego al dialog que lo contiene, y así sucesivamente).
- el picking yo lo hago haciendo un render con colores planos de la bounding de cada widget. Aunque no es lo más limpio.
- poder construir el GUI desde un XML es muy comodo, ideal para hacer pruebas. en mi caso le puedes dar nombre a cualquier widget (sea boton, dialog, etc) y desde codigo recuperarlo facilmente para hacer las modificaciones oportunas.
- Si lo programas bien luego es muy facil portarlo a entornos 3D (poner un GUI en la pantalla de un ordenador en la escena siempre queda genial). Para hacerlo en el mio solo tuve que hacer unos pequeños cambios.
- En mi GUI cada widget tiene su metodo render, sin embargo existe una clase WidgetRenderer, que es un "estilo" de GUI, cuando mando renderizar el GUI las llamadas pasan por WidgetRenderer, si este no sabe como renderizarlo entonces se llama al render interno del widget. Esto facilita enormemente hacer estilos, y garantiza una coherencia en el aspecto del GUI generico.
- Para renderizar los widgets con un acabado bonito uso una textura en la que hay recuadros de diferentes tipos (con sombra, con reborde redondeado, resaltado como si el rato estuviese encima, etc) y luego guardo las coordenadas de cada recuadro en un XML. A la hora de renderizar cada widget digo qué recuadro usar y las dimensiones de este y mi sistema genera un grid 3x3 en el que se estiran las casillas centrales, de esta manera se conserva el contorno sin deformaciones y queda muy bien.
- Algunos casos como el MouseOver o el Focus requieren un trato especial si quieres que no te de problemas. Lo mismo si quieres hacer que un widget no se salga del contenedor de su padre.

En fin, se me ocurren infinidad de cosas más pero tampoco sé que utilidad le quereis dar al GUI, en mi caso quería que el GUI le permitiese al usuario hacer juegos de tipo GUI por eso me esmeré tanto, pero hacer un GUI sencillo no tiene por qué tomaros mucho tiempo.

Aquí hay un screenshot de mi GUI en funcionamiento.

Cualquier duda no dudes en preguntar.

[Vicente]

Hola!

gracias por los links y gracias por la extensa respuesta tamat. La verdad que tu screenshot pinta genial :)

Os cuento: de momento estoy buscando info, pero una posibilidad que estamos barajando es usar XAML para diseñar la GUI y luego pasarlo por una herramienta que lo transforme en GUI de Jade.

El tema del render es de las cosas que más me interesa (ya que la estructura de que es una GUI, mirando el código de WinForms ya se ven muchas cosas como la clase Widget con mucha funcionalidad y tal). El truco de los 9 cuadrados está chulo :)

A ver si con esto vamos haciendo brainstorming en el engine, y ya posteo por aquí en que quedamos. Muchas gracias!

Un saludo!

Vicente

P.D.: tamat, seguramente te daré la brasa más ;)