8 .-. Modelos 3D. Mallas. Código.

Bien, una vez vista la teoría de cómo se implementa una animación y cuales son sus partes, que existe una jerarquía en los elementos que forman el esqueleto, que también existen unas uniones entre las distintas partes del esqueleto, y todo ello mezclado con las animaciones de cada parte del esqueleto; vamos a crear en nuestro motor una animación para lo cual emplearé un tanque que amablemente ha sido realizado por Alberto Durán Vaz.

8 .-. Modelos 3D. Mallas. Animación. (II)

FOTOGRAMAS (FRAMES) y CONTENEDORES

Hay dos componentes dentro de una malla de animación: uniones y contenedores de malla. Las uniones es donde una malla y otra se tocan y es lo que podríamos interpretar como una articulación, como una rodilla.


El problema de los nombres.

Por alguna razón, alguien en Microsoft decidió que la palabra "unión" (join) era un término demasiado simple de usar. Tuvieron que ir y reemplazarlo con la palabra Frame.

FRAME = UNION = JOIN = MARCO

8 .-. Modelos 3D. Mallas. Animación.

Lo que hemos visto hasta ahora es como cargar una malla estática. Eso nos serviría, por ejemplo, para hacer un elemento fijo del juego. Pero, por lo general, las mallas contienen animaciones y movimientos y, de eso, vamos a tratar en este post.

8 .-. Modelos 3D. Mallas. Renderizar Malla

Bien vamos allá con el renderizado de la malla. Repasemos algunos conceptos. Tenemos un fichero X que guarda el diseño de un coche que, supongamos, hemos hecho con Blender. Nuestro código carga el fichero X en un objeto de tipo Mesh al que acompañan colecciones de Materiales y Texturas.

8 .-. Modelos 3D. Mallas. Cargando Mallas en el juego.

Bien, vamos con uno de los temas más atractivos de los juegos: las mallas o meshes como se les dice en inglés. Como habéis podido ver, crear un personaje complejo con triángulos mediante el empleo de vértices sería muy complejo, para eso, existen muchos programas de diseño 3D con los que crear todo lo que se os ocurra. Hoy vamos a emplear Blender, que es gratis y hace de todo. También podeis emplear las mallas que sean free en muchas webs las hay como en esta, Turbosquid.

7 .-. 2D. Sprites. Hacer un HUD. Radar. (II)

Una vez creada la clase Enemigo, vamos con el radar. Lo primero es descargarse desde aquí los diseños. En la clase Motor vamos a declarar, al igual que para el HudBar una serie de texturas para emplear:

    'HUD RADAR
    Dim TexturaRadar As Texture
    Dim Texturap1 As Texture
    Dim Texturap2 As Texture
    Dim Texturap3 As Texture

7 .-. 2D. Sprites. Hacer un HUD. Radar.

Bien, vamos con nuestro siguiente objetivo. Crear un radar de proximidad para enemigos que se muestren en él cuando se encuentren a menos de cierta distancia de nosotros.
Emplearemos la misma técnica de sprites, esta vez tendremos un radar fijo de fondo y unos puntitos de colores que nos indicarán la presencia de enemigos que podrán ser verdes, amarillos o rojos
en función del estado de alerta del enemigo, por ejemplo. Los estados de alerta los haremos aleatorios.

7 .-. 2D. Sprites. Hacer un HUD. Barras de Vida.

Hola de nuevo. Vamos allá con nuestro HUD para el juego. Uno de los elementos más habituales en los juegos son las barras de vida o estado. Para esta he optado por un diseño simple de dos barras una de vida y otra de mana tal y como se puede ver en la foto.

7 .-. 2D. Sprites. Hacer un HUD.

En el tema de hoy vamos a ver cómo hacer un HUD "Heads UP Display", o lo que es lo mismo, el sistema que permite visualizar información del juego en la ventana. Ante todo decir que un HUD es un "pegote" en 2D que se superpone al mundo 3D que hemos creado en nuestro juego. En ese 2D tenéis que tener en cuenta que las coordenadas son dos y que el "cero cero" está en la esquina superior izquierda de la pantalla, también tenedremos que tener en cuenta que dependiendo del tamaña de resolución de pantalla tendremos que adaptar las dimensiones de nuestro HUD.

6 .-. Texturizar. (II)

Bien. En el anterior post teníamos el problema de que veíamos las escena "del revés" es decir, lo que debería de ser la parte Y+ se veía en Y- y esto es debido a la característica de Left Hand de los sistemas de coordenadas que estamos empleando. ¿Qué hago?¿Qué ocurre?

6 .-. Texturizar.

Bien vamos a texturizar un cuadrado con una textura de tipo "tablones de madera" para lo que necesitaré una imagen con la textura. Antes de ponernos con el código, tenemos que entender qué estamos haciendo al texturizar, y para ello es necesario entender lo que son los Texels.

5 .-. Luces y Sombras. (II)

Bien vamos a jugar un poco con las luces haciendo lo siguiente, iluminar la caja del apartado anterior con tres luces diferentes, la tipo punto que es la que hemos empleado antes, la direccional y la tipo foco. Para adornarlo un poco emplearé las teclas F9, F10 y F11 del teclado para encender o apagar las luces.

F9 .-. Luz Punto.

F10 .-. Luz Dirección

F11 .-. Luz Foco o Spotlight.

5 .-. Luces y Sombras.

Bien, vamos a iluminar un poco las cosas para ver nuestra caja. También voy a aprovechar este post para agregar algo de texto a la pantalla que me permita ver cual es la posición de la cámara y así poder depurar mejor nuestro mini mundo.

Vamos con lo más fácil primero, el texto. Para poder escribir texto en nuestro juego tenemos dos opciones: renderizar texto como una mesh y que los textos aparezcan dentro de juego (por ejemplo los nombres de los NPCs encima del muñeco) o bien texto en 2D para mostar datos como por ejemplo en el HUD. De momento vamos con el 2D el 3D lo veremos más adelante.

4 .-. Renderizado y Movimiento de la Cámara. (II)

Bien la clase de hoy va a ser larga pero vamos a ver cosas en pantalla (por fin). Mi objetivo es dotar a la aplicación de una funcionalidad básica en cuanto a teclas se refiere que permitan mover la cámara, añadir luces a nuestra escena y dibujar una caja en medio.

4 .-. Resumen.

Hola de nuevo. Tras solventar algunos problemas técnicos que he tenido vamos a hacer un pequeño resumen de dónde estamos:

4 .-. Renderizado y Movimiento de la Cámara.

Bien tras todos estos post de teoría de matrices vamos a volver a nuestro motor para poder continuar mejorándolo. Lo primero que vamos a hacer es una tecla "ESC" para poder interrumpir la aplicación, a continuación vamos a realizar una serie de tareas con el fin de mostrar un cubo y probar que esto funciona.  Finalmente implementaremos un movimiento de la cámara sencillo mediate cuatro teclas.

3 .-. Mundo, Proyecciones, Cámara. (IV)

Bien nuestro último paso es crear algo que maneje correctamente todas estas situaciones de la cámara, la proyección etc. Para eso vamos a Motor y definimos las siguientes matrices para trabajar.

3 .-. Mundo, Proyecciones, Cámara. (III)

Un último apunte sobre las matrices en DirectX, aunque ahora no lo vayamos a usar, es importante que mantegais este esquema a la vista pues os resultará muy útil cuando tengais que hacer operaciones con matrices en el mundo 3D. Se trata de la matriz 4x4 homogénea de DirectX.

3 .-. Mundo, Proyecciones, Cámara. (II)

La matriz de vista, también llamada matriz de la cámara transforma el mundo (Matriz Mundo) en lo que ella ve desde su posición. Pensad que la cámara es un objeto más dentro de la matriz Mundo, tiene sus coordenadas propias etc pero que nosotros (en un FPS por ejemplo) no vemos el mundo entero, sino lo que ve la cámara desde su posición: qué cosas están arriba, qué cosas a la derecha, a la izquierda etc.

3 .-. Mundo, Proyecciones, Cámara.

El tema de hoy va de matrices. En DX vamos a emplear las matrices para un montón de cosas por lo que os recomiendo repasar un poco los conceptos de álgebra de matrices.

2 .-. Detección del Hardware. Ciclo.

Bien esta es la última parte del tema 2. El ciclo principal de la aplicación. Básicamente una aplicación DX es un ciclo que se repite y que hace lo siguiente:

- Comprueba los controles (teclado, ratón, mandos) para ver qué se pulsa.

- Ejecuta las acciones de los controles.

- Ejecuta la IA.

- Ejecuta la física del juego.

- Modifica la cámara, la proyeccion, el mundo.

- Lo pinta todo. Render.

- Vuelve a Empezar.

2 .-. Detección del Hardware. Configurar Device.

Hola de nuevo.

Una vez hecha la inicialización correcta del dispositivo 3D vamos a establecerle algunos valores. Para ello, en la clase Motor, crearemos un nuevo Sub Público llamado PosConfigurarDX al que le pasaremos, como siempre, el objeto 3D device que configuramos antes (ByRef) queda algo así:

2 .-. Detección del Hardware. Arrancar Device.

Bien, ayer lo dejamos en un método de la clase Motor que queríamos emplear para detectar el hardware de DirectX. Vamos a completar ese método IniciarDX con un poco más de código pues nos falta lo más importante: el objeto device. Si veis la contrucción del método tenemos 3 parámetros, todos ByRef. Recordar que ByRef no crea copias del objeto que se recibe por lo que, cuando llamemos a este método desde FORM1, los objetos que lleguen desde FORM1 serán expuestos a este código y a las modificaciones que en él se hagan.

2 .-. Detección del Hardware

Bueno vamos con una de las partes importantes. Tenemos que detectar si nuestro hardware vale o no para lo que queremos hacer. Existen múltiples rutinas de detección más o menos elaboradas, yo os dejo una que, a mi me funciona bien y no me da problemas. La idea es tener un método, en la clase Motor que permita realizar la Detección. Llamaremos al método pasándole una serie de objetos para ver si es capaz de inicializar DX.

2 .-. Empezando DX. Detección del Hardware.

Bien vamos allá. Lo que vamos a hacer, en primer lugar, es añadir una nueva clase a nuestro proyecto a la que llamaremos "Motor". En ella escribiremos métodos que emplearemos en nuestro FORM1 a través de un objeto instanciado de esa clase motor a la que llamaremos Engine.

Tanto en la clase Motor como en la FORM1 aseguraos de que teneis los espacios de nombres:

2 .-. Ciclo de la Aplicación.

Antes de seguir debemos entender cual es el esquema que seguiremos para realizar nuestra aplicación.

Una aplicación DX está compuesta por una serie de uno o más dispositivos 3D sobre los que vamos a dibujar gráficos. Como todas en .NET tienen un punto de inicio que, para nosotros será el FORM1, pero también lo podeis hacer con un SUB MAIN, cada uno como mejor lo vea.

1 .-. Alguna Geometría antes de empezar.

Bien, el objetivo de este post es repasar algunos conceptos básicos de geometría  para que no tengamos problemas al hacer los programas y que todo el mundo pueda seguir el código. El principal inconveniente de la geometría es que puede costar "pensar" en 3D. La visión espacial hay gente que no la tiene muy desarrollada (yo entre ellos) pero, por suerte, se puede entrenar. Como consejo os recomiendo comprar, en una tienda de juguetes, las típicas formas geométricas que vienen en una caja y traen, esferas, cubos, cilíndros, etc y que sean semitransparentes (para poder ver lo que hay detrás). A mí me ayudaron,os dejo una imagen para que tengais una idea y la tienda donde los compré.

0 .-. Introducción a DirectX. Configurando el Proyecto.

Lo primero que vamos a hacer es crear un proyecto en el Visual Studio de tipo Windows Forms Application y establecer una serie de propiedades y cambios.

Lo primero es ir a las propiedades del proyecto y cambiar el FrameWork de destino a Framework 2.0 en vez de la 4.0 que es la que viene por defecto.

0 .-. Introducción a DIRECTX

DirectX es un conjunto de librerías que funciona como una capa intermedia entre los dispositivos DIRECTX y el programador haciendo que la tarea de programar, por ejemplo, una tarjeta gráfica sea algo más sencillo.

DirectX se compone de las siguientes partes:

• Direct3D: Comprende las librerías para creación de gráficos 3D.
• Graphics: Para imágenes en 2D como los sprites.
• Play: Permite comunicaciones en RED e implementa los protocolos más comunes.
• Input: Se encarga de los controles: teclados ratones, mandos etc.
• Music: Reproducción de música.
• Sound: Reproducción de sonidos y también grabación. 

Temario

Vamos a ver un poco, en líneas generales, de qué os voy a intentar convencer.

TEMAS.

0 .-. Introducción a DIRECTX. Para qué sirve.
1 .-. Alguna Geometría antes de empezar.
2 .-. Detección del Hardware. Ciclo de aplicación.
3 .-. Mundo, Proyecciones, Cámara.
4 .-. Renderizado y Movimiento de la Cámara.
5 .-. Luces y Sombras.
6 .-. Texturizar.
7 .-. 2D. Sprites. Hacer un HUD.
8 .-. Modelos 3D. Mallas.
9 .-. De la Pantalla 2D al Mundo 3D. Cálculos de Disparos. Ratón.
10 .-. Física. Mapa de Alturas.
11 .-. Física. Accesibilidad y Colisiones.
12 .-. Física. Gravedad, Inercia, Otros.
13 .-. Inteligencia Artificial. Introducción.
14 .-. Algunos algoritmos para empezar en I.A.
15 .-. Rutas.
16 .-. Otros.

El Principio.

Desde hace tiempo una idea se me pasó por la cabeza: hacer un videojuego. Supongo que, como a muchos de vosotr@s. El problema vino cuando quise que alguien me enseñase a hacer videojuegos y nadie supo cómo hacerlo. En aquellos tiempos Google aún no había sido pensado y, un amigo y yo, empezamos a hacer los primeros juegos para PC empleando un 386 y un 486 programando en Pascal y Borland C.

Con los años pude (gracias a mi trabajo) ir mejorando poco a poco mis conocimientos y, hoy, Junio de 2013, pues creo que va siendo hora de que me siente a escribir y comparta aquellas cosas que, a mí, me habría gustado tener cuando inicié mi andanza por este mundillo.

Los requisitos para seguirme son saber algo de programación y muchas pero que muchas ganas de trabajar porque, si bien es cierto que los juegos son divertidos de jugar, no lo son tanto de hacer.

Para programar voy a emplear aquello que yo sé que es DIRECTX. Hay más plataformas y engines, pero yo soy de los que (aún) piensa que las casas hay que aprender a hacerlas por los cimientos. ASí que os recomiendo que os bajeis:

- Visual Studio Express 2010

- DIRECTX Redistributable. El último que tengáis a mano.

- Opcionalmente DirectX SDK por si quereis profundizar en algunos temas.

Todo es gratis. No se paga por nada. Un ordenador con Windows, instalais las cosas en ese orden y listo.

Bienvenidos y adelante!!