Dia3

Tutorial Diario
D´ıa 3

Introducci´
on
Hola! Bienvenido al tercer d´ıa del taller Programa Tus Ideas :)
Hoy continuaremos con aplicaciones que usan el componente Lienzo y nos enfocaremos en
particular en la creaci´on de animaciones y juegos utilizando los componentes SpriteImagen,
que utilizamos el d´ıa anterior, pero sin aprovechar todo su potencial. El documento comienza
con un breve tutorialsobre los componentes SpriteImagen, acompa˜
nado de un par de
desaf´ıos para que los programes. Luego te presentamos un breve tutorial para programar
el cl´asico juego Pong, y finalmente te presentamos un nuevo material de apoyo respecto al
uso de variables, donde se ense˜
na el concepto de variables locales. Hoy es un buen d´ıa para
consolidar todo lo que has aprendido en los d´ıas anteriores—sitienes proyectos que no has
alcanzado a terminar o tienes dudas sobre tutoriales o actividades anteriores, no dudes en
consultar con tu tutor!

1

1. animaciones usando sprites
D´ıa 3

1.

Animaciones Usando Sprites

¿C´
omo animar Sprites?
Los componentes SpriteImagen son objetos especiales que representan figuras que se
mueven por la pantalla. A partir de ahora los llamaremos simplementesprites. Los sprites
est´an especialmente dise˜
nados para la creaci´on de animaciones y videojuegos, y deben utilizarse dentro de un componente Lienzo. Dentro de un lienzo, el sprite tiene una Direcci´
on,
una Velocida y un Intervalo. Adem´as, un sprite puede colisionar con los bordes del lienzo,
y con otros sprites. La Figura 1.1 c´omo se orienta un sprite dentro del lienzo. La direcci´on
del spritese representa mediante un ´angulo, entre 0 y 360 grados. El a´ngulo 0 representa
el movimiento hacia la derecha, y el ´angulo 360 hacia la izquierda. Adem´as, los bordes del
lienzo est´an identificados por n´
umeros, como se ve en la figura.

asdas

Dirección

Borde = 3

Borde = -3

Borde = 1

Borde = -1

Figura 1.1: Configuraci´on del Lienzo para la animaci´on de Sprites.
¿C´
omo reduces lavelocidad de un sprite, suavemente, a 100 pixeles por segundo?
La velocidad de un SpriteImagen, que se mide en pixeles por segundo, es determinada por
2

1. animaciones usando sprites
dos propiedades. La propiedad Intervalo especifica cada cuantos milisegundos el sprite se va
a mover, y es muy similar a la propiedad Reloj.IntervaloDelTemporizador. La propiedad
Velocidad espec´ıfica cu´antos pixeles elsprite se mover´a en cada intervalo. En el ejemplo
que se muestra en la Figura 1.2 el sprite se mueve 5 pixeles cada 50 milisegundos, o 1 p´ıxel
cada 10 milisegundos—o sea, 100 pixeles/segundo.

Figura 1.2: Ajustando la direcci´on, velocidad e intervalo de un sprite.
La propiedad de Direcci´
on del sprite especifica la direcci´on en la cual se mueve. Como
se ilustra en la Figura 1.2, el sprite semover´a hacia abajo con una orientaci´on de 270 grados.
Ejemplo 2: ¿C´
omo hacer rebotar una pelota? AppInventor tiene un bloque Botar
que provoca que una pelota rebote en el borde del lienzo. T´ıpicamente se usa Botar dentro
del controlador de eventos Pelota.TocarBorde, dado que este controlador de eventos indica
cual borde ha sido alcanzado, como par´ametro, por lo que puedes conectar estepar´ametro
en la funci´on Botar—que necesita saber desde que borde rebotar.
Tambi´en puedes hacer rebotar otros objetos (sprites o pelotas). El controlador de eventos
EnColisi´
onCon se activa cuando dos objetos chocan. Sin embargo, la funci´on Botar solamente funciona en el borde de un lienzo, as´ı que no puede usarse para colisiones en general.
Lo que s´ı puedes hacer es hacer rebotar el sprite opelota en la direcci´on opuesta a la que
ten´ıa antes de la colisi´on, configurando su Orientaci´
on como 360 menos el valor actual.
Esto se ilustra en la Figura 1.3.

3

1. animaciones usando sprites

Figura 1.3: Programando una Pelota para que rebote al tocar el borde, y para que invierta
su direcci´on al chocar con otro sprite u objeto animado.

Desaf´ıos Animados
Desaf´ıo 1: Animaci´
on B´...