17/10/2012
Desarrollo de aplicaciones en Android
Construyendo un videojuego en AppInventor M. en C. Roberto Martínez Román Departamento de Tecnologías de Información y Computación TEC de Monterrey, Monterrey, campus Estado de México
Ing. Roberto Martínez Román
[email protected]
1
17/10/2012
Conectándose a AppInventor
Abre un browser y carga la siguiente dirección:
http://www.appinventor.mit.edu/
Accesando al diseñador en línea
Hacer click sobre el botón Invent.
Te pedirá una cuenta de Google.
Ing. Roberto Martínez Román
[email protected]
2
17/10/2012
Creando un proyecto
Haz click en el botón New para crear un proyecto y nómbralo Whack_A_Mole .
Configurando la pantalla
Cambia el título de la pantalla a WhackAMole.
Cambia el color de fondo a Light Gray.
Ing. Roberto Martínez Román
[email protected]
3
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 Martínez Román
[email protected]
4
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.
Ing. Roberto Martínez Román
[email protected]
Nombre: speaker
5
17/10/2012
Agregando lógica al juego
Haz click en el botón Open the Blocks Editor.
Esto descarga una aplicación que servirá para definir la lógica.
Editor de bloques
Debes tener instalado AppInventor en tu computadora. http://beta.appinventor.mit.edu/learn/setup/
Ing. Roberto Martínez Román
[email protected]
6
17/10/2012
Moviendo el sprite a un lugar aleatorio
De la pestaña My Blocks, selecciona el componente timer y el evento timer.Timer . Arrástralo al editor.
Lógica para mover el sprite
Esta es la lógica inicial para el timer
Ing. Roberto Martínez Román
[email protected]
7
17/10/2012
Corriendo la aplicación
Crea un nuevo emulador dando click al botón indicado.
Corriendo la aplicación
Conéctate al emulador dando click en el botón Connect to Device y selecciona el emulador 5554.
Hasta este momento, ya puedes ver la imagen cambiando de lugar cada segundo.
Ing. Roberto Martínez Román
[email protected]
8
17/10/2012
Lógica para aplastar la imagen
Esta es la lógica para aplastar y contar cada topo.
Lógica para resetear el juego
Así se resetea el juego.
Ing. Roberto Martínez Román
[email protected]
9
17/10/2012
Corriendo la aplicación en tu teléfono
Asegúrate de tener instalados los drivers de tu teléfono. http://developer.android.com/tools/extras/oem-usb.html
Conecta tu teléfono con el cable USB a tu computadora. Conecta el editor de bloques a tu teléfono.
La aplicación corre automáticamente en el teléfono. Cualquier modificación que le hagas a la lógica o al diseño se refleja inmediatamente en la ejecución.
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 Martínez Román
[email protected]
10
17/10/2012
¡Gracias! M. en C. Roberto Martínez Román
[email protected]
Ing. Roberto Martínez Román
[email protected]
11