Introducción
Vamos
a aprender a hacer animaciones utilizando la misma técnica que se
utiliza para hacer los tradicionales dibujos animados. Esta técnica
consiste en ir mostrando rápidamente y de forma consecutiva una serie de
imágenes que van cambiando ligeramente para conseguir el efecto de
movimiento o animación que buscamos. Para este ejemplo ya tenemos una
serie de imágenes seleccionadas así que lo que vamos a aprender es la
técnica para mostrarlas de forma correcta en nuestros propios programas.
Esta técnica se basa en la llamada a un procedimiento que será el
encargado de iniciar la animación y de un reloj que hará el cambio de
las imágenes según el intervalo de tiempo que usemos. Por último
utilizaremos una nueva técnica para cargar las imágenes usando un
contador que nos dirá en cada momento la imagen que tenemos que usar.
Por ejemplo, cuando el contador sea 1 cargaremos la imagen bomba_1.png,
cuando el contador sea 2, usaremos la imagen bomba_2.png y así
sucesivamente. De esta forma iremos mostrando sucesivamente las imágenes
que formarán nuestra animación.El interfaz del usuario
1 Empieza un nuevo proyecto y llámalo, p. ej.: "animaciones_bomba"
2 Nuestro interface de usuario va a ser muy sencillo. Para empezar desde el Diseñador cambia el color de fondo del componente screen y asegúrate de desactivar la propiedad Scrollable.
3 Añade ahora un componente canvas y cambia sus propiedades Width (ancho) y Height (largo) a Fill parent en ambos casos.
4 Añade un componente Animations / imagesprite. Cambia el nombre de este componente y llámalo bomba.
5 Por último añade un componente clock (reloj) y cambia su nombre a reloj_bomba.
6 Ahora vamos con las imágenes que vamos a usar para nuestra animación. Todas las imágenes que vamos a usarla las tienes en la carpeta de recursos y empiezan por el nombre bomba_. Son 12 imágenes desde bomba_1.png hasta bomba_12.png.
7 Tenemos que añadirlas todas a la librería de nuestra aplicación usando el botón "Upload File ..." (subir archivo) aquí.
Hazlo ahora y asegúrate de que subes todas las imágenes. No importa el orden en que lo hagas. Cuando hayas terminado nos vamos al Editor de bloques.
2 Nuestro interface de usuario va a ser muy sencillo. Para empezar desde el Diseñador cambia el color de fondo del componente screen y asegúrate de desactivar la propiedad Scrollable.
3 Añade ahora un componente canvas y cambia sus propiedades Width (ancho) y Height (largo) a Fill parent en ambos casos.
4 Añade un componente Animations / imagesprite. Cambia el nombre de este componente y llámalo bomba.
5 Por último añade un componente clock (reloj) y cambia su nombre a reloj_bomba.
6 Ahora vamos con las imágenes que vamos a usar para nuestra animación. Todas las imágenes que vamos a usarla las tienes en la carpeta de recursos y empiezan por el nombre bomba_. Son 12 imágenes desde bomba_1.png hasta bomba_12.png.
7 Tenemos que añadirlas todas a la librería de nuestra aplicación usando el botón "Upload File ..." (subir archivo) aquí.
Hazlo ahora y asegúrate de que subes todas las imágenes. No importa el orden en que lo hagas. Cuando hayas terminado nos vamos al Editor de bloques.
Programando la animación
8 En
primer lugar necesitamos una serie de variables numéricas y de texto.
Vete creándolas y asignándolas el valor que te indicamos:
numero_imagenes=12
imagen_actual=1
nombre_imagenes="bomba_"
extensión_imagenes=".png"
y finalmente velocidad_animacion=20.
9 Ahora vamos a crear el procedimiento para activar la animación. Crea un nuevo procedimiento procedure y llámalo activar_bomba.
9 Ahora vamos a crear el procedimiento para activar la animación. Crea un nuevo procedimiento procedure y llámalo activar_bomba.
10 Para este
procedimiento necesitamos crear dos argumentos. Recuerda como hacerlo,
pulsa la rueda azul de configuración del bloque y dile que vamos a
pasarle dos argumentos, llámalos coordenada_x y coordenada_y
respectivamente.
11 Estos argumentos nos dirán la posición del canvas donde mostraremos la animación.
12 Usando estos argumentos
(coordenadas) primero vamos a mover nuestro sprite bomba. Coge el bloque
bomba.MoveTo y ponlo dentro del procedimiento.
13 Ahora busca los
argumentos del procedimiento que hemos creado: coordenadas_x y
coordenadas_y (captúralos con get, lo encontrarás en Built-in/Variables)
y pégalos en sus correspondientes sitios (x e y).
14 Vamos a definir el
intervalo de tiempo de nuestro reloj lo que dará más o menos velocidad a
nuestra animación. Coge el bloque "set reloj_bomba.TimerInterval y
ponlo debajo.
15 Ahora pégale la variable "get velocidad_animacion" que contiene el tiempo que queremos usar.
16 Por último vamos a
activar el reloj que controlará la animación usando el bloque "set
reloj_bomba.TimerEnabled = True". Con esto al llamar al procedimiento el
reloj se activa y comienza la animación.
Ya hemos terminado nuestro procedimiento, ahora vamos con el reloj.
Ya hemos terminado nuestro procedimiento, ahora vamos con el reloj.
17 Coge el evento reloj_bomba.Timer y ponlo en tu programa.
El mecanismo es muy sencillo: Cada vez que el evento del
reloj se active, mostramos una imagen nueva. Para saber cuál es la
imagen que tenemos que mostrar usamos la variable que creamos
inicialmente imagen_actual. Pero nuestra animación sólo tiene 12
imágenes así que lo primero que tenemos que hacer es asegurarnos de que
el contador no ha superado el número de imágenes que tenemos (12) y que
guardamos en la variable numero_imagenes lo que significaría que la
animación debería de terminar porque ya no hay más imágenes que mostrar.
18 Coge un bloque de control if y conviertelo en ifelse (recuerda, la ruedecita azul…) y ponlo dentro del evento del reloj.
19 La expresión lógica que tenemos que evaluar sería (¿es imagen_actual mayor que numero_imagenes).
20 Crea un bloque Math/ >
y pégalo al bloque ifelse. En el primer espacio pondremos la variable a
comprobar "get imagen_actual" y en el segundo espacio la variable "get
numero_imagenes".
21 ¿Qué hacemos si el contador es mayor que 12? En el espacio then en primer lugar coloca un bloque "set global imagen_actual=1".
22 En segundo lugar detenemos el reloj. "set reloj_bomba.TimerEnabled=false".
23 Por último, ocultamos la imagen: "set bomba.Visible=false"
24 Si todavía no hemos
llegado a la última imagen en el espacio else primero nos aseguramos de
que la imagen sea visible "set bomba.Visible=true". Y ahora viene la
parte interesante.
Imagina que la animación ha comenzado y por lo tanto hemos
activado el reloj. La primera vez que el evento del reloj se activa
nuestro contador de imagen (imagen_actual) es igual a 1. Por lo tanto
queremos activar la primera imagen de la animación que corresponde con
la imagen bomba_1.png. Esta es la imagen que ahora necesitamos mostrar.
La segunda vez que se vuelva a activar el reloj, el contador
(imagen_actual) será 2 y necesitaremos mostrar la imagen bomba_2.png y
así sucesivamente. Así que por una parte tenemos un contador que nos
dice la imagen que necesitamos y por otra parte sabemos que el nombre de
los archivos siempre es "bomba_" + un número consecutivo, más la
extensión ".png". Vamos a ver cómo hacerlo.
25 Primero coge el bloque "set bomba.Picture to" y ponlo debajo. Este bloque es el que nos permite cambiar la imagen del sprite.
26 Ahora vamos a decirle a este bloque cuál es la imagen. Crea un bloque text/join y haz que tenga tres espacios.
27 En el primer espacio pon la variable "get nombre_imagenes".
28 En el segundo la variable "get imagen_actual".
29 Y en el último la variable "get extensión_imagenes".
30 Ahora pega este bloque al bloque "set bomba_Picture".
31 Por último vamos a
incrementar el contador para que la siguiente vez que se active el reloj
mostremos la siguiente imagen. Coge un bloque "set global
imagen_actual" y ponlo debajo.
32 Ahora crea un bloque Math/ + En el primer espacio pon la variable "get imagen_actual" y en el segundo un 1.
33 Para activar nuestra animación coge el evento Canvas1.Touched y dentro de él añade una llamada a nuestro procedimiento "call activar_bomba".
33 Para activar nuestra animación coge el evento Canvas1.Touched y dentro de él añade una llamada a nuestro procedimiento "call activar_bomba".
34 Coge las variables "value
x" y "value y" utilizando el módulo get en Built-in/Variables que nos
pasa el evento "Canvas1.Touched" para llamar a nuestro procedimiento
pegándolas donde corresponden: "coordenada_x=value x" y
"coordenada_y=value y". ¿Funciona?
Vamos a repasar una vez más lo que hemos hecho.
Vamos a repasar una vez más lo que hemos hecho.
Tenemos 12 imágenes que si las mostramos rápidamente en la
pantalla una detrás de otra forman la animación de una explosión. Las
imágenes están guardadas en archivos consecutivos que se llaman
bomba_1.png, bomba_2.png, etc. Por lo tanto tenemos que buscar la manera
de mostrarlas una detrás de otra para componer la animación. Usando un
reloj podemos hacer esto. Cada vez que el evento del reloj se activa
podemos mostrar una imagen pero necesitamos saber qué imagen toca
mostrar. Para ello usamos un contador que empieza en 1 y termina en 12
que son las imágenes que componen nuestra animación. Para hacerlo de
forma automática usamos el contador para componer el nombre del archivo
que necesitamos juntando el nombre del archivo, el contador y la
extensión. Mostramos la imagen y avanzamos el contador en 1. Si al
activarse el reloj nuestro contador es mayor que 12 significa que la
animación ha terminado por lo que volvemos a poner el contador a 1 y
desactivamos el reloj.
Este reloj que muestra la animación lo activamos desde
nuestro procedimiento activar_bomba. Primero situamos la imagen en el
lugar apropiado según las coordenadas, después cambiamos el intervalo
del reloj y por último lo activamos. Cada vez que pulsamos la pantalla
llamamos a nuestro procedimiento que a su vez activa el reloj. Con cada
activación del reloj se cambia la imagen y cuando el contador ha llegado
a 12 el reloj se para y termina la animación. Al volver a pulsar en la
pantalla el proceso vuelve a empezar.
Ajustes finos
Si
te fijas con atención la animación de la explosión no comienza
exactamente en el mismo punto en el que tocas con el dedo en la
pantalla. La razón es que las imágenes que usamos para la animación
tienen el tamaño 96x96 pixeles. Es decir que las imágenes son un
cuadrado de 96 por 96 cuya esquina superior izquierda sí corresponde con
las coordenadas donde has pulsado pero la animación final aparece más a
la derecha y abajo. Para corregir este defecto podemos hacer lo
siguiente:
Desplazar la imagen hasta hacerla coincidir con el punto exacto. Basta con restar 48 (96/2=48) pixeles a cada coordenada. De esta manera corregimos la posición final de la imagen.
35 Dentro de nuestro procedimiento activar_bomba en el bloque "call bomba.MoveTo" vamos a restar 48 pixeles a cada coordenada.
36 Crea dos bloques Math/ - y en el primer espacio de cada bloque pon los bloques que teníamos antes "get coordenada_x" y "get coordenada_y" y en el segundo espacio pon 48.
37 Vuelve a juntarlos.
Verás que la imagen ahora aparece exactamente donde pulses.
38 A nuestra animación le falta un efecto de sonido. ¿Te atreves?
Desplazar la imagen hasta hacerla coincidir con el punto exacto. Basta con restar 48 (96/2=48) pixeles a cada coordenada. De esta manera corregimos la posición final de la imagen.
35 Dentro de nuestro procedimiento activar_bomba en el bloque "call bomba.MoveTo" vamos a restar 48 pixeles a cada coordenada.
36 Crea dos bloques Math/ - y en el primer espacio de cada bloque pon los bloques que teníamos antes "get coordenada_x" y "get coordenada_y" y en el segundo espacio pon 48.
37 Vuelve a juntarlos.
Verás que la imagen ahora aparece exactamente donde pulses.
38 A nuestra animación le falta un efecto de sonido. ¿Te atreves?
En resumen
Puedes
añadir animaciones a tus programas usando este mismo ejemplo y haciendo
los cambios necesarios en las variables que usamos al principio.
También puedes crear más procedimientos y relojes para añadir más
animaciones o mejor aún cambiar el procedimiento para añadir un
parámetro más indicando cuál es la animación que quieres mostrar usando
un único reloj.
