Programamos con App Inventor 5: BallBounce (juego paso a paso)

http://programamos.es

Desarrollo de apps para móviles:BallBounce: Bases para un juego

(paso a paso)

Flor Palomares, PatriciaHuertas Fernández, José IgnacioMoreno León, Jesús Moriana Coronel, María

Enero 2014

Programamos Videojuegos y Apps

5

http://programamos.es

Estas diapositivas son una obra derivada del tutorial“BallBounce Game App”

disponible en http://appinventor.mit.edu/explore/ai2/beginner-videos.html

©Programamos, Enero de 2014Algunos derechos reservados.

Este artículo se distribuye bajo la licencia“Reconocimiento-CompartirIgual 3.0 España" de CreativeCommons, disponible en

http://creativecommons.org/licenses/by-sa/3.0/es/deed.esEste documento (o uno muy similar)

está disponible en (o enlazado desde)http://programamos.es

Licencia

http://programamos.es

¿Qué queremos?

● Vamos a desarrollar una aplicación simple que podrá servir de base para la realización de juegos más complejos.

● La aplicación consistirá en una bola que podrá ser dirigida con el dedo.

● Cada vez que se empuje la bola, se deberá mover en la dirección y con la velocidad correspondiente al gesto del dedo.

http://programamos.es

Paso 1: Nuevo proyecto

● Abrimos un navegador web e introducimos: appinventor.mit.edu

● Pulsamos sobre el botón “Create”. Necesitarás una cuenta de google.

● Creamos un nuevo proyecto. Dale el nombre que quieras.

ó

http://programamos.es

Paso 2a: Diseño de la aplicación

● Vamos a necesitar arrastrar a nuestra aplicación los siguientes elementos:– Canvas– Ball

http://programamos.es

Paso 2b: Diseño de la aplicación

● Modificamos las propiedades del canvas para que rellene la pantalla del móvil.

● Aumentamos el radio de la bola.

http://programamos.es

Paso 2b: Diseño de la aplicación

● Y por último, modificamos las propiedades del Screen para deshabilitar la opción “Scrollable”

http://programamos.es

Paso 3: Bloques de la aplicación

● Nos pasamos al diseño de los bloques, seleccionando la pestaña en la esquina superior derecha.

● Aquí tendremos que programar el comportamiento de cada uno de los elementos de mi aplicación.

http://programamos.es

Paso 3.a: Programamos la bola

● Seleccionaremos la función Flung (golpear, arrastrar) para que al cuando golpeemos la bola le asignemos la dirección y velocidad.

http://programamos.es

Paso 3.b: Programamos la bola

● Para ello, tendremos que establecer los valores de “Heading” y “Speed” a los que tenga la función “Flung”.

● Arrastramos dentro● Asignamos los valores de

Speed y heading del evento Flung

http://programamos.es

Paso 3.c: Programamos la bola

● Para tomar los valores una variable de un evento tendremos que posicionarnos encima y seleccionar “get”:

● Finalmente quedaría:

http://programamos.es

Paso 4: Vemos el resultado

● Para poder probar el resultado tenemos distintas opciones:– Utilizar un emulador (necesitamos instalar cosas en

nuestro equipo).– Utilizar el móvil conectándolo por USB. Ver cómo.– Utilizar el móvil a través de la red wifi de tu casa

(RECOMENDADO).● Puedes ver cómo aquí.

http://programamos.es

Paso 5: Una mejora, ¿sabrías hacerlo?

● Al probarlo, podemos observar que al chocar con los bordes no rebota.

● ¿Podrías solucionarlo?

http://programamos.es

Paso 5: Una mejora, ¿sabrías hacerlo?

● Esta es la solución:

http://programamos.es

Paso 6: ¿Se te ocurre cómo mejorarlo?

● Esto es solo el principio, ¿cómo podrías mejorarlo?● Algunas ideas: videojuego de minigolf, salvar

obstáculos, …● Realiza mejoras y compártelas con tus compañeros/as.