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

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

Continuando con esta serie de entradas, vamos a ver hoy como hacer la animación del personaje.
La animación se sacará de este archivo:

Como veis, muestra un personaje, con las distintas animaciones (frames) de:
- ir andando  hacia la derecha
- ir andando  hacia la izquierda
- etc.

Lo que he hecho es ir sacando cada frame usando el programa gimp, para obtener cada pequeña imagen:

y las he ido agregando al programa, en la carpeta Datos/Animaciones/Hombrecito y separando las que son andando hacia la derecha y a la izquierda:

Luego he creado una nueva subrutina que se encarga de dibujar segun se vaya a la izquierda o a la derecha:

Public Sub actualizaAnimacion()

contador += incremento

If contador >= 9 Then incremento = -1

If contador <= 1 Then incremento = +1

Print Right$("0" & Str$(contador), 2)

If direccion = "derecha" Then

picttmp.Picture = Picture["Animaciones/hombrecito/derecha/" & Right$("0" & Str$(contador), 2) & ".png"]

Else

picttmp.Picture = Picture["Animaciones/hombrecito/izquierda/" & Right$("0" & Str$(contador), 2) & ".png"]

Endif

End

Además he modificado parte de la subrutina Mueve, para llamar a la subrutina animación

Public Sub MUEVE(CASILLA As Integer)

Dim casillafinalX As Integer

Dim casillafinaly As Integer

Dim casillaInicialX As Integer

Dim casillaInicialY As Integer

Dim difx As Float

Dim dify As Float

Dim a As Integer

' Dim puntos As Integer = 10 'para ver el movimiento de la pieza poco a poco

Dim distanciaAndando As Integer = 10 'distancia de pixeles que recurre andando

Dim dist As Integer

Dim incrementoDistancia As Float

If casilla <> 0 Then

casillaInicialX = (Split(hcoordenadas[hposicion], "|")[1] - TableroOriginalX) * hptableroActual.w / TableroOriginalAncho + hptableroActual.x

casillaInicialY = (Split(hcoordenadas[hposicion], "|")[2] - TableroOriginalY) * hptableroActual.h / TableroOriginalAlto + hptableroActual.y

Endif

casillafinalX = (Split(hcoordenadas[casilla], "|")[1] - TableroOriginalX) * hptableroActual.w / TableroOriginalAncho + hptableroActual.x

casillafinalY = (Split(hcoordenadas[casilla], "|")[2] - TableroOriginaly) * hptableroActual.h / TableroOriginalAlto + hptableroActual.y

dist = ((casillafinalX - casillaInicialX) ^ 2 + (casillafinaly - casillaInicialy) ^ 2) ^ (1 / 2)

incrementoDistancia = dist / distanciaAndando

If incrementoDistancia = 0 Then Return

difx = (casillafinalX - casillaInicialX) / incrementoDistancia

dify = (casillafinaly - casillaInicialy) / incrementoDistancia

If difx > 0 Then

direccion = "derecha"

Else

direccion = "izquierda"

Endif

For a = 1 To incrementoDistancia

picttmp.x = casillaInicialX + difx * a

picttmp.y = casillaInicialY + dify * a

actualizaAnimacion()

Wait 0.1

Next

picttmp.X = casillafinalX

picttmp.y = casillafinaly

hposicion = casilla

End

En el siguiente video podeis ver como funciona la aplicación :


Enlace de descarga: alojado en google drive

Esta forma de hacerlo tiene varios problemas:
1) Crear la animación es bastante pesado, al tener que extraer cada frame con un programa de edición de imágenes (gimp) y crear un archivo para  ella.
2) No permite ver varias animaciones a la vez. Aunque para un juego de tablero, normalmente no es importante, nos recorta lo que podamos en el futuro requerir o aprovechar del código.


En la próxima entrada, veremos:
- Como hacer esto mismo con clases, con lo cual tendremos el código mucho mejor ordenado, y fácil de ampliar.
- Ademas en vez de usar picturebox, usaremos DrawingArea. Este control nos permitirá dibujar en la pantalla porciones de imágenes (frames), ¡¡ sin tener que usar gimp para extraer los frames !!!
- Por otro lado para permitir que aparezcan varias animaciones en pantalla, vamos a usar el control Timer.