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:
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.
