Este documento proporciona instrucciones paso a paso para desarrollar una aplicación móvil simple llamada BallBounce. La aplicación permitirá a los usuarios controlar una bola en la pantalla moviéndola en la dirección de su dedo. El documento explica cómo crear un nuevo proyecto en App Inventor, agregar una bola y un lienzo a la interfaz, y programar el comportamiento de la bola para que se mueva en la dirección del dedo del usuario. También sugiere posibles mejoras como agregar rebotes cuando la bola gol

1. 5
Desarrollo de apps para móviles:
BallBounce: Bases para un juego
(paso a paso)
Programamos
Videojuegos y Apps
Flor Palomares, Patricia
Huertas Fernández, José Ignacio
Moreno León, Jesús
Moriana Coronel, María
Enero 2014
http://programamos.es

2. Licencia
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 2014
Algunos derechos reservados.
Este artículo se distribuye bajo la licencia“ReconocimientoCompartirIgual 3.0 España" de CreativeCommons, disponible en
http://creativecommons.org/licenses/by-sa/3.0/es/deed.es
Este documento (o uno muy similar)
está disponible en (o enlazado desde)
http://programamos.es
http://programamos.es

3. ¿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

4. 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

5. Paso 2a: Diseño de la aplicación
●
Vamos a necesitar arrastrar a nuestra aplicación los
siguientes elementos:
– Canvas
– Ball
http://programamos.es

6. 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

7. 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

8. 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

9. 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

10. 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”.
●
●
http://programamos.es
Arrastramos dentro
Asignamos los valores de
Speed y heading del
evento Flung

11. 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

12. 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

13. 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

14. Paso 5: Una mejora, ¿sabrías hacerlo?
●
Esta es la solución:
http://programamos.es

15. 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.
http://programamos.es