Programación de Videojuegos con App Inventor Mª Dolores Molina

Programación de Videojuegos
con APP Inventor
Introducción
Este segundo manual ha sido creado como una continuación del manual “Programación Básica con
App Inventor”. En este segundo manual vamos a aplicar todos los conocimientos que hemos
adquirido en la programación básica para el diseño de videojuegos y aplicaciones con sensores,
también vamos a necesitar utilizar nuevos elementos pertenecientes al bloque de dibujo y animación
como los lienzos y los spriteimage y del bloque de sensores como el acelerómetro o el reloj.

La Ventana de Medios para la inserción de imágenes

La ventana medios nos permite subir ficheros multimedia , imágenes, audio, vídeo, a nuestro
proyecto. Para insertar una imagen en nuestra ventana deberemos primero subir el fichero que la
contiene mediante esta ventana. Una vez que hemos subido el fichero de la imagen al proyecto
deberemos añadir el componente “Imagen” que se encuentra en el bloque de la “Interfaz de
Usuario” dentro de la paleta de App Inventor, por último asociaremos el fichero que contiene la
imagen con el componente imagen que hemos añadido a la pantalla mediante la propiedad “foto”
en la ventana de propiedades. Si nos fijamos en los bloques del componente imagen veremos que no
incluye ningún bloque de control, es decir, las imágenes se insertan en la ventana, se pueden
mostrar u ocultar y cambiar sus medidas de alto, ancho o posición en la ventana pero no se puede
interactuar con ellas, es decir, no podemos asociar ningún tipo de eventos como el clic o el doble
clic.

Los Lienzos y las SpriteImagen: Juego Piedra, Papel, Tijera

Las spriteimage son imágenes con las que sí podremos interactuar, es decir, tienen eventos
asociados, pero solo podremos incluir spriteimage dentro de un lienzo. Un lienzo delimita una zona
de la pantalla sensible al tacto y en la que podremos dibujar e insertar spriteimages. Los canvas
tienen asociados eventos que nos indican dónde y cuándo los hemos tocado y que nos permiten
interactuar con las spriteimagen que se encuentran en su interior para por ejemplo arrastrarlas. Tanto
los lienzos como las spriteimagen se encuentran dentro del bloque “dibujo y animación” dentro de
la paleta de App Inventor.
Vamos a desarrollar un primer ejemplo sencillo que implementaremos el juego “Piedra, Papel,
Tijera”. Vamos a utilizar un lienzo y tres spriteimage que van a funcionar a modo de botones.
También podríamos haber implementado este ejemplo utilizando botones a los que les colocamos
las imágenes como fondo, pero vamos a empezar con un ejemplo sencillo en que mostraremos
como comenzar a utilizar estos dos nuevos elementos de programación.
Programación de Videojuegos con App Inventor Mª Dolores Molina

El juego consiste en elegir uno de los botones que nos muestra por pantalla, jugaremos contra la
máquina que hará su elección utilizando una función aleatoria que elegirá un número comprendido
entre 1 y 3, a cada número le asociaremos una opción: piedra, papel o tijera. Por último
comprobaremos cuál es la opción ganadora, la que nosotros hemos elegido o la que ha generado la
máquina y sumaremos un punto al ganador. También hemos incluido un botón para reiniciar los
marcadores del juego. En la imagen siguiente se muestra la interfaz de nuestro primer ejemplo:

Los elementos más importantes que hemos utilizado para diseñar la interfaz son los siguientes:
1. Epuntosmaquina: Etiqueta que muestra los puntos obtenidos por la máquina, aumentará de
valor cada vez que la máquina gane una partida.
2. Epuntosusuario: Etiqueta que muestra los puntos obtenidos por el usuario, aumentará de
valor cada vez que el usuario gane una partida.
3. Lienzo1: Lienzo que contiene en su interior las spriteimage con cada una de las opciones
(piedra, papel o tijera)
4. SI_piedra,SI_papel,SI_tijera: Sprite Image que muestran cada una de las opciones. El evento
clic sobre estas Sprite iniciará la partida.
5. Ieleccionusuario, Ieleccionmaquina: Imágenes que muestran la opción elegida por el usuario
y la opción generada por la máquina de forma aleatoria. Para compararlas y saber quién es el
ganador de la partida.
6. Disposicionhorizontal1: Hemos colocado esta disposición vacía para separar el botón de
reinicio del juego y mejorar la presentación en pantalla.
7. Breiniciar: Botón que permite reiniciar el juego, pone a cero las puntuaciones.

En la imagen siguiente se muestran los bloques que hacen que funcione la interfaz de usuario.
Como podemos ver necesitamos dos variables globales que van a almacenar la elección del usuario
y la elección de la máquina. Cuando el usuario hace clic sobre la Sprite image de la piedra damos a
la variable elijeusuario el valor 1, cuando elije el papel toma el valor 2 y cuando elija la tijera damos
Programación de Videojuegos con App Inventor Mª Dolores Molina

el valor 3. En este bloque también se asigna el fichero que muestra la imagen asociada a la elección
del usuario y se llama al procedimiento “Comprobar”.

El procedimiento comprobar genera un número aleatorio comprendido entre 1 y 3, este valor será
asociado a la elección de la máquina, y pasará a comprobar mediante tres bloques “si,sino”
anidados las tres posibles opciones de elección por parte de la máquina. Dentro de cada bloque
“si,sino” encontraremos otros tres anidados para comprobar todas las opciones asociadas a la
elección del usuario. En la siguiente imagen se muestra parte de este procedimiento:

Solo nos faltaría codificar las acciones asociadas al botón reiniciar juego que consisten en poner a
cero las etiquetas Epuntosusuario y Epuntosmaquina y poner a vacío las imágenes Ieleccionusuario
e Ieleccionmaquina.

Con este ejemplo sencillo apenas hemos utilizado las propiedades asociadas a los lienzos y las
Sprite, si nos fijamos podríamos haber planteado este ejemplo con botones en los que coloquemos
como fondo las imágenes de cada una de las opciones del juego.
Programación de Videojuegos con App Inventor Mª Dolores Molina

El Reloj: Juego de animación con Mario.

Nuestros dispositivos móviles cuentan con una gran variedad de sensores que nos proporcionan
información del exterior que podremos utilizar en nuestros programas. Desde App Inventor
podemos controlar el acelerómetro, lector de códigos de barras, reloj, giroscopio, near field (lector
NFC), sensor de orientación, podómetro y sensor de proximidad.
En este segundo ejemplo vamos a programar un simple videojuego en el que vamos a incluir
animaciones de los personajes utilizando el reloj para controlar el tiempo que pasa entre fotograma
de la animación y el giroscopio para controlar la dirección en la que se mueve nuestro personaje. 1

Para crear este segundo ejemplo vamos a desarrollar la interfaz de usuario que se muestra en la
imagen siguiente:

Ccampodejuego: Lienzo en el que

vamos a colocar las Spriteimage para
jugar. El ancho y el alto está
establecido con el valor ajustar al
contenedor.
Siplataforma: Sprite que representa la
plataforma verde sobre la que se va a
mover Mario.
SImario: Sprite del personaje de
Mario
Simoneda: Sprite de la moneda que
tiene que capturar Mario.
DiposicionHorizontal1: Disposición
que contiene la etiqueta de
puntuación, los botones para mover el personaje, finalizar el juego y reiniciar la partida.

Epuntos: Etiqueta que muestra la puntuación que lleva obtenida el usuario

Bizquierda: Botón que permite mover el personaje hacia la izquierda.
Bderecha: Botón que permite mover el personaje hacia la derecha.
Bsalir: Botón que sale del programa.
Breiniciar: Botón que reinicia la partida, coloca al personaje en la posición inicial y reinicia la
puntuación.
Relojmario: Sensor reloj que va a controlar el tiempo que tarda la imagen del personaje en cambiar
para generar la animación. Estableceremos el parámetro intervalo del temporizador a 100 msg, de
forma que se disparará el evento asociado al reloj cada décima de segundo.

1 Este ejemplo ha sido desarrollado a partir del vídeo que se encuentra en el siguiente enlace:
https://www.youtube.com/watch?v=KHG5ERiTB3c. Gracias a azaotl por el vídeo y los png para realizar el juego.
Programación de Videojuegos con App Inventor Mª Dolores Molina

Relojmoneda: Sensor reloj que va a controlar el tiempo que tarda la imagen de la moneda en
cambiar de posición para generar la aplicación. Al igual que en reloj anterior estableceremos el
intervalo del temporizador a 100 msg.

Además de estos elementos también tendremos que subir al proyecto, utilizando la ventana de
medios, las seis imágenes que permiten crear la animación de Mario (Mario1.png, Mario2.png,
Mario3.png imágenes de movimiento hacia la derecha, Mario4.png, Mario5.png, Mario6.png
imágenes de movimiento hacia la izquierda). Posteriormente en los bloques asociaremos los
nombres de estos seis ficheros a una lista que nos permitirá crear la animación del personaje.

Los bloques que necesitamos para hacer que nuestro juego funcione comienzan colocando las sprite
dentro del lienzo. Tenemos que indicar que para posicionar un elemento en un lienzo se utiliza un
eje de coordenadas cartesiano cuyo punto de origen (0,0) es la esquina superior izquierda del lienzo,
de forma que para mover una sprite hacia la derecha daremos valores positivos en el eje horizontal,
la coordenada x del sistema cartesiano, para mover la sprite hacia abajo tendremos que darle valores
positivos a la coordenada y del sistema cartesiano. La imagen siguiente muestra como se realiza la
ubicación de los elementos en el sistema cartesiano que se establece para trabajar con las imágenes
dentro de un lienzo.

Como podemos observar la moneda está situada en la posición x:

113 y la posición y:3 , siendo también la esquina superior izquierda
del sprite el que sirve como punto de referencia para colocar la
imagen, es decir hemos colocado la esquina superior izquierda de la
imagen en el punto (113,3). De igual manera la esquina superior
izquierda del sprite de Mario está situada en la posición x:6 e y:226.

Aunque en la imagen hemos mostrado posiciones con valores absolutos, es decir, le hemos dado
directamente valores a la coordenada x y a la coordenada y cuando comencemos a programar
nuestros bloques vamos a utilizar posiciones relativas, que van a venir dadas en función de la altura
y la anchura del lienzo. Esta forma de programar utilizando posiciones relativas nos va a segurar
que nuestro juego se va a ver bien independientemente del tamaño de pantalla que tenga el
dispositivo que estemos utilizando. La imagen siguiente muestra los bloques que hemos utilizado
para posicionar y establecer el tamaño del lienzo y los sprite que vamos a utilizar en nuestro juego.
Programación de Videojuegos con App Inventor Mª Dolores Molina

Cuando hemos definido el lienzo le hemos

dado para el ancho y el alto el valor
ajustar al contenedor, por lo que nuestro
campo de juego se va a ajustar
automáticamente al tamaño que tenga la
pantalla de nuestro dispositivo. El resto de
elementos que van dentro del lienzo los
hemos ajustado de forma relativa al
tamaño del mismo de la siguiente manera:

Alto de la plataforma: 20% del alto del lienzo (* 0,2)

Ancho de la plataforma: Igual que el ancho del lienzo.
Posición Y de la plataforma: 80% de la esquina superior izquierda del lienzo, ya que como le hemos
establecido un 20% del alto se vea la plataforma de forma completa en pantalla.
De igual forma hemos colocado y escalado a Mario y la moneda dentro del juego. Este
procedimiento se llama desde el bloque que inicializa la ventana del juego y cuando reiniciamos la
partida, ya que hemos podido comprobar que en ocasiones el entorno app falla y no realiza la
llamada al procedimiento al cargar la ventana.
Los bloques que necesitamos para programar el resto del juego se muestran en la imagen siguiente:
Hemos definido las siguientes variables globales:
direccionmario: será -1 cuando Mario se mueva hacia la izquierda, +1 cuando Mario se mueva
hacia la derecha y 0 cuando Mario no esté en movimiento.
Puntos: Almacena los puntos de la partida.
Listaimagenes: Lista que va a almacenar los nombres de las imágenes que nos permiten crear la
animación de Mario.
Desplazamiento: Indica el número de puntos que se mueve Mario en dirección horizontal y la
moneda en dirección vertical.
Cuando_Bderecha.Presionar:
Habilitamos el reloj que va a
permitir crear los movimientos del
personaje, actualizamos el valor de
la variable que indica en que
dirección se mueve Mario y
cargamos en la lista las imágenes
con el personaje mirando hacia la
derecha.
Programación de Videojuegos con App Inventor Mª Dolores Molina

Cuando_Bderecha.Soltar: Deshabilitamos el reloj para que el personaje deje de moverse y

cambiamos la dirección a 0 para indicar que el personaje está parado.
Los bloques Cuando_Bizquierda.Presionar y Cuando_Bizquierda.Soltar son idénticos a los
anteriores salvo que cambiamos el valor de la dirección (-1 para la izquierda) y la lista de imágenes.
En la imagen siguiente se muestran los bloques asociados al sensor Relojmario.

El bloque Cuando.Relojmario.temporizador es un bucle que se ejecutará cada vez que pase el

intervalo de tiempo que hemos establecido al incluir el sensor en nuestro programa, en nuestro
ejemplo cada décima de segundo, tal como indicamos durante la creación de la interfaz (intervalo
del temporizador=100msg). Si analizamos en detalle los bloques se realizan las siguientes acciones:
1. Creamos una variable local indice que nos va a permitir recorrer la lista con los nombres de
las imágenes. Se inicia como el siguiente al último valor que hayamos utilizado durante la
ejecución anterior de este bloque, si al incrementarla supera el tamaño máximo de la lista se
vuelve a inicializar a 1, primer elemento de la lista, de esta forma conseguimos recorrer la
lista en forma de bucle.(1,2,3,1,2,3…)
2. Cambiamos la foto asociada a la sprite de Mario.
3. Aumentamos al multiplicar por 1, derecha, o disminuimos al multiplicar por -1, izquierda,
la posición de Mario en x.

Solo los falta programar el funcionamiento de la moneda, los bloques necesarios se muestran en la
imagen siguiente:
Programación de Videojuegos con App Inventor Mª Dolores Molina

El sensor Relojmoneda está siempre activo y se dispara cada décima de segundo, en este bloque lo
que hacemos es aumentar la posición de la moneda en el eje vertical, el eje y, en 10. Cuando el
valor de y es mayor que la posición en y de la plataforma menos la altura de la moneda, es decir,
cuando la parte inferior de la moneda toca la plataforma llamamos al procedimiento
reiniciamoneda que coloca la moneda de nuevo en la parte superior de la pantalla, lo describiremos
con más detalle mas adelante.
El bloque Simoneda.EncolisionCon comprueba si la moneda está tocando a Mario con lo que se
aumentará en 10 el valor de la variable puntos y llama al procedimiento reiniciamoneda, si la
variable puntos supera el valor de 100 la partida termina y para ello paramos la animación de la
moneda y desactivamos los botones que nos permiten mover a Mario, de forma que los únicos
botones que nos quedan activos son los de salir del juego y reiniciar la partida.
Los dos bloques siguientes muestran el contenido del procedimiento reiniciamoneda que genera
una posición aleatoria para el valor en el eje horizontal de la x para la moneda, así conseguimos que
cuando la moneda se reinicie se mueva hacia la derecha o hacia la izquierda, también se muestran
los bloques asociados al evento Cuando.Breiniciar.Clic , botón que reinicia la partida y cuyo
contenido no necesita una explicación adicional.

Mas sobre Sprites: El juego del “Caza Topos”

En apartados anteriores hemos realizado dos sencillos videojuegos con AppInventor, en este
apartado vamos a realizar un tercer ejemplo un poco más avanzado para conocer mejor como
funcionan las propiedades de los lienzos y las Sprite Image. En este tercer ejemplo vamos a escribir
el código del clásico juego “Mole Mash” o “Caza Topos”.2

Diseño: Los elementos que necesitamos añadir a nuestro proyecto se muestran en la siguiente
imagen.

2 Este ejemplo es una traducción incluido en los manuales de App Inventor que se encuentra en la siguiente
dirección: https://appinventor.mit.edu/explore/ai2/molemash-2
Programación de Videojuegos con App Inventor Mª Dolores Molina

Tipo de Componente Menú de Nombre del Función del Componente

Paleta Componente
Lienzo Dibujo y GameCanvas Campo de Juego
Animación
SpriteImagen Dibujo y Hole1 … Hole5 Agujeros por los que sale el topo
Animación
SpriteImagen Dibujo y Mole El topo
Animación
DisposiciónHorizontal Disposición ScoreArrangement Capa que permite almacenar la
etiqueta que muestra el marcador
Etiqueta Interfaz de ScoreTextLabel Etiqueta que el texto “Puntuación:”
Usuario
Etiqueta Intefaz de ScoreValueLabel Etiqueta que muestra el valor de la
Usuario puntuación obtenida
Sonido Medios Buzzer Permite que vibre la pantalla
cuando toquemos al topo
Reloj Sensores MoleClock Controla el tiempo que dura la
partida
Programación de Videojuegos con App Inventor Mª Dolores Molina

Una vez que hemos añadido todos los componentes deberemos realizar los siguientes cambios en
sus propiedades:

Elemento Cambios
GameCanvas Cambia la propiedad ColorDeFondo a Verde. Cambia las propiedades Alto
y Ancho a 320px.
Hole1 Cambia X a 20 e Y a 60. (agujero de la esquina superior izquierda)
Hole2 Cambia X a 130 e Y a 60. (agujero central superior)
Hole3 Cambia X a 240 e Y a 60. (agujero de la esquina superior derecha)
Hole4 Cambia X a 75 e Y a 140. (agujero de la esquina inferior izquierda)
Hole5 Cambia X a 185 e Y a 140. (agujero de la esquina inferior derecha)
Mole Cambia la propiedad “Imagen” a topo.png. Cambia la propiedad “Z” a 2
para que el topo se muestre siempre el primero en la pila de elementos que
vemos en pantalla, ya que el resto de elementos tienen como valor por
defecto la propiedad Z con el valor 1.
ScoreTextLabel Cambia la propiedad “Texto” al valor “Puntuación:”
ScoreTextValue Cambia la propiedad “Texto” al valor “0”

Posteriormente estableceremos la propiedad “Imagen” a agujero.png para los agujeros (Hole1,

Hole2, … Hole5) en el editor de bloques.

Una vez hemos añadido todos los elementos necesarios para la creación de nuestro proyecto y
hemos modificado sus propiedades desde la pantalla de diseño, tenemos que modificar su
comportamiento desde el editor de bloques.

Bloques: En este apartado vamos a explicar cada una de la funciones que vamos a añadir desde el
editor de bloques.
1. Creamos la variable global holes de tipo lista. Esta variable va a almacenar el estado,
ocupado o libre, de cada una de las imágenes que forman los agujeros del juego.
2. Cuando la aplicación comience su ejecución:
a) Inicializar la lista de agujeros a valor vacío, es decir, ningún agujero estará ocupado por
el topo.
b) Establecer la propiedad “Imagen” a agujero.png para cada SpriteImage correspondiente
a los valores Hole1, Hole2, … , Hole5.
c) Llamar a la función MoveMole que vamos a crear a continuación.

3. Creamos la función MoveMole con las siguientes acciones:

a) Creamos la variable local currentHole y establecemos para ella un valor aleatorio dentro
de los posibles para la lista de agujeros.
b) Cambiamos la posición del topo al valor establecido para la variable currentHole.

4. Hacemos que el reloj “Moleclock” llame a la función MoveMole siempre que no haya
acabado el tiempo de juego. (a cada segundo).

5. Creamos una función que realice las siguientes acciones:

a) Sumar una unidad a la puntuación
Programación de Videojuegos con App Inventor Mª Dolores Molina

b) Hacer que vibre el teléfono.

c) Llamar a la función MoveMole.

En las siguientes imágenes podemos ver la estructura de todos los bloques que componen el
programa:

1. Variable global holes de tipo lista. La creamos con valor vacío y le asignaremos como
elementos cada uno de los agujeros del campo de juego cuando mostremos la pantalla
principal del programa.

Para definir este bloque utilizamos los siguientes elementos:

Nombre del Bloque Tipo de Bloque Función
Definir la variable global holes de tipo lista e
Inicializar global holes como Variables
inicializarla a valor vacío.
Permite crear un tipo lista para asignarlo a la
Crear una lista vacía Lista
variable que hemos definido anteriormente

2. Comienzo de la aplicación: El primer evento que se produce en cualquier programa es

Cuando.Screen1.Inicializar, en este bloque pondremos todo el código necesario para el
arranque de nuestro programa, que en este caso concreto se compone de los siguientes
elementos:
a) Asignar a los elementos de la lista que hemos creado los valores de cada agujero del
campo de juego.
b) Asignar a la propiedad imagen de cada agujero del campo de juego la imagen hole.png
c) Llamar al procedimiento MoveMole, si miramos la imagen con atención veremos que ya
hemos definido el procedimiento MoveMole pero que está vacío de contenido aún, esto
es necesario para poder agregar el bloque Llamar a MoveMole, ya que solo cuando
hemos definido el procedimiento podremos usar el bloque para llamarlo.

Para definir este bloque utilizamos los siguientes elementos:

Programación de Videojuegos con App Inventor Mª Dolores Molina

Nombre del Bloque Tipo de Bloque Función

Especifica que ocurre cuando se inicia la
Cuando.Screen1. Inicializar Screen1
aplicación
Añadir elementos a la lista Lista Asigna los siguientes valores a …
Tomar global holes Variable … la lista de agujeros:
Hole1 Hole1 el agujero superior izquierdo
Hole2 Hole2 el agujero superior centro
Hole3 Hole3 el agujero superior derecho
Hole4 Hole4 el agujero inferior izquierdo
Hole5 Hole5 el agujero inferior derecho
Bucle que se va a repetir para cada agujero de
Por cada hole en la lista Control
la lista ...
Tomar global holes Variables … definida mediante la variable global holes
Cualquier Establece la propiedad imagen del
Poner SpriteImage Foto
ImageSprite componente...
Tomar hole Variables … hole a
hole.png, que hace referencia al nombre de la
hole.png Text
imagen
Crear el procedimiento MoveMole para poder
Como MoveMole Procedimiento
llamarlo
Llamar a MoveMole Procedimiento Llama al procedimiento que acabamos de crear

3. Control del topo: Necesitamos diseñar tres procedimientos que realicen las siguientes
acciones
a) Mover el topo: El bloque de contenido asociado a esta acción realiza a su vez las
siguientes tareas:
• Elige aleatoriamente un agujero de la lista
• Muestra la imagen del topo en el agujero seleccionado.

Este procedimiento será llamado cuando comience el programa, cuando toquemos el

topo o cuando el contador de tiempo varíe, cada segundo.

Para crear este bloque necesitamos añadir los siguientes componentes:

Programación de Videojuegos con App Inventor Mª Dolores Molina

Nombre del Bloque Tipo de Bloque Función

Inicializar local currenthole Definimos e inicializamos la variable local
Variable
como curentHole como...
Toma un elemento al azar de
Lista … Un elemento al azar de la lista....
la lista
Tomar global holes Variable … definida en la variable global holes
Llamar Mole.MoverA Mole Mueve la imagen del topo a ...
Cualquier
ImageSprite.X Posición horizontal en la pantalla del ….
SpriteImage
Agujero activo definido por la variable
Get currentHole Variables
curentHole
Cualquier
ImageSprite.Y Posición vertical en la pantalla del ….
SpriteImage
Agujero activo definido por la variable
Get currentHole Variables
curentHole

b) Control del tiempo: Este bloque llama al procedimiento anterior cada vez que varíe el
contador del tiempo

Para definir este bloque hemos insertado los siguientes componentes:

Nombre del Bloque Tipo de Bloque Función

Cuando MoleClock
MoleClock Cuando el contador del tiempo varíe ….
Temporizador
Llamar a MoveMole Procedimiento …. llamar al procedimiento MoveMole
c) Registrar los puntos: Cada vez que consigamos tocar al topo deberemos realizar las
siguientes acciones:
• Aumentar en 1 el contador de los puntos
• Hacer que el teléfono vibre
• Mover el topo a otra posición
Programación de Videojuegos con App Inventor Mª Dolores Molina

Para definir este bloque hemos insertado los siguientes componentes:

Nombre del Bloque Tipo de Bloque Función

Permite definir las acciones a realizar cuando
Cuando Mole.Tocar Mole
el usuario toque el topo
Poner
Establece el valor de la etiqueta de texto
ScoreValueLabel.Texto ScoreValueLabel
ScoreValueLabel a …
como
1 Matemáticas 1
+ Matemáticas +
Valor anterior de la etiqueta de texto
ScoreValueLabel.Text ScoreValueLabel
ScoreValueLabel
Llamar al Buzzer. Vibrar Buzzer Hace que el dispositivo vibre durante...
100 Matemáticas … 100 milisegundos
Cal MoveMole Procedimiento Llama al procedimiento que mueve el topo

El acelerómetro: El juego de la canica gravitatoria.

En este bloque vamos a utilizar un nuevo elemento incluido dentro del bloque animación, la pelota.
Pelota es un sprite circular que se puede utilizar con el componente lienzo, dentro del cual se puede
arrastrar, interactuar con otros sprites, con el borde del Lienzo, y también moverse de acuerdo a sus
propiedades. La diferencia entre una pelota y un spriteimage es que este último toma su apariencia
de una imagen, mientras que en el caso del primero, solamente se pueden modificar las propiedades
colordepintura, que indica de qué color es la pelota y radio que indica el tamaño del radio del
círculo que representa la pelota.
Además en lugar de mover la pelota utilizando botones como hicimos en el segundo ejemplo del
juego de Mario, vamos a hacer que nuestra pelota se mueva en las cuatro direcciones utilizando los
valores que nos devuelve el acelerómetro.
El juego consiste en llevar la pelota desde un extremo al otro de la pantalla. Para conseguirlo
tendremos que inclinar nuestro dispositivo en la dirección en la que queremos que la pelota se
mueva e intentar evitar que la pelota toque con los obstáculos que hemos colocado en la pantalla.
Para la creación de este cuarto ejemplo necesitamos los siguientes elementos en la interfaz:
Lienzo: Contiene el resto de elementos del
juego, la pelota y los bloques que la pelota
tiene que esquivar. Los parámetros ancho y
alto está establecidos como ajustar al
contenedor.
Programación de Videojuegos con App Inventor Mª Dolores Molina

Horizontalizquierda1, Horizontalderecha1, Horizontalizquierda2, Horizontalderecha2:

Spriteimagen que representan los bloques horizontales contra los que puede chocar la pelota.
Verticalizquierda, Verticalderecha1: Sprite que representan los bloques verticales contra los que
puede chocar la pelota.
Acelerómetro1: Este bloque recoge las señales que mide el acelerómetro de un dispositivo, que es
capaz de detectar sacudidas y medir la aceleración en tres dimensiones. La aceleración se mide en
unidades del SI (m /s2).Si el dispositivo permanece apoyado en reposo sobre su parte posterior, la
aceleración Z será de aproximadamente 9,8 m/s2(gravedad).
El bloque devuelve tres valores:
• XAccel: Positivo cuando el dispositivo se inclina hacia la derecha (es decir, su lado
izquierdo se levanta), y negativo cuando el dispositivo se inclina hacia la izquierda (su borde
derecho se levanta).
• YAccel: positivo, cuando la parte inferior del dispositivo (la del micrófono) se eleva, y
negativa cuando su parte superior (la del auricular) se eleva.
• ZAccel: Positivo cuando la pantalla esté mirando hacia arriba, y negativa cuando la pantalla
está mirando hacia abajo.
Para este ejemplo solo vamos a utilizar los valores XAccel, para mover nuestra pelota a derecha o
izquierda y el valor YAccel para mover nuestra pelota hacia arriba o hacia abajo.
Los bloques necesarios para programar el funcionamiento del juego se muestran en la imagen
siguiente:
fijarx: Variable global. Será cierta cuando la
coordenada en x de la pelota pueda cambiar de valor
y falso en caso contrario.
fijary: Variable global. Será cierta cuando la
coordenada en y de la pelota pueda cambiar de valor
y falso en caso contrario.
Vertical: Lista que contiene los bloques verticales
con los que puede chocar la pelota
Horizontal: Lista que contiene los bloques horizontales con los que puede chocar la pelota.
Cuando_Screen1.Inicializar: Al cargar la pantalla rellenamos las listas con los elementos verticales
y horizontales que se encuentra visibles en pantalla.
Cuando Acelerómetro.CambioEnAceleración: Este
bloque se ejecuta en forma de bucle cada
vez que el acelerómetro cambia sus valores,
es decir, cada vez que cambiemos la
posición de nuestro móvil bien en la vertical
o en la horizontal. Si están habilitadas las
variables que permiten cambiar las
coordenadas de la pelota calcularemos su
posición en función de los valores que nos
devuelve el sensor de la siguiente manera:
Programación de Videojuegos con App Inventor Mª Dolores Molina

Parámetro yAccel: Corresponde con el valor de cambio de aceleración en el eje Y, tal y como
hemos explicado anteriormente, si el dispositivo se inclina hacia arriba devuelve valores positivos y
nosotros sumaremos los valores devueltos para que la posición en y de la pelota vaya aumentando y
se mueva hacia abajo de la pantalla, al contrario si inclinamos el dispositivo hacia abajo devuelve
valores negativos y al sumarlo hará que disminuya el valor de la posición en y de la pelota
desplazándose hacia abajo.
Parámetro xAccel: Corresponde con el valor de cambio en la aceleración en el eje X, que como
hemos explicado anteriormente, si el dispositivo se inclina hacia la izquierda devuelve valores
positivos y nosotros lo restamos para que el valor de la coordenada en x de la pelota disminuya, al
contrario si inclinamos el dispositivo hacia la derecha devuelve valores negativos y al restarlo hará
que aumente el valor de la posición en x de la pelota.
Solo nos faltan programar el choque de la pelota con los obstáculos, tal y como se muestra en la
imagen siguiente:
Cuando la pelota colisiona con uno de los obstáculos
que hemos colocado en pantalla se comprueba si está
en la lista de los obstáculos verticales u horizontales,
para bloquear la coordenada correspondiente y que así
nuestra pelota no pase por encima, además se avisa al
usuario activando la vibración del dispositivo.
Cuando la pelota deja de estar en contacto con uno de los obstáculos se liberan las variables que
permiten mover las coordenadas de la pelota.

Sensor de proximidad y Texto a Voz: Detector de obstáculos

En este ejemplo vamos a programar un detector de obstáculos utilizando el sensor de proximidad,
no es exactamente un videojuego pero nos va a servir para conocer como funciona el sensor de
proximidad. El sensor de proximidad nos permite medir la distancia a la que se encuentra un objeto,
algunos dispositivos nos dan la distancia en centímetros a la que se encuentra el objeto pero otros
solo devuelven un dos valores, el valor máximo del sensor cuando está detectando un obstáculo y el
valor mínimo del sensor cuando no lo está detectando.
Para implementar este quinto ejemplo vamos a utilizar además un bloque que nos permite convertir
un texto en voz, es decir, que lee la cadena de caracteres que nosotros le pasemos como parámetro.
La interfaz necesaria para desarrollar este ejemplo se muestra en la imagen siguiente:
Boton1: Botón que ocupa toda la pantalla y que
al pulsarlo nos va a permitir activar y desactivar
el sensor de obstáculos. Lo hemos rellenado en
color rojo y el texto que muestra por defecto es
el que se ve en la imagen.
S_Proximidad: Sensor de proximidad cuando
está habilitado devuelve dos valores distintos
cuando detecta o no detecta un obstáculo.
Programación de Videojuegos con App Inventor Mª Dolores Molina

TextoAVoz1: Componente que lee una cadena de caracteres que le pasamos como parámetro.
Los bloques que necesitamos para programar este ejemplo se muestran en la imagen siguiente:
Cuando.Screen1.Inicializar: Añadimos un
bloque que lee un texto que nos indica que el
programa está abierto pero el sensor está
desactivado.
Cuando.S_Proximidad.ProximityChanged: Este
bloque se ejecuta en forma de bucle cada vez que
se detecta un cambio en valor del sensor de proximimidad. En este caso cuando el sensor devuelve
un valor menor o igual que cero llama a un bloque TextoAVoz que lee un texto que nos indica que
se ha detectado un obstáculo.

CuandoBoton1.ClicLargo: Esta función

comprueba el valor que nos indica el estado
en el que se encuentra el sensor, si está activo
lo desactiva y viceversa, cambia el color de la
pantalla a verde si el sensor se activa y a rojo
si el sensor pasa a estar desactivado y cambia
el texto que muestra el estado del sensor en
ese momento.
CuandoBoton1.Clic: A diferencia del bloque
anterior que utilizamos para activar o
desactivar el sensor, este bloque solo informa al usuario del estado del sensor, mediante la lectura de
una cadena de caracteres, pero no cambia su valor.

La pestaña “Medios”: Reconocedor- Traductor de textos

Dentro de la pestaña medios tenemos elementos asociados con la multimedia, como componentes
para tomar fotos, grabar audio o vídeo, selectores de imágenes, reconocimiento de voz e incluso el
traductor de textos que solicita las traducciones al servicio de traducción de Yandex gracias
utilizando conexión a Internet. En este bloque vamos a desarrollar un reconocedor-traductor de
textos utilizando los componentes de este bloque.
La imagen siguiente muestra los elementos necesarios para realizar este sexto ejemplo:
Label1: Etiqueta con el título del
programa, tamaño 30 y negrita.
Bhablar: Botón que realizará la
grabación de voz para convertirla
posteriormente en una cadena de texto.
Ereconocido: Etiqueta que mostrará el
texto que ha reconocido la herramienta
TextoaVoz.
Programación de Videojuegos con App Inventor Mª Dolores Molina

Bingles: Botón que llama al traductor con la cadena reconocida como entrada y devuelve el texto
traducido al inglés como salida.
Bfrances: Botón que llama al traductor con la cadena reconocida como entrada y devuelve el texto
traducido al francés como salida.
Etraducido: Etiqueta que muestra el valor devuelto por el traductor.
Traductor: Este elemento permite invocar los servicios del traductor Yandex. Recibe una cadena
como entrada y devuelve una cadena traducida como salida.
TextoaVoz: Lee una cadena de texto.
ReconocimientodeVoz: Realiza un reconocimiento de voz, es decir, graba un audio y lo convierte a
una cadena de caracteres.

Los bloques necesarios para programar este ejemplo se muestra en la imagen siguiente:

Cuando_Bhablar.Clic: Al pulsar el botón Bhablar llamamos al bloque que realiza el

reconocimiento de voz.
Cuando_Reconocimientodevoz.Despuesdeobtenertexto: Este evento se realiza una vez que hemos
terminado de grabar la voz y se ha realizado la llamada para convertir la voz en texto. El texto
reconocido se almacena en la variable Resultado, si se ha podido realizar la traducción la variable
partial tendrá un valor false en caso contrario será true. Almacenamos el texto reconocido en la
etiqueta Ereconocido para que se muestre en pantalla.
Cuando_Bingles.clic: Al pulsar este botón llamaremos al traductor con los parámetros necesarios
para traducir al idioma inglés y pondremos los parámetros para que cuando leamos el texto se
pronuncie en este idioma (TextoaVoz.Pais, TextoaVoz.Idioma).
Cuando_Bfrances.clic: Realiza las mismas acciones que el botón anterior pero para el idioma
francés.
Cuando_Traductor.Traduccionrecibida: Este bloque se ejecuta cuando el traductor ha realizado
su función, devuelve la cadena traducida en la variable traduccion, la variable códigodeRespuesta
devuelve un valor numérico, si es 200 la traducción se ha realizado correctamente en caso contrario
se ha producido un error al realizar la traducción.
Programación de Videojuegos con App Inventor Mª Dolores Molina

La pestaña “Social”: Aplicación Manos-Libres

En la pestaña Social incluye herramientas que nos van a permitir acceder a nuestros contactos,
realizar llamadas de teléfono, enviar SMS o acceder a nuestras redes sociales como Twitter. En este
séptimo ejemplo vamos a realizar una aplicación manos libres, que nos va a permitir hacer una
llamada de teléfono utilizando el reconocimiento de voz para indicar el número. Los elementos
necesarios para la creación de la interfaz se muestran en la imagen siguiente:
Imagen1: Imagen para mejorar la
presentación de la ventana
principal de la aplicación. Sus
medidas son 25% de alto y 60%
de ancho, la imagen
“manoslibres.jpg” deberemos
subirla desde la ventana de
medios.
Bgrabar: Botón que pulsaremos
para activar el reconocimiento de
voz.
Enumero: Etiqueta que va a
almacenar el número reconocido
Bllamar: Botón que realizará la
llamada de teléfono
LlamadaTelefono: Componente no visible que realizará la llamada a la aplicación teléfono.
ReconoceVoz: Componente no visible que permitirá realizar la conversión de la voz a números para
enviarlos como parámetros de entrada a la llamada.
Los bloques necesarios para programar la aplicación se muestran en la imagen siguiente:

Cuando_Bgrabar.Clic: Cuando pulsemos este botón llamaremos al reconocimiento de voz para

grabar la voz que dicta los números.
Cuando_ReconoceVoz.DespuesDeObtenerTexto: Una vez que se ha realizado el reconocimiento de
voz comprobamos si lo ha hecho bien, la variable partial será falso, y ponemos el número en la
Programación de Videojuegos con App Inventor Mª Dolores Molina

etiqueta Enumero para que se visualice en pantalla y podremos el número de teléfono al valor
reconocido. Si se ha producido un error se informa al usuario.
Cuando_Bllamar.Clic: Realizamos la llamada de teléfono al valor que habíamos asignado en el
bloque anterior.
Cuando_Llamadatelefono.PhoneCallEnded: Este bloque se ejecuta cuando termina la llamada de
teléfono, en este caso ponemos la etiqueta que almacena al número reconocido a blanco, para dejar
la pantalla dispuesta para otra nueva llamada.

Almacenamos datos en ficheros: Guardamos partidas

Cuando finaliza la ejecución de un programa todos los datos que estaban almacenados en la
memoria RAM se borran, de forma que la próxima vez que ejecutemos el programa comenzaremos
desde cero. Cuando queremos que los datos que hemos generado durante la ejecución de un
programa no se pierdan deberemos guardarlos en ficheros. Para utilizar ficheros en App Inventor
deberemos seleccionar un elemento fichero del menú Almacenamiento de la paleta.
Para programar el fichero utilizaremos los bloques que se muestran al hacer clic sobre el elemento
fichero dentro de la ventana de bloques. Algunos de ellos son los siguientes:
Bloque que nos permite realizar un conjunto de
acciones cuando el fichero ha sido grabado
correctamente en el dispositivo.

Bloque que nos permite realizar un conjunto de

acciones cuando el fichero ha sido leído correctamente.

Bloque que nos permite añadir información en un

fichero ya creado.

Bloque que nos permite borrar un fichero.

Bloque que nos permite leer información de un fichero.

Bloque que nos permite escribir información en un

fichero. Si el fichero ya tiene información lo
sobreescribe. Para añadir información a un fichero
utilizaremos el bloque AñadirAArchivo.
Para realizar el octavo ejemplo vamos a programar una aplicación que funciona como un inicio de
sesión. Pide un usuario y una contraseña, si pulsamos el botón iniciar sesión comprobará si el
usuario y la contraseña son correctos y la aplicación se cerrará, en caso contrario mostrará un
Programación de Videojuegos con App Inventor Mª Dolores Molina

mensaje de error al usuario. Si pulsamos nuevo usuario modificará los datos de usuario y contraseña
almacenados en el fichero por los nuevos valores que hayamos introducido.
Los elementos que necesitamos para la interfaz se muestran en la imagen siguiente:
Eusuario: Etiqueta que indica
dónde se almacena el nombre
de usuario.
Tusuario: Campo de texto que
va a almacenar el nombre del
usuario.
Econtraseña: Etiqueta que
indica dónde se almacena la
contraseña.
Tcontraseña: Campo de
contraseña, cuando escribimos
sobre él se muestran punto en
lugar de los caracteres que
hemos pulsado.
BotonInicio: Cuando pulsemos este botón se accede al fichero para comprobar el usuario y la
contraseña que hemos introducido.
BotonNuevo: Cuando pulsemos este botón se modificarán los datos del fichero con los datos que
hemos introducido.
Eerror: Etiqueta que muestra el mensaje de error en caso que el usuario y la contraseña no sean las
mismas que las que hemos almacenado en nuestro fichero.
Fusuario: Componente no visible que incluye en el programa los bloques necesarios para trabajar
con ficheros.
Programación de Videojuegos con App Inventor Mª Dolores Molina

Los bloques necesarios para programar este ejemplo se muestran en la imagen siguiente:
Ftexto: Es una variable global de tipo cadena que va a almacenar el nombre del fichero que vamos
a utilizar en nuestra aplicación.
Cuando_Botoninicio.Clic: Cuando pulsamos este botón accedemos al fichero para leer.
Cuando_Fusuario.Obtuvotexto: Este evento se ejecuta después de realizar una operación de lectura
sobre el fichero, la cadena leída se encuentra en la variable texto. Unimos en una sola cadena el
usuario y la contraseña ya que la hemos almacenado en una sola línea dentro del fichero.
Comprobamos que el texto introducido es el mismo que el que hemos leído en el fichero, si es así se
cierra la aplicación en caso contrario se avisa con un mensaje al usuario.
Cuando_Botonnuevo.Clic: Cuando pulsamos este botón se unen en una sola cadena el nombre de
usuario y la contraseña y se llama a la función que sobreescribe el fichero, es decir, lo que hubiese
antes se modifica y se cambia por los nuevos valores.

Gestión de errores
En el programa del ejemplo anterior no hemos controlados los posibles errores a la hora de trabajar
con ficheros, por ejemplo si pulsamos el botón iniciar sesión sin haber guardado previamente un
usuario y una contraseña el programa nos mostrará en pantalla una ventana con el código de error
2101 y un texto indicando que el fichero no existe.
Para gestionar algunos de los errores que nos aparecen en pantalla, tanto si son de ficheros como
sino, App Inventor incluye el bloque Cuando.Screen1.Error. Este bloque se ejecutará cuando se
produzca en la aplicación alguno de los errores que están controlados por ella y nos permitirá
determinar que acciones queremos que se ejecuten cuando el error sea detectado. Algunos de los
errores que se controlan desde este bloque son los siguientes:
• Errores que se producen en los componentes ficheros
• Errores que se producen en los componentes Bluetooth
• Errores que se producen en el componente de Twitter
• Errores que se producen en el componente de SoundRecorder
• LocationSensor - cuando LatitudeFromAddress o LongitudeFromAddress fallan.
• Player - al establecer la fuente en propiedades, falla.
• Sonido - al establecer la fuente en propiedades, falla, o bien, falla durante la reproducción.
• VideoPlayer - al establecer la fuente en propiedades, falla.
En el caso del ejemplo anterior podremos avisar al usuario de que no existe el fichero y pedirle que
lo cree primero. Para los errores que no están incluidos en el control de este bloque la aplicación
generará un mensaje por defecto que no podremos cambiar ni tampoco gestionar. Este bloque
incluye los siguientes parámetros :
Programación de Videojuegos con App Inventor Mª Dolores Molina

• Componente: Indica el componente que ha generado el error (fichero, bluetooth, sonido …)

• Nombredefunción: Indica que operación ha sido la causante del error, por ejemplo, leer de
un fichero que no existe.
• Númerodeerror: Código numérico asociado al error producido. Una mismo componente y
una misma función pueden generar distintos errores, el código de error nos va a permitir
distinguir unos de otros.
• Mensaje: Texto que genera de forma automática la aplicación y que incluye una descripción
del error producido.
Para evitar que en nuestro ejemplo de ficheros se produzca un error al intentar acceder a un fichero
que no existe debemos incluir a la aplicación el siguiente bloque de código:

También deberemos habilitar el componente BotonInicio una vez que hayamos creado el fichero.

Programas con más de una pantalla. Unimos varios proyectos

Hasta el momento todos nuestros programas se han desarrollado utilizando una sola ventana, en este
último ejemplo vamos a desarrollar una aplicación que se ejecuta utilizando dos ventanas. La
ventana principal que nos mostrará las características generales del juego y una segunda pantalla en
la que podremos jugar. Vamos a partir del ejemplo del videojuego de Mario que ya hemos
desarrollado anteriormente.
La ventana principal de un proyecto App Inventor, la que se ejecuta en primer lugar, siempre debe
llamarse Screen1, y como podemos comprobar no se pueden renombrar pantallas, ni copiar
pantallas. Para no tener que definir la pantalla de nuevo lo que haremos será crear un proyecto con
la ventana principal a la que llamaremos Screen1 y unirla posteriormente al proyecto que ya
habíamos creado utilizando la aplicación AI2MergerApp. Esta aplicación permite unir en uno solo
dos proyectos que han sido desarrollados de manera independiente, obligando a renombrar la
pantalla del proyecto que incluyamos en segundo lugar ya que ambas se llamarán Screen1. En la
imagen siguiente se muestra la pantalla de ejecución de la aplicación AI2MergerApp.
Programación de Videojuegos con App Inventor Mª Dolores Molina

Como principal crearemos un proyecto con los siguientes elementos para la interfaz:

Imagen1: Imagen para adornar la pantalla principal, está

ajustada al contenedor a lo alto y lo ancho y tiene como
foto la imagen supermario.png
Binicio: Botón ajustado al contenedor a lo ancho y a lo
alto con la imagen mario.png como fondo.
Einicio: Etiqueta que informa al usuario de cómo
comenzar el juego.

Los bloques necesarios para pasar de pantalla se muestran en la imagen siguiente:

Este bloque lo añadiremos una vez que hayamos unido los dos proyectos en uno solo, habiendo
renombrado la pantalla principal del segundo proyecto como PantallaJuego.
Programación de Videojuegos con App Inventor Mª Dolores Molina

Ejercicios del tema

1. Diseña la interfaz necesaria para el juego de tres en raya. Los jugadores irán alternando los
turnos y en cada turno se colocará el símbolo o color que identifique al jugador. No es
necesario que el juego determine quién es el ganador. (B2.C1)

2. Completa el videojuego de Mario para que se juegue con dos monedas. Deben aparecer en
posiciones aleatorias de la parte superior de la pantalla y con un tiempo de retardo entre
ellas. Al final de la partida deberá aparecer una etiqueta o imagen de fin de partida en
pantalla, bloquear todos los botones y los movimientos de Mario menos el botón de reinicio
de partida.(B2.C2)

3. En el ejemplo del Caza Topo hemos definido una variable para el control de tiempo de la
partida, pero no la hemos programado. Añade a la interfaz los elementos necesarios para que
el usuario vea en pantalla el tiempo de partida que le queda (el contador irá hacia atrás), la
partida finalizará cuando el contador llegue a cero. Añade también un botón para reiniciar el
juego.

4. Modifica el ejemplo de la canica gravitatoria para que el usuario parta con 100 puntos al
inicio de la partida y pierda 10 puntos cada vez que la pelota toque uno de los obstáculos.
Añade un reloj para el control del tiempo de la partida que durará 1 minuto e irá hacia atrás.
La partida termina si se acaba el tiempo, el usuario se queda sin puntos o la pelota llega al
final del recorrido. (B2.C3)

5. Modifica el ejemplo de reconocimiento – traductor de voz para controlar los mensajes de

error devueltos por los procedimientos Cuando_Reconocimientodevoz.
Despuesdeobtenertexto y Cuando_Traductor.Traduccionrecibida. (busca información en
internet sobre el significado de los valores devueltos en las variables partial y
CodigoRespuesta, lo puedes encontrar en inglés en la siguiente dirección
http://ai2.appinventor.mit.edu/reference/components/).

6. Modifica el ejemplo de la aplicación manos libres para que almacene en un fichero los
números a los que hemos llamado. Añade a la interfaz un visor de lista que nos muestre las
llamadas almacenadas en el fichero. No olvides incluir la gestión de errores.

7. Modifica la pantalla principal del “videojuego de Mario con varias pantallas” para que
muestre el nombre y la puntuación obtenida por el último jugador que haya jugado una
partida. Deberás añadir a la ventana de juego una disposición horizontal que incluya una
etiqueta, un campo de texto para almacenar el nombre del jugador y un botón para grabar el
nombre que hemos solicitado y la puntuación obtenida utilizando un carácter separador
(/,@, \n, ...) en un solo fichero al que llamaremos mariopuntos.txt. Esta disposición estará
oculta y solo se mostrará cuando el usuario pulse el botón fin de partida, una vez que se
hayan grabado los datos el programa finalizará su ejecución. (B2.C4)
Programación de Videojuegos con App Inventor Mª Dolores Molina

Bibliografía
Instalación de App Inventor. https://sites.google.com/site/appinventormegusta/instalacion.

Guía de Iniciación a App Inventor. 2015. Raúl C. (@raulconm)

Descripción de los componentes de la paleta de App Inventor 2.

https://sites.google.com/site/aprendeappinventor/documentacion/componentes-basicos

Descripción de bloques integrados de App Inventor 2.

http://codigo21.educacion.navarra.es/autoaprendizaje/descripcion-de-los-bloques-integrados-de-
app-inventor-2/.