Tema 1
ACTIVIDAD 5 (GUIADA) - APP JUEGO DEL FRONTÓN
El frontón es un clásico de los juegos para ordenador. Se trata de una bola que rebota en los bordes de la pantalla y una pala (rectángulo) que es manejado por el jugador/a. Cuando la bola rebasa a la pala y colisiona con el borde inferior de la pantalla, el jugador pierde y el juego se detiene.
Existen diferentes maneras para controlar el movimiento de la pala (nuestro Sprite). Nosotros utilizaremos aquí el “arrastre” con el dedo (por facilidad en la programación, por tanto tenemos que diseñar una pala que se mueva con el dedo del jugador/a.
Parte de Diseño:
PASO 1:
Entra en App Inventor y lógate con tu cuenta del Instituto.
Crea un nuevo proyecto y llámalo “Fronton_tu_nombre_y_apellido", sin tildes (debes poner tu nombre para identificar el archivo)
Descarga en tu carpeta del ordenador la imagen de la pala, pinchando aquí: pala.jpg
PASO 2: Modifica las siguientes propiedades para Screen1:
DispHorizontal: Centro:3
Orientación de la Pantalla: Vertical
Nombre de la App: Frontón (este será el nombre que aparecerá debajo del icono en nuestro dispositivo móvil)
Título: Frontón
Icono: Busca un logo para tu app en Internet, que tenga que ver con el juego. Descarga la imagen y súbela a la propiedad Icono.
PASO 3: En la parte superior de la pantalla colocaremos un componente de Disposición Horizontal donde alojaremos, de momento, un botón de Inicio para que al hacer clic sobre él comience de nuevo el juego colocando pala y bola en sus posiciones iniciales. Esta estructura nos facilitará posibles ampliaciones futuras (activar sonido, contador de puntos, otros botones, etc.). Por consiguiente, hacemos clic sobre el componente Disposición Horizontal del bloque Disposición (columna Paleta) y lo arrastramos hasta el Visor, situándose en la parte superior de la pantalla principal (Screen1). Aparecerá centrado en la ventana pues, anteriormente, elegimos Disposición Horizontal “Centro” en las propiedades de Screen1. Las propiedades de este componente son:
DispHorizontal: Centro (todos los componentes que añadamos en su interior quedarán centrados horizontalmente respecto a esta DisposiciónHorizontal1)
DispVertical: Centro (todos los componentes que añadamos en su interior quedarán centrados verticalmente respecto a esta DisposiciónHorizontal1)
Alto: 10 por ciento
Ancho: Ajustar al contenedor
PASO 4: Ahora hacemos clic sobre el componente Botón del bloque Interfaz de usuario (columna Paleta) y lo arrastramos hasta el interior del componente DisposiciónHorizontal1. Aparecerá centrado tanto vertical como horizontalmente pues así lo indicamos anteriormente en las propiedades de DisposiciónHorizontal1
En la columna Componentes renombramos Botón1 por “boton_Inicio” y variamos las siguientes Propiedades (columna derecha):
Color de Fondo: Rosa
Texto: Empezar
PASO 5:
Debajo de la Disposición Horizontal añadiremos un componente Lienzo, que albergará un componente Pelota y un componente SpriteImage. Todos estos componentes están en el apartado Dibujo y animación.
Subimos a App Inventor el archivo “pala.jpg” descargado antes (Botón “Subir archivo…”)
El Lienzo es un panel rectangular sensible al tacto dentro del cual se puede dibujar y también mover Sprites (imágenes). Hay eventos que permiten saber cuándo y dónde se ha tocado un Lienzo, o hacia dónde se ha arrastrado un Sprite (Imagen o Pelota).
Los Sprites son objetos gráficos que podemos mover, arrastrar, lanzar y hacerlos interactuar con otros Sprites. El componente Pelota es un Sprite que viene predeterminado (por su uso frecuente en juegos) en App Inventor. En la columna Propiedades (Editor de Diseño) podremos indicarle el radio, color, velocidad, dirección, etc.
El componente SpriteImage es un Sprite que viene representado por una imagen que hemos subido previamente a App Inventor. Lo usaremos para la pala.
Propiedades de Lienzo1:
Alto: 85 por ciento
Ancho: Ajustar al contenedor…
ColorDeFondo: Negro
Propiedades de Pelota1:
Radio: 20
El radio indica número de píxeles. Un intervalo de 10 (milisegundos) y una velocidad de 5 (píxeles) indica que cada 10 milisegundos la pelota se moverá 5 píxeles (en la dirección indicada). Dirección es un ángulo que viene expresado en grados: 0 grados indica la derecha. 90 grados, arriba. 180, a la izquierda. 270, hacia abajo.
ColorDePintura: Violeta
Intervalo: 10 (milisegundos)
Propiedades de SpriteImage:
Foto: Seleccionamos “pala.jpg”
X: 137
Y: 325
La posición X:0 , Y:0 representa la esquina superior izquierda del lienzo. X:25 Y:50 indica 25 píxeles hacia la derecha y 50 hacia abajo (coordenadas cartesianas).
Parte de Bloques:
PASO 1: Programamos el botón "Empezar"
Dentro del Editor de Bloques (botón Bloques) hacemos clic sobre el componente boton_inicio. Elegimos la primera etiqueta: cuando boton_inicio.Clic.
Añadimos en su interior la etiqueta llamar “Pelota.MoverA” para situar el Sprite “Pelota1” siempre en la misma posición al iniciar la partida. La posición horizontal (X) será la mitad del ancho del lienzo. Para esto necesitamos las etiquetas dividir y numérica (“2”) que se encuentran en el apartado Matemáticas (Integrados). Para la posición vertical (Y) seleccionamos una etiqueta numérica escribiendo el valor “20” es su interior.
Establecemos para el Sprite “Pelota1” una velocidad igual a ”5” y una dirección aleatoria entre 45º y 135º con las etiquetas “poner Pelota1. Dirección” y “poner Pelota1.Velocidad”. El bloque quedaría como se muestra en la imagen.
PASO 2: Conseguir que la pelota rebote
Al hacer clic sobre el componente “Pelota1” nos aparecerá la etiqueta “cuando Pelota1.TocarBorde” que deberemos seleccionar. En su interior colocamos la etiqueta “llamar Pelota1.Botar” con la etiqueta “tomar borde” (se obtiene al pasar el cursor sobre la palabra “Borde” de la etiqueta “.TocarBorde”)
PASO 3: Mover la pala sólo en horizontal
Utilizaremos la etiqueta “cuando SpriteImagen1.Arrastrado”. Dentro pondremos la etiqueta “llamar SpriteImagen:MoverA”, indicando como valor para X: XActual (etiqueta “tomar XActual”) y para Y: la etiqueta numérica “325” (valor en la parte baja de la pantalla del móvil). Así, cuando arrastremos con el dedo la “pala” sobre el lienzo, ésta se moverá sólo en la dirección horizontal hasta la posición actual de nuestro dedo.
PASO 4: Choque de la pelota con la pala
Queremos que la Pelota rebote en la Pala cuando choque con ella. Para que tenga este comportamiento debemos seleccionar la etiqueta “cuando Pelota1:EnColisionCon” del componente “Pelota1”, y dentro colocar la etiqueta “poner Pelota1.Dirección como” y añadimos “entero aleatorio entre 45º y 135º. Es decir, cambiando la dirección del Sprite Pelota conseguimos el efecto rebote.
PASO 5: Probar en el móvil y entregar
Por último probamos el juego con AI Companion para ver si funciona. Descargamos el archivo .aia y el .apk y ubimos los dos archivos a Classroom