DESARROLLO DE APLICACIONES ANDROID CON APP
INVENTOR
¿Qué? es App Inventor?
Es un entorno de desarrollo de software creado por Google Labs para la creación de aplicaciones para el
sistema operativo Android. El usuario puede, de forma visual y a partir de un conjunto de herramientas básicas, ir
enlazando una serie de bloques para crear la aplicación.
Pasos para instalar App Inventor
Instituto Tecnológico Superior de San Luis Potosí, Capital
Taller de App Inventor - Práctica
Creación de un Juego de Naves para celular
Objetivos
Comprender el carácter específico de las instrucciones empleadas en programación.
Distinguir entre instrucciones generales y específicas.
Introducirse en algunos de los conceptos propios del ámbito de la programación.
Establecer relaciones entre el orden de las acciones programadas y los resultados obtenidos.
Desarrollo
Crearemos con App Inventor un juego donde una nave espacial destruirá un asteroide con su lasser.
http://ai2.appinventor.mit.edu
Actividad 1
Configuración del entorno visual de juego
Si queremos que nuestro juego se vea de manera correcta en nuestro dispositivo Android, debemos seguir las
instrucciones que se darán a continuación:
Antes de comenzar con el desarrollo del videojuego primero necesitamos crear el CANVAS
(Lienzo), en el cual se colocarán los objetos o sprites que utilizaremos.
En el menú Paleta buscamos el submenú Dibujo y Animación y de allí el componente Lienzo el cual solo
tendremos que arrastrar al visor.
Despues de crear el Lienzo configuraremos sus propiedades, para ello lo elegimos dentro del menú
Componentes , observamos que el Lienzo creado se encuentra dentro del componente Screen el cual simula la
pantalla del dispositivo móvil. Al elegir el elemento Lienzo observamos que del lado derecho tenemos el menú
propiedades . Configuramos como dice la imagen siguiente:
El objetivo visual del juego es que se muestre en el dispositivo de forma horizontal, para ello necesitamos
configurar el elemento Screen , lo elegimos dentro del menú componentes y aplicamos las siguientes
propiedades:
Ahora lo que sigue es colocar los objetos llamados Sprites los cuales nos servirán como
“personajes“ en el juego.
Como lo hicimos anteriormente con el lienzo, en el menú Paleta buscamos el submenú Dibujo y Animación y de
allá el componente SpriteImagen el cual solo tendremos que arrastrar al visor.
Este Sprite lo configuraremos como nuestra Nave poniendo las siguientes propiedades:
Volvemos a colocar dos SpriteImagen más los cuales utilizaremos como el Lasser de la nave y un Asteroide el
cual destruiremos con el lasser, a continuación aplicaremos las siguientes propiedades a cada Sprite:
Propiedades para Lasser
Propiedades para Asteroide
Ahora que ya tenemos todo lo visual listo, le daremos vida al videojuego programando algunos
eventos.
Para programar el juego, observaremos que en la parte superior derecha de App Inventor tenemos
un botón que no está seleccionado aún, el cual se llama Bloques
Al dar clic en ese botón nos enviará a una nueva ventana, donde nos permitira poner las instrucciones para la
programación del juego. Aquí nos muestra dos menús: Bloques y Visor .
Observamos que en el menú Bloques tenemos una lista de tipos de bloques, como son: Integrados , Los bloques
que hemos creado en nuestro Screen y Cualquier Componente .
Uno de los objetivos es que la nave se mueva de arriba hacia abajo, por lo tanto tendremos que programar el
movimiento en el eje Y. El movimiento del objeto Nave se hará dentro del lienzo.
Para realizar lo anterior daremos clic de entre la lista de bloques el apartado de Screen1 en el signo (+).
Eligiremos el Canvas o Lienzo
Al momento de darle clic nos aparecerá una serie de bloques todos para usarse con el objeto que se selecciona.
Tenemos que aplicar un bloque que nos permita arrastrar un sprite dentro del Lienzo para ello se elige el
siguiente bloque:
Al dar clic en el bloque automáticamente se mostrará en el visor y estará listo para usarse.
El objeto que nosotros moveremos en la pantalla será la Nave Espacial , por lo tanto la eligiremos del menú
Bloques en el mismo apartado de donde obtuvimos el Canvas.
Eligiremos el bloque de movimiento el cual se muestra a continuación:
Este bloque lo colocamos justo dentro del bloque anterior y tendra que quedar de la siguiente manera:
Ahora tenemos que darle la instrucción de que se mueva en el eje Y para ello dentro del bloque:
Le indicaremos que no se moverá en X, por lo tanto pondremos un cero; buscaremos un bloque dentro de la lista
de menú Bloques llamado Integrados , damos clic en el signo (+) y buscamos el bloque siguiente dentro de la
categoría Matemáticas :
Cambiamos el valor a 10 y lo arrastramos al conector X del bloque llamar Nave.MoverA
Quedando de la siguiente manera:
Para dar el movimiento en Y pasaremos el mouse sobre el bloque cuando Canvas1.Arrastrado en atributo
YPrevio
Elegimos el bloque tomar YPrevio y lo colocamos en el conector Y como anteriormente lo hicimos.
Con este código verificamos en nuestro dispositivo o en el emulador que podemos hacer el movimiento de la
Nave con solo arrastrarla con el dedo de arriba hacia abajo.
Uno de los otros objetos que tenemos en el juego es el Asteroide , Éste tendrá la función de moverse hacia la
nave; el asteroide necesitará tener 2 eventos principales:
el primero será moverse hacia el lado izquierdo y que al tocar el borde de la pantalla este aparezca de manera
aleatoria en otro punto de la pantalla respetando el lugar de inicio, el otro evento será que al colisionar contra
otro objeto en este caso con la nave de igual manera vuelva aparecer aleatoriamente desde su inicio.
Para el evento tocar el borde de la pantalla necesitamos el bloque cuando Asteroide.TocarBorde , en el apartado
de bloques damos clic en el objeto Asteroide y escojemos el bloque siguiente:
Al tener el bloque anterior, para que funcione necesitamos hacer que el Asteroide se mueva en el eje X y
aparezca aleatoriamente en el eje Y.
En el mismo apartado de bloques volvemos a escoger el objeto Asteroide y el bloque llamar Asteriode.MoverA :
Este bloque lo ponemos dentro del bloque TocarBorde.
Necesitamos mover el asteroide en el eje X a lo ancho de la pantalla, para ello necesitamos restarle al ancho de la
pantalla 36 pixeles, para eso tomamos el bloque de resta dentro de los bloques Matem�ticas :
Después lo colocamos en el bloque llamar Asteriode.MoverA en el eje X:
Para obtener el ancho de la pantalla, elegimos de los bloques el objeto Screen1 y después el bloque
Screen1.Ancho y lo colocamos al lado izquierdo de la resta y lo que se restará al ancho solo será un número con
valor 36 el cual lo obtenemos de los bloques Matemáticas :
Ahora, necesitamos que el Asteroide aparezca de manera aleatoria en el eje Y para eso necesitamos un bloque
que hace la función aleatoria, la tomamos dentro de los bloques Matemáticas y se llama entero aleatorio entre 1
y 100
Lo colocamos en el conector Y; necesitamos crear el aleatorio entre 1 y el Alto de la pantalla, por lo tanto
obtenemos el bloque de la pantalla (Screen1) llamado Screen1.Alto y le restamos 36, como lo hicimos
anteriormente con el eje X.
Al final el bloque quedará de esta manera:
Para hacer que el Asteroide colisione con otro objeto en este caso la Nave, colocamos el bloque cuando
Asteroide. EnColisiónCon
Al colocar el bloque hacemos extactamente lo mismo que con el bloque anterior quedando al final de esta
manera:
Ahora ya tenemos la nave y el asteroide en movimiento, pero el objetivo real del juego es que la nave lance un
disparo lasser y este destruya a los asteroides.
Antes de realizar la colisión entre objetos, necesitamos hacer que el lasser al tocar el borde de la pantalla de
nuestro móvil vuelva a aparecer enfrente de la nave (Simulando el disparo continuo).
Buscamos el objeto Lasser en el apartado de Bloques y utilizamos el bloque cuando Lasser.TocarBorde :
Después como lo hicimos con el Asteroide, moveremos el Lasser en el eje X hacia la derecha, para ello dentro de
los bloques de Lasser buscamos el que diga llamar Laser.MoverA y lo colocamos dentro del bloque anterior
quedando de esta manera:
Ahora necesitamos que el Lasser se mueva a partir del punto indicado con anterioridad frente a la Nave, por lo
tanto se tendrá que hacer una suma que tome el punto de la Nave en el eje X más un tamaño de 40. Obtenemos
dentro de los Bloques del objeto Nave el llamado Nave.X y lo colocamos a lado izquiero de la suma y le
sumaremos el número 40, al terminar el bloque lo colocamos en el conector X:
Para que el lasser se mueva al momento de mover la nave con nuestro dedo, necesitamos darle una posición en
el eje Y, para hacerlo buscamos dentro de Bloques el objeto Nave y aplicamos el bloque Nave.Y al final lo
insertamos en el conector Y:
Si queremos que el juego tenga más acción, necesitamos aplicar un sonido al momento que el
lasser es expulsado de la nave.
Para lo anterior volveremos al apartado de Diseñador y dentro de la Paleta buscamos el apartado Medios y
buscamos el objeto Sonido. Solo necesitamos arrastrarlo hacia nuestro Visor.
Nota: El objeto Sonido no formará parte de los objetos visibles dentro del juego por lo
que se almacenará en la parte de abajo del visor llamado Componentes no visibles
Elegimos el objeto Sonido1 y en el apartado de propiedades en Origen agregamos el sonido con formato mp3
que acabamos de descargar:
Para que el sonido se reprodusca volveremos al programador de Bloques , de entre los bloques elegimos al
elemento Sonido1 y buscamos el bloque llamar Sonido1.Reproducir y lo colocamos justo debajo de llamar
Lasser.MoverA
Para la colisión del lasser contra el asteroide lo haremos exactamente igual al bloque anterior pero ahora
utilizaremos el bloque cuando Lasser.EnColisiónCon quedando de la siguiente manera:
Ya tenemos configurado el juego y funcionando hasta en este momento, pero se verá mucho mejor si al
momento de destruir un Asteroide nuestro juego contabilizara cada uno de los asteroides destruidos.
Para lo anterior crearemos una variable global la cual desde un inicio se mantendrá en 0, esta variable la
llamaremos contador .
Dentro del apartado de bloques, buscaremos los bloques de tipo Variables y utilizamos el bloque inicializar
global nombre como :
Ese bloque no lo pondremos dentro de un bloque específico, simplemente lo dejaremos en el visor de bloques,
pero cambiaremos el atributo nombre por el de contador y agregamos al conector un 0.
Necesitamos que cada vez que nuestro Lasser derribe un Asteroide se incremente en 1 para esto a la Variable
Contador le asignaremos la suma de la misma variable más 1, como en la siguiente imagen:
El bloque anterior lo pondremos justo de bajo de la reproducción del sonido de esta manera:
Al momento de tener el contador listo necesitamos mostrarlo en el juego, para ello utilizaremos el titulo en la
Pantalla y allá colocaremos el contador.
Nos vamor al apartado de bloques, buscamos el objeto Screen1 y despues el bloque poner Screen1.Título como
:
Pondremos un título que nos diga cuando asteroides están destruidos y por consecuente el contador; como son
dos bloques que necesitamos poner utilizaremos uno que los una en conjunto.
En el apartado de bloques buscamos los bloques de tipo Texto y despues elegimos el bloque Unir y lo agregamos
al conector del bloque anterior:
En este bloque de unión agregaremos un texto y la variable global. Para el texto desde los bloques de tipo Texto
agregamos el bloque siguiente:
En este bloque solo bastará ponerle la siguiente leyenda: Meteoritos destruidos y lo colocamos en el primer
conector de unir :
La siguiente parte de la unión es agregar el contador, utilzamos el bloque Tomar global contador que esta dentro
de los bloques de tipo Variables quedará de la siguiente manera:
Para terminar, colocamos este bloque debajo del anterior de esta manera:
Terminamos con nuestro juego, solo nos quedará probarlo en Android y pensar en las posibles mejoras que se le
puede dar.
Instituto Tecnológico Superior de San Luis Potosí, Capital.
ITSSLPC
El contenido está bajo licencia Creative Commons
