Juego del 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. 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 (Sprite). Nosotros utilizaremos aquí el “arrastre” con el dedo (por su simplicidad en la programación).

Para diseñar la “pala” utilizaremos el editor de imágenes “pixlr web” disponible en la dirección: https://pixlr.com/es/. En la parte superior, elegimos PIXLR E

1. Paso 1. Diseñando la “pala”

En la nueva ventana hacemos clic en “Crear nuevo”.

A continuación, establecemos su tamaño en 60x20 píxeles, nombre “pala” y rellenamos de color (“azul”, por ejemplo).

La “pala” es la propia imagen que hemos creado, un rectángulo de color “azul”.

Por último, guardamos (dentro del menú Archivo) en formato “jpg” la imagen creada haciendo clic en “Descargar”.

Si ha tenido alguna dificultad para crear el archivo “pala.jpg” se lo puede descargar aquí

2. Paso 2. Creamos el Proyecto en App Inventor

Entramos en la dirección de App Inventor: http://ai2.appinventor.mit.edu indicando nuestra cuenta de Gmail que utilizaremos para acceder al servicio.

Seleccionamos el idioma español y hacemos clic en el botón “Comenzar un proyecto nuevo…” Elegiremos un nombre para nuestro Proyecto, por ejemplo, “Fronton” (no está permitido el uso de tildes para nombrar un proyecto).

Una vez aceptada la operación se cargará en pantalla el Editor de Diseño.

En la columna Componentes estará seleccionada la ventana principal que por defecto es nombrada como “Screen1”. Dicho nombre no se puede modificar. Veremos más adelante que cuando añadimos ventanas nuevas si será posible renombrarlas.

En la columna Propiedades (para este componente) indicaremos que deseamos una disposición horizontal “centrada” (Centro:3), nombre de la App: Frontón (este será el nombre que aparecerá debajo del icono en nuestro dispositivo móvil) y seleccionamos orientación “Vertical” para la pantalla. En Título escribiremos “Frontón”. Lo demás lo dejamos tal y como está.

Propiedades del componente Screen1:

• • OrientaciónDeLaPantalla: Vertical

  • Título: Frontón

3. Paso 3. Añadimos los componentes

Ahora iremos añadiendo a la pantalla “Screen1” (Visor) los componentes necesarios, eligiendo el lugar en el que deseamos que aparezcan (aquellos que sean visibles). Es el momento de decidir el “aspecto” que tendrá nuestra App, por lo que elegiremos color, tamaño, forma, etc., para cada uno de los componentes.

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.

Para este componente Disposición Horizontal estableceremos las siguientes Propiedades (columna derecha):

Propiedades de DisposiciónHorizontal1:

• 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

A continuación, 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”. Cuando en una aplicación tenemos un gran número de componentes, es muy conveniente renombrarlos adecuadamente para facilitar su programación (al recordarnos la función que tiene asignada)

Para este componente boton_Inicio estableceremos las siguientes Propiedades (columna derecha):

Hemos renombramos Botón1 por Boton_Inicio

• Color de Fondo: Rosa

• Texto: Empezar

Debajo de la Disposición Horizontal añadiremos un componente Lienzo, que albergará un componente Pelota y un componente SpriteImage. Todos ellos se encuentran dentro del apartado Dibujo y animación.

Subimos a App Inventor el archivo “pala.jpg” creado anteriormente (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). Existen métodos para dibujar puntos, líneas y círculos.

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. Constituyen la base de los juegos gráficos basados en movimiento.

Propiedades de Lienzo1:

• Alto: 85 por ciento

• Ancho: Ajustar al contenedor…

• ColorDeFondo: Negro

Propiedades de Pelota1:

• Radio: 20

• ColorDePintura: Violeta

• Intervalo: 10 (milisegundos)

El radio de Pelota 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 (sexagesimales): 0 grados indica la derecha. 90 grados, arriba. 180, a la izquierda. 270, hacia abajo.

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

4. Paso 4. Programamos el botón Empezar (Inicio)

Conectamos nuestro dispositivo móvil con App Inventor para ir comprobando el funcionamiento de la aplicación.

Vamos a proporcionarles funcionalidad a los componente que hemos agregado hasta este momento. Para ello entraremos en el Editor de Bloques haciendo clic en el botón Bloques (situado en la parte superior derecha).

Dentro del Editor de Bloques (botón Bloques) hacemos clic sobre el componente boton_inicio (en ventana Bloques). Se desplegarán las diferentes opciones disponibles. 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) la establecemos a la mitad del ancho del lienzo. Para ello 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.

Nota. Haciendo clic con el botón derecho del ratón sobre cualquier etiqueta nos permite “Duplicarla”, lo que nos facilitará la escritura de código.

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.

Si pulsamos el botón Empezar de nuestro dispositivo móvil observamos que el Sprite “Pelota” se mueve hacia la parte superior del Lienzo y se desliza hasta alcanzar una de las esquinas.

Nuestro siguiente paso será conseguir que la bola rebote cuando toque los bordes.

5. Paso 5. Rebote de la Pelota

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”) como se indica en la figura.

De esta forma conseguimos un movimiento continuo de la pelota.

Debemos establecer ahora el manejo y control de la “pala”.

6. Paso 6. Arrastre de la Pala

Como se indicó anteriormente se pueden definir diferentes mecanismos para el manejo de la “pala”. En nuestro caso utilizaremos la etiqueta “cuando SpriteImagen1.Arrastrado”. En su interior agregaremos la etiqueta “llamar SpriteImagen:MoverA”, indicando como valor para X: XActual (etiqueta “tomar XActual”) y para Y: la etiqueta numérica “325” (valor establecido durante el diseño). De esta manera, cuando arrastremos con el dedo la “pala” sobre el lienzo, está se moverá sólo en la dirección horizontal hasta la posición actual de nuestro dedo.

7. Paso 7. Colisión Pelota-Pala

Deseamos que la Pelota rebote en la Pala cuando colisione con ella. Para que tenga este comportamiento debemos seleccionar la etiqueta “cuando Pelota1:EnColisionCon” del componente “Pelota1”, y en su interior 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.

Comprobamos el funcionamiento en nuestro dispositivo móvil.

8. Paso 8. Generamos .apk y guardamos

Finalmente, generamos el archivo .apk y los guardamos en el ordenador o bien generamos el código QR para instalarlo en nuestro dispositivo móvil. Antes de realizar esta operación podemos añadir una imagen como icono de nuestra aplicación (aparecerá en nuestro dispositivo asociada a nuestra App). Para ello debemos subir una imagen (Columna Componentes apartado Medios). En la propiedad Icono del componente Screen1, seleccionamos el nombre del archivo de nuestra imagen.