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