En esta nueva entrada del curso de introducción a MIT App Inventor, vamos a crear un programa que modifique la posición de una pelota dentro de un “canvas” mediante pulsaciones en botones.
Creando la interfaz
Para crear la interfaz utilizaremos “layaouts” para organizar los elementos, botones para controlar el movimiento y un “canvas” que contendrá la pelota que vamos a mover.
En primer lugar, incluimos un “layaout” vertical, donde incluiremos el resto de elementos modificando su ancho y alto para que se ajusten al contenedor. A continuación, incluimos el “canvas” y modificamos su ancho y alto para que se ajusten al contenedor.
Para terminar con el “canvas”, arrastramos el elemento Ball (pelota) dentro de éste. En sus propiedades, modificamos el color a verde, cambiamos el radio a 20 y modificamos su posición para que sea X = 0 e Y = 0.
A continuación, arrastramos un elemento disposición vertical debajo del “canvas”, dejando en automático la propiedad alto y modificando su ancho a ajustar al contenedor. Si se modifica el alto a ajustar al contenedor nos facilitará incluir los elementos dentro del mismo, pero después modificaremos su alto a automático. Dentro de éste, un botón, y otro elemento de disposición vertical (que utilizaremos como separador), cambiando su alto a 10 pixels y su ancho a ajustar al contenedor. En el caso del botón, modificaremos el ancho para ajustar al contenedor y dejaremos el alto en automático.
Además, modificamos el texto en el botón para que muestre el carácter “^”, cambiamos la propiedad shape (forma), a rounded(redondeado) y renombramos el botón como up.
Para poner los tres botones centrales utilizaremos una disposición horizontal, a la que modificamos su ancho para que sea fill parent, es decir, se ajuste al contenedor, en el que incluiremos los siguientes elementos: 3 botones y 2 disposiciones horizontales (puede usarse cualquiera de ellas) que tendrán un tamaño de 10 pixels de ancho y alto.
En el caso de los botones, modificamos su tamaño para que se ajusten al contenedor, así cambiarán su ancho ajustándose a la pantalla. De izquierda a derecha, cambiaremos su texto y nombre para que sean:
- < left
- o reset
- > right
También cambiamos la propiedad shape para que sea rounded.
Por último, incluimos otro botón debajo de la disposición horizontal donde hemos incluido los tres botones. Para este botón, modificamos el ancho para que se ajuste al contenedor, su nombre por Down, su texto por v y la forma por redondeada. Incluimos un elemento de disposición, con un alto de 10 pixels para que funcione como separador.
A continuación, debajo del botón Down incluimos un “layout” vertical, modificando su alto a 10 pixels y su ancho a ocupar el contenedor, utilizando esta disposición como separador, evitando así que el botón se “funda” con el borde de la pantalla. Para finalizar, cambiamos el ancho del contenedor vertical que está debajo del canvas para que sea automático.
Programando la aplicación
Para programar la aplicación vamos a la pestaña Blocks. En primer lugar, programaremos el botón UP arrastrando el bloque. Clic:
A continuación, arrastramos el bloque Call Ball1.MoveTo y lo unimos al bloque anterior.
Para programar el movimiento utilizaremos los valores X e Y del bloque anterior. En este caso, la posición X será constante y se modificará la posición Y, reduciendo su valor en el número de unidades que determinemos. Para programar el movimiento de la X, dentro de Ball1 arrastramos el bloque Ball1.X y para el movimiento Y un bloque de resta, donde restaremos la cantidad 10 a la posición actual de Y.
Cambiamos Ball1.X por Ball1.Y, para tomar la posición Y actual de Ball1.
Para programar el movimiento del botón Down, duplicamos el conjunto anterior, modificamos Up por Down y cambiamos el bloque resta por suma.
En el caso de los botones left y right modificaremos la posición X, manteniendo constante la posición Y. Para el botón left se reducirá la posición y para el botón right, aumentará.
Por último, programaremos el botón reset igualando X e Y a 0.
