Dia2

Tutorial Diario D´ ıa 2

Introducci´ on on Hola! Bienvenido Bienvenido al segundo d´ıa del taller Programa Tus Ideas :) El d´ıa de hoy comenzaremos a trabajar con el componente comp onente Lienzo, que te permite dibujar l´ıneas ınea s y c´ırculos ırcu los,, y mostrar mos trar imágenes agenes y animaciones. En el primer tutorial desarrollarás as una aplicación on estilo “paint”, donde puedes tomar una foto con la cámara y luego editarla usando l´ıneas, c´ırculos y distintos colores. Luego, aprender´ aprender ás as a programar animaciones b´ asicas asicas Atrapa a el Topo, inspirado por el juego mec´ implementado el juego Atrap anico anico donde tienes que

darle martillazos a esos pobres animalitos. Luego de una breve discusión, on, el resto de este documento consiste en material de apoyo sobre los siguientes conceptos fundamentales: el componente Lienzo, cómo omo programar usando variables , y el uso de temporizadores . En conjunto, estos componentes de AppInventor te permitirán an programar juegos bastante sofisticados. Las actividades relacionadas con juegos y animaciones las continuaremos ma˜ nana, en el D´ıa 3, por lo que es importa nana, important ntee que las domines!

1

1.

Tutorial utorial:: PintaF PintaFoto otoss

1. tutorial: pintafotos

En este tutorial presentaremos el componente Lienzo para crear aplicaciones con gráficos aficos y animaciones simples en 2 dimensiones (2D). Construirás as la aplicación on PintaFotos que permite al usuario dibujar en la pantalla usando distintos colores, usando una imagen de fondo y dibujando sobre ella. PintaFoto otoss fue uno de los primer primeros os progra programas mas desarr desarroll ollado adoss para para Un dato dato hist´ hist´ orico : PintaF demostrar el potencial de los computadores, en la decada de 1970. En aquel entonces, hacer algo tan simple como esta aplicación on de dibujo era algo muy complejo, y los resultados no eran perfectos. Pero ahora, con AppInventor, cualquiera puede rápidamente armar una aplicación on de dibujo bastante buena, lo que sirve de excelente punto de partida para luego hacer juegos 2D. La interfaz de usuario de PintaFotos se muestra en la Figura 1.1 1.1..

Figura 1.1: Interfaz de usuario aplicación on PintaFotos En esta aplicación on podrás: as: Bañar nar tu dedo en un tarro de pintura virtual para dibujar en este color. Arrastrar tu dedo en la pantalla para dibujar una l´ınea. 2

1. tutorial: pintafotos Tocar la pantalla para hacer puntos. Usar el botón on de abajo para limpiar la pantalla. Agrandar o achicar el tamaño no de los puntos con los botones abajo. Sacar una foto con la cámara amara y luego dibujar encima de esta foto.

Qué Aprender´ as Siguiendo este tutorial aprenderás as a: Usar el componente componente Lienzo para dibujar. Manejar las funcionalidades “touch” y “arrastrar” en la pantalla del equipo. Configurar Configurar la disposici´ disposici´ on de los componentes en la pantalla. on Usar los controladores de eventos que reciben argumentos o parámetros. Definir variables para recordar cosas como el tamaño no de un punto elegido por el usuario para dibujar.

Para Empezar Aseguráte ate que tu t u computado com putadorr y teléfono efono están an configurados para usar AppInventor. Crea un nuevo proyecto y nombrálo alo PintaFotos . Abre el Editor de Bloques y comprueba que puedes probar tu aplicación on en tu dispositivo mediante la conexión on USB. Consulta con tu tutor ante cualquier problema! Para empezar, ve al panel de propiedades a la derecha del Diseñador y cambia el titulo de la l a pantalla pa ntalla a “PintaFotos”. “ PintaFotos”. Deb er´ er´ıas ver este cambio reflejado en el teléfono, efono, con el nuevo t´ıtulo apareciendo aparecie ndo en la barra de t´ıtulos de tu app. Si estás as preocupado por confundir el nombre de tu proyecto con el nombre de la pantalla, no te preocupes! Hay tres nombres claves en AppInventor: El nombre que eliges para tu proyecto mientras trabajes traba jes en él. el. También en será el nombre de la aplicación on cuando la quieras publicar. Nota que puedes hacer click en “Archivo” y seleccionar “Guardar Como” en el Diseñador nador para crear una nueva versión on o cambiar el nombre de un proyecto. 3

1. tutorial: pintafotos El nombre de la componente, Screen1, que verás en el panel que contiene el listado de los componentes de la app. No puedes cambiar este nombre en esta versió n de AppInventor. El t´ıtulo de la pantalla, él que ves en la barra de t´ıtulo del teléfono. Empieza siendo

Screen1, que es el t´ıtulo que usaste en HolaGatito . Pero lo puedes cambiar, como lo hicimos en PintaFotos .

Dise˜ nando los Componentes Para crear la app usarás los siguientes componentes:

on para seleccionar pintura roja, azul o verde y un componente Tres componentes Bot´ Disposici´ onHorizontal para organizarlos. Un componente Bot´ on para limpiar el dibujo, y otros dos para cambiar el tamaño de los puntos. Un componente Lienzo, que es la superficie para dibujar. El Lienzo tiene una propiedad ImagenDeFondo, que configuraremos como gatito.png desde el tutorial Hola as adelante, modificarás la app para que la imagen de fondo pueda ser una Gatito . M´ foto sacada por el usuario.

Crea los Botones de Colores Primero, crea los 3 botones de color usando las siguientes instrucciones:

on al Visor y cambia su Texto a “Rojo”, y su ColorDeFondo tamArrastra un Bot´ bién a rojo. En la lista de Componentes, selecciona el Bot´ on1 y presiona “Cambiar Nombre” para cambiar su nombre por Bot´ onRojo. Observa que no se puede poner espacios en los nombres de los componentes, entonces es común poner en mayúscula la primera letra de cada palabra en el nombre. De la misma manera, crea dos botones adicionales para azul y verde, nombrados

Bot´ onAzul y Bot´ onVerde respectivamente. Ponlos debajo del botón rojo. Chequea tu trabajo comparándolo con la Figura 1.2. 4


Figura 1.2: El Visor con los tres botones creados.

Importante! Observa que en este proyecto cambias los nombres de los componentes en vez de dejarlos con sus nombres por defecto, como lo hiciste en Hola Gatito . El usar nombres más significativos hace que tus proyectos sean más fáciles de leer, y realmente ayuda en el momento de pasar al Editor de Bloques cuando tendrás que referirte a los componentes por su nombre. A partir de ahora y en el resto del taller usaremos la convención de que cada nombre de componente empiece por su tipo (por ejemplo: Bot´ onRojo).

Prueba tu aplicaci´ on! Conecta tu aplicación a tu dispositivo y verifica que funcione correctamente.

Usando los Componentes de Disposici´ on para una Mejor Presentaci´ on Ahora deber´ıas tener tres botones alineados verticalmente. Sin embargo para esta app, vas a necesitar que estén en fila horizontal arriba de la pantalla, como en la Figura 1.3. Para ello debes usar el componente Disposici´ onHorizontal .

Figura 1.3: Los tres botones en disposición horizontal.

5

1. tutorial: pintafotos onHo1. Desde la categor´ıa “Disposición” en la Paleta, arrastra un componente Disposici´

rizontal y ponlo debajo de los botones. 2. En el panel de Propiedades, cambia el Ancho de Disposici´ onHorizontal a la opción “Ajustar al contenedor” para llenar todo lo ancho de la pantalla. 3. Mueve los tres botones uno después del otro al interior de la Disposici´ onHorizon-

tal. Truco : Verás una l´ınea vertical azul que indica dónde irá el elemento que estás arrastrando. Si miras en la lista de componentes del proyecto, verás tres botones listados bajo el componente Disposici´ onHorizontal , lo que muestra que se trata de sus subcomponentes. As´ımismo, observa que todos los componentes est´ an listados bajo el componente Screen1.

Prueba tu Aplicaci´ on! Deber´ıas ver tus tres botones en una fila horizonal en la pantalla, a pesar de que puedan verse un poco diferente a como se ven en el Diseñador. Por ejemplo, el borde de Disposici´ onHorizontal no aparece en el dispositivo. En general, se usan los componentes de “Disposición” como opciones de dise˜ no para crear disposiciones simples, verticales, horizontales o en tablas. Tambi´ en puedes crear disposiciones más complejas insertando componentes de disposici´ on unos dentro de otros.

Agregar el Lienzo El lienzo es el lugar donde el usuario dibuja c´ırculos y l´ıneas. Agregalo, y configura el archivo gatito.png , usado en Hola Gatito , como su ImagenDeFondo. Desde la categor´ıa “Dibujo y Animaci´ on” de la Paleta, arrastra un Lienzo hacia el Visor. Cambia su nombre a LienzoDeDibujo. Configura su Ancho como “Ajustar al Contenedor” y su Alto a 300 pixeles. Recuerda que puedes descargar el archivo gatito.png desde ProgramaTusIdeas/Dia1/ HolaGatito .

Configura la ImagenDeFondo del LienzoDeDibujo con el archivo gatito.png . Si es necesario, debes subir el archivo.

6

1. tutorial: pintafotos Cambia el ColorDePintura en el LienzoDeDibujo al color rojo para que cuando el usuario inicie la app pero todav´ıa no ha presionado ningun bot´ on, sus dibujos sean rojos. Comprueba si lo que has hecho es parecido a la Figura 1.4.

Figura 1.4: El LienzoDeDibujo con la imagen gatito.png como ImagenDeFondo.

Agregar los Botones Inferiores y el Componente C´ amara 1. Desde la Paleta, arrastra un nuevo componente Disposici´ onHorizontal y ponlo abajo del lienzo. 2. Luego arrastra dos componentes Bot´ on adicionales en el Visor y ponlos dentro del

Disposici´ onHorizontal que acabas de agregar. Cambia el nombre del primer botón por Bot´ onCámara y su Texto a “Sacar Foto”. Cambia el nombre del segundo botón por Bot´ onLimpiar y su Texto por “Limpiar”. 3. Arrastra dos botones más y colócalos al lado derecho del Bot´ onLimpiar. 4. Nombra los nuevos botones como Bot´ onGrande y Bot´ onPeque˜ no, y pon su Texto como “Grande” y “Peque˜ no” respectivamente. 7

1. tutorial: pintafotos amara hacia el Visor. 5. Desde la sección Medios de la Paleta, arrastra un componente C´ Aparecer´ a en la sección de los componentes no-visibles. Una vez completados estos pasos, tu aplicación deber´ıa verse como en la Figura 1.5.

Figura 1.5: Interfaz de usuario completa para PintaFotos

Prueba tu Aplicaci´ on! ¿Aparece la foto del gatito debajo de los botones de la primera fila? ¿Aparece la u ´ ltima fila de botones abajo?

Agregar Comportamiento a los Componentes El próximo paso es definir cómo se comportan los componentes. Crear un programa de pintura puede parecer un desaf´ıo insuperable, pero quedate tranquilo! AppInventor te facilita el trabajo: existen bloques muy fáciles de usar para manejar las funcionalidades de touch y arrastre, y para dibujar y sacar fotos. 8

1. tutorial: pintafotos En el Diseñador, agregaste un componente Lienzo llamado LienzoDeDibujo. Como todos los componentes de ese tipo, LienzoDeDibujo tiene un evento Tocar y un evento

Arrastrado. Programarás el evento LienzoDibujo.Tocar de tal manera que llame a la función LienzoDibujo.DibujarC´ırculo. Programarás el evento LienzoDibujo.Arrastrado de tal manera que llame a la función LienzoDibujo.DibujarL´ınea . Programarás luego los botones para configurar la propiedad ColorDePintura usando el bloque poner LienzoDi-

bujo.ColorPintura, y para limpiar el LienzoDeDibujo; y finalmente, programarás como cambiar la ImagenDeFondo del lienzo por una foto sacada con la cámara del dispositivo.

Agregar el Evento Tocar para Dibujar un Punto Primero, dispondrás los objetos de manera que cuando tocas el LienzoDeDibujo, se dibujara un punto en el lugar del lienzo que toques: 1. En el Editor de Bloques, selecciona el LienzoDeDibujo, y arrastra el bloque Lienzo-

DeDibujo.Tocado al Visor. El bloque tiene parámetros para x e y, y SpriteTocado , como ilustrado en la Figura 1.6. Estos parámetros entregan información sobre la ubicaci´ on del evento “tocar la pantalla” hecho por el usuario.

Figura 1.6: El evento viene con información sobre la ubicación del toque en la pantalla

Nota. Si completaste la aplicación Hola Gatito , ya estás familiarizado con los eventos on.Click, pero no con los eventos del lienzo. Los eventos Bot´ on.Click son de Bot´ bastante sencillos porque no hay nada más que saber del evento aparte del hecho que ocurrió. Algunos controladores de eventos, sin embargo, vienen con información sobre los argumentos para llamar al evento. El evento LienzoDibujo.Tocar te entrega las coordenadas x e y del toque dentro del LienzoDeDibujo. Tambi´ en te dice si un objeto dentro del LienzoDeDibujo (lo que se conoce como Sprite ) fue tocado, pero este punto se abordará más adelante. Las coordenadas x e y son los argumentos que usaremos para grabar dónde el usuario tocó la pantalla, de manera de poder dibujar el punto en este lugar. 9

1. tutorial: pintafotos 2. Arrastra un bloque LienzoDeDibujo.DibujarC´ırculo desde el bloque y ponlo dentro del controlador de eventos LienzoDeDibujo.Tocar, como se ilustra en la Figura 1.7.

Figura 1.7: Cuando el usuario toca el lienzo, la aplicación dibuja un c´ırculo Por el lado derecho del bloque LienzoDeDibujo.DibujaC´ırculo, verás tres espacios vac´ıos por completar con los argumentos siguientes: x, y, y r. Los x e y especifican la ubicación donde el c´ırculo se va a dibujar, y r determina el radio (o tamaño) del c´ırculo. El signo amarillo con el punto de exclamación a la izquierda inferior de la pantalla aparecer´ a con un 1 cuando un espacio todav´ıa permanece vac´ıo. Construiremos los bloques para completar esto después. Este controlador de evento puede confundir un poco porque el evento LienzoDeDibu-

jo.Tocar también tiene una x y una y. Solamente acuérdate que la x y la y para el evento LienzoDeDibujo.Tocar te dice dónde tocó el usuario, mientras que el x e y para el evento LienzoDeDibujo.DibujarC´ırculo son espacios abiertos para que tú definas donde el se dibujará el c´ırculo. Dado que quieres que el c´ırculo aparezca donde tocó el usuario, conectarás los valores x e y desde el LienzoDeDibujo.Tocar de la misma forma que los valores de los parámetros x e y en LienzoDeDibujo.DibujarC´ırculo. Nota. Puedes acceder a los valores del evento al pasar el mouse sobre los parámetros en el bloque “Cuando”. Al hacerlo, aparecerán los bloques tomar y poner a. Arrastra el bloque tomar x y conéctalo como el valor faltante en para x en LienzoDeDibu-

jo.DibujarC´ırculo, como se ilustra en la Figura 1.8.

10


Figura 1.8: Para acceder al parámetro de un evento, arrastra un bloque tomar desde el bloque LienzoDeDibujo.Tocar 3. Arrastra los bloques tomar x y tomar y y conéctalos en los espacios abiertos en el bloque LienzoDeDibujo.DibujarC´ırculo, como se ilustra en la Figura 1.9.

Figura 1.9: La aplicación sabe donde dibujar (x,y), pero todav´ıa necesitamos especificar cuán grande deber´ıa ser el c´ırculo. 4. Ahora necesitas especificar el radio del c´ırculo a dibujar. El radio se mide en pixeles , que es el punto más peque˜ no que puede ser dibujado en la pantalla. Por ahora, ponle como valor el número 5: haz click en una zona blanca de la pantalla y tipea 5, luego presiona Enter para crear automáticamente un bloque numérico, y conecta este bloque en el espacio para el parámetro r. Cuando hagas esto, el signo amarillo en la esquina inferior se pondrá en 0 nuevamente, dado que todos los espacios abiertos habrán sido completados. La Figura 1.10 muestra como debiera verse el controlador de eventos

LienzoDeDibujo.Tocar .

11


Figura 1.10: Cuando el usuario toca el LienzoDeDibujo, un c´ırculo de radio 5 será dibujado en las coordenadas (x, y) correspondientes.

Nota. Al poner un 5 en el Editor de Bloques y luego presionar Enter, habrás usado lo que se llama tipeo de bloques . Si empiezas a tipear, el editor de bloques muestra un listado de bloques cuyos nombres corresponden a lo que estás tipeando. Si tipeas un número, crea un bloque numérico.

Prueba tu Aplicaci´ on! Usa tu dispositivo para probar lo que has desarrollado hasta ahora. Toca el LienzoDeDibujo, tu dedo deber´ıa dejar un punto en cada lugar que toques. Los puntos serán rojos si configuraste la propiedad del LienzoDeDibu-

jo.ColorDePintura como color rojo en el Diseñador (sino será negro, que es el color por defecto).

Agregar el Evento de Arrastre para Dibujar una L´ınea Luego, agregarás el controlador de eventos de arrastre. La diferencia entre un touch y un arrastre es la siguiente: Un touch es cuando pones tu dedo en la pantalla y solo lo levantas para tocar, sin desplazarlo. Un arrastre es cuando pones tu dedo en la pantalla y lo mueves al mantener contacto con la pantalla. En un programa de pintura, cuando arrastras tu dedo en la pantalla se dibuja una l´ınea igual al camino que sigue tu dedo. Lo que estás haciendo en realidad es dibujar cientos de 12

1. tutorial: pintafotos peque˜ nas l´ıneas rectas; cada vez que mueves tu dedo, incluso un poco, extiendes la l´ınea desde la u ´ ltima posición de tu dedo hacia su nueva posición. 1. En el Editor de Bloques, desde la sección del LienzoDeDibujo, arrastra el bloque

LienzoDeDibujo.Arrastrado al espacio de traba jo. Deber´ıas ver el gestionador de eventos tal como en la Figura 1.11.

Figura 1.11: Un evento de arrastre tiene más argumentos que un evento de touch. El evento LienzoDibujo.Arrastre viene con los siguientes argumentos: on de tu dedo donde empieza el arrastre. XInicial , YInicial : la posici´ on actual de tu dedo. XActual , YActual: la posici´ on inmediatamente anterior de tu dedo. XPrevio , YPrevio: la posici´ a verdad si el usuario hace el arrastre direcSpriteArrastrado : un booleano, ser´ tamente sobre un imagen Sprite. En el taller no usaremos este argumento. 2. Arrastra el bloque LienzoDeDibujo.DibujarL´ınea dentro del bloque LienzoDeDi-

bujo.Arrastrado como se muestra en la Figura 1.12.

Figura 1.12: Agregando la habilidad de dibujar l´ıneas El bloque LienzoDeDibujo.DibujarL´ınea tiene cuatro argumentos, dos para cada punto que determina la l´ınea: un punto es (x1, y1), mientras que ( x2, y2) es el otro. ¿Puedes adivinar qué valores corresponden a cada argumento? Recuerda que el evento 13

1. tutorial: pintafotos LienzoDeDibujo.Arrastrado se activará cada vez que arrastres tu dedo en el Visor, por lo tanto la aplicaci´ on dibuja una pequeña l´ınea cada vez que mueves tu dedo, desde (XPrevio , YPrevio) hacia (XActual , YActual). Agreguemos esto a nuestro bloque

LienzoDeDibujo.DibujarL´ınea : 3. Arrastra los bloques tomar para los argumentos que vas a necesitar. Los valores XPrevio e YPrevio deber´ıan ir conectados en los espacios para los argumentos x1

e y1, respectivamente, como se ilustra en la Figura 1.13.

Figura 1.13: Cuando el usuario arrastre el dedo, la aplicación dibujará una l´ınea desde el punto anterior hacia el actual.

Prueba tu Aplicaci´ on! Arrastra tu dedo en la pantalla para dibujar l´ıneas y curvas. Toca la pantalla para dibujar puntos.

Agregar Controladores de Eventos para Botones La aplicación que has construido hasta ahora permite al usuario dibujar, pero siempre estos dibujos usan el color rojo. El pr´ oximo paso consiste en agregar controladores de eventos para los botones de colores, para que el usuario pueda cambiar el color de la pintura, y otro

onLimpiar para que pueda limpiar la pantalla y as´ı volver a empezar a dibujar. para el Bot´ En el Editor de Bloques: 1. Arrastra el bloque Bot´ onRojo.Click al espacio de trabajo. 2. Arrastra el bloque poner LienzoDeDibujo.ColorDePintura y conéctalo en las acciones del bloque Bot´ onRojo.Click. 3. Abre la sección “Colores” y arrastra el bloque de color rojo para conectarlo con el bloque poner LienzoDeDibujo.ColorDePintura . 14

1. tutorial: pintafotos 4. Repite los pasos anteriores para los botones azul y verde.

onLimpiar. Para limpiar el lienzo de dibujo 5. El u ´ ltimo botón por configurar es el Bot´ debes utilizar el bloque LienzoDeDibujo.Limpiar. Confirma que tus bloques se ven como en la Figura 1.14.

Figura 1.14: Cuando el usuario hace click en los botones de colores cambia el color para dibujar en el lienzo. Hacer click en “Limpiar”, borra el contenido del lienzo.

Permitir al Usuario Tomar un Foto Las aplicaciones hechas con AppInventor pueden interactuar con las funcionalidades de los dispositivos Android, incluyendo la cámara. Para personalizar la aplicación, se permite al usuario fijar la imagen de fondo de su dibujo con una foto tomada con la cámara. 1. El componente C´ amara contiene dos bloques claves. El bloque C´ amara.TomarFoto

amara.Despu´ esDeTomarFoinicia la aplicación de cámara del teléfono. El evento C´ to se activa cuando el usuario terminó de sacar la foto. Agregarás bloques en el controamara.Despu´ esDeTomarFoto para configurar el LienzoDeDilador de eventos C´ bujo.ImagenDeFondo con la foto que fue sacada. Abre la sección de Bot´ onC´ amara y arrastra el controlador de evento Bot´ onC´ amara.Click hacia el espacio de trabajo. 2. Arrastra el bloque C´ amara1.TomarFoto y ponlo en el controlador Bot´ onC´ ama-

ra.TomarFoto. 3. Arrastra el controlador de eventos C´ amara1.Despu´ esDeTomarFoto al espacio de trabajo. 15

1. tutorial: pintafotos 4. Arrastra el bloque poner LienzoDeDibujo.ImagenDeFondo y ponlo en las acciones de C´ amara1.DespuésDeTomarFoto. 5. C´ amara1.DespuésDeTomarFoto tiene un argumento llamado imagen, que es la foto recién sacada. Puedes referirte a ella, con un bloque “tomar” desde el bloque

C´ amara1.DespuésDeTomarFoto. Conecta la imágen como el argumento para el bloque poner LienzoDeDibujo.ImagenDeFondo . Los bloques deber´ıan ser parecidos a la Figura 1.15.

Figura 1.15: CUando se saca la foto, se configura como la imagen de fondo del lienzo.

Prueba tu Aplicaci´ on! Haz una prueba al hacer click en “Tomar Foto” y saca una foto. El gatito deber´ıa cambiar por la foto que acabas de sacar, y luego podrás dibujar encima de la foto que sacaste.

Cambiar el Tama˜ no del Punto El tama˜ no de los puntos dibujados en el LienzoDeDibujo se determina al llamar a

LienzoDeDibujo.DibujarC´ırculo, donde el argumento de radio está configurado en 5. Para cambiar el grueso de la l´ınea, puedes cambiar el valor de r. Para probar esto, intenta cambiar el 5 por un 10 y pruébalo en el teléfono para ver cómo aparece. El u ´ nico tama˜ no que el usuario podrá usar es él que tu indicas como argumento para el radio del c´ırculo. ¿Pero qué pasa si el usuario quiere cambiar el tamaño de los puntos? Vamos a modificar el programa de manera que el usuario—no solo el programador—pueda cambiar el tama˜ no de los puntos. Lo haremos de tal manera que cuando el usuario haga click en un botón llamado “Grandes”, el tama˜ no será 8, y cuando hará click en un botón llamado “Peque˜ nos”, será 2.

16

1. tutorial: pintafotos Para usar distintos valores en el argumento radio, la aplicación necesita saber cuál queremos aplicar. Necesitamos pedirle usar un valor espec´ıfico, y tiene que memorizar este valor de manera a poder seguir usándolo. Cuando tu aplicaci´ on necesita guardar algo en memoria que no sea una propiedad, puedes definir una variable . Una variable es una celda de memoria . Es como un balde donde puedes almacenar datos variables, como el tamaño del punto. Empezamos por definir una variable Tama~noPunto : 1. En el Editor de Bloques, desde la sección “Variables”, arrastra un bloque Inicializar

global nombre. Cambia el texto “nombre” por “TamañoPunto”. noPunto tiene un espacio abierto. 2. F´ıjate que el bloque Inicializar global Tama˜ Ah´ı es donde puede especificar el valor inicial de la variable, o su valor por defecto al iniciar la aplicación. Para esta aplicación, inicializa el Tama~noPunto en 2 creando un bloque con el número 2, y conectándolo en Inicializar global Tama˜ noPunto como se ilustra en la Figura 1.16.

Figura 1.16: Inicializar variable global Tama~noPunto con valor 2.

Usar las Variables Ahora, queremos cambiar el argumento de LienzoDeDibujo.DibujarC´ırculo en el controlador de eventos LienzoDibujo.Tocar para que uses el valor Tama~noPunto en vez de usar siempre un n´ umero fijo. (Puede dar la ilusión que fijamos Tama~noPunto en 2 porque lo inicializamos de esta manera, pero verás en un minuto como podemos cambiar Tama~ noPunto y asi cambiar el tama˜ no del punto que se dibuja.) 1. Arrastra un bloque “tomar” desde LienzoDeDibujo.DibujarC´ırculo. Deber´ıas ver

noPunto que indica el valor de la variable. un bloque tomar global Tama˜ 2. Anda al controlador de eventos LienzoDeDibujo.Tocar y arrastra el bloque del número 5 fuera del espacio r y pónlo en el papelero. Luego reemplázalo con el bloque

tomar global Tama˜ noPunto (Ver Figura 1.17). Cuando el usuario toca el lienzo, la aplicaci´ on determinará ahora el radio a partir de la variable Tama~ noPunto . 17


Figura 1.17: Ahora el tama˜ no de cada c´ırculo depende de lo que está guardado en la memoria de la variable TamañoPunto.

Cambiar los valores de las variables Aqu´ı es donde la magia de las variables opera. La variable Tama~noPunto permite al usuario elegir el tamaño del c´ırculo, y tu controlador de eventos dibujará el c´ırculo en función de esto. Desarrollaremos el comportamiento al programar los controladores de eventos

Bot´ onPeque˜ no.Click y Bot´ onGrande.Click. onPeque˜ no.Click al espacio de trabajo. Lue1. Arrastra un controlador de eventos Bot´ go arrastra desde la categor´ıa “Variables” un bloque poner a, selecciona “global Ta-

onPeque˜ no.Click. Finalmente, crea mañoPunto” como referencia y conectalo a Bot´ un bloque n´ umero 2 y conéctalo al bloque poner global Tama˜ noPunto.

onGrande.Click, pero configura el 2. Haz un controlador de eventos similar para Bot´ Tama~ noPunto en 8. Ambos gestionadores de eventos deber´ıan aparecer en el editor de

bloques, como en la Figura 1.18.

Figura 1.18: Hacer click en los botones cambia el tamaño del punto. Los toques que siguen serán con este tamaño de punto.

Prueba tu Aplicaci´ on! Intenta hacer click en los botones de tamañ o y luego toca el lienzo. ¿Se dibujan c´ırculos de distintos tamaños? ¿Las l´ıneas? El tama˜ no de las l´ıneas no 18

1. tutorial: pintafotos deber´ıa cambiar porque programaste Tama~ noPunto solamente para ser usado en el bloque de

DibujarC´ırculo. En base a esto, ¿podr´ıas ahora cambiar tus bloques para que el usuario tambi´ en pueda cambiar el tamaño de la l´ınea? (Nota que el lienzo tiene una propiedad llamada AnchodeLinea)

La App Completa: PintaFotos La Figura 1.19 ilustra el código completo de la aplicación PintaFotos :

Figura 1.19: Grupos de bloques para PintaFotos .

Resumen Las ideas claves que hemos visto en este tutorial son las siguientes: El componente Lienzo te permite dibujar en un lienzo. Tambi´ en es sensible a eventos “touch” y de arrastre, los cuales puedes aprovechar para desarrollar funcionalidades para dibujar. Puedes usar componentes de disposición en la pantalla para organizar tus componentes en lugar de ponerlos todos uno debajo del otro. Algunos controladores de eventos vienen con información sobre el evento, como las coordenadas de donde la pantalla fue tocada. Esta información está representada por 19

2. discusión y ejercicios de personalización argumentos. Cuando arrastras un controlador de eventos que tiene argumentos, AppInventor crea ´ıtems “poner a” y “tomar”, dentro del bloque seleccionado, para as´ı poder referirse a estos argumentos. Crear variables al usar bloques poner global nombre, desde la categor´ıa “Variables”. Las variables permiten guardar información en memoria, como el tamaño del punto, que no está guardado en una propiedad de un componente. Para cada variable que definas, AppInventor automáticamente provee una referencia “tomar global” que entrega el valor de la variable, y una referencia “poner global a” para cambiar el valor de la variable. Para acceder a esto, arrastra un bloque “poner a” o “tomar” desde el mismo bloque donde declaras la variable. El componente Lienzo también se puede usar para programar animaciones como las que ves en juegos en 2D.

2.

Discusi´ on y Ejercicios de Personalizaci´ on

Preguntas/Discusi´ on 1. En el Lienzo, los controladores de eventos Tocar y Arrastrado, mostrados abajo en la Figura 2.1, tienen parámetros de evento. Nombra cada parámetro e indica lo que representa.

Figura 2.1: Grupos de bloques para PintaFotos . 20

3. tutorial: atrapa el topo 2. Los parámetros de evento son distintos de los parámetros para llamar funciones. ¿Cómo se llaman los parámetros para llamar funciones en el controlador de eventos de la ??? ¿Quién especifica los parámetros de función? Quién especifica parámetros de eventos? 3. ¿Cuál es el propósito de definir una variable para el Tamaño de Punto en la App Pinta Fotos? Si quieres permitir cambiar el grosor de las l´ıneas, ¿necesitarás una variable? 4. Define lo que es una variable. ¿Cuáles son sus puntos en com´ un con una propiedad? ¿Cómo se diferencia de una propiedad? 5. Una forma de personalizar la aplicaci´ on es poner un CuadroDeTexto para el tamaño del punto. ¿Cuál es la diferencia entre un cuadro de texto y una variable? ¿Cuál es la diferencia entre una etiqueta y un cuadro de texto?

Ejercicios de Personalizaci´ on 1. La interfaz de usuario de PintaFoto no permite mostrar con qué color se está dibu jando. El usuario sólo se da cuenta al dibujar. ¿Puedes agregar esta información para el usuario de tal manera que cuando él hace click para cambiar el color, la interfaz cambia y le indica qué color fue elegido? 2. El tama˜ no del punto para dibujar un c´ırculo sólo puede ser de 2 o 8. ¿Puedes cambiar esto para permitir al usuario elegir entre distintas opciones con un componente

Deslizador o un CampoDeTexto? 3. Permitir al usuario controlar el grosor de las l´ıneas, de la misma manera que puede cambiar el tamaño del punto. El lienzo tiene una propiedad AnchoDeLinea que controla esta caracter´ıstica.

3.

Tutorial: Atrapa el Topo En este tutorial desarrollaras el juego Atrapa el Topo, inspirado en las salas de juegos

clásicas, en las que unos topos mecánicos saltan fuera de su hueco, y los jugadores ganan puntos golpeándolos con un mazo. El juego fue creado por Ellen Spertus, un miembro del equipo de AppInventor en Google, para implementar la funcionalidad Sprite . El término Sprite apareció en la comunidad de informá ticos en los a˜ nos 70, y se refer´ıa a imágenes capaces de moverse en la pantalla de un computador (para videojuegos). 21

3. tutorial: atrapa el topo

Qué Construir´ as Para la aplicación Atrapa el Topo, ilustrada en la Figura 3.1, implementará s las siguientes funcionalidades: Un topo que salta en cualquier lugar de la pantalla, moviéndose cada segundo. Tocar el topo hace vibrar el teléfono, y aumenta el marcador de puntos (un punto por topo tocado), y el topo se mueve de inmediato a otro lugar. Tocar la pantalla sin alcanzar tocar el topo provoca que el marcador de toques perdidos aumenta. Al presionar el botón “Reiniciar” se reinicia el contador de golpes logrados y perdidos.

Figura 3.1: Interfaz de usuario de Atrapa el Topo.

22


Qué Aprender´ as Este tutorial cubre los siguientes componentes y conceptos: El componente SpriteImagen para imágenes movibles con sensibilidad touch. El componente Lienzo que funciona como una superficie sobre la cual se pone el

SpriteImagen. El componente Reloj para mover el sprite. El componente Sonido para producir una vibración cuando el topo es tocado.

on para empezar un nuevo juego. El componente Bot´ Procedimientos para implementar comportamientos repetitivos, como desplazar el to-

po. Generar números al azar. Usar los bloques de sumar (+) y restar (-).

Para empezar Conéctate al sitio de AppInventor y crea un nuevo proyecto. Llamálo “AtrapaElTopo” y tambi´ en cambia el t´ıtulo de la pantalla como “AtrapaElTopo”. Abre el Editor de Bloques y conéctate a tu dispositivo Android. Descarga la imagen ProgramaTusIdeas/Dia2/topo.png . Luego vé a la sección de Medios del Dise˜ nador de Componentes y súbela a AppInventor.

Dise˜ nando los Componentes Utilizarás los siguientes componentes para construir Atrapa el Topo: Un Lienzo que sirve de campo de juego. Un SpriteImagen que representa la foto del topo y que puede moverse y sentir cuando el topo fue tocado. Un Sonido que vibra cuando el topo es tocado. 23

3. tutorial: atrapa el topo Etiquetas que dicen “Logrado”, “Perdido”, y el número de toques logrados y pérdidos.

onHorizontal para posicionar las etiquetas correctamente. Un componente Disposici´ on para reiniciar a 0 el número de golpes exitosos y fallidos. Un Bot´ Un Reloj para hacer que el topo se desplace una vez por segundo. La Cuadro 3.1 muestra la lista completa de componentes para Atrapa el Topo. Tabla 3.1: Lista completa de componentes para Atrapa el Topo

Ubicar los Componentes de Acci´ on En esta sección crearemos los componentes necesarios para que funcione el juego. En la siguiente sección, crearemos los componentes para mostrar el marcador de puntos. 1. Arrastra un componente Lienzo, dejando su nombre por defecto Lienzo1. Configura sus propiedades de Ancho como “Ajustar al contenedor” y ajusta su Alto a 300 pixeles. 2. Arrastra un componente SpriteImagen desde el grupo “Animaciones” de la Paleta. Ponlo en cualquier lugar del Lienzo1, y luego cambia su nombre a “Topo”. Configura su propiedad de Imagen usando la imagen topo.png que subiste anteriormente. 3. Arrastra un Bot´ on debajo de Lienzo1. Cambia su nombre por “BotónReinicializar” y configura su Texto como “Reinicializar”. 4. Arrastra un componente Reloj. Aparecerá abajo del Visor, en la sección de componentes no visibles. 5. Arrastra un componente Sonido. También aparecerá abajo del Visor, en la sección de componentes no-visibles. Tu pantalla deber´ıa verse como en la Figura 3.2 (aunque tu topo puede estar en una posición distinta).

24


Figura 3.2: El Diseñador con la vista de los componentes de acción

Poner las Etiquetas Ahora pondremos los componentes para mostrar el marcador de puntos del usuario, más espec´ıficamente los golpes exitosos y fallidos.

onHorizontal , del grupo “Disposición”, poniéndo1. Arrastra un componente Disposici´ lo debajo del Bot´ onReinicializar y dejando el nombre por defecto “DisposiciónHorizontal1”. 2. Arrastra dos Etiquetas hacia la Disposici´ onHorizontal . Cambia el nombre de la etiqueta izquierda por “EtiquetaExitos” y configura su

Texto como “exitos: ” (Ojo! : tienes que incluir un espacio después de los dos 25

3. tutorial: atrapa el topo puntos). Cambia el nombre de la etiqueta derecha por “EtiquetaPuntosGanados” y configura su Texto como “0”.

onHorizontal , poniendolo debajo de Dis3. Arrastra un segundo componente Disposici´ posici´ onHorizontal1. 4. Arrastra dos Etiquetas hacia la Disposici´ onHorizontal2 Cambia el nombre de la etiqueta izquierda por “EtiquetaFallos” y configura su Texto como “Fallos: ” (Ojo! : tienes que incluir un espacio después de los dos puntos). Cambia el nombre de la etiqueta derecha por “EtiquetaPuntosFallados” y configura su propiedad de Texto como “0”. Tu pantalla deber´ıa ser parecida a la Figura 3.3

Figura 3.3: El Diseñador con todos los componentes del juego. 26


Agregar comportamientos a los componentes Luego de crear los componentes anteriores, tienes que ir al Editor de Bloques para implementar el comportamiento del programa. En particular, queremos que el topo se mueva cada segundo de manera aleatoria en el lienzo. El objetivo del jugador es pegar al topo donde aparezca, y la aplicación mostrará el n´ umero de veces que el jugador logró tocar o no al topo. Pinchar en el botón “Reinicializar”, reinicializa el marcador.

Desplazar el Topo En los programas que creaste hasta ahora, usaste procedimientos preexistentes como el vibrador en Hola Gatito. Ser´ıa maravilloso poder tener un procedimiento que mueve un

SpriteImagen de forma aleatoria en la pantalla! La mala noticia es que no existe! La buena noticia: puedes crear tus propios procedimientos! Como los preexistentes, tu procedimiento aparecer´ a en una sección y podrá ser usado en cualquier lugar de la app. En particular, crearemos un procedimiento para mover el topo a un lugar aleatorio en la pantalla, que llamaremos MoverTopo. Vamos a activar MoverTopo al inicio del juego, cuando el usuario logra tocar el topo, y una vez por segundo.

Crear el procedimiento MoverTopo Para comprender cómo mover el topo, necesitamos ver cómo funcionan los gráficos de Android. El lienzo (y la pantalla) son como una cuadr´ıcula con coordenadas x (horizontal) e y (vertical), donde las coordenadas (x,y) de la esquina superior izquierda son (0,0). El x aumenta cuando mueves hacia la derecha, y la y aumenta cuando vas hacia abajo, como se ilustra en la Figura 3.4. Las propiedades X e Y de un SpriteImagen indican dónde deber´ıa estar su esquina superior izquierda; es decir, el topo en la esquina superior izquierda tiene valores de 0 para X e Y. Para determinar los valores máximos para X e Y de tal manera que el topo no se salga de la pantalla, necesitamos estar seguros de usar las propiedades Ancho y Alto del Topo y del Lienzo1. Las propiedades de Ancho y Alto del Topo son las mismas que el tamaño de la foto que subiste. Cuando creaste el Lienzo1, configuraste su Alto a 300 pixeles y su

Ancho a “Ajustar al Contenedor”). Si el Topo tiene un Ancho de 36 pixeles y el Lienzo 200, la coordenada X del lado izquierdo del topo puede ir hasta 0 (borde izquierdo) o con 27

3. tutorial: atrapa el topo un alto de hasta 164 (200 - 36, o Lienzo1.Ancho − Topo.Ancho) sin que el topo pase el borde derecho de la pantalla. De forma similar, la coordenada Y del lado superior del topo puede ir desde 0 hasta

Lienzo1.Alto − Topo.Alto.

Figura 3.4: Posiciones del topo en la pantalla, con información de ancho, coordenadas y altura. La información de la coordenada x está en azul, y la de la coordenada y está en naranjo. Para dar una posición aleatoria al topo, vamos a seleccionar una coordenada X entre 0 y Lienzo1.Ancho − Topo.Ancho. As´ımismo, la coordenada Y tiene que estar en un rango de entre 0 y Lienzo1.Alto − Topo.Alto. Podemos generar un número aleatorio con el procedimiento preexistente entero aleatorio entre , que se encuentra en la sección “Matem´ aticas”. Tendrás que cambiar los parámetros como se muestra en la Figura 3.5. La figura muestra además comentarios descriptivos que puedes opcionalmente agregar a tu procedimiento.

28


Figura 3.5: El procedimiento MoverTopo , que pone el Topo en una ubicación aleatoria. Para crear el procedimiento MoverTopo : 1. Selecciona la sección “Procedimientos” del Editor de Bloques. 2. Arrastrar el bloque como procedimiento (no el como procedimiento resultado) al espacio de trabajo. 3. Presiona el texto “procedimiento” en este nuevo bloque y reemplázalo por “MoverTopo”, para configurar el nombre del nuevo procedimiento. 4. Dado que queremos mover el topo, arrastra dentro del procedimiento el bloque lla-

mar Topo.MoverA, a la derecha de “ejecutar”. Observa que se requiere indicar las coordenadas x e y donde se moverá el topo. 5. Para especificar que la nueva coordenada x para el topo deber´ıa ser entre 0 y Lienzo1.Ancho−

Topo.Ancho, debes hacer lo siguiente: Seleccionar la sección “Matemáticas”. Arrastra el bloque entero aleatorio entre , conectándolo con el parámetro x en

llamar Topo.MoverA. Cambia el n´ umero 1 en el espacio “entre” por un 0. Borra el n´ umero 100 en el espacio “y”. 29

3. tutorial: atrapa el topo Selecciona la sección “Matemáticas” y arrastra un bloque de resta (-) al espacio de trabajo. Selecciona el bloque Lienzo1.Ancho y arrástralo al argumento izquierdo del bloque de resta. De manera muy similar, arrastra el bloque Topo.Ancho hacia el argumento derecho del bloque de resta. Sigue un procedimiento similar para especificar que la coordenada y, que deber´ıa ser un entero aleatorio entre 0 y Lienzo1.Alto − Topo.Alto. Compara tus resultados con lo ilustrado en la Figura 3.5 que está más arriba.

Llamar MoverTopo cuando se Inicia la Aplicaci´ on Ahora que escribiste el procedimiento MoverTopo, ¡usémoslo! Es muy com´ u n que los programadores quieran que pase algo cuando se inicia la aplicación, y es por eso que hay un bloque para esto: Pantalla1.Inicializar. 1. Arrastra el bloque Pantalla1.Inicializar, desde la sección Pantalla1. 2. Selecciona la sección “Procedimientos”, donde ahora verás un bloque llamado llamar

MoverTopo (¿Te das cuenta que tú creaste este bloque?!). Arrastra el bloque y ponlo dentro de Pantalla1.Inicializar, como se muestra en la Figura 3.6.

Figura 3.6: Llamar el procedimiento MoverTopo cuando se inicia la aplicación.

Llamar a MoverTopo cada 1 Segundo Hacer que el topo se mueva cada 1 segundo requiere que usemos el componente Re-

loj . Dejamos la propiedad IntervaloDelTemporizador en su valor por defecto de 1000 milisegundos (o sea 1 segundo). Esto significa que cada 1 segundo se ejecutará un evento

Reloj1.Temporizador. Estos eventos los usaremos para mover el topo cada 1 segundo, de la siguiente manera: 30

3. tutorial: atrapa el topo 1. Selecciona la sección Reloj1, y arrastra el controlador de eventos Reloj1.Temporizador hacia el espacio de trabajo. 2. Arrastra un bloque llamar MoverTopo, desde la sección “Procedimientos”, hacia el interior del controlador de eventos Reloj1.Temporizador, como se muestra en la Figura 3.7.

Figura 3.7: Procedimiento para llamar a MoverTopo cada 1 segundo, cada vez que se activa el temporizador. Si el movimiento es demasiado lento o rápido para ti, puedes cambiar la propiedad de intervalo de tiempo en el Diseñador, para cambiar la frecuencia de movimiento.

Llevar el Puntaje ¿Te acuerdas que creaste dos etiquetas EtiquetaPuntosGanados y EtiquetaPuntos-

Fallados, con valores iniciales de 0?. Ahora queremos incrementar los números en estas etiquetas cuando el usuario logra tocar el topo (un éxito) o cuando toca la pantalla sin tocar el topo (fallado). Para hacer esto, usaremos el bloque Lienzo1.Tocar, que indica que el lienzo fue tocado, las coordenadas x e y de donde fue tocado (lo que no es necesario saber en este caso), y si un sprite fue tocado (lo que si necesitamos saber). La Figura 3.8 muestra el código que vamos a crear.

Figura 3.8: Se incrementa el número de éxitos o fallidos cuando el lienzo está tocado. La traducción de la Figura 3.8 es la siguiente: cuando el lienzo es tocado, se chequea si el sprite fue tocado. Dado que hay un solo sprite en nuestro programa, tiene que ser Topo1. Si 31

3. tutorial: atrapa el topo el Topo es tocado, suma 1 al número en EtiquetaPuntosGanados.Texto; sino, suma 1 al número en EtiquetaPuntosFallados.Texto. El valor de SpriteTocado es falso si ningun sprite fue tocado. Los bloques se crean de la siguiente manera: 1. Arrastra el bloque Lienzo1.Tocar. 2. Selecciona la sección “Control”, y arrastra un bloque si-sino (tendrás que agregar el bloque sino después de mover el bloque al espacio de trabajo) y colócalo dentro de

Lienzo1.Tocar . 3. Arrastra un bloque tomar SpriteTocado, y ponlo en el espacio abierto del bloque si . 4. Dado que queremos que EtiquetaPuntosGanados.Texto sea incrementado si el topo fue tocado: Desde la sección EtiquetaPuntosGanados, arrastra el bloque poner Etique-

taPuntosGanados.Texto, y ponlo a la derecha de “entonces” en el bloque si. Arrastra el bloque de suma (+), desde la sección “Matemáticas”, hasta el espacio del bloque poner EtiquetaPuntosGanados.Texto como. Arrastra el bloque EtiquetaPuntosGanados.Texto como el argumento izquierdo del bloque de suma. Agrega un bloque numérico con valor 1 como argumento derecho del bloque de suma. 5. Repite el paso anterior, pero para la etiqueta EtiquetaPuntosFallados, en la sección

si no, del bloque si ... sino. Prueba tu Aplicaci´ on! Puedes probar tu juego tocando el lienzo y el topo, y viendo cómo cambian los puntajes.

Abstracci´ on procedural La capacidad de nombrar y luego llamar una serie de instrucciones como MoverTopo es una de las herramientas claves en ciencias de la computación, y esta herramienta se llama abstracci´ on procedural .

32

3. tutorial: atrapa el topo Se llama abstracci´ on porque el que llama el procedimiento (quien, en el mundo real, por lo general es una persona distinta a la que es el autor del procedimiento) solamente necesita omo lo hace (al hacer dos llamados saber qué hace el procedimiento (mover el topo), pero no c´

al generador de números aleatorios). Sin la abstracción procedural, grandes programas de computaci´ on no ser´ıan posibles porque contienen demasiado código para que lo memorice una sola persona. Se puede hacer una analog´ıa con la división del trabajo en una planta por ejemplo, donde distintos ingenieros diseñan diferentes partes de un auto, ninguno de ellos entendiendo todos los detalles, y el conductor sólo tiene que comprender la interfaz (por ejemplo apretar el freno para detener el auto), y no toda la ingenier´ıa que hay por detrás. Algunas ventajas de la abstracción procedural en comparación con copiar y pegar código son: Es más fácil probar el código si está n´ıtidamente separado del resto del programa. Si hay un error en el código, solamente hay que arreglarlo en un lugar. Para cambiar el desarrollo, como por ejemplo programar que el topo no se mueva al lugar donde justo estuvo antes, solamente modificas el código en un lugar. Los procedimientos pueden ser juntados en una librer´ıa y usados en distintos programas (aunque no se puede hacer esto todav´ıa con AppInventor). Dividir el código en trozos permite reflexionar bien sobre el código y desarrollar la aplicaci´ on de acuerdo a esta reflexión. Elegir buenos nombres para los procedimientos ayuda a documentar el código, haciéndolo más fácil de leer para otra persona que lo tomará después. Más adelante aprenderás a hacer procedimientos más potentes, agregando argumentos, dando valores de retorno y haciendo que los procedimientos se llamen a ellos mismos.

Reinicializar el Puntaje Si un amigo te ve jugar, ¡es probable que quiera probar el juego también! Entonces será bueno tener una manera de reinicializar el marcador de puntos en 0. Puede ser que logres hacer esto sin leer estas indicaciones. Intenta hacerlo solo antes de leer las instrucciones.

33

3. tutorial: atrapa el topo onReinicializar.Click que ponga el marcador Lo que necesitamos es un bloque Bot´ de EtiquetaPuntosGanados.Texto y EtiquetaPuntosFallidos.Texto en 0. Crea los bloques de la misma manera que en la Figura 3.9.

Figura 3.9: Reinicializar los marcadores cuando se apreta el botón “Reinicializar”. En esta etapa del taller, no deber´ıas necesitar instrucciones paso a paso para crear un controlador de eventos que responde al click de un botón, pero aqu´ı va un consejo para acelerar el proceso: en vez de sacar tu número de la sección “Matemáticas”, solamente tipea 0, y el bloque deber´ıa crearse. (Estos atajos existen para otros bloques tambi´ en.)

Prueba tu Aplicaci´ on! Intenta jugar y luego apreta el botón “Reinicializar”. Agregar un Comportamiento cuando el Topo es Tocado Dijimos antes que queremos que vibre el dispositivo cuando se toca el topo, lo que podemos hacer con el bloque Sonido1.Vibrar, como se ve en la Figura 3.10.

Figura 3.10: Cuando el topo es tocado el dispositivo vibra brevemente (1000ms).

Prueba tu Aplicaci´ on! Revisa si vibra el teléfono cuando tocas el topo. Si la vibración es demasiada larga o corta, según tu gusto, cambia el número de milisegundos en el bloque

Sonido1.Vibrar La Aplicaci´ on Completa: Atrapa el Topo La Figura 3.11 muestra cómo se ven los bloques para la versión completa de Atrapa el Topo .

34


Figura 3.11: El código de la versión completa de Atrapa el Topo.

Variantes Aqu´ı vienen algunas ideas para agregar más funcionalidades a Atrapa el Topo: Agregar botones para mover el topo más lento o más rápido. Agregar una etiqueta para recordar y mostrar cuántas veces apareció el topo. Agregar un segundo SpriteImagen con una foto de algo que el jugador NO deber´ıa tocar, como una flor o una bomba por ejemplo. Si lo toca, será penalizado con puntos o puede que termine el juego. En vez de usar la foto de un topo, deja que el usuario seleccione una foto con el componente SelectorDeContacto.

35

4.

Material de Apoyo

4. material de apoyo

El Componente Lienzo El componente Lienzo es una subsección dentro de tu aplicación. El lienzo se usa para dibujar y hacer animaciones—tu app puede dibujar objetos, y puedes dar al usuario la capacidad de dibujar objetos. Normalmente vas a necesitar que el lienzo llene por completo el ancho de la pantalla de la app, entonces tendrás que ajustar la propiedad Ancho con la opción “Ajustar al contenedor”. Por lo general vas a necesitar tener otros elementos abajo o arriba, por lo que configurarás el Alto como un número fijo de pixeles. La ubicaci´ on de un objeto en el lienzo se define con coordenadas X, Y relativas a la esquina arriba e izquierda del lienzo. X es la ubicación horizontal del objeto, siendo 0 el borde izquierdo y X creciendo cuando el objeto se mueve hacia la derecha. Y es la ubicación vertical, con 0 siendo el borde superior e Y creciendo cuando el objeto se mueve hacia abajo. Conceptualmente el lienzo se comporta como una rejilla, tal como se ilustra en la Figura 4.1.

Figura 4.1: Un lienzo con ancho de 19 pixeles y altura de 12 pixeles. Se muestran los puntos en coordenadas (0,0), (3,3) y (19, 0).

Ejemplo: ¿C´ omo dibujar un c´ırculo en (10,10)? El lienzo tiene bloques funcionales para dibujar un c´ırculo o una l´ınea. El c´ırculo tiene tres parámetros x, y y un radio r. x es la ubicación horizontal, y es la ubicación vertical, y r es el radio del c´ırculo por dibujar. Si 36

4. material de apoyo x tiene un valor de 10 significa que el c´ırculo será ubicado 10 pixeles a la derecha del borde izquierdo del lienzo. Si y tiene un valor de 10 significa que el c´ırculo será ubicado 10 pixeles abajo del borde superior del lienzo. La Figura 4.2 muestra cómo dibujar un c´ırculo en la coordenada (10,10) y con radio de 5 pixeles.

Figura 4.2: Dibujando un c´ırculo en el lienzo, en la coordenada (10,10) y con radio 5 pixeles.

Ejemplo: ¿C´ omo dibujar un c´ırculo en el lugar donde el usuario toca el lienzo? La funcionalidad “touch” (táctil) se activa cuando el usuario toca con el dedo en el lienzo. Tiene parámetros x e y que indican la ubicación del toque. El parámetro SpriteTocado especifica si el toque ocurrió o no en un SpriteImagen (esto no influye en su comportamiento). Para dibujar el c´ırculo donde el usuario tocó el lienzo, debes pasar el mouse sobre los parámetros x e y para arrastrar los bloques tomar para cada uno, y luego conectarlos en los espacios para x e y del bloque DibujarC´ırculo. No te confundas con lo siguiente: los parámetros del evento Tocar tienen el mismo nombre que los espacios libres para especificar la ubicación del c´ırculo en DibujarC´ırculo , pero son valores independientes y con conceptualizaci´ on diferente. La Figura 4.3 muestra el código descrito anteriormente.

Figura 4.3: Dibujando un c´ırculo en el lugar donde el usuario toca el lienzo.

37

Ejemplo: ¿C´ omo mover una imagen al centro del lienzo?

4. material de apoyo Los bloques de la Fi-

gura 4.4 ubican el SpriteImagen1 en el centro del lienzo usando las propiedades Ancho y Alto. Dichas referencias abstractas significan que el código funcionar´ a aunque el lienzo cambie de tamaño.

Figura 4.4: Código para posicionar un sprite en el centro del lienzo. Una alternativa es poner números fijos para X e Y, después del bloque SpriteIma-

gen1.MoverA. Es muy similar a como (10, 10) fue usado en el ejemplo anterior. ¿Sabes porqué es sustra´ıda la mitad del alto y ancho del sprite? Fijáte que no existe un bloque DibujaImagen como DibujarC´ırculo. En vez de eso, con el Diseñador arrastras los componentes SpriteImagen en un lienzo y especificas la imagen (una foto) que define su apariencia. No hay forma de crear sprites dinámicos con bloques, sólo se pueden hacer visibles o invisibles, y se puede cambiar su ubicación, tal como se muestra en este ejemplo.

Variables ¿Cu´ ando defines una variable? Una aplicación memoriza cosas, tiene una memoria “escondida”. Puedes imaginártelo como una hoja de cálculo (o planilla) dentro del “cerebro” privado de la aplicació n. T´ u, el programador, controlas su memoria. Cuando arrastras un componente en tu aplicación (por ejemplo un botón, un cuadro de texto), cada componente tiene una serie de propiedades. Estas propiedades son celdas de tu hoja de cálculo que puedes modificar. Tambi´ en puedes definir nuevas celdas en tu planilla, cuando necesitas recordar algo: se llaman variables . Defines una variable cuando no existe en el componente una propiedad para almacenar la información que necesitas.

38

4. material de apoyo Ejemplo: ¿C´ omo hacer para que cada vez que el usuario hace click se agranda

el c´ırculo? Como se ilustra en la Figura 4.5, cuando se toca el Lienzo1 se llama a Lienzo1.DibujarC´ırculo para dibujar un c´ırculo donde se hizo el touch, en las coordenadas (x, y). El radio r no puede ser un número fijo si queremos un tamaño de c´ırculo distinto cada vez. La variable Tama~ noC´ ırculo se usa para seguir y recordar el tamaño de los c´ırculos cada vez que se dibuja uno. Se inicializa Tama~noC´ırculo en 1 para que el primer c´ırculo que se dibuje sea solo un peque˜ no punto. Luego, al final del controlador de eventos Lienzo1.Tocar el tama˜ no del c´ırculo se duplica. Entonces la segunda vez el c´ırculo tendrá un radio 2, luego 4, luego 8, etc. La variable Tama~ noC´ ırculo se necesita porque no hay ninguna propiedad del componente que se pueda usar. Por ejemplo, el componente Lienzo tiene una propiedad

AnchoDeL´ınea , entonces si estuvieses dibujando l´ıneas no necesitar´ıas definir una variable porque podr´ıas usar esta propiedad. Pero el lienzo no tiene una propiedad “Tamaño de C´ırculo”, por lo que debes definirla tú mismo usando una variable.

Figura 4.5: Usando una variable para controlar el radio de los c´ırculos dibujados.

Temporizadores Actividades Temporizadas ¿Cómo programar el tiempo? ¿Cómo programar una animaci´ on?. En otros lenguajes de programaci´ on, los conceptos de animación se ven mucho más adelante, pero con la metodolog´ıa de AppInventor puedes explorar este concepto desde el inicio. El componente Reloj sirve de alarma, y puedes usar su función de temporizador para iniciar una actividad con tiempos espec´ıficos. Mira los siguientes ejemplos:

39

4. material de apoyo Ejemplo: ¿C´ omo tocar un sonido cada 1 segundo? Como muestra la Figura 4.6 esto se puede hacer cuando se activa el evento Reloj.Temporizador de manera repetida. Conviene pensar en el temporizador como una alarma, donde la propiedad Reloj.IntervaloDelTemporizador determina cada cuanto se toca el sonido (por defecto son 1000 milisegundos, o 1 segundo). Entonces si no lo cambias el sonido se escuchará cada segundo. Puedes configurar esta propiedad en el Dise˜ nador o dinámicamente usando bloques.

Figura 4.6: Reproducir un sonido cada 1 segundo

Ejemplo 2: ¿C´ omo tocar un sonido cada 5 segundos? Como se dijo anteriormente, la propiedad Reloj.IntervaloDelTemporizador determina cada cuanto se toca el sonido. Por defecto esta configurado en 1000 milisegundos (1 segundo). Si lo configuras en 5000, el evento Reloj.Temporizador se activará cada 5 segundos, como se muestra en la Figura 4.7.

Figura 4.7: Reproducir un sonido cada 5 segundos Puede ser un poco confuso e indirecto tener que cambiar el intervalo en el Diseñador para luego especificar el comportamiento en el Editor de Bloques. La clave es comprender que el temporizador se gatillará como un evento cada Reloj.IntervaloDeTemporizador milisegundos.

Ejemplo 3: ¿C´ omo desplazas una nave espacial suavemente por la pantalla? Asumamos que tienes un SpriteImagen que representa una nave espacial. La coordenada X de la nave espacial define su posición horizontal. Para generar el movimiento hay que hacer que 40

4. material de apoyo cada evento del temporizador aumente la coordenada X, para que as´ı la nave aparezca un poco más a la derecha, como se muestra en la Figura 4.8. Si el IntervaloDelTemporiza-

dor tiene su propiedad por defecto en 1000 milisegundos, entonces la nave se moverá cada segundo. Para este tipo de animación, configurarás el intervalo en 40 milisegundos.

Figura 4.8: Mover una nave espacial por la pantalla.

Ejemplo 4: Una pel´ıcula es una secuencia de im´ agenes que se muestran muy r´ apidamente La frecuencia de cuadros de una imagen en movimiento es el número de imágenes que aparece cada segundo. Si configuras el intervalo de tiempo para la nave espacial en 40 milisegundos, ¿cuál ser´ a la frecuencia de cuadro de tu pel´ıcula? ¿Cuál es la t´ıpica frecuencia de cuadro de una pel´ıcula que ves en el cine? Si el intervalo está configurado en 40 milisegundos, el objeto se moverá cada 40 milisegundos. Entonces cada cuadro—cada nueva imagen con la nave en un lugar distinto— aparecer´ a por 40 milisegundos. Los cuadros por segundo ( frames per second o FPS en inglés) son una unidad de medida para contabilizar cuántos cuadros aparecen en un segundo (1000 milisegundos) es el n´ umero de cuadros que aparecen en un segundo (1000ms). Dado que cada cuadro mide 40 milisegundos, terminarás con 1000/40=25 cuadros por segundo. En el cine, lo estándar es tener 24 cuadros por segundo.

¿C´ omo iniciar y detener una animaci´ on? De la misma manera que puedes activar y apagar una alarma, puedes activar y desactivar el componente Reloj. Mira los siguientes ejemplos:

Ejemplo 1: Reproducir un sonido cada 1 segundo, con botones “Iniciar” y “Detener” El Reloj tiene una propiedad TemporizadorHabilitado. Cuando esta propiedad es marcada como verdadera, la alarma está activa y el temporizador se inicia. Cuando se marca como falsa, el temporizador está desactivado. Cuando el usuario presiona el bot´ on Iniciar, la propiedad TemporizadorHabilita-

do se marca como verdadera y un segundo después, y por cada segundo, el evento Re41

4. material de apoyo loj.Temporizador se activa y el sonido se escuchará. Cuando el usuario hace click en el botón “Detener”, el timer se desactiva y el sonido se detiene. El código correspondiente se muestra en la Figura 4.9

Figura 4.9: Cambiar la propiedad TemporizadorHabilitado del Reloj.

Ejemplo 2: Cuando el usuario habla, la nave empieza a moverse. Cuando el usuario sacude el tel´ efono, la nave se detiene. Para esto necesitas dos componentes adicionales, un ReconocimientoDeVoz que puede reconocer cuando el usuario está hablando, y un Aceler´ ometro que detecta cuando se sacuda el teléfono. El código se muestra en la Figura 4.10.

Figura 4.10: Moviendo la nave cuando el usuario habla, y deteni´ endola cuando se agita el dispositivo. El controlador de evento Pantalla.Inicializar se activa cuando se inicia la aplicación. El bloque ReconocimientoDeVoz.ObtenerTexto abre el sensor de voz para que espere que el usuario diga algo. Cuando el usuario habla, se activa el controlador de evento

ReconocimientoDeVoz.SensorVoz.Despu´ esDeObtenerTexto . En este controlador de eventos configurarás la propiedad Reloj.TemporizadorHabilitado como verdadera para que el temporizador se active y as´ı el sprite se empiece a mover. Cuando el usuario sacude el teléfono, se activa el Aceler´ ometro, y se desactiva el temporizador para que pare el sprite se 42

Dia2

Recommend Documents