17/10/2012

Desarrollo de aplicaciones en Android

Construyendo un videojuego en AppInventor M. en C. Roberto Martnez Romn

Departamento de Tecnologas de Informacin y Computacin TEC de Monterrey, campus Estado de Mxico

Ing. Roberto Martnez Romn rmroman@itesm.mx

17/10/2012

Conectndose a AppInventor
Abre un browser y carga la siguiente direccin:
http://www.appinventor.mit.edu/

Accesando al diseador en lnea

Hacer click sobre el botn Invent. Te pedir una cuenta de Google.

Ing. Roberto Martnez Romn rmroman@itesm.mx

17/10/2012

Creando un proyecto
Haz click en el botn New para crear un proyecto y nmbralo Whack_A_Mole.

Configurando la pantalla
Cambia el ttulo de la pantalla a WhackAMole. Cambia el color de fondo a Light Gray.

Ing. Roberto Martnez Romn rmroman@itesm.mx

17/10/2012

Agregando componentes
Agrega un Canvas a la pantalla.
Nombre: canvas. Dimensiones: el ancho de su contenedor y 300 de alto.

Agregando componentes
Agrega un ImageSprite sobre el canvas.
Nombre: topo. Picture: la imagen topo.png.

Ing. Roberto Martnez Romn rmroman@itesm.mx

17/10/2012

Otros componentes
Agrega un TextBox.
Nombre: puntos Texto: 0 Ancho: El de su contenedor. TextAlignment: center

Agrega un Button.
Nombre: botonReset Texto: Reset Ancho: El de su contenedor.

Componentes no visibles
Agrega un Clock.
Nombre: timer TimeInterval: 1000

Agrega un TextToSpeech.
Nombre: speaker

Ing. Roberto Martnez Romn rmroman@itesm.mx

17/10/2012

Agregando lgica al juego

Haz click en el botn Open the Blocks Editor.
Esto descarga una aplicacin que servir para definir la lgica.

Editor de bloques

Debes tener instalado AppInventor en tu computadora. http://beta.appinventor.mit.edu/learn/setup/

Ing. Roberto Martnez Romn rmroman@itesm.mx

17/10/2012

Moviendo el sprite a un lugar aleatorio

De la pestaa My Blocks, selecciona el componente timer y el evento timer.Timer. Arrstralo al editor.

Lgica para mover el sprite

Esta es la lgica inicial para el timer

Ing. Roberto Martnez Romn rmroman@itesm.mx

17/10/2012

Corriendo la aplicacin
Crea un nuevo emulador dando click al botn indicado.

Corriendo la aplicacin
Conctate al emulador dando click en el botn Connect to Device y selecciona el emulador 5554.

Hasta este momento, ya puedes ver la imagen cambiando de lugar cada segundo.

Ing. Roberto Martnez Romn rmroman@itesm.mx

17/10/2012

Lgica para aplastar la imagen

Esta es la lgica para aplastar y contar cada topo.

Lgica para resetear el juego

As se resetea el juego.

Ing. Roberto Martnez Romn rmroman@itesm.mx

17/10/2012

Corriendo la aplicacin en tu telfono

Asegrate de tener instalados los drivers de tu telfono.
http://developer.android.com/tools/extras/oem-usb.html

Conecta tu telfono con el cable USB a tu computadora. Conecta el editor de bloques a tu telfono.

La aplicacin corre automticamente en el telfono. Cualquier modificacin que le hagas a la lgica o al diseo se refleja inmediatamente en la ejecucin.

Mejoras
Reiniciar el timer cada vez que aplastas un topo. Indicar que ganaste cuando acumulas 5 puntos. Super RETO: Indicar que pierdes cuando acumulas 3 errores. (Haces click pero el topo desaparece antes)

Ing. Roberto Martnez Romn rmroman@itesm.mx

10

17/10/2012

Gracias!
M. en C. Roberto Martnez Romn
rmroman@itesm.mx

Ing. Roberto Martnez Romn rmroman@itesm.mx

11