Semana TIC. App Inventor y el juego de la cesta

El objetivo de este taller de la semana TIC será:

Comprender qué es la programación, su utilidad y su funcionamiento con el desarrollo de una aplicación para móviles con App Inventor

La programación es un arte como cualquier otro. Podemos realizar una comparación con el arte de cocinar, donde:

  • Se realizan una secuencia de pasos para conseguir la ansiada tortilla (instrucciones individuales encadenadas que le indican al ordenador que hacer )
  • Se toman un conjunto de  Decisiones (instrucciones que en base a una condición realizan una acción u otra: sentencia if, sentencia switch). Por ejemplo si primer batir los huevos, o si primero cocinar la patata, …
  • Se realizarán una serie de Acciones repetitivas (instrucciones que realizan una acción un número determinado de veces: instrucciones como for-each, do-while, while)

En este taller usaremos la herramienta de App Inventor para acercarnos al mundo de la programación y para ello realizaremos el juego de coger manzanas con un canastillo de un árbol.

En este taller, y debido a la duración (una hora) del mismo, partiremos de una versión inicial del proyecto  a la cual se le irán incorporando nuevas funcionalidades hasta conseguir el juego final.

Para comenzar el proyecto desde cero, pincha aquí. En el siguiente apartado se parte de una versión de proyecto, básica, y se irán incorporando nuevas funcionalidades.

Juego de la manzana

El proceso de creación de la aplicación será el siguiente:

  • Configurar/Diseñar la pantalla del juego
  • Incorporar la lógica o funcionalidad:
    1. Programar el inicio de la app
    2. Programar qué manzanas entra en funcionamiento y cómo
    3. Programar para que la manzana vuelva a caer
    4. Controlar cuando la cesta colisiona con la manzana
    5. Programar el funcionamiento de una y más manzanas
    6. Programar el movimiento de la cesta
    7. Activar manzana2 y manzana3
    8. Mejorar la colisiones de las manzanas
    9. Mejoras a añadir

Los puntos del 1-4 se llevarán a cabo desde un proyecto vacío, desde Cero

Mientras que los puntos del 5 al 9 partirán de un proyecto iniciado (qué os podéis descargar) y que hemos denominado «NO desde cero» (y será el usado en el taller)

Juego de la manzana (NO desde cero)

El proyecto se encuentra actualmente configurado: con una imagen de fondo, una canasta para recoger las manzanas (pelotas), tres manzanas y la lógica para iniciar el juego, que una manzana vuelva a caer cuando llega al fondo de la pantalla y actualizar la puntuación cuando la cesta ha cogido la manzana.

 

1. Lógica: Iniciar el juego con una única manzana

Cuando se inicia el juego, las tres manzanas caen y cuando llegan al final de la pantalla, sólo una continua. La idea es empezar únicamente desde el inicio con una manzana y según se vaya alcanzando una puntuación se habiliten el resto.

Se debe deshabilitar la Pelota2 (ball2) y Pelota3 (ball3) así como configurarla para que se sitúen en el punto de partida.

Lo más sencillo para hacer esta operación es dentro de la operabilidad de «cuando screen1.inicializar» es duplicar las operaciones que se realizan con ball1 pero poniendo la propiedad visible de ball2 y ball3 a false,  tal y como se muestra en la imagen (para duplicar pulsar sobre la instrucción a duplicar con el botón derecho)

2. Lógica: Mover la cesta

En este paso moveremos la cesta en la coordenada X cuando se pulse la pantalla. Para ello será necesario en los bloques, seleccionar el componente «canvas» y seleccionar «cuando Canvas1.tocar» y decirle que se situe en la posición X de la pantalla donde se ha pulsado (tal y como se muestra en la imagen)

3. Lógica: Activar manzanas por puntuación

El siguiente paso será activar la Manzana2 y Manzana3 cuando se alcance una puntuación (con 5 puntos se activa la manzana2 y con 15 la manzana 3). Para ello tendremos que modificar el procedimiento «updateScore» para que SI se alcanza la puntuación establecida, se active.

IMPORTANTE: «Si se alcanza» es una instrucción selectiva, es decir, una de las instrucciones más importante en programación. Si se cumple una condición, haz tal acción. En nuestro caso si se alcanza 5 puntos, activa la Manzana2.

Al activar las manzanas, tendremos que configurar para que cuando las nuevas manzanas se vayan por el borde de la pantalla, vuelvan al inicio. Por tanto lo más sencillo es duplicar «cuando ball1.TocarBorde» tal y como se muestra:

4. Lógica: Mejorar la colisión de la manzana con las pelotas

En este último paso mejoraremos la colisión de la manzana con las pelotas para:

  • Cuando colisioné con la Manzana3, no sume sino reste 3.
  • Para que haga un ruido cuando se produzca
  • Volver a situar la manzana al inicio y no siga bajando.

5. Solución completa

En la siguiente imagen se muestra el diagrama de bloques completo.

6. Posibles añadidos

  • Juego estilo kamikaze: Cuando la manzana no se captura con la canasta, se resta un punto cuando llega al final de la pantalla.
  • Manzanas a distintas velocidades: El objetivo es alcanzada una puntuación, cambiar la velocidad de una de las manzanas por un valor aleatorio entre 10 y 30.
  • Juego mágico: Cuando una pelota llega a la mitad de la pantalla, cambia su posición X.
  • Juego rebote:  Las manzanas tiene un ángulo de caída de forma que cuando choque con la pared, rebota.
  • Deja Volar tu imaginación: Mejoras libres para que el estudiante imagine que puede añadir.


Juego de la Manzana desde Cero

1. AppInventor y su registro

El primer paso será acceder a AppInventor y pinchar en la parte superior derecha en «Create Apps!». El registro deberá realizarse mediante un cuenta de correo electrónico de google. Y ya esta!!!!

2. Comenzando el proyecto

A continuación, y como en cualquier desarrollo informático, será necesario crearse un proyecto –> «Start new project» y se proporciona un nombre al mismo.

3. Pantalla principal

La pantalla principal se encuentra formada:

  • Paleta de componentes (parte izquierda): En ella se encuentran los distintos componentes gráficos que se pueden usar en nuestra aplicación: botones, etiquetas, imágenes, etc. Se encuentran agrupados por funcionalidades.
  • Visor (parte central): En la misma se muestra como va quedando la aplicación. Para incorporar un componente, es tan sencillo como arrastrarlo de la paleta.
  • Componentes (parte central). Te muestra los componentes que actualmente hay en el proyecto.
  • Propiedades (parte derecha). Se pueden modificar ciertas característica del componente que tengamos seleccionado en el apartado componentes. Por ejemplo de un botón: el texto que aparece, el tamaño, el color, etc.

4. Pantalla del Juego

El primer paso será configurar la pantalla principal del juego. Pasos:

  • Sobre la paleta de componentes, seleccionamos «Disposición» (layout) y arrastramos «Disposición Tabular» (TableArrangement). Se debe configurar en Propiedades (parte derecha de la ventana)
    • Columnas (column): 5 y Filas(row): 1
    • Ancho (width): Ajustar al contenedor (Fill parent)
  • Sobre el componente añadido (disposición tabular) arrastramos un Botón (button) y una etiqueta (label)
    • Botón: Cambiar únicamente el texto (text) por Reset (sobre la primera columna)
    • Etiqueta:  Cambiar únicamente el texto (text) por Score (sobre la cuarta columna)
  • Sobre el visor (screen) de la aplicación arrastrar un componente Canvas, dentro de Dibujo y Animación (Drawing and Animation). Se debe configurar:
    • Ancho (width): Ajustar al contenedor (Fill parent)
    • Alto (height): 90 por ciento
    • Imagen de fondo (backgroundimagen). Descargar la siguiente imagen y establecerla como imagen de fondo.
  • Sobre el componente canvas arrastrar tres pelotas (ball) y un componente ImageSprite, todos dentro de la paleta de componentes en el apartado Dibujo y Animación (Drawing and Animation). Configuración:
    • Pelotas (ball): Dirección (Heading) con valor 270 (hacía donde se va a mover),  Color (colour) con valor naranja para dos de ellas y color rojo para la otra, radio (radius) con valor 10 (establece el tamaño de la pelota), Velocidad (Speed) con valor 10 (velocidad de la pelota en movimiento)
    • Imagen (ImageSprite): Alto (height) con valor 40 pixels, Ancho (width) con valor de 60 pixels y como imagen nos descargamos la siguiente imagen.
  • Finalmente arrastraremos dos componentes Sonido (sound), los cuales se sitúan fuera de la ventana del juego. Nos descargamos los dos sonidos y se establecen en cada componente (sonido1, sonido2)

El resultado de este apartado debería ser el siguiente (pinchar).

5. Primera ejecución del juego

Para poder probar lo realizado hasta el momento se puede usar tres alternativas principalmente (todas ellas dentro del menú conectar):

  1. Al companion: Se muestra un icono en la web que debe ser capturado con la aplicación MIT AI2 Companion de android. Es la opción que usaremos en este taller. Cuando se captura, se transfiere la aplicación al dispositivo móvil y se puede probar in-situ.
  2. Emulador. Es necesario instalarse una aplicación en el ordenador.
  3. USB: Se conecta el movil al ordenador y se transfiere la aplicación desarrollada.

6. Conocer como hacer la lógica del juego

Hasta este momento sólo se ha diseñado la pantalla del juego. En la actualidad cuando se inicia la aplicación, las tres bolas se desplazan hasta el final de la pantalla y no se realiza ninguna acción más. Por tanto es necesario empezar a «programar» (ya era hora!!!) la lógica/funcionalidad del juego. Para ello pulsaremos en el botón superior de la derecha «Bloque» (blocks) para entrar en modo programación. Los bloques se encuentran categorizados por:

  • Control: Engloba las distintas instrucciones de programación: selectivas, iterativas, etc.
  • Lógicas: Constituidas por aquellos operadores lógicos que pueden ser usados: igual, distintos, and, or, …
  • Matemáticas: Se sitúan todas las operaciones matemáticas que se pueden realizar.
  • Texto: Operaciones sobre información alfanumérica (carácteres).
  • Listas: Usada para formar un conjunto de elementos junto con sus operaciones.
  • Colores: Establecer colores.
  • Variables: Para definir datos con los que operar.
  • Procedimientos: Rutinas para ser reutilizadas.

Igualmente por cada componente, si te sitúas en uno de ellos, puedes ver las operaciones que puedes realizar con ellos.

 

7. Primera lógica del juego: Configurar las pelotas

El primer paso que vamos a realizar es configurar cuando se inicia la aplicación. Para ello nos situamos en modo Bloque sobre la pantalla (Screen) y selecionamos «Cuando screen1.inicializar» y estableceremos:

  • La pelota1 se debe establecer como visible y poner la posición X en pantalla aleatoria y la posición al inicio de la pantalla.
  • Igualmente pondremos la cesta al final de la pantalla.

Las instrucciones a poner se muestran en la siguiente imagen.

8. Lógica: Restablecer que la pelota vuelva a caer

El segundo paso será programar para que la pelota se reinicie (vuelva a caer) cuando llega al final de la pantalla. Para ello es necesario que cuando ball1.tocarborde volver a fijar una nueva posición X y poner la posición Y al valor 0, tal y como se puede ver en la imagen.

9. Lógica: Cesta coge la pelota

Este tercer paso implica: controlar cuando la cesta colisiona con una pelota así como incrementar la puntuación del jugador.

  1. Añadiremos una variable global denominada «Puntuación» que tendrá el valor 0 y que usará para llevar la puntuación del número de veces que la cesta coge la manzana (pelota).
  2. En inicializar la pantalla pondremos la variable a 0.
  3. Definiremos un procedimiento «updatescore» que se encarga de incrementar la puntuación (ver imagen)
  4. Configuraremos para que cuando la cesta entra en colisión haga la llamada al procedimiento «updatescore»

Todos estos pasos pueden observarse en la siguiente imagen.

Llegado a este punto, nos encontramos en el proyecto tal y como se entrega en el apartado anterior. A partir de ahora debes seguir las instrucciones indicada arriba (pincha aquí).