Robotica Guia Teorica y Practica PDF

TUTORIAL DIARIO
DÍA 2
Introducción
Bienvenido al segundo dı́a del taller Programa Tus Ideas.
Los juegos y las aplicaciones de fuerte contenido audiovisual pueden ser una forma muy
apropiada de introducir a tus alumnos a los conceptos básidos de la programación en el Taller
de Aplicaciones. De hecho, una gran cantidad de las aplicaciones móvilles más populares hoy
en dı́a son juegos. El dı́a de hoy veremos cómo programar este tipo de aplicaciones en App
Inventor.
Comenzaremos a trabajar con el componente Lienzo, que permite dibujar lı́neas y cı́rculos,
y mostrar imágenes y animaciones. En el primer tutorial desarrollarás una aplicación estilo
“Paint”, donde puedes tomar una foto con la cámara y luego editarla usando lı́neas, cı́rculos y
distintos colores. Luego, aprenderás a programar animaciones básicas implementado el juego
Atrapa el Topo, inspirado por el clásico juego mecánico del mismo nombre. En tercer
lugar, presentamos un breve tutorial para programar el clásico juego Pong .
El resto de este documento consiste en material de apoyo sobre los siguientes conceptos
fundamentales: el componente Lienzo, el uso de temporizadores, y cómo programar usando
variables (donde se enseña el concepto de variables locales). En conjunto, estos componentes
de AppInventor permiten programar juegos bastante sofisticados.
1
1. tutorial: pintafotos
1. Tutorial: PintaFotos
En este tutorial presentaremos el componente Lienzo para crear aplicaciones con gráficos
y animaciones simples en 2 dimensiones (2D). Construiremos la aplicación PintaFotos que
permite al usuario dibujar en la pantalla usando distintos colores, usando una imagen de
fondo y dibujando sobre ella.
Un dato histórico: PintaFotos fue uno de los primeros programas desarrollados para
demostrar el potencial de los computadores, en la decada de 1970. En aquel entonces, hacer
algo tan simple como esta aplicación de dibujo era algo muy complejo, y los resultados
no eran perfectos. Pero ahora, con AppInventor, cualquiera puede rápidamente armar una
aplicación 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.
Figura 1.1: Interfaz de usuario aplicación PintaFotos
En esta aplicación podrás:
Bañar 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
Tocar la pantalla para hacer puntos.
Usar el botón de abajo para limpiar la pantalla.
Agrandar o achicar el tamaño de los puntos con los botones abajo.
Sacar una foto con la cámara y luego dibujar encima de esta foto.
Qué Aprenderás
Siguiendo este tutorial aprenderás a:
Usar el componente Lienzo para dibujar.
Manejar las funcionalidades “touch” y “arrastrar” en la pantalla del equipo.
Configurar la disposición de los componentes en la pantalla.
Usar los controladores de eventos que reciben argumentos o parámetros.
Definir variables para recordar cosas como el tamaño de un punto elegido por el usuario
para dibujar.
Para Empezar
Asegúrate que tu computador y teléfono están configurados para usar AppInventor. Crea
un nuevo proyecto y nómbralo PintaFotos. Abre el Editor de Bloques y comprueba que
puedes probar tu aplicación en tu dispositivo mediante la conexión USB. Consulta con tu
tutor ante cualquier problema.
Para empezar, ve al panel de propiedades a la derecha del Diseñador y cambia el tı́tulo
de la pantalla a “PintaFotos”. Deberı́as ver este cambio reflejado en el teléfono, con el nuevo
tı́tulo apareciendo en la barra de tı́tulos de tu app.
Si estás 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 en él. También será el nombre
de la aplicación cuando la quieras publicar. Nota que puedes hacer click en “Archivo”
y seleccionar “Guardar Como” en el Diseñador para crear una nueva versión o cambiar
el nombre de un proyecto.
3
El nombre de la componente, Screen1, que verás en el panel que contiene el listado
de los componentes de la app. No puedes cambiar este nombre en esta versión de
AppInventor.
El tı́tulo de la pantalla, él que ves en la barra de tı́tulo del teléfono. Empieza siendo
Screen1, que es el tı́tulo que usaste en HolaGatito. Pero lo puedes cambiar, como
lo hicimos en PintaFotos.
Diseñando los Componentes

Para crear la app usarás los siguientes componentes:
Tres componentes Botón para seleccionar pintura roja, azul o verde y un componente
DisposiciónHorizontal para organizarlos.
Un componente Botón para limpiar el dibujo, y otros dos para cambiar el tamaño de
los puntos.
Un componente Lienzo, que es la superficie para dibujar. El Lienzo tiene una pro-
piedad ImagenDeFondo, que configuraremos como gatito.png desde el tutorial Hola
Gatito. Más adelante, modificarás la app para que la imagen de fondo pueda ser una
foto sacada por el usuario.
Crea los Botones de Colores
Primero, crea los 3 botones de color usando las siguientes instrucciones:
Arrastra un Botón al Visor y cambia su Texto a “Rojo”, y su ColorDeFondo tam-

bién a rojo.
En la lista de Componentes, selecciona el Botón1 y presiona “Cambiar Nombre” para

cambiar su nombre por BotónRojo. Observa que no se puede poner espacios en los
nombres de los componentes, entonces es común poner en mayúscula la primera letra
de cada palabra en el nombre.
De la misma manera, crea dos botones adicionales para azul y verde, nombrados
BotónAzul y BotónVerde respectivamente. Ponlos debajo del botón rojo. Chequea
tu trabajo compará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
más significativos hace que tus proyectos sean más fáciles de leer, y realmente ayuda en el
momento de pasar al Editor de Bloques cuando tendrás que referirte a los componentes por
su nombre. A partir de ahora y en el resto del taller usaremos la convención de que cada
nombre de componente empiece por su tipo (por ejemplo: BotónRojo).
¡Prueba tu aplicación! Conecta tu aplicación a tu dispositivo y verifica que funcione

correctamente.
Usando los Componentes de Disposición para una Mejor Presentación
Ahora deberı́as tener tres botones alineados verticalmente. Sin embargo para esta app,
vas a necesitar que estén en fila horizontal arriba de la pantalla, como en la Figura 1.3. Para
ello debes usar el componente DisposiciónHorizontal.
Figura 1.3: Los tres botones en disposición horizontal.
5
1. Desde la categorı́a “Disposición” en la Paleta, arrastra un componente DisposiciónHo-
rizontal y ponlo debajo de los botones.
2. En el panel de Propiedades, cambia el Ancho de DisposiciónHorizontal a la opción

“Ajustar al contenedor” para llenar todo lo ancho de la pantalla.
3. Mueve los tres botones uno después del otro al interior de la DisposiciónHorizon-
tal. Truco: Verás una lı́nea vertical azul que indica dónde irá el elemento que estás
arrastrando.
Si miras en la lista de componentes del proyecto, verás tres botones listados bajo el
componente DisposiciónHorizontal, lo que muestra que se trata de sus subcomponentes.
Asimismo, observa que todos los componentes están listados bajo el componente Screen1.
¡Prueba tu Aplicación! 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 Diseñador. Por ejemplo,
el borde de DisposiciónHorizontal no aparece en el dispositivo.
En general, se usan los componentes de “Disposición” como opciones de diseño para crear
disposiciones simples, verticales, horizontales o en tablas. También puedes crear disposiciones
más complejas insertando componentes de disposición 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 Animación” 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
Cambia el ColorDePintura en el LienzoDeDibujo al color rojo para que cuando
el usuario inicie la app pero todavı́a no ha presionado ningun botón, 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 Cámara
1. Desde la Paleta, arrastra un nuevo componente DisposiciónHorizontal y ponlo abajo

del lienzo.
2. Luego arrastra dos componentes Botón adicionales en el Visor y ponlos dentro del
DisposiciónHorizontal que acabas de agregar. Cambia el nombre del primer botón
por BotónCámara y su Texto a “Sacar Foto”. Cambia el nombre del segundo botón
por BotónLimpiar y su Texto por “Limpiar”.
3. Arrastra dos botones más y colócalos al lado derecho del BotónLimpiar.
4. Nombra los nuevos botones como BotónGrande y BotónPequeño, y pon su Texto

como “Grande” y “Pequeño” respectivamente.
7
5. Desde la sección Medios de la Paleta, arrastra un componente Cámara hacia el Visor.
Aparecerá en la sección de los componentes no-visibles.
Una vez completados estos pasos, tu aplicación deberı́a verse como en la Figura 1.5.
Figura 1.5: Interfaz de usuario completa para PintaFotos
¡Prueba tu Aplicación! ¿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 próximo paso es definir có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 fáciles de usar para manejar las funcionalidades de touch y
arrastre, y para dibujar y sacar fotos.
8
En el Diseñador, agregaste un componente Lienzo llamado LienzoDeDibujo. Como
todos los componentes de ese tipo, LienzoDeDibujo tiene un evento Tocar y un evento
Arrastrado. Programarás el evento LienzoDibujo.Tocar de tal manera que llame a la fun-
ción LienzoDibujo.DibujarCı́rculo. Programarás el evento LienzoDibujo.Arrastrado
de tal manera que llame a la función LienzoDibujo.DibujarLı́nea. Programarás luego los
botones para configurar la propiedad ColorDePintura usando el bloque poner LienzoDi-
bujo.ColorPintura, y para limpiar el LienzoDeDibujo; y finalmente, programarás como
cambiar la ImagenDeFondo del lienzo por una foto sacada con la cámara del dispositivo.
Agregar el Evento Tocar para Dibujar un Punto
Primero, dispondrás los objetos de manera que cuando tocas el LienzoDeDibujo, se

dibuje 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 parámetros para x e y, y SpriteTocado,
como ilustrado en la Figura 1.6. Estos parámetros entregan información sobre la ubi-
cación del evento “tocar la pantalla” hecho por el usuario.
Figura 1.6: El evento viene con información sobre la ubicación del toque en la pantalla
Nota. Si completaste la aplicación Hola Gatito, ya estás familiarizado con los eventos
de Botón.Click, pero no con los eventos del lienzo. Los eventos Botón.Click son
bastante sencillos porque no hay nada más que saber del evento aparte del hecho que
ocurrió. Algunos controladores de eventos, sin embargo, vienen con información sobre
los argumentos para llamar al evento. El evento LienzoDibujo.Tocar te entrega las
coordenadas x e y del toque dentro del LienzoDeDibujo. También te dice si un
objeto dentro del LienzoDeDibujo (lo que se conoce como Sprite) fue tocado, pero
este punto se abordará más adelante. Las coordenadas x e y son los argumentos que
usaremos para grabar dónde el usuario tocó la pantalla, de manera de poder dibujar
el punto en este lugar.
9
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 aplicación dibuja un cı́rculo
Por el lado derecho del bloque LienzoDeDibujo.DibujaCı́rculo, verás tres espacios

vacı́os por completar con los argumentos siguientes: x, y, y r. Los x e y especifican
la ubicación donde el cı́rculo se va a dibujar, y r determina el radio (o tamaño) del
cı́rculo.
El signo amarillo con el punto de exclamación a la izquierda inferior de la pantalla
aparecerá con un 1 cuando un espacio todavı́a permanece vacı́o. Construiremos los
bloques para completar esto después.
Este controlador de evento puede confundir un poco porque el evento LienzoDeDi-
bujo.Tocar también tiene una x y una y. Solamente acuérdate que la x y la y para el
evento LienzoDeDibujo.Tocar te dice dónde tocó el usuario, mientras que el x e y
para el evento LienzoDeDibujo.DibujarCı́rculo son espacios abiertos para que tú
definas donde se dibujará el cı́rculo. Dado que quieres que el cı́rculo aparezca donde tocó
el usuario, conectarás los valores x e y desde el LienzoDeDibujo.Tocar de la misma
forma que los valores de los parámetros x e y en LienzoDeDibujo.DibujarCı́rculo.
Nota. Puedes acceder a los valores del evento al pasar el mouse sobre los parámetros
en el bloque “Cuando”. Al hacerlo, aparecerán los bloques tomar y poner a. Arrastra
el bloque tomar x y coné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 parámetro de un evento, arrastra un bloque tomar desde el
bloque LienzoDeDibujo.Tocar
3. Arrastra los bloques tomar x y tomar y y conéctalos en los espacios abiertos en el

bloque LienzoDeDibujo.DibujarCı́rculo, como se ilustra en la Figura 1.9.
Figura 1.9: La aplicación sabe donde dibujar (x,y), pero todavı́a necesitamos especificar cuá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 más pequeño que puede ser dibujado en la pantalla. Por ahora, ponle
como valor el número 5: haz click en una zona blanca de la pantalla y tipea 5, luego
presiona Enter para crear automáticamente un bloque numérico, y conecta este bloque
en el espacio para el parámetro r. Cuando hagas esto, el signo amarillo en la esquina
inferior se pondrá en 0 nuevamente, dado que todos los espacios abiertos habrá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 será dibujado
en las coordenadas (x, y) correspondientes.
Nota. Al poner un 5 en el Editor de Bloques y luego presionar Enter, habrá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 estás tipeando. Si tipeas un
número, crea un bloque numérico.
¡Prueba tu Aplicación! Usa tu dispositivo para probar lo que has desarrollado

hasta ahora. Al tocar el LienzoDeDibujo, tu dedo deberı́a dejar un punto en cada
lugar que toques. Los puntos serán rojos si configuraste la propiedad del LienzoDe-
Dibujo.ColorDePintura como color rojo en el Diseñador (sino será negro, que es el
color por defecto).
Agregar el Evento de Arrastre para Dibujar una Lı́nea
Luego, agregará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 estás haciendo en realidad es dibujar cientos de
12
pequeñas lı́neas rectas; cada vez que mueves tu dedo, incluso un poco, extiendes la lı́nea
desde la última posición de tu dedo hacia su nueva posición.
1. En el Editor de Bloques, desde la sección del LienzoDeDibujo, arrastra el bloque

LienzoDeDibujo.Arrastrado al espacio de trabajo. Deberı́as ver el gestionador de
eventos tal como en la Figura 1.11.
Figura 1.11: Un evento de arrastre tiene más argumentos que un evento de touch.
El evento LienzoDibujo.Arrastre viene con los siguientes argumentos:
XInicial, YInicial: la posición de tu dedo donde empieza el arrastre.

XActual, YActual: la posición actual de tu dedo.
XPrevio, YPrevio: la posición inmediatamente anterior de tu dedo.
SpriteArrastrado: un booleano, será verdad si el usuario hace el arrastre direc-
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 qué valores corresponden a cada argumento? Recuerda que el evento
13
LienzoDeDibujo.Arrastrado se activará cada vez que arrastres tu dedo en el Visor,
por lo tanto la aplicación dibuja una pequeñ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 aplicación dibujará una lı́nea desde el
punto anterior hacia el actual.
¡Prueba tu Aplicación! Arrastra tu dedo en la pantalla para dibujar lı́neas y cur-

vas. Toca la pantalla para dibujar puntos.
Agregar Controladores de Eventos para Botones
La aplicación que has construido hasta ahora permite al usuario dibujar, pero siempre
estos dibujos usan el color rojo. El próximo 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
para el BotónLimpiar para que pueda limpiar la pantalla y ası́ volver a empezar a dibujar.
En el Editor de Bloques:
1. Arrastra el bloque BotónRojo.Click al espacio de trabajo.
2. Arrastra el bloque poner LienzoDeDibujo.ColorDePintura y conéctalo en las ac-

ciones del bloque BotónRojo.Click.
3. Abre la sección “Colores” y arrastra el bloque de color rojo para conectarlo con el
bloque poner LienzoDeDibujo.ColorDePintura.
14
4. Repite los pasos anteriores para los botones azul y verde.
5. El último botón por configurar es el BotónLimpiar. Para limpiar el lienzo de dibujo

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 cámara. Para personalizar la aplicación, se permite
al usuario fijar la imagen de fondo de su dibujo con una foto tomada con la cámara.
1. El componente Cámara contiene dos bloques claves. El bloque Cámara.TomarFoto

inicia la aplicación de cámara del teléfono. El evento Cámara.DespuésDeTomarFo-
to se activa cuando el usuario terminó de sacar la foto. Agregarás bloques en el contro-
lador de eventos Cámara.DespuésDeTomarFoto para configurar el LienzoDeDi-
bujo.ImagenDeFondo con la foto que fue sacada. Abre la sección de BotónCámara
y arrastra el controlador de evento BotónCámara.Click hacia el espacio de trabajo.
2. Arrastra el bloque Cámara1.TomarFoto y ponlo en el controlador BotónCáma-

ra.TomarFoto.
3. Arrastra el controlador de eventos Cámara1.DespuésDeTomarFoto al espacio de

trabajo.
15
4. Arrastra el bloque poner LienzoDeDibujo.ImagenDeFondo y ponlo en las acciones
de Cámara1.DespuésDeTomarFoto.
5. Cámara1.DespuésDeTomarFoto tiene un argumento llamado imagen, que es la

foto recién sacada. Puedes referirte a ella, con un bloque “tomar” desde el bloque
Cámara1.DespuésDeTomarFoto. Conecta la imá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 Aplicación! 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 podrás dibujar
encima de la foto que sacaste.
Cambiar el Tamaño del Punto
El tamaño de los puntos dibujados en el LienzoDeDibujo se determina al llamar a

LienzoDeDibujo.DibujarCı́rculo, donde el argumento de radio está 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 pruébalo en el teléfono para ver cómo aparece.
El único tamaño que el usuario podrá usar es el que tú indicas como argumento para
el radio del cı́rculo. ¿Pero qué pasa si el usuario quiere cambiar el tamaño de los puntos?
Vamos a modificar el programa de manera que el usuario—no solo el programador—pueda
cambiar el tamaño de los puntos. Lo haremos de tal manera que cuando el usuario haga click
en un botón llamado “Grandes”, el tamaño será 8, y cuando hará click en un botón llamado
“Pequeños”, será 2.
16
Para usar distintos valores en el argumento radio, la aplicación necesita saber cuál que-
remos aplicar. Necesitamos pedirle usar un valor especı́fico, y tiene que memorizar este valor
de manera a poder seguir usándolo. Cuando tu aplicación 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 tamaño del punto.
Empezamos por definir una variable Tama~
noPunto:
1. En el Editor de Bloques, desde la sección “Variables”, arrastra un bloque Inicializar

global nombre. Cambia el texto “nombre” por “TamañoPunto”.
2. Fı́jate que el bloque Inicializar global TamañoPunto tiene un espacio abierto. Ahı́
es donde puede especificar el valor inicial de la variable, o su valor por defecto al iniciar
la aplicación. Para esta aplicación, inicializa el Tama~
noPunto en 2 creando un bloque
con el número 2, y conectándolo en Inicializar global TamañoPunto 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 número fijo. (Puede dar la ilusión que fijamos Tama~
noPunto en 2 porque lo
inicializamos de esta manera, pero verás en un minuto como podemos cambiar Tama~
noPunto
y asi cambiar el tamaño del punto que se dibuja.)
1. Arrastra un bloque “tomar” desde LienzoDeDibujo.DibujarCı́rculo. Deberı́as ver

un bloque tomar global TamañoPunto que indica el valor de la variable.
2. Anda al controlador de eventos LienzoDeDibujo.Tocar y arrastra el bloque del

número 5 fuera del espacio r y pónlo en el papelero. Luego reemplázalo con el bloque
tomar global TamañoPunto (Ver Figura 1.17). Cuando el usuario toca el lienzo, la
aplicación determinará ahora el radio a partir de la variable Tama~
noPunto.
17
Figura 1.17: Ahora el tamaño de cada cı́rculo depende de lo que está guardado en la memoria
de la variable Tamañ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 tamaño del cı́rculo, y tu controlador de eventos dibujará el cı́rculo en fun-
ción de esto. Desarrollaremos el comportamiento al programar los controladores de eventos
BotónPequeño.Click y BotónGrande.Click.
1. Arrastra un controlador de eventos BotónPequeño.Click al espacio de trabajo. Lue-

go arrastra desde la categorı́a “Variables” un bloque poner a, selecciona “global Ta-
mañoPunto” como referencia y conectalo a BotónPequeño.Click. Finalmente, crea
un bloque número 2 y conéctalo al bloque poner global TamañoPunto.
2. Haz un controlador de eventos similar para BotónGrande.Click, pero configura el

noPunto en 8. Ambos gestionadores de eventos deberı́an aparecer en el editor de
Tama~
bloques, como en la Figura 1.18.
Figura 1.18: Hacer click en los botones cambia el tamaño del punto. Los toques que siguen
serán con este tamaño de punto.
¡Prueba tu Aplicación! Intenta hacer click en los botones de tamaño y luego toca el
lienzo. ¿Se dibujan cı́rculos de distintos tamaños? ¿Las lı́neas? El tamaño de las lı́neas no
18
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
también pueda cambiar el tamaño de la lı́nea? (Nota que el lienzo tiene una propiedad
llamada AnchodeLinea)
La App Completa: PintaFotos
La Figura 1.19 ilustra el código completo de la aplicació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. También es sensible a eventos

“touch” y de arrastre, los cuales puedes aprovechar para desarrollar funcionalidades
para dibujar.
Puedes usar componentes de disposición en la pantalla para organizar tus componentes

en lugar de ponerlos todos uno debajo del otro.
Algunos controladores de eventos vienen con información sobre el evento, como las
coordenadas de donde la pantalla fue tocada. Esta información está representada por
19
2. discusión y ejercicios de personalización
argumentos. Cuando arrastras un controlador de eventos que tiene argumentos, Ap-
pInventor 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 información en memoria, como el tamaño del punto,
que no está guardado en una propiedad de un componente.
Para cada variable que definas, AppInventor automá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 también se puede usar para programar animaciones como las que
ves en juegos en 2D.
2. Discusión y Ejercicios de Personalización

Preguntas/Discusión
1. En el Lienzo, los controladores de eventos Tocar y Arrastrado, mostrados abajo en

la Figura 2.1, tienen parámetros de evento. Nombra cada parámetro e indica lo que
representa.
Figura 2.1: Grupos de bloques para PintaFotos.
20
2. discusión y ejercicios de personalización
2. Los parámetros de evento son distintos de los parámetros para llamar funciones. ¿Cómo
se llaman los parámetros para llamar funciones en el controlador de eventos de la ???
¿Quién especifica los parámetros de función? Quién especifica parámetros de eventos?
3. ¿Cuál es el propósito de definir una variable para el Tamaño de Punto en la App Pinta
Fotos? Si quieres permitir cambiar el grosor de las lı́neas, ¿necesitarás una variable?
4. Define lo que es una variable. ¿Cuáles son sus puntos en común con una propiedad?
¿Cómo se diferencia de una propiedad?
5. Una forma de personalizar la aplicación es poner un CuadroDeTexto para el tamaño

del punto. ¿Cuál es la diferencia entre un cuadro de texto y una variable? ¿Cuál es la
diferencia entre una etiqueta y un cuadro de texto?
Ejercicios de Personalización
1. La interfaz de usuario de PintaFoto no permite mostrar con qué color se está dibu-
jando. El usuario sólo se da cuenta al dibujar. ¿Puedes agregar esta información para
el usuario de tal manera que cuando él hace click para cambiar el color, la interfaz
cambia y le indica qué color fue elegido?
2. El tamaño del punto para dibujar un cı́rculo sólo puede ser de 2 o 8. ¿Puedes cam-
biar 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 pue-
de cambiar el tamaño del punto. El lienzo tiene una propiedad AnchoDeLinea que
controla esta caracterı́stica.
21
3. tutorial: atrapa el topo
3. Tutorial: Atrapa el Topo
En este tutorial desarrollarás el juego Atrapa el Topo, inspirado en las salas de juegos
clásicas, en las que unos topos mecánicos saltan fuera de su hueco, y los jugadores ganan
puntos golpeá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 término
Sprite apareció en la comunidad de informáticos en los años 70, y se referı́a a imágenes
capaces de moverse en la pantalla de un computador (para videojuegos).
Qué Construirás
Para la aplicación Atrapa el Topo, ilustrada en la Figura 3.1, implementarás las si-
guientes funcionalidades:
Un topo que salta en cualquier lugar de la pantalla, moviéndose cada segundo.
Tocar el topo hace vibrar el telé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 a tocar el topo provoca que el marcador de toques
perdidos aumente.
Al presionar el botón “Reiniciar” se reinicia el contador de golpes logrados y perdidos.
22
Figura 3.1: Interfaz de usuario de Atrapa el Topo.
Qué Aprenderás
Este tutorial cubre los siguientes componentes y conceptos:
El componente SpriteImagen para imá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 vibración cuando el topo es tocado.
El componente Botón para empezar un nuevo juego.
23
Procedimientos para implementar comportamientos repetitivos, como desplazar el to-
po.
Generar números al azar.
Usar los bloques de sumar (+) y restar (-).
Para empezar
Conéctate al sitio de AppInventor y crea un nuevo proyecto. Llamálo “AtrapaElTopo” y
también cambia el tı́tulo de la pantalla como “AtrapaElTopo”. Abre el Editor de Bloques y
conéctate a tu dispositivo Android.
Descarga la imagen ProgramaTusIdeas/Dia2/topo.png. Luego vé a la sección de Medios
del Diseñador de Componentes y súbela a AppInventor.
Diseñando los Componentes

Utilizará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.
Etiquetas que dicen “Logrado”, “Perdido”, y el número de toques logrados y pérdidos.
Un componente DisposiciónHorizontal para posicionar las etiquetas correctamente.
Un Botón para reiniciar a 0 el número de golpes exitosos y fallidos.
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
24
Ubicar los Componentes de Acción
En esta sección crearemos los componentes necesarios para que funcione el juego. En la
siguiente secció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 Botón debajo de Lienzo1. Cambia su nombre por “BotónReinicializar” y

configura su Texto como “Reinicializar”.
4. Arrastra un componente Reloj. Aparecerá abajo del Visor, en la sección de compo-

nentes no visibles.
5. Arrastra un componente Sonido. También aparecerá abajo del Visor, en la sección de

componentes no-visibles.
Tu pantalla deberı́a verse como en la Figura 3.2 (aunque tu topo puede estar en una
posición distinta).
25
Figura 3.2: El Diseñador con la vista de los componentes de acción
Poner las Etiquetas
Ahora pondremos los componentes para mostrar el marcador de puntos del usuario, más
especı́ficamente los golpes exitosos y fallidos.
1. Arrastra un componente DisposiciónHorizontal, del grupo “Disposición”, poniéndo-

lo debajo del BotónReinicializar y dejando el nombre por defecto “DisposiciónHo-
rizontal1”.
2. Arrastra dos Etiquetas hacia la DisposiciónHorizontal.
Cambia el nombre de la etiqueta izquierda por “EtiquetaExitos” y configura su

Texto como “exitos: ” (¡Ojo! : tienes que incluir un espacio después de los dos
26
puntos).
Cambia el nombre de la etiqueta derecha por “EtiquetaPuntosGanados” y confi-
gura su Texto como “0”.
3. Arrastra un segundo componente DisposiciónHorizontal, poniendolo debajo de Dis-

posiciónHorizontal1.
4. Arrastra dos Etiquetas hacia la DisposiciónHorizontal2
Cambia el nombre de la etiqueta izquierda por “EtiquetaFallos” y configura su Texto

como “Fallos: ” (¡Ojo! : tienes que incluir un espacio despué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 Diseñador con todos los componentes del juego.
27
Agregar comportamientos a los componentes
Luego de crear los componentes anteriores, tienes que ir al Editor de Bloques para im-
plementar 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 aplicación mostrará el número de veces que el jugador logró tocar o no al topo.
Pinchar en el botó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
aparecerá en una sección y podrá 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 cómo mover el topo, necesitamos ver cómo funcionan los gráficos de
Android.
El lienzo (y la pantalla) son como una cuadrı́cula con coordenadas x (horizontal) e y (ver-
tical), 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 dó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 má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 tamañ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
28
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 información de ancho, coordenadas y
altura. La información de la coordenada x está en azul, y la de la coordenada y está en
naranjo.
Para dar una posició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 número aleatorio
con el procedimiento preexistente entero aleatorio entre, que se encuentra en la sección
“Matemáticas”. Tendrás que cambiar los parámetros como se muestra en la Figura 3.5.
La figura muestra además comentarios descriptivos que puedes opcionalmente agregar a tu
procedimiento.
29
Figura 3.5: El procedimiento MoverTopo, que pone el Topo en una ubicación aleatoria.
Para crear el procedimiento MoverTopo:
1. Selecciona la secció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 reemplázalo por “MoverTo-

po”, 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 moverá 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 sección “Matemáticas”.

Arrastra el bloque entero aleatorio entre, conectándolo con el parámetro x en
llamar Topo.MoverA.
Cambia el número 1 en el espacio “entre” por un 0.
Borra el número 100 en el espacio “y”.
30
Selecciona la sección “Matemáticas” y arrastra un bloque de resta (-) al espacio
de trabajo.
Selecciona el bloque Lienzo1.Ancho y arrá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 está más arriba.
Llamar MoverTopo cuando se Inicia la Aplicación
Ahora que escribiste el procedimiento MoverTopo, ¡usémoslo! Es muy común que los
programadores quieran que pase algo cuando se inicia la aplicación, y es por eso que hay un
bloque para esto: Pantalla1.Inicializar.
1. Arrastra el bloque Pantalla1.Inicializar, desde la sección Pantalla1.
2. Selecciona la sección “Procedimientos”, donde ahora verás un bloque llamado llamar

MoverTopo. 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 aplicació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 ejecutará un evento
Reloj1.Temporizador. Estos eventos los usaremos para mover el topo cada 1 segundo, de
la siguiente manera:
31
1. Selecciona la sección Reloj1, y arrastra el controlador de eventos Reloj1.Temporizador
hacia el espacio de trabajo.
2. Arrastra un bloque llamar MoverTopo, desde la secció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 rápido para ti, puedes cambiar la propiedad de

intervalo de tiempo en el Diseñador, para cambiar la frecuencia de movimiento.
Llevar el Puntaje
¿Te acuerdas de que creaste dos etiquetas EtiquetaPuntosGanados y EtiquetaPun-

tosFallados, con valores iniciales de 0? Ahora queremos incrementar los números en estas
etiquetas cuando el usuario logra tocar el topo (un é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 código que vamos a crear.
Figura 3.8: Se incrementa el número de éxitos o fallidos cuando el lienzo está tocado.
La traducció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
32
el Topo es tocado, suma 1 al número en EtiquetaPuntosGanados.Texto; sino, suma 1 al
nú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 sección “Control”, y arrastra un bloque si-sino (tendrás que agregar el

bloque sino después de mover el bloque al espacio de trabajo) y coló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 secció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 sección “Matemáticas”, hasta el espacio
del bloque poner EtiquetaPuntosGanados.Texto como.
Arrastra el bloque EtiquetaPuntosGanados.Texto como el argumento izquier-
do del bloque de suma.
Agrega un bloque numérico con valor 1 como argumento derecho del bloque de
suma.
5. Repite el paso anterior, pero para la etiqueta EtiquetaPuntosFallados, en la sección

si no, del bloque si ... sino.
¡Prueba tu Aplicación! Puedes probar tu juego tocando el lienzo y el topo, y

viendo cómo cambian los puntajes.
Abstracción procedural
La capacidad de nombrar y luego llamar una serie de instrucciones como MoverTopo es

una de las herramientas claves en ciencias de la computación, y esta herramienta se llama
abstracción procedural.
33
Se llama abstracción 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
saber qué hace el procedimiento (mover el topo), pero no cómo lo hace (al hacer dos llamados
al generador de números aleatorios). Sin la abstracción procedural, grandes programas de
computación no serı́an posibles porque contienen demasiado código para que lo memorice
una sola persona. Se puede hacer una analogı́a con la división del trabajo en una planta por
ejemplo, donde distintos ingenieros diseñan diferentes partes de un auto, ninguno de ellos
entendiendo todos los detalles, y el conductor sólo tiene que comprender la interfaz (por
ejemplo apretar el freno para detener el auto), y no toda la ingenierı́a que hay por detrás.
Algunas ventajas de la abstracción procedural en comparación con copiar y pegar código
son:
Es más fácil probar el código si está nı́tidamente separado del resto del programa.
Si hay un error en el có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 có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 código en trozos permite reflexionar bien sobre el código y desarrollar la

aplicación de acuerdo a esta reflexión.
Elegir buenos nombres para los procedimientos ayuda a documentar el código, ha-
ciéndolo más fácil de leer para otra persona que lo tomará después.
Más adelante aprenderás a hacer procedimientos más potentes, agregando argumentos,

dando valores de retorno y haciendo que los procedimientos se llamen a ellos mismos.
Reinicializar el Puntaje
En una aplicación como esta, es razonable pensar que habrá más de un usuario. Por
lo tanto, es 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.
34
Lo que necesitamos es un bloque BotónReinicializar.Click que ponga el marcador
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 botó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 botón, pero aquı́ va un consejo para
acelerar el proceso: en vez de sacar tu número de la sección “Matemáticas”, solamente tipea
0, y el bloque deberı́a crearse. (Estos atajos existen para otros bloques también.)
¡Prueba tu Aplicación! Intenta jugar y luego apreta el botó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 pode-
mos 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 Aplicación! Revisa si vibra el teléfono cuando tocas el topo. Si la vibración

es demasiada larga o corta, según tu gusto, cambia el número de milisegundos en el bloque
Sonido1.Vibrar
La Aplicación Completa: Atrapa el Topo
La Figura 3.11 muestra cómo se ven los bloques para la versión completa de Atrapa el
Topo.
35
Figura 3.11: El código de la versión completa de Atrapa el Topo.
Variantes
Aquı́ vienen algunas ideas para agregar más funcionalidades a Atrapa el Topo:
Agregar botones para mover el topo más lento o más rápido.
Agregar una etiqueta para recordar y mostrar cuántas veces apareció 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, será 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.
36
4. animaciones usando sprites
4. Animaciones Usando Sprites
¿Cómo animar Sprites?

Los componentes SpriteImagen son objetos especiales que representan figuras que se
mueven por la pantalla. A partir de ahora los llamaremos simplemente sprites. Los sprites
están especialmente diseñados para la creación de animaciones y videojuegos, y deben utili-
zarse dentro de un componente Lienzo. Dentro de un lienzo, el sprite tiene una Dirección,
una Velocidad y un Intervalo. Además, un sprite puede colisionar con los bordes del lienzo,
y con otros sprites. La Figura 4.1 cómo se orienta un sprite dentro del lienzo. La dirección
del sprite se representa mediante un ángulo, entre 0 y 360 grados. El ángulo 0 representa
el movimiento hacia la derecha, y el ángulo 180 hacia la izquierda. Además, los bordes del
lienzo están identificados por números, como se ve en la figura.
Figura 4.1: Configuración del Lienzo para la animación de Sprites.
¿Cómo reduces la velocidad de un sprite, suavemente, a 100 pixeles por segundo?

La velocidad de un SpriteImagen, que se mide en pixeles por segundo, es determinada por
dos propiedades. La propiedad Intervalo especifica cada cuantos milisegundos el sprite se va
a mover, y es muy similar a la propiedad Reloj.IntervaloDelTemporizador. La propiedad
Velocidad especı́fica cuántos pixeles el sprite se moverá en cada intervalo. En el ejemplo
que se muestra en la Figura 4.2 el sprite se mueve 5 pixeles cada 50 milisegundos, o 1 pı́xel
cada 10 milisegundos—o sea, 100 pixeles/segundo.
Figura 4.2: Ajustando la dirección, velocidad e intervalo de un sprite.
La propiedad de Dirección del sprite especifica la dirección en la cual se mueve. Como

se ilustra en la Figura 4.2, el sprite se moverá hacia abajo con una orientación de 270 grados.
Ejemplo 2: ¿Cómo hacer rebotar una pelota? AppInventor tiene un bloque Botar
que provoca que una pelota rebote en el borde del lienzo. Tı́picamente se usa Botar dentro
37
del controlador de eventos Pelota.TocarBorde, dado que este controlador de eventos indica
cual borde ha sido alcanzado, como parámetro, por lo que puedes conectar este parámetro
en la función Botar—que necesita saber desde que borde rebotar.
También puedes hacer rebotar otros objetos (sprites o pelotas). El controlador de eventos
EnColisiónCon se activa cuando dos objetos chocan. Sin embargo, la función Botar sola-
mente funciona en el borde de un lienzo, ası́ que no puede usarse para colisiones en general.
Lo que sı́ puedes hacer es hacer rebotar el sprite o pelota en la dirección opuesta a la que
tenı́a antes de la colisión, configurando su Orientación como 360 menos el valor actual.
Esto se ilustra en la Figura 4.3.
Figura 4.3: Programando una Pelota para que rebote al tocar el borde, y para que invierta
su dirección al chocar con otro sprite u objeto animado.
Desafı́os Animados
Desafı́o 1: Animación Básica Para los siguientes desafı́os, necesitarás un componente
Lienzo que ocupe todo lo ancho de la pantalla y que tenga unos 300 pixeles de Alto. Agrega
un botón con texto “Iniciar!” abajo del lienzo. Crearás dos aplicaciones distintas:
1. Mover a la izquierda, abajo y en diagonal usando un Reloj.

Agregar un componente Reloj y tres componentes Pelota en el Lienzo. Cuando se
hace click en el botón Iniciar las pelotas deben empezar a moverse dentro del lienzo
(puedes obtener un movimiento suave al configurar el Intervalo de tiempo del Reloj
en 50 milisegundos). Una pelota deberı́a ir hacia abajo, otra a la izquierda y otra en
diagonal. Las pelotas deben parar cuando tocan el borde del lienzo. Para este desafı́o
38
usa sólo 1 componente Reloj y NO uses las propiedades de animación internas del
componente Pelota (velocidad etc.).
2. Mover a la izquierda, abajo y en diagonal usando una animación de Sprite.

Para este desafı́o vas a repetir el comportamiento del punto anterior pero sin usar un
componente Reloj. En vez de eso, utiliza las propiedades de animación internas del
componente Pelota: Velocidad, Intervalo y Dirección.
Discusión: Velocidad y Cuadros por Segundo
1. ¿Qué tan rápido se estaban moviendo tus objetos en el ejercicio anterior?
2. ¿Cómo determinar la velocidad de tus objetos cuando usas: a) una animación Sprite
b) un contador de tiempo?. Indica una fórmula para cada caso.
3. Los Cuadros por Segundo (CPS) es una medición usada en pelı́culas y animaciones.
Indica cuantas veces por segundo la pelı́cula se actualiza. ¿Qué CPS se necesita para
que el cambio no sea notado por el ojo humano? (Puedes buscarlo en Google)
4. ¿Cuál es el CPS de un juego si el IntervaloDelTemporizador es de 100 milisegundos.
5. Ejercicio de código: modifica uno de tus aplicaciones para que un objeto se mueva 50
pixeles por segundo y otro objeto se mueva a 100 pixeles por segundo.
Desafı́o 2: Ida y Vuelta Crea nuevas aplicaciones para los comportamientos siguientes:
1. Cuando se presiona un botón, una pelota hace idas y vueltas perpetuas en la pantalla.
Hazlo sin un componente Reloj (o sea, con una animación de Sprite/Pelota).

Hazlo con un componente Reloj.
2. Cuando se presiona un botón, una pelota se mueve haciendo idas y vueltas perpetuas
desde el borde izquierdo de la pantalla hasta la mitad de la pantalla.
Hazlo sin un componente Reloj (o sea, con una animación de Sprite/Pelota).

Hazlo con un componente Reloj.
39
5. tutorial: pong
5. Tutorial: Pong
En este tutorial aprenderás a programar una versión sencilla del clásico juego Pong .
Hacer este juego te ayudará a familiarizarte con la animación de sprites, a manejar colisiones,
y a definir procedimientos para que ası́ puedas programar mejor!
A diferencia de los tutoriales anteriores, en este tutorial te entregaremos un esqueleto
de la aplicación, con la interfaz de usuario ya desarrollada. Tu misión es programar los
comportamientos de los distintos elementos del juego.
La interfaz de usuario final para la aplicación se muestra en la Figura 5.1:
Figura 5.1: Interfaz de usuario del juego Pong
Para programar este juego debes seguir los siguientes pasos:
1. Programa una Pelota que se mueva en dirección hacia abajo. La pelota inicia su
movimiento cuando se presiona el botón “Empezar” (Figura 5.2).
40
5. tutorial: pong
Figura 5.2: La pelota se mueve hacia abajo cuando comienza el juego.
2. En el programa anterior la pelota es muy predecible, porque siempre va en lı́nea recta

hacia abajo desde el medio de la pantalla. Ahora programa la pelota para que baje en
una dirección aleatoria—pero que aún es hacia abajo ¿Qué ángulos son “hacia abajo”?
(Figura 5.3).
Figura 5.3: La pelota se mueve hacia abajo en una dirección aleatoria.
3. Programa los rebotes de la pelota: contra los bordes y contra la barra.
Figura 5.4: La pelota rebota al tocar los bordes y al colisionar con la barra.
41
5. tutorial: pong
4. Programa la barra para que se mueva cuando el usuario arrastre el dedo. La barra sólo
se mueve horizontalmente (o sea, sólo en la coordenada X) (Figura 5.5).
Figura 5.5: La barra se mueve según el usuario arrastre el dedo sobre ella.
5. Modifica el programa para obtener 1 punto cada vez que la barra golpea la pelota. Para
esto vas a usar un procedimiento con argumentos, averigua por ti mismo, o consulta a
tu tutor al respecto (Figura 5.6).
Figura 5.6: Aumentando el puntaje cada vez que se golpea la pelota con la barra.
6. Modifica el programa para que el juego termine si la pelota choca con el borde de abajo
(Figura 5.7).
42
5. tutorial: pong
Figura 5.7: El juego termina cuando la pelota choca con el borde de abajo.
7. Agrega un componente Sonido y modifica el programa para agregar distintos efectos

de sonido cuando la pelota choca en la barra, toca los bordes, y para el fin del juego
(los archivos ya vienen incorporados en el proyecto inicial, ver Figura 5.8).
Figura 5.8: Efectos de sonido para las colisiones, toque de bordes y fin del juego.
8. Agrega un component CasillaDeVerificación para que el usuario puede apagar/prender

el sonido (Figura 5.9).
43
5. tutorial: pong
Figura 5.9: La reproducción de sonidos depende del valor de la casilla de verificación.
44
6. proyecto: crea tu propio juego o aplicación
6. Proyecto: Crea tu Propio Juego o Aplicación
Crea una aplicación con animaciones similares–pero más complejas—que en el juego
Atrapa el Topo y Pong .
La aplicación debe tener las siguientes funcionalidades:
Objetos que se mueven en el tiempo (por ejemplo una nave espacial que atraviesa la
pantalla).
Objetos que se mueven o son transformados en reacción a la actividad del usuario (por
ejemplo el sensor de orientación para controlar el movimiento).
Objetos que aparecen o desaparecen en reacción a las actividades del usuario (por
ejemplo, un asteoride que desaparece cuando recibe un disparo).
Uso de bloques condicionales.
Uso de bloques EnColisiónCon y TocarBorde.
¡Se creativo! No necesitas crear un juego, puedes crear lo que tu quieras mientras muestre
todos los comportamientos listados arriba. Comparte tu idea con tu tutor y aseguráte que
tienes todos los comportamientos requeridos.
45
7. material de apoyo
7. Material de Apoyo
El Componente Lienzo
El componente Lienzo es una subsección dentro de tu aplicació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 tendrás que ajustar la propiedad Ancho con la opción “Ajustar al
contenedor”. Por lo general vas a necesitar tener otros elementos abajo o arriba, por lo que
configurarás el Alto como un número fijo de pixeles.
La ubicación de un objeto en el lienzo se define con coordenadas X, Y relativas a la
esquina arriba e izquierda del lienzo. X es la ubicación horizontal del objeto, siendo 0 el
borde izquierdo y X creciendo cuando el objeto se mueve hacia la derecha. Y es la ubicació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 7.1.
Figura 7.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: ¿Cómo 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 parámetros x, y y un radio r. x es
la ubicación horizontal, y es la ubicación vertical, y r es el radio del cı́rculo por dibujar. Si
x tiene un valor de 10 significa que el cı́rculo será ubicado 10 pixeles a la derecha del borde
izquierdo del lienzo. Si y tiene un valor de 10 significa que el cı́rculo será ubicado 10 pixeles
abajo del borde superior del lienzo. La Figura 7.2 muestra cómo dibujar un cı́rculo en la
coordenada (10,10) y con radio de 5 pixeles.
46
Figura 7.2: Dibujando un cı́rculo en el lienzo, en la coordenada (10,10) y con radio 5 pixeles.
Ejemplo: ¿Cómo dibujar un cı́rculo en el lugar donde el usuario toca el lienzo?

La funcionalidad “touch” (táctil) se activa cuando el usuario toca con el dedo en el lienzo.
Tiene parámetros x e y que indican la ubicación del toque. El parámetro SpriteTocado espe-
cifica si el toque ocurrió o no en un SpriteImagen (esto no influye en su comportamiento).
Para dibujar el cı́rculo donde el usuario tocó el lienzo, debes pasar el mouse sobre los
pará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
parámetros del evento Tocar tienen el mismo nombre que los espacios libres para especi-
ficar la ubicación del cı́rculo en DibujarCı́rculo, pero son valores independientes y con
conceptualización diferente. La Figura 7.3 muestra el código descrito anteriormente.
Figura 7.3: Dibujando un cı́rculo en el lugar donde el usuario toca el lienzo.
Ejemplo: ¿Cómo mover una imagen al centro del lienzo? Los bloques de la Fi-
gura 7.4 ubican el SpriteImagen1 en el centro del lienzo usando las propiedades Ancho
y Alto. Dichas referencias abstractas significan que el código funcionará aunque el lienzo
cambie de tamaño.
47
Figura 7.4: Código para posicionar un sprite en el centro del lienzo.
Una alternativa es poner números fijos para X e Y, después del bloque SpriteIma-
gen1.MoverA. Es muy similar a como (10, 10) fue usado en el ejemplo anterior. ¿Sabes
porqué es sustraı́da la mitad del alto y ancho del sprite?
Fijáte que no existe un bloque DibujaImagen como DibujarCı́rculo. En vez de eso,
con el Diseñador arrastras los componentes SpriteImagen en un lienzo y especificas la
imagen (una foto) que define su apariencia. No hay forma de crear sprites dinámicos con
bloques, sólo se pueden hacer visibles o invisibles, y se puede cambiar su ubicación, tal como
se muestra en este ejemplo.
Variables
¿Cuándo defines una variable? Una aplicación memoriza cosas, tiene una memoria
“escondida”. Puedes imaginártelo como una hoja de cálculo (o planilla) dentro del “cerebro”
privado de la aplicación. Tú, el programador, controlas su memoria. Cuando arrastras un
componente en tu aplicación (por ejemplo un botón, un cuadro de texto), cada componente
tiene una serie de propiedades. Estas propiedades son celdas de tu hoja de cálculo que puedes
modificar.
También 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 información que necesitas.
Ejemplo: ¿Cómo hacer para que cada vez que el usuario hace click se agranda
el cı́rculo? Como se ilustra en la Figura 7.5, cuando se toca el Lienzo1 se llama a Lien-
zo1.DibujarCı́rculo para dibujar un cı́rculo donde se hizo el touch, en las coordenadas (x,
y). El radio r no puede ser un número fijo si queremos un tamaño de cı́rculo distinto cada
vez. La variable Tama~
noCı́rculo se usa para seguir y recordar el tamaño de los cı́rculos cada
48
vez que se dibuja uno. Se inicializa Tama~
noCı́rculo en 1 para que el primer cı́rculo que se
dibuje sea solo un pequeño punto. Luego, al final del controlador de eventos Lienzo1.Tocar
el tamaño del cı́rculo se duplica. Entonces la segunda vez el cı́rculo tendrá 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 varia-
ble porque podrı́as usar esta propiedad. Pero el lienzo no tiene una propiedad “Tamaño de
Cı́rculo”, por lo que debes definirla tú mismo usando una variable.
Figura 7.5: Usando una variable para controlar el radio de los cı́rculos dibujados.
Temporizadores
Actividades Temporizadas
¿Cómo programar el tiempo? ¿Cómo programar una animación?. En otros lenguajes de

programación, los conceptos de animación se ven mucho más adelante, pero con la metodo-
logı́a de AppInventor puedes explorar este concepto desde el inicio. El componente Reloj
sirve de alarma, y puedes usar su función de temporizador para iniciar una actividad con
tiempos especı́ficos.
Mira los siguientes ejemplos:
Ejemplo: ¿Cómo tocar un sonido cada 1 segundo? Como muestra la Figura 7.6 esto
se puede hacer cuando se activa el evento Reloj.Temporizador de manera repetida. Convie-
ne 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).
49
Entonces si no lo cambias el sonido se escuchará cada segundo. Puedes configurar esta pro-
piedad en el Diseñador o dinámicamente usando bloques.
Figura 7.6: Reproducir un sonido cada 1 segundo
Ejemplo 2: ¿Cómo 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 activará cada 5 segundos, como se muestra en la Figura 7.7.
Figura 7.7: Reproducir un sonido cada 5 segundos
Puede ser un poco confuso e indirecto tener que cambiar el intervalo en el Diseñador
para luego especificar el comportamiento en el Editor de Bloques. La clave es comprender
que el temporizador se gatillará como un evento cada Reloj.IntervaloDeTemporizador
milisegundos.
Ejemplo 3: ¿Cómo desplazas una nave espacial suavemente por la pantalla? Asu-
mamos que tienes un SpriteImagen que representa una nave espacial. La coordenada X de
la nave espacial define su posición horizontal. Para generar el movimiento hay que hacer que
cada evento del temporizador aumente la coordenada X, para que ası́ la nave aparezca un
poco más a la derecha, como se muestra en la Figura 7.8. Si el IntervaloDelTemporiza-
dor tiene su propiedad por defecto en 1000 milisegundos, entonces la nave se moverá cada
segundo. Para este tipo de animación, configurarás el intervalo en 40 milisegundos.
50
Figura 7.8: Mover una nave espacial por la pantalla.
Ejemplo 4: Una pelı́cula es una secuencia de imágenes que se muestran muy

rápidamente La frecuencia de cuadros de una imagen en movimiento es el número de
imágenes que aparece cada segundo. Si configuras el intervalo de tiempo para la nave espacial
en 40 milisegundos, ¿cuál será la frecuencia de cuadro de tu pelı́cula? ¿Cuál es la tı́pica
frecuencia de cuadro de una pelı́cula que ves en el cine?
Si el intervalo está configurado en 40 milisegundos, el objeto se moverá cada 40 milisegun-
dos. Entonces cada cuadro—cada nueva imagen con la nave en un lugar distinto—aparecerá
por 40 milisegundos. Los cuadros por segundo (frames per second o FPS en inglés) son una
unidad de medida para contabilizar cuántos cuadros aparecen en un segundo (1000 mili-
segundos) es el número de cuadros que aparecen en un segundo (1000ms). Dado que cada
cuadro mide 40 milisegundos, terminarás con 1000/40=25 cuadros por segundo. En el cine,
lo estándar es tener 24 cuadros por segundo.
¿Cómo iniciar y detener una animación?
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 “De-

tener” El Reloj tiene una propiedad TemporizadorHabilitado. Cuando esta propiedad
es marcada como verdadera, la alarma está activa y el temporizador se inicia. Cuando se
marca como falsa, el temporizador está desactivado.
Cuando el usuario presiona el botón Iniciar, la propiedad TemporizadorHabilita-
do se marca como verdadera y un segundo después, y por cada segundo, el evento Re-
loj.Temporizador se activa y el sonido se escuchará. Cuando el usuario hace click en el
botón “Detener”, el timer se desactiva y el sonido se detiene. El código correspondiente se
muestra en la Figura 7.9
51
Figura 7.9: Cambiar la propiedad TemporizadorHabilitado del Reloj.
Ejemplo 2: Cuando el usuario habla, la nave empieza a moverse. Cuando el

usuario sacude el teléfono, la nave se detiene. Para esto necesitas dos componentes
adicionales, un ReconocimientoDeVoz que puede reconocer cuando el usuario está ha-
blando, y un Acelerómetro que detecta cuando se sacuda el teléfono. El código se muestra
en la Figura 7.10.
Figura 7.10: Moviendo la nave cuando el usuario habla, y deteniéndola cuando se agita el
dispositivo.
El controlador de evento Pantalla.Inicializar se activa cuando se inicia la aplicación.

El bloque ReconocimientoDeVoz.ObtenerTexto abre el sensor de voz para que espe-
re que el usuario diga algo. Cuando el usuario habla, se activa el controlador de evento
ReconocimientoDeVoz.SensorVoz.DespuésDeObtenerTexto. En este controlador de
eventos configurará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
teléfono, se activa el Acelerómetro, y se desactiva el temporizador para que pare el sprite se
detenga, y se vuelva a invocar a ReconocimientoDeVoz.ObtenerTexto, para que espere
la próxima vez que el usuario hable.
Ası́ como las personas necesitan recordar cosas, también las aplicaciones lo necesitan. En
este material de apoyo volveremos al tema de las variables, pero ahora con mayor profundidad
52
y detalle. Como vimos anteriormente, la idea esencial de usar variables es programar una
aplicación para que recuerde información.
Cuando alguien te dice el número de teléfono de una pizzerı́a, tu cerebro lo almacena
en una celda de memoria. Si alguien menciona algunos números para que tú los sumes, tú
también almacenas estos números y los resultados intermedios en una celda de memoria.
En estos casos, no estás totalmente conciente de cómo tu cerebro almacena o recuerda la
información.
Una aplicación también tiene memoria, pero su funcionamiento interno es mucho menos
misterioso que el de tu cerebro. Ahora veremos en detalle cómo manejar la memoria de una
aplicación, cómo almacenar información en ella, y cómo recuperar esa información en un
momento posterior.
Celdas de Memorias Definidas: Cómo Programar la Memoria de tu

Aplicación
La memoria de una aplicación consiste de una serie de celdas de memoria definidas. Al-
gunas de estas celdas de memoria se crean cuando arrastras un componente en tu aplicación.
Estas celdas (o espacios abiertos) se llaman propiedades. También puedes definir celdas de
memoria definidas que no sean asociadas con un componente especı́fico. Estas se llaman
variables. Aunque las propiedades están tı́picamente asociadas a lo que es visible en la app,
las variables pueden ser asociadas a la memoria escondida de la aplicación.
Propiedades
Tú, como usuario de una aplicación, puedes ver componentes visibles como botones, cua-
dros de texto y etiquetas. Pero adentro, cada componente es completamente definido por una
serie de propiedades. Los valores almacenados en la memoria de cada propiedad determina
cómo aparece el componente. Tú configuras los valores de las propiedades directamente en
el Diseñador de Componentes. Por ejemplo, la Figura 7.11 muestra el panel para modificar
las propiedades de un componente Lienzo.
53
Figura 7.11: Hoja de propiedades para un componente lienzo.
El componente Lienzo tiene varias propiedades de distintos tipos. Por ejemplo el Co-
lorDeFondo y el ColorDePintura son celdas de memoria que contienen un color. La
propiedad ImagenDeFondo contiene un nombre de archivo (como gatito.png).
La propiedad Visible contiene un valor booleano (verdadero o falso, dependiendo si se
selecciona la opción o no). El Ancho y Alto contienen un número o una designación especial
(por ejemplo, “Ajustar al Contenedor”).
Cuando configuras una propiedad en el Diseñador de Componentes, especificas el valor
inicial de está propiedad, o sea su valor cuando se inicia la aplicación. Los valores de las
propiedades también pueden ser modificados cuando la aplicación se ejecuta, mediante el
uso de bloques. Pero, al cambiar los valores durante la ejecución, los valores que aparecen en
el Diseñador de Componentes no cambian—estas propiedades siempre muestran solamente
los valores iniciales. Esto puede confundir cuando pruebas una aplicación, pues el valor actual
de las propiedades de la aplicación cuando se ejecuta no son visibles.
54
Definir Variables
Al igual que las propiedades, las variables son celdas de memoria, pero que no están
asociadas a un componente en particular. Se define una variable cuando necesitas que tu
aplicación guarde algo en memoria que no haya sido guardado ya en una propiedad de un
componente. Por ejemplo, puede ser que un juego tenga que recordar el nivel alcanzado por
el usuario. Si el número del nivel apareciera en un componente Etiqueta, no necesitarı́as
una variable, porque podrı́as simplemente almacenar el nivel en la propiedad de Texto de
la etiqueta. Pero si el número de nivel no es algo que será visible por el usuario, necesitas
definir una variable para guardar esta información.
Otra diferencia es que mientras que las propiedades se crean automáticamente cuando
arrastras un componente en el Diseñador, las variables se definen explı́citamente en el Editor
de Bloques al arrastrar un bloque “inicializar global nombre”. Puedes nombrar la variable
al hacer click en el texto que dice “nombre” dentro del bloque, y puedes especificar un
valor inicial al arrastrar un bloque (número, texto, color, lista) y conectarlo al bloque de
inicialización. Por ejemplo, para crear una variable llamada “marcador” con un valor inicial
de 0, sigue los siguientes pasos, que se muestran en la Figura 7.12:
1. Arrastra el bloque “inicializar global nombre” desde la sección “Variables” hacia el

espacio de trabajo.
2. Cambia el nombre de la variable al hacer click en el texto “nombre” y escribe “marca-

dor”.
3. Configura el valor inicial de la variable al arrastrar un bloque numérico, con valor 0, y

conectarlo con la definición de la variable.
Figura 7.12: Inicializando la variable global marcador con valor 0.
Cuando defines una variable, pides a la aplicación crear una celda de memoria para
guardar un valor. Estas celdas de memoria, como las propiedades, no son visibles por el
usuario cuando funciona la aplicación.
55
El bloque de inicialización que conectas en la declaración de la variable especifica el valor
que estará en la celda cuando se inicia la aplicación. A parte de inicializar con números
o texto, también puedes inicializar la variable con un bloque crear una lista vacı́a o
construye una lista. Esto indica a la aplicación que la variable guardará un listado de
celdas de memoria en lugar de un solo valor. Trabajaremos con listas en el Dı́a 4 del taller.
“Poner” y “Tomar” una Variable

Cuando defines una variable, AppInventor crea dos bloques para ella, un bloque poner y
un bloque tomar. Puedes acceder a estos bloques al pasar el mouse por encima del nombre
de la variable en el bloque de inicialización, como se ve en la Figura 7.13.
Figura 7.13: El bloque de inicialización contiene bloques de configurar y obtener para esta
variable.
El bloque poner global marcador te permite modificar el valor almacenado en la

variable. Por ejemplo, los bloques de la Figura 7.14 indican un 5 en la variable marcador. El
término global en el bloque se refiere al hecho de que la variable puede ser usada en todos los
controladores de eventos y procedimientos del programa. La nueva versión de AppInventor
permite también definir variables locales, que son especı́ficas a un controlador de eventos o
a un procedimiento especı́fico.
Figura 7.14: Poner un número 5 en la variable marcador.
El bloque tomar global marcador permite obtener o rescatar el valor de una variable.
Por ejemplo, si quieres chequear si el valor dentro de la celda de memoria era superior a 100,
tienes que conectar el bloque tomar global marcador en un bloque condicional, tal como
se muestra en la Figura 7.15.
56
Figura 7.15: Usando el bloque marcador global para obtener el valor almacenado en la
variable.
Configurar una Variable como Expresión

En las variables puedes poner valores simples, como 5, pero frecuentemente configurarás
la variable como una expresión más compleja (expresión es el término informático que se
le da a una fórmula o cálculo). Por ejemplo, cuando alguien pierda 10 puntos en un juego,
necesitas modificar la variable marcador como “10 menos que su valor actual”. Otro ejemplo
es en un juego como Atrapa el Topo, cambias la ubicación horizontal (x) del topo a
una ubicación aleatoria dentro del lienzo. Tanto los valores simples como las expresiones
complejas se conectan al argumento del bloque poner global.
Incrementar una Variable

Tal vez la expresión más común es para incrementar una variable, o configurar una
variable basado en su propio valor actual. Por ejemplo, en un juego, cuando el jugador
marca un punto, la variable marcador puede ser incrementada en 5 puntos. La Figura 7.16
ilustra los bloques que hay que usar para programar este comportamiento.
Figura 7.16: Se incrementa la variable marcador en 5 puntos.
Si puedes entender este tipo de bloques, vas bien encaminado para convertirte en un
programador!
Estos bloques se leen de la siguiente manera: “configurar el marcador como 5 veces más
que su valor actual”, que es una manera para decir, incrementa la variable en 5. El código
funciona de la siguiente manera: los bloques se leen de adentro hacia afuera—no de izquierda
57
a derecha. Entonces se lee primero el bloque “tomar global marcador” y el número 5. Luego
el bloque de suma es ejecutado y el resultado se pone en la variable marcador.
Suponiendo que hubiera un 10 en la celda de memoria para marcador antes de ejecutar
estos bloques, la aplicación ejecutarı́a los siguientes pasos:
1. Obtener el 10 de la celda de memoria marcador, mediante la evaluación del bloque

tomar.
2. Sumar 5 con el 10 obtenido, para obtener 15.
3. Poner el resultado, 15, en la celda de memoria marcador, mediante la evaluación del

bloque poner.
Construir expresiones complejas

En la sección “Matemáticas” del Editor de Bloques, AppInventor provee un amplio con-
junto de funciones matemáticas similares a las que podrás encontrar en una planilla de Excel
o en una calculadora. La Figura 7.17 muestra estas funciones.
Figura 7.17: Los bloques contenidos en la sección “Matemáticas”.
58
Puedes usar estos bloques para construir una expresión compleja y conectarla en el lado
derecho de un bloque poner global. Por ejemplo, para mover un sprite a una columna
aleatoria dentro de los bordes de un lienzo, tienes que configurar una expresión que consiste
de una multiplicación, una resta, una propiedad Lienzo.Ancho, una propiedad SpriteI-
magen.Ancho y un bloque entero aleatorio, como se muestra en la Figura 7.18.
Figura 7.18: Puedes usar bloques de “Matemáticas” para construir expresiones complejas.
Al igual que el ejemplo anterior sobre cómo incrementar una variable, los bloques se leen
desde adentro hacia afuera. Suponiendo que el Lienzo tiene un Ancho de 300 pixeles y el
SpriteImagen tiene un Ancho de 50 pixeles, la aplicación ejecutarı́a los siguientes pasos:
1. Obtener el 300 y el 50 de las celdas de memoria para Lienzo1.Ancho y SpriteIma-

gen1.Ancho, respectivamente.
2. Restar: 300 − −50 = 250.
3. Llamar a la función entero aleatorio para obtener un número entre 0 y 1 (por ejemplo
0,5).
4. Multiplicar: 250 ∗ 0,5 = 125.
5. Poner el 125 en la celda de memoria para la propiedad X de SpriteImagen1.
Mostrar las Variables

Cuando modificas la propiedad de un componente, como en el ejemplo previo, la interfaz
de usuario se modifica directamente. Esto no es cierto para las variables: cambiar una variable
no tiene efecto directo en la apariencia de la aplicación. Si solamente incrementaste una
variable marcador pero no modificaste la interfaz de usuario de alguna otra manera, el
usuario no podrá saber que hubo un cambio. Es como un árbol que se cae en el bosque: si
nadie estuvo para escucharlo, ¿ocurrió de verdad?
A veces no quieres que se manifieste el cambio en la interfaz de usuario cuando cambia
una variable. Por ejemplo, en un juego puedes hacer un seguimiento estadı́stico (tiros fallidos)
que solamente aparecerá al terminar el juego.
59
Esta es una de las ventajas de guardar datos en una variable, en comparación con la
propiedad de un componente: te permite mostrar los datos que quieres en el momento que
elijas. También te permite separar la parte computacional de tu aplicación de la interfaz de
usuario, facilitando cambios posteriores de dicha interfaz.
Por ejemplo, en un juego podrı́as guardar el marcador directamente en una Etiqueta o
en una variable. Si lo guardas en una etiqueta, tienes que incrementar las propiedades de
texto de la etiqueta cuando se marcan puntos, y el usuario verá los cambios directamente.
Si guardaste el marcador en una variable y se incrementa la variable cada vez que se marcan
puntos, tendrı́as que incluir bloques para también escribir el valor de la variable en una
etiqueta.
Sin embargo, si decidieras cambiar la aplicación para mostrar el marcador de una manera
distinta, por ejemplo con una barra de color, la opción de una variable serı́a más fácil de
cambiar. No necesitarı́as modificar todos los lugares donde aparece el marcador sino que
solamente tendrı́as que modificar los bloques que muestran el marcador.
Variables locales
Hasta el momento hemos hablado de variables globales que se definen con un bloque
inicializar global. Global se refiere al hecho que la variable se puede usar en todos los
procedimientos y controladores de eventos de la aplicación. AppInventor también te permite
definir variables locales, es decir, variables cuyo uso es restringido a un solo controlador de
eventos o procedimiento, como se muestra en la Figura 7.19.
Figura 7.19: Puedes definir una variable de alcance restringido (local).
Si la variable es requerida en un sólo lugar, es una buena idea definirla como local en vez
de global. Al proceder de tal manera, limitas las dependencias en tu aplicación y te aseguras
de que no modificarás una variable por error. Imagina que una variable local es como tu
memoria privada en tu cerebro—no quieres que otros cerebros puedan tener acceso a ella!
60
Resumen
Cuando inicias una aplicación, ésta empieza a ejecutar sus operaciones y a responder a
eventos que ocurren. Al responder a eventos, la aplicación a veces necesita recordar cosas.
Para un juego, puede ser que tenga que recordar el marcador de cada jugador o la dirección
en la cual se mueve un objeto.
Tu aplicación recuerda cosas con propiedades de componentes, pero cuando necesitas
memoria adicional no asociada a un componente, puedes definir variables. Puedes almacenar
valores dentro de una variable y recuperar el valor actual, de la misma manera que con las
propiedades. Como los valores de propiedades, los valores variables no son visibles para el
usuario final. Si quieres que el usuario final vea la información almacenada en una variable,
agregas bloques que muestran esta información en una etiqueta u otro componente de la
interfaz de usuario.
61

Robotica Guia Teorica y Practica PDF

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Robotica Guia Teorica y Practica PDF

Загружено:

Авторское право:

Доступные форматы

TUTORIAL DIARIO

Figura 1.1: Interfaz de usuario aplicación PintaFotos

En esta aplicación podrás:

Bañar tu dedo en un tarro de pintura virtual para dibujar en este color.

Arrastrar tu dedo en la pantalla para dibujar una lı́nea.

Usar el botón de abajo para limpiar la pantalla.

Agrandar o achicar el tamaño de los puntos con los botones abajo.

Usar el componente Lienzo para dibujar.

Manejar las funcionalidades “touch” y “arrastrar” en la pantalla del equipo.

Configurar la disposición de los componentes en la pantalla.

Usar los controladores de eventos que reciben argumentos o parámetros.

Diseñando los Componentes

Crea los Botones de Colores

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

Arrastra un Botón al Visor y cambia su Texto a “Rojo”, y su ColorDeFondo tam-

En la lista de Componentes, selecciona el Botón1 y presiona “Cambiar Nombre” para

Figura 1.2: El Visor con los tres botones creados.

¡Prueba tu aplicación! Conecta tu aplicación a tu dispositivo y verifica que funcione

Usando los Componentes de Disposición para una Mejor Presentación

Figura 1.3: Los tres botones en disposición horizontal.

2. En el panel de Propiedades, cambia el Ancho de DisposiciónHorizontal a la opción

El lienzo es el lugar donde el usuario dibuja cı́rculos y lı́neas. Agregalo, y configura el

Desde la categorı́a “Dibujo y Animación” de la Paleta, arrastra un Lienzo hacia el

Recuerda que puedes descargar el archivo gatito.png desde ProgramaTusIdeas/Dia1/

Configura la ImagenDeFondo del LienzoDeDibujo con el archivo gatito.png. Si es

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

Agregar los Botones Inferiores y el Componente Cámara

1. Desde la Paleta, arrastra un nuevo componente DisposiciónHorizontal y ponlo abajo

3. Arrastra dos botones más y colócalos al lado derecho del BotónLimpiar.

4. Nombra los nuevos botones como BotónGrande y BotónPequeño, y pon su Texto

Figura 1.5: Interfaz de usuario completa para PintaFotos

Agregar Comportamiento a los Componentes

El próximo paso es definir cómo se comportan los componentes. Crear un programa de

Agregar el Evento Tocar para Dibujar un Punto

Primero, dispondrás los objetos de manera que cuando tocas el LienzoDeDibujo, se

1. En el Editor de Bloques, selecciona el LienzoDeDibujo, y arrastra el bloque Lienzo-

Figura 1.7: Cuando el usuario toca el lienzo, la aplicación dibuja un cı́rculo

Por el lado derecho del bloque LienzoDeDibujo.DibujaCı́rculo, verás tres espacios

3. Arrastra los bloques tomar x y tomar y y conéctalos en los espacios abiertos en el

Nota. Al poner un 5 en el Editor de Bloques y luego presionar Enter, habrás usado

¡Prueba tu Aplicación! Usa tu dispositivo para probar lo que has desarrollado

Agregar el Evento de Arrastre para Dibujar una Lı́nea

Luego, agregarás el controlador de eventos de arrastre. La diferencia entre un touch y un

Un arrastre es cuando pones tu dedo en la pantalla y lo mueves al mantener contacto

En un programa de pintura, cuando arrastras tu dedo en la pantalla se dibuja una lı́nea

1. En el Editor de Bloques, desde la sección del LienzoDeDibujo, arrastra el bloque

El evento LienzoDibujo.Arrastre viene con los siguientes argumentos:

XInicial, YInicial: la posición de tu dedo donde empieza el arrastre.

2. Arrastra el bloque LienzoDeDibujo.DibujarLı́nea dentro del bloque LienzoDeDi-

Figura 1.12: Agregando la habilidad de dibujar lı́neas

El bloque LienzoDeDibujo.DibujarLı́nea tiene cuatro argumentos, dos para cada

¡Prueba tu Aplicación! Arrastra tu dedo en la pantalla para dibujar lı́neas y cur-

Agregar Controladores de Eventos para Botones

1. Arrastra el bloque BotónRojo.Click al espacio de trabajo.

2. Arrastra el bloque poner LienzoDeDibujo.ColorDePintura y conéctalo en las ac-

5. El último botón por configurar es el BotónLimpiar. Para limpiar el lienzo de dibujo

Permitir al Usuario Tomar un Foto

1. El componente Cámara contiene dos bloques claves. El bloque Cámara.TomarFoto

2. Arrastra el bloque Cámara1.TomarFoto y ponlo en el controlador BotónCáma-

3. Arrastra el controlador de eventos Cámara1.DespuésDeTomarFoto al espacio de

5. Cámara1.DespuésDeTomarFoto tiene un argumento llamado imagen, que es la

Cambiar el Tamaño del Punto

El tamaño de los puntos dibujados en el LienzoDeDibujo se determina al llamar a

1. En el Editor de Bloques, desde la sección “Variables”, arrastra un bloque Inicializar