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

Programación de Videojuegos con APP Inventor

IntroducciónEste segundo manual ha sido creado como una continuación del manual “Programación Básica conApp Inventor”. En este segundo manual vamos a aplicar todos los conocimientos que hemosadquirido 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óncomo 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ágenesLa ventana medios nos permite subir ficheros multimedia , imágenes, audio, vídeo, a nuestroproyecto. Para insertar una imagen en nuestra ventana deberemos primero subir el fichero que lacontiene mediante esta ventana. Una vez que hemos subido el fichero de la imagen al proyectodeberemos añadir el componente “Imagen” que se encuentra en el bloque de la “Interfaz deUsuario” dentro de la paleta de App Inventor, por último asociaremos el fichero que contiene laimagen 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 noincluye ningún bloque de control, es decir, las imágenes se insertan en la ventana, se puedenmostrar u ocultar y cambiar sus medidas de alto, ancho o posición en la ventana pero no se puedeinteractuar con ellas, es decir, no podemos asociar ningún tipo de eventos como el clic o el dobleclic.

Los Lienzos y las SpriteImagen: Juego Piedra, Papel, TijeraLas spriteimage son imágenes con las que sí podremos interactuar, es decir, tienen eventosasociados, pero solo podremos incluir spriteimage dentro de un lienzo. Un lienzo delimita una zonade la pantalla sensible al tacto y en la que podremos dibujar e insertar spriteimages. Los canvastienen asociados eventos que nos indican dónde y cuándo los hemos tocado y que nos permiteninteractuar con las spriteimagen que se encuentran en su interior para por ejemplo arrastrarlas. Tantolos lienzos como las spriteimagen se encuentran dentro del bloque “dibujo y animación” dentro dela 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 colocamoslas imágenes como fondo, pero vamos a empezar con un ejemplo sencillo en que mostraremoscomo 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 lamáquina que hará su elección utilizando una función aleatoria que elegirá un número comprendidoentre 1 y 3, a cada número le asociaremos una opción: piedra, papel o tijera. Por últimocomprobaremos cuál es la opción ganadora, la que nosotros hemos elegido o la que ha generado lamáquina y sumaremos un punto al ganador. También hemos incluido un botón para reiniciar losmarcadores 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á devalor cada vez que la máquina gane una partida.

2. Epuntosusuario: Etiqueta que muestra los puntos obtenidos por el usuario, aumentará devalor 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 eventoclic sobre estas Sprite iniciará la partida.

5. Ieleccionusuario, Ieleccionmaquina: Imágenes que muestran la opción elegida por el usuarioy la opción generada por la máquina de forma aleatoria. Para compararlas y saber quién es elganador de la partida.

6. Disposicionhorizontal1: Hemos colocado esta disposición vacía para separar el botón dereinicio 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 usuarioy la elección de la máquina. Cuando el usuario hace clic sobre la Sprite image de la piedra damos ala 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óndel 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 laelecció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 acero las etiquetas Epuntosusuario y Epuntosmaquina y poner a vacío las imágenes Ieleccionusuarioe Ieleccionmaquina.

Con este ejemplo sencillo apenas hemos utilizado las propiedades asociadas a los lienzos y lasSprite, si nos fijamos podríamos haber planteado este ejemplo con botones en los que coloquemoscomo 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 proporcionaninformación del exterior que podremos utilizar en nuestros programas. Desde App Inventorpodemos controlar el acelerómetro, lector de códigos de barras, reloj, giroscopio, near field (lectorNFC), 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 incluiranimaciones de los personajes utilizando el reloj para controlar el tiempo que pasa entre fotogramade 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 laimagen siguiente:

Ccampodejuego: Lienzo en el quevamos a colocar las Spriteimage parajugar. El ancho y el alto estáestablecido con el valor ajustar alcontenedor.Siplataforma: Sprite que representa laplataforma verde sobre la que se va amover Mario.SImario: Sprite del personaje deMarioSimoneda: Sprite de la moneda quetiene que capturar Mario.DiposicionHorizontal1: Disposiciónque 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 usuarioBizquierda: 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 lapuntuación.Relojmario: Sensor reloj que va a controlar el tiempo que tarda la imagen del personaje en cambiarpara generar la animación. Estableceremos el parámetro intervalo del temporizador a 100 msg, deforma 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 encambiar de posición para generar la aplicación. Al igual que en reloj anterior estableceremos elintervalo del temporizador a 100 msg.

Además de estos elementos también tendremos que subir al proyecto, utilizando la ventana demedios, 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.pngimágenes de movimiento hacia la izquierda). Posteriormente en los bloques asociaremos losnombres 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 spritedentro del lienzo. Tenemos que indicar que para posicionar un elemento en un lienzo se utiliza uneje 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 valorespositivos a la coordenada y del sistema cartesiano. La imagen siguiente muestra como se realiza laubicación de los elementos en el sistema cartesiano que se establece para trabajar con las imágenesdentro 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 izquierdadel sprite el que sirve como punto de referencia para colocar laimagen, es decir hemos colocado la esquina superior izquierda de laimagen en el punto (113,3). De igual manera la esquina superiorizquierda 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 dadodirectamente valores a la coordenada x y a la coordenada y cuando comencemos a programarnuestros bloques vamos a utilizar posiciones relativas, que van a venir dadas en función de la alturay la anchura del lienzo. Esta forma de programar utilizando posiciones relativas nos va a segurarque nuestro juego se va a ver bien independientemente del tamaño de pantalla que tenga eldispositivo que estemos utilizando. La imagen siguiente muestra los bloques que hemos utilizadopara 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 hemosdado para el ancho y el alto el valorajustar al contenedor, por lo que nuestrocampo de juego se va a ajustarautomáticamente al tamaño que tenga lapantalla de nuestro dispositivo. El resto deelementos que van dentro del lienzo loshemos ajustado de forma relativa altamañ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 hemosestablecido 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. Esteprocedimiento se llama desde el bloque que inicializa la ventana del juego y cuando reiniciamos lapartida, ya que hemos podido comprobar que en ocasiones el entorno app falla y no realiza lallamada 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 muevahacia 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 laanimación de Mario.Desplazamiento: Indica el número de puntos que se mueve Mario en dirección horizontal y lamoneda en dirección vertical.

Cuando_Bderecha.Presionar:Habilitamos el reloj que va apermitir crear los movimientos delpersonaje, actualizamos el valor dela variable que indica en quedirección se mueve Mario ycargamos en la lista las imágenescon el personaje mirando hacia laderecha.

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

Cuando_Bderecha.Soltar: Deshabilitamos el reloj para que el personaje deje de moverse ycambiamos 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 losanteriores 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 elintervalo de tiempo que hemos establecido al incluir el sensor en nuestro programa, en nuestroejemplo cada décima de segundo, tal como indicamos durante la creación de la interfaz (intervalodel 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 delas imágenes. Se inicia como el siguiente al último valor que hayamos utilizado durante laejecución anterior de este bloque, si al incrementarla supera el tamaño máximo de la lista sevuelve a inicializar a 1, primer elemento de la lista, de esta forma conseguimos recorrer lalista 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 laimagen 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 loque hacemos es aumentar la posición de la moneda en el eje vertical, el eje y, en 10. Cuando elvalor 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 procedimientoreiniciamoneda que coloca la moneda de nuevo en la parte superior de la pantalla, lo describiremoscon más detalle mas adelante.El bloque Simoneda.EncolisionCon comprueba si la moneda está tocando a Mario con lo que seaumentará en 10 el valor de la variable puntos y llama al procedimiento reiniciamoneda, si lavariable puntos supera el valor de 100 la partida termina y para ello paramos la animación de lamoneda y desactivamos los botones que nos permiten mover a Mario, de forma que los únicosbotones 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 generauna posición aleatoria para el valor en el eje horizontal de la x para la moneda, así conseguimos quecuando la moneda se reinicie se mueva hacia la derecha o hacia la izquierda, también se muestranlos bloques asociados al evento Cuando.Breiniciar.Clic , botón que reinicia la partida y cuyocontenido 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 esteapartado vamos a realizar un tercer ejemplo un poco más avanzado para conocer mejor comofuncionan las propiedades de los lienzos y las Sprite Image. En este tercer ejemplo vamos a escribirel 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 siguienteimagen.

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ú dePaleta

Nombre delComponente

Función del Componente

Lienzo Dibujo yAnimación

GameCanvas Campo de Juego

SpriteImagen Dibujo yAnimación

Hole1 … Hole5 Agujeros por los que sale el topo

SpriteImagen Dibujo yAnimación

Mole El topo

DisposiciónHorizontal Disposición ScoreArrangement Capa que permite almacenar laetiqueta que muestra el marcador

Etiqueta Interfaz deUsuario

ScoreTextLabel Etiqueta que el texto “Puntuación:”

Etiqueta Intefaz deUsuario

ScoreValueLabel Etiqueta que muestra el valor de lapuntuación obtenida

Sonido Medios Buzzer Permite que vibre la pantallacuando toquemos al topo

Reloj Sensores MoleClock Controla el tiempo que dura lapartida

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

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

Elemento Cambios

GameCanvas Cambia la propiedad ColorDeFondo a Verde. Cambia las propiedades Altoy 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 2para que el topo se muestre siempre el primero en la pila de elementos quevemos en pantalla, ya que el resto de elementos tienen como valor pordefecto 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 yhemos modificado sus propiedades desde la pantalla de diseño, tenemos que modificar sucomportamiento desde el editor de bloques.

Bloques: En este apartado vamos a explicar cada una de la funciones que vamos a añadir desde eleditor 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 hayaacabado 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 elprograma:

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

Para definir este bloque utilizamos los siguientes elementos:Nombre del Bloque Tipo de Bloque Función

Inicializar global holes como VariablesDefinir la variable global holes de tipo lista einicializarla a valor vacío.

Crear una lista vacía ListaPermite crear un tipo lista para asignarlo a lavariable que hemos definido anteriormente

2. Comienzo de la aplicación: El primer evento que se produce en cualquier programa esCuando.Screen1.Inicializar, en este bloque pondremos todo el código necesario para elarranque de nuestro programa, que en este caso concreto se compone de los siguienteselementos: 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, estoes necesario para poder agregar el bloque Llamar a MoveMole, ya que solo cuandohemos 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

Cuando.Screen1. Inicializar Screen1Especifica que ocurre cuando se inicia laaplicació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

Por cada hole en la lista ControlBucle que se va a repetir para cada agujero dela lista ...

Tomar global holes Variables … definida mediante la variable global holes

Poner SpriteImage FotoCualquierImageSprite

Establece la propiedad imagen delcomponente...

Tomar hole Variables … hole a

hole.png Texthole.png, que hace referencia al nombre de laimagen

Como MoveMole ProcedimientoCrear el procedimiento MoveMole para poderllamarlo

Llamar a MoveMole Procedimiento Llama al procedimiento que acabamos de crear

3. Control del topo: Necesitamos diseñar tres procedimientos que realicen las siguientesacciones 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 eltopo 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 currentholecomo

VariableDefinimos e inicializamos la variable localcurentHole como...

Toma un elemento al azar dela lista

Lista … Un elemento al azar de la lista....

Tomar global holes Variable … definida en la variable global holes

Llamar Mole.MoverA Mole Mueve la imagen del topo a ...

ImageSprite.XCualquierSpriteImage

Posición horizontal en la pantalla del ….

Get currentHole VariablesAgujero activo definido por la variablecurentHole

ImageSprite.YCualquierSpriteImage

Posición vertical en la pantalla del ….

Get currentHole VariablesAgujero activo definido por la variablecurentHole

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

Para definir este bloque hemos insertado los siguientes componentes:

Nombre del Bloque Tipo de Bloque Función

Cuando MoleClockTemporizador

MoleClock Cuando el contador del tiempo varíe ….

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

Cuando Mole.Tocar MolePermite definir las acciones a realizar cuandoel usuario toque el topo

PonerScoreValueLabel.Textocomo

ScoreValueLabelEstablece el valor de la etiqueta de textoScoreValueLabel a …

1 Matemáticas 1

+ Matemáticas +

ScoreValueLabel.Text ScoreValueLabelValor anterior de la etiqueta de textoScoreValueLabel

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 puedearrastrar, interactuar con otros sprites, con el borde del Lienzo, y también moverse de acuerdo a suspropiedades. La diferencia entre una pelota y un spriteimage es que este último toma su aparienciade una imagen, mientras que en el caso del primero, solamente se pueden modificar las propiedadescolordepintura, que indica de qué color es la pelota y radio que indica el tamaño del radio delcírculo que representa la pelota.Además en lugar de mover la pelota utilizando botones como hicimos en el segundo ejemplo deljuego de Mario, vamos a hacer que nuestra pelota se mueva en las cuatro direcciones utilizando losvalores que nos devuelve el acelerómetro. El juego consiste en llevar la pelota desde un extremo al otro de la pantalla. Para conseguirlotendremos que inclinar nuestro dispositivo en la dirección en la que queremos que la pelota semueva 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 deljuego, la pelota y los bloques que la pelotatiene que esquivar. Los parámetros ancho yalto está establecidos como ajustar alcontenedor.

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 quepuede chocar la pelota.Acelerómetro1: Este bloque recoge las señales que mide el acelerómetro de un dispositivo, que escapaz 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 ladoizquierdo se levanta), y negativo cuando el dispositivo se inclina hacia la izquierda (su bordederecho se levanta).

• YAccel: positivo, cuando la parte inferior del dispositivo (la del micrófono) se eleva, ynegativa cuando su parte superior (la del auricular) se eleva.

• ZAccel: Positivo cuando la pantalla esté mirando hacia arriba, y negativa cuando la pantallaestá mirando hacia abajo.

Para este ejemplo solo vamos a utilizar los valores XAccel, para mover nuestra pelota a derecha oizquierda 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 imagensiguiente:

fijarx: Variable global. Será cierta cuando lacoordenada en x de la pelota pueda cambiar de valory falso en caso contrario.fijary: Variable global. Será cierta cuando lacoordenada en y de la pelota pueda cambiar de valory falso en caso contrario.Vertical: Lista que contiene los bloques verticalescon 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 verticalesy horizontales que se encuentra visibles en pantalla.

Cuando Acelerómetro.CambioEnAceleración: Estebloque se ejecuta en forma de bucle cadavez que el acelerómetro cambia sus valores,es decir, cada vez que cambiemos laposición de nuestro móvil bien en la verticalo en la horizontal. Si están habilitadas lasvariables que permiten cambiar lascoordenadas de la pelota calcularemos suposición en función de los valores que nosdevuelve 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 comohemos explicado anteriormente, si el dispositivo se inclina hacia arriba devuelve valores positivos ynosotros sumaremos los valores devueltos para que la posición en y de la pelota vaya aumentando yse mueva hacia abajo de la pantalla, al contrario si inclinamos el dispositivo hacia abajo devuelvevalores negativos y al sumarlo hará que disminuya el valor de la posición en y de la pelotadesplazándose hacia abajo.Parámetro xAccel: Corresponde con el valor de cambio en la aceleración en el eje X, que comohemos explicado anteriormente, si el dispositivo se inclina hacia la izquierda devuelve valorespositivos y nosotros lo restamos para que el valor de la coordenada en x de la pelota disminuya, alcontrario 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 laimagen siguiente:

Cuando la pelota colisiona con uno de los obstáculosque 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 alusuario activando la vibración del dispositivo.

Cuando la pelota deja de estar en contacto con uno de los obstáculos se liberan las variables quepermiten 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 deproximidad. 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 otrossolo devuelven un dos valores, el valor máximo del sensor cuando está detectando un obstáculo y elvalor mínimo del sensor cuando no lo está detectando.Para implementar este quinto ejemplo vamos a utilizar además un bloque que nos permite convertirun 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 queal pulsarlo nos va a permitir activar y desactivarel sensor de obstáculos. Lo hemos rellenado encolor rojo y el texto que muestra por defecto esel que se ve en la imagen.S_Proximidad: Sensor de proximidad cuandoestá habilitado devuelve dos valores distintoscuando 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 unbloque que lee un texto que nos indica que elprograma está abierto pero el sensor estádesactivado.Cuando.S_Proximidad.ProximityChanged: Estebloque 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 devuelveun valor menor o igual que cero llama a un bloque TextoAVoz que lee un texto que nos indica quese ha detectado un obstáculo.

CuandoBoton1.ClicLargo: Esta funcióncomprueba el valor que nos indica el estadoen el que se encuentra el sensor, si está activolo desactiva y viceversa, cambia el color de lapantalla a verde si el sensor se activa y a rojosi el sensor pasa a estar desactivado y cambiael texto que muestra el estado del sensor enese momento.CuandoBoton1.Clic: A diferencia del bloqueanterior que utilizamos para activar o

desactivar el sensor, este bloque solo informa al usuario del estado del sensor, mediante la lectura deuna cadena de caracteres, pero no cambia su valor.

La pestaña “Medios”: Reconocedor- Traductor de textosDentro de la pestaña medios tenemos elementos asociados con la multimedia, como componentespara tomar fotos, grabar audio o vídeo, selectores de imágenes, reconocimiento de voz e incluso eltraductor de textos que solicita las traducciones al servicio de traducción de Yandex graciasutilizando conexión a Internet. En este bloque vamos a desarrollar un reconocedor-traductor detextos utilizando los componentes de este bloque. La imagen siguiente muestra los elementos necesarios para realizar este sexto ejemplo:

Label1: Etiqueta con el título delprograma, tamaño 30 y negrita.Bhablar: Botón que realizará lagrabación de voz para convertirlaposteriormente en una cadena de texto.Ereconocido: Etiqueta que mostrará eltexto que ha reconocido la herramientaTextoaVoz.

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 textotraducido al inglés como salida.Bfrances: Botón que llama al traductor con la cadena reconocida como entrada y devuelve el textotraducido 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 cadenacomo 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 auna 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 elreconocimiento de voz.Cuando_Reconocimientodevoz.Despuesdeobtenertexto: Este evento se realiza una vez que hemosterminado de grabar la voz y se ha realizado la llamada para convertir la voz en texto. El textoreconocido se almacena en la variable Resultado, si se ha podido realizar la traducción la variablepartial tendrá un valor false en caso contrario será true. Almacenamos el texto reconocido en laetiqueta Ereconocido para que se muestre en pantalla.Cuando_Bingles.clic: Al pulsar este botón llamaremos al traductor con los parámetros necesariospara traducir al idioma inglés y pondremos los parámetros para que cuando leamos el texto sepronuncie en este idioma (TextoaVoz.Pais, TextoaVoz.Idioma).Cuando_Bfrances.clic: Realiza las mismas acciones que el botón anterior pero para el idiomafrancés.Cuando_Traductor.Traduccionrecibida: Este bloque se ejecuta cuando el traductor ha realizadosu función, devuelve la cadena traducida en la variable traduccion, la variable códigodeRespuestadevuelve un valor numérico, si es 200 la traducción se ha realizado correctamente en caso contrariose 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-LibresEn 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 esteséptimo ejemplo vamos a realizar una aplicación manos libres, que nos va a permitir hacer unallamada de teléfono utilizando el reconocimiento de voz para indicar el número. Los elementosnecesarios para la creación de la interfaz se muestran en la imagen siguiente:

Imagen1: Imagen para mejorar lapresentación de la ventanaprincipal de la aplicación. Susmedidas son 25% de alto y 60%de ancho, la imagen“manoslibres.jpg” deberemossubirla desde la ventana demedios.Bgrabar: Botón que pulsaremospara activar el reconocimiento devoz.Enumero: Etiqueta que va aalmacenar el número reconocidoBllamar: Botón que realizará la

llamada de teléfonoLlamadaTelefono: 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 paraenviarlos 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 paragrabar la voz que dicta los números.Cuando_ReconoceVoz.DespuesDeObtenerTexto: Una vez que se ha realizado el reconocimiento devoz 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 valorreconocido. 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 elbloque anterior.Cuando_Llamadatelefono.PhoneCallEnded: Este bloque se ejecuta cuando termina la llamada deteléfono, en este caso ponemos la etiqueta que almacena al número reconocido a blanco, para dejarla pantalla dispuesta para otra nueva llamada.

Almacenamos datos en ficheros: Guardamos partidasCuando finaliza la ejecución de un programa todos los datos que estaban almacenados en lamemoria RAM se borran, de forma que la próxima vez que ejecutemos el programa comenzaremosdesde cero. Cuando queremos que los datos que hemos generado durante la ejecución de unprograma no se pierdan deberemos guardarlos en ficheros. Para utilizar ficheros en App Inventordeberemos 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 elementofichero dentro de la ventana de bloques. Algunos de ellos son los siguientes:

Bloque que nos permite realizar un conjunto deacciones cuando el fichero ha sido grabadocorrectamente en el dispositivo.

Bloque que nos permite realizar un conjunto deacciones cuando el fichero ha sido leído correctamente.

Bloque que nos permite añadir información en unfichero 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 unfichero. Si el fichero ya tiene información losobreescribe. Para añadir información a un ficheroutilizaremos el bloque AñadirAArchivo.

Para realizar el octavo ejemplo vamos a programar una aplicación que funciona como un inicio desesión. Pide un usuario y una contraseña, si pulsamos el botón iniciar sesión comprobará si elusuario 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ñaalmacenados 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 indicadónde se almacena el nombrede usuario.

Tusuario: Campo de texto queva a almacenar el nombre delusuario.

Econtraseña: Etiqueta queindica dónde se almacena lacontraseña.

Tcontraseña: Campo decontraseña, cuando escribimossobre él se muestran punto enlugar de los caracteres quehemos pulsado.

BotonInicio: Cuando pulsemos este botón se accede al fichero para comprobar el usuario y lacontraseña que hemos introducido.

BotonNuevo: Cuando pulsemos este botón se modificarán los datos del fichero con los datos quehemos introducido.

Eerror: Etiqueta que muestra el mensaje de error en caso que el usuario y la contraseña no sean lasmismas que las que hemos almacenado en nuestro fichero.

Fusuario: Componente no visible que incluye en el programa los bloques necesarios para trabajarcon 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 vamosa 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 lecturasobre el fichero, la cadena leída se encuentra en la variable texto. Unimos en una sola cadena elusuario 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í secierra 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 deusuario y la contraseña y se llama a la función que sobreescribe el fichero, es decir, lo que hubieseantes se modifica y se cambia por los nuevos valores.

Gestión de erroresEn el programa del ejemplo anterior no hemos controlados los posibles errores a la hora de trabajarcon ficheros, por ejemplo si pulsamos el botón iniciar sesión sin haber guardado previamente unusuario y una contraseña el programa nos mostrará en pantalla una ventana con el código de error2101 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 comosino, App Inventor incluye el bloque Cuando.Screen1.Error. Este bloque se ejecutará cuando seproduzca 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 loserrores 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 quelo cree primero. Para los errores que no están incluidos en el control de este bloque la aplicacióngenerará un mensaje por defecto que no podremos cambiar ni tampoco gestionar. Este bloqueincluye 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 deun fichero que no existe.

• Númerodeerror: Código numérico asociado al error producido. Una mismo componente yuna misma función pueden generar distintos errores, el código de error nos va a permitirdistinguir unos de otros.

• Mensaje: Texto que genera de forma automática la aplicación y que incluye una descripcióndel error producido.

Para evitar que en nuestro ejemplo de ficheros se produzca un error al intentar acceder a un ficheroque 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 proyectosHasta 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. Laventana principal que nos mostrará las características generales del juego y una segunda pantalla enla que podremos jugar. Vamos a partir del ejemplo del videojuego de Mario que ya hemosdesarrollado anteriormente.

La ventana principal de un proyecto App Inventor, la que se ejecuta en primer lugar, siempre debellamarse Screen1, y como podemos comprobar no se pueden renombrar pantallas, ni copiarpantallas. Para no tener que definir la pantalla de nuevo lo que haremos será crear un proyecto conla ventana principal a la que llamaremos Screen1 y unirla posteriormente al proyecto que yahabíamos creado utilizando la aplicación AI2MergerApp. Esta aplicación permite unir en uno solodos proyectos que han sido desarrollados de manera independiente, obligando a renombrar lapantalla del proyecto que incluyamos en segundo lugar ya que ambas se llamarán Screen1. En laimagen 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 comofoto la imagen supermario.png

Binicio: Botón ajustado al contenedor a lo ancho y a loalto con la imagen mario.png como fondo.

Einicio: Etiqueta que informa al usuario de cómocomenzar 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, habiendorenombrado 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 esnecesario 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 enposiciones aleatorias de la parte superior de la pantalla y con un tiempo de retardo entreellas. Al final de la partida deberá aparecer una etiqueta o imagen de fin de partida enpantalla, bloquear todos los botones y los movimientos de Mario menos el botón de reiniciode partida.(B2.C2)

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

4. Modifica el ejemplo de la canica gravitatoria para que el usuario parta con 100 puntos alinicio 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 alfinal del recorrido. (B2.C3)

5. Modifica el ejemplo de reconocimiento – traductor de voz para controlar los mensajes deerror devueltos por los procedimientos Cuando_Reconocimientodevoz.Despuesdeobtenertexto y Cuando_Traductor.Traduccionrecibida. (busca información eninternet sobre el significado de los valores devueltos en las variables partial yCodigoRespuesta, lo puedes encontrar en inglés en la siguiente direcciónhttp://ai2.appinventor.mit.edu/reference/components/).

6. Modifica el ejemplo de la aplicación manos libres para que almacene en un fichero losnúmeros a los que hemos llamado. Añade a la interfaz un visor de lista que nos muestre lasllamadas 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 quemuestre el nombre y la puntuación obtenida por el último jugador que haya jugado unapartida. Deberás añadir a la ventana de juego una disposición horizontal que incluya unaetiqueta, un campo de texto para almacenar el nombre del jugador y un botón para grabar elnombre 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 sehayan grabado los datos el programa finalizará su ejecución. (B2.C4)

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

BibliografíaInstalació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/.