Consultas, desarrollo de programas y petición de presupuestos:

martes, 10 de mayo de 2016

Desarrollo de Juegos de Tablero (3): Animación del personaje y/o fichas (2º parte)

Desarrollo de Juegos de Tablero (3): 

Animación del personaje y/o fichas

 (2º parte)


En esta 2º parte, vamos a ver un método mejor para animar  los personajes o fichas en nuestro juego. Para ello vamos a trabajar con la misma imagen "jacinto" que teníamos anteriormente, pero nuestro código (esta vez usando clases), se va a encargar de hacernos el trabajo más fácil. Observar este esquema:


Cada Sprite (o cuadro) que es la pequeña imagen que forma la animación, lo tenemos en una regilla, donde podemos identificarla por el lugar de la fila y columna que ocupa en la imagen completa.

Crearemos las siguientes clases:
imagen: encargada de leer el archivo gráfico, y de dibujar solo el sprite actual (o cuadro indicado)

controlAnimacion: encargada de llevar el contador de la animación, ya que le pasaremos una lista de sprites (o cuadros) que forman la animación, y internamente llevará un contador para saber cual sprite es el actual.

animacion: esta clase contiene a dos objetos, uno tipo imagen y otro controlAnimacion, y funciona como una "fachada" para que el programador no tenga que usar directamente a las clases de más bajo nivel (imagen y controlAnimacion).









Clase: Imagen






métodos Parámetros Descripción

_new()




ruta indica la ruta donde esta la imagen


filas indica las filas de sprites que tiene la imagen


columnas indica las columnas de sprites que tiene la imagen






dibujar()




cuadro numero que indica el sprite que se tendrá que dibujar


posx coordenada X donde se dibujará sprite


posy coordenada Y donde se dibujará el sprite






SpriteAltoAncho()





devuelve el ancho y largo del Sprite (según el numero de filas y columnas)



Usa una variable point, para devolver los valores:



x es el ancho e y es el alto





Clase: ControlAnimacion






métodos Parámetros Descripción

_new()




Frames cadena de texto, que indica que sprite hace el movimiento: “1,2,3,2”











cuadro()





Devuelve el numero de sprite actual











es_primer_cuadro()





Devuelve Verdadero o falso, si el contador de sprite paso es 0 o no











avanzar()





Avanza el contador interno paso, y si llega al último vuelve a 0










Clase: Animacion






métodos Parámetros Descripción

_new()




ruta indica la ruta donde esta la imagen


filas indica las filas de sprites que tiene la imagen


columnas indica las columnas de sprites que tiene la imagen


Frames cadena de texto, que indica que sprite hace el movimiento: “1,2,3,2”






Este constructor, crea internamente dos objetos (itmp y ControlAnimaciónTmp), con los datos de los parametros pasados.













animar()





llama al método avanzar, del objeto interno ControlAnimacionTmp











pasoApaso




x coordenada X donde se dibujará sprite


y coordenada Y donde se dibujará el sprite






Se encarga de dibujar la imagen y avanzar la animación.






SpriteAltoAncho()





devuelve el ancho y largo del Sprite (según el numero de filas y columnas)



Usa una variable point, para devolver los valores:



x es el ancho e y es el alto





Esta clase esta compuesta por dos objetos:

Private itmp As Imagen

Private ControlAnimacionTmp As ControlAnimacion
vease patrón de diseño Facade:
http://jsbsan.blogspot.com.es/2013/11/patron-facade-fachada-ejemplo-de.html


A la hora de dibujar, también he cambiado algunas cosas:
Uso un drawingArea, que tiene el evento _draw, donde coloco los objetos a dibujar (los personajes, explosiones, etc):
Public Sub DrawingArea1_Draw()
figuraAnimada.dibuja() 'es una pieza en el tablero, que podemos mover.
ani1.pasoApaso(100, 100) 'es una animación simple
ani2.pasoApaso(200, 200)'es una animación simple
ani3.pasoApaso(200, 100)'es una animación simple
ani4.pasoApaso(100, 200)'es una animación simple
ani5.pasoApaso(300, 100)'es una animación simple
End
En el video se muestra varias animaciones ejecutandose a la vez:


Esto permite animar a la vez varias figuras y animaciones que haya en dicho procedimiento. Además ese evento _Draw es llamado cada cierto tiempo por un temporizador (timer1), que se encarga de actualizar también la posición de los figuras :
Public Sub Timer1_Timer()
figuraAnimada.actualizaPosicion() 'actualizamos la posicion de la ficha. Internamente si no hay cambios se dibujara en el mismo sitio
DrawingArea1.Refresh()
End
En la clase PiezaAnimada, el método .actualizaPosicion() se va calculando la posición de la figura, mientras se mueve entre casilla y casilla.
Public Sub actualizaPosicion()
If casillaFinal = casillaInicial Then Return 'a llegado a la casilla de destino
contadorA += 1pto.x = casillaInicialX + difx * contadorApto.y = casillaInicialY + dify * contadorA
If casillafinalX = pto.x And casillafinaly = pto.y ThencasillaInicial = casillaFinalEndif
End


Anteriormente el método .mueve() ha calculado cual es el incremento de X (difx) y el incremento de Y (dify), que se necesita para ir de la casilla actual a la casilla que se le haya indicado.

En el siguiente video vemos como se desplaza el personaje, a la vez que se hay otras animaciones reproduciendose:



Enlace de descarga del código fuente: alojado en drive google


El siguiente paso es implementar varios "estados" (osea varias animaciones a un mismo personaje/ficha),  por ejemplo, cuando este parado, cuando vaya de izquierda a derecha o viceversa... para ello vamos a programar un autómata :)



Saludos

No hay comentarios:

Publicar un comentario