3.3.

JUEGO ANIMADO I
SERVICIO DE FORMACIÓN DEL PROFESORADO
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES: APP INVENTOR

Patricia Pérez Vallés

perez_patval@gva.es
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

Pre Conocimientos

Hasta ahora hemos visto las propiedades, funciones y eventos de los componentes de
Dibujo y Animación. Ahora es el momento de realizar una práctica para comprobar su
funcionamiento.

Objetivos

 Realizar una práctica donde su utilicen los componentes lienzo, pelota y

SpriteImagen.

 Programar utilizando listas.

 Programar utilizando procedimientos.

1
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

ÍNDICE
1. ACTIVIDAD GUIADA ............................................................................. 3
1.1. Paso 1: Fase de Diseño ................................................................... 3
1.2. Paso 2: Programación de Bloques ...................................................... 6
1.2.1. Movimiento del personaje ............................................................ 6
1.2.2. Colisión del personaje con las pelotas ............................................. 7
1.2.3. Inicializar los componentes .......................................................... 9
1.2.4. Tocar borde ........................................................................... 12
1.2.5. Reiniciar Juego ....................................................................... 13
1.3. Resumen de los bloques................................................................. 15
2. BIBLIOGRAFÍA .................................................................................. 17

2
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

1. ACTIVIDAD GUIADA
El objetivo de esta actividad guiada es empezar a utilizar los componentes de Dibujo
y animación y así ir cogiendo soltura en el desarrollo de juegos animados.

Se propone desarrollar un juego en el que el personaje (Android) deberá atrapar todas

las pelotas que aparecen en el lienzo. Para ello podrá moverse por toda la pantalla. Las
pelotas se moverán al azar rebotando en los bordes, cada una de ellas con una velocidad
diferente.

1.1. Paso 1: Fase de Diseño

1. Vamos a crear un proyecto nuevo en App Inventor al que podemos llamar
“Atrapa_Pelotas_TuNombre”.

2. Los componentes que se van a utilizar son los siguientes:

 1 lienzo
 5 pelotas
 1 SpriteImage
 5 botones
 1 Disposición tabular
 2 etiquetas

3. Introduce los componentes en tu proyecto de forma que su diseño quede como se

muestra a continuación:

3
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

4. Cambia las propiedades de los componentes según la información que aparece en

esta tabla:

Componente Propiedad Cambio

Screen1 Título Atrapa Pelotas TuNombre

Subir imagen Android.png

Icono

Lienzo Alto 300 píxeles

Ancho Ajustar al contenedor

PelotaVerde ColorDePintura Verde

4
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

Radio 10

Velocidad 5

PelotaNaranja ColorDePintura Naranja

Radio 10

Velocidad 10

PelotaAzul ColorDePintura Azul

Radio 10

Velocidad 15

PelotaAmarilla ColorDePintura Amarillo

Radio 10

Velocidad 20

PelotaRoja ColorDePintura Rojo

Radio 10

Velocidad 25

Subir imagen Android.png

Android
Foto
(SpriteImagen)

Ancho 50 píxeles

Alto 50 píxeles

DisposiciónTabular1 Columnas 5

Registros 3

Ancho Ajustar al contenedor

Btn_Repetir Texto Repetir

Btn_Subir Texto ^^

Btn_Bajar Texto vv

Btn_Izquierda Texto <<

B_Derecha Texto >>

5
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

Todos Los Botones PosiciónDelTexto centro

Etiqueta1 Texto Pelotas atrapadas

Etiqueta_Contador Texto 0

Ahora que ya tenemos el diseño de componentes realizado, es buen momento

para visualizar la app en nuestro móvil. Para ellos pulsa sobre Conectar  AI
Companion, y escanea el código con tu móvil desde la app AI Companion, tal y como
se explicó en el Tema 1.

1.2. Paso 2: Programación de Bloques

1.2.1. Movimiento del personaje

Vamos a implementar las funciones de movimiento de nuestro personaje Android en

los botones. Vamos a mover a Android, hacia arriba, abajo, a la izquierda y a la derecha
con los siguientes bloques:

1. Definimos una variable global a la que llamamos PasosAndroid y la inicializamos a

20. Para ello, hacemos clic en el Bloque Integrado de Variables y en el bloque de
Matemáticas:

2. Para el movimiento hacia arriba, debemos coger los bloques de los componentes:
Botón Btn_Subir, SpriteImagen Android y Matemáticas. Para coger el bloque

6
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

“tomar global PasosAndroid” hay que posicionar el ratón sobre el nombre de la

variable global. De esta forma nos aparecen dos opciones: tomar o poner.
Seleccionamos la de tomar y la arrastramos dentro del bloque de la resta.

3. Para los otros movimientos podemos copiar y pegar este bloque, y hacer los cambios
pertinentes:

1.2.2. Colisión del personaje con las pelotas

1. Para definir lo que debe ocurrir si colisiona Android con una pelota, vamos a
programar el evento de la SpriteImagen Android Android.EnColisiónCon.
Necesitaremos una variable de ayuda de nombre contador_pelotas, que indicará
cuantas pelotas ha atrapado nuestro Android.

7
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

2. Cuando Android colisione con otro (una pelota) moveremos esa pelota a la posición
0,0. Le cambiamos el color a gris, y la deshabilitamos.

Vamos a utilizar los bloques de un componente genérico para que nos sirva para
cualquier pelota. Estos eventos genéricos para cualquier componente los
encontramos en la parte inferior del listado de componentes:

3. Aumentamos el 1 en valor del contador de pelotas y lo escribimos en la

Etiqueta_Contador. El bloque completo debe quedar de la siguiente manera:

8
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

1.2.3. Inicializar los componentes

1. Vamos a continuar creando dos variables de tipo lista, una para los nombres de las
pelotas y otra para los colores. Estas listas las vamos a utilizar para que al iniciar
el juego, cada pelota aparezca en una posición al azar del lienzo con su color
correspondiente.

Los bloques azules pertenecientes a las listas los encontramos en el Bloque

Integrado de Listas.

2. El bloque de añadir elementos a la lista por defecto aparece con un ítem. Como
vamos a añadir 5 pelotas en total, debemos ampliar el tamaño de la lista. Para ello
se debe hacer clic con el ratón sobre la rueda azul que aparece en la esquina
superior izquierda del bloque añadir elementos a la lista. A continuación vamos
añadiendo los 5 ítems que necesitamos para nuestras 5 pelotas.

9
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

3. Ahora añadimos cada una de las pelotas que tenemos en nuestro diseño. Para ello
debemos seleccionar el último bloque que aparece en cada una de nuestros
componentes Pelota.

4. El bloque completo debe quedar de la siguiente manera:

10
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

5. Actuamos de manera similar para crear la lista de colores:

6. El siguiente paso consiste en crear un procedimiento al que llamaremos

DesplazarAlAzar para que las pelotas se muevan en dirección al azar. Los
procedimientos se encuentran dentro de los Bloques Integrados.

7. Ahora debemos buscar en el menú de Bloques de Cualquier componente, en la

parte inferior de los bloques, dentro de CualquierPelota, las siguientes funciones:
llamar Pelota.MoverA y llamar Pelota.ApuntarEnLaDirección.

11
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

Con el bloque de control “por cada elemento en la lista… ejecutar”, vamos a

tomar de nuestra lista global nombre_pelotas, un componente de pelota, que
moveremos a un punto y a una dirección al azar. Esto ocurrirá con cada pelota.
También cambiamos el nombre de elemento por pelota.

8. Por último, añadimos la llamada a este procedimiento en el bloque que inicializa

nuestro juego, es decir, en cuando Screen1.Inicializar.

1.2.4. Tocar borde

1. Para que las pelotas sigan moviéndose tras golpear el borde,

debemos rebotarla. Para ello programamos el siguiente bloque:

12
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

2. Hay que repetir este procedimiento para el resto de pelotas. Para agilizar el trabajo
se puede copiar y pegar el bloque y actualizar el nombre de las pelotas.

1.2.5. Reiniciar Juego

1. Para poder reiniciar el juego si hemos atrapado todas las pelotas, hay que
programar el evento del botón Btn_Repetir:

2. Para que las pelotas vuelvan a moverse y cambien a su color original, agregamos en
el procedimiento DesplazarAlAzar, el siguiente código, en el que se habilitan las
pelotas y se colorean como corresponde:

13
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

Y con esto ya tendríamos el juego acabado!!!

Pero vamos añadir una pequeña mejora. Vamos a hacer que podamos arrastrar
a nuestro personaje Android con nuestro dedo en vez de utilizar los botones de
movimiento.

Simplemente hay que añadir el siguiente bloque:

Y ahora sí!! A disfrutar de nuestro primer juego animado!!

14
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

1.3. Resumen de los bloques

15
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

16
PROGRAMACIÓN DE DISPOSITIVOS MÓVILES 3.3. Juego animado I

2. BIBLIOGRAFÍA

 Sanzana, L., Tutoriales Educativos Recuperado de:

https://arduinosinmiedo.com/software/app-inventor-2/app-inventor-2lienzo-
imagen-y-pelota/

 MIT APP INVENTOR, Juegos y Animaciones Recuperado de:

http://appinventor.mit.edu/explore/teach/module-2-1-canvas

17