Escolar Documentos
Profissional Documentos
Cultura Documentos
esi@uclm.es
926 29 53 00
http://www.esi.uclm.es
Resumen
ndice general
2. El Xilfono de Colores
11
11
12
14
14
16
16
19
19
3. Whack A Zombie
23
23
26
26
26
III
28
29
29
33
34
37
Captulo
Mi Primer Programa:
Hola, Programador!
s una prctica habitual en todos los cursos de programacin comenzar por un ejemplo de programa muy sencillo, que sea muy
fcil de entender, y que de paso d una idea de cmo funciona el nuevo lenguaje. En la jerga informtica se le suele conocer como
hola, mundo, en honor al primer programa escrito en el lenguaje C
de la historia, all por el ao 1975. El nombre de hola, mundo viene
precisamente de que lo nico que haca ese programa era imprimir ese
mensaje en la pantalla.
Siguiendo con esta prctica, lo que se propone en este captulo es
crear el hola, mundo para AppInventor. Pero como se trata de crear
una App para un dispositivo mvil, y no un programa para un antiguo
ordenador con un teclado y monitor monocromo, realizaremos una pequea adaptacin del original, que va a consistir en colocar un botn
en la pantalla, de manera que al pulsarlo se muestre el mensaje Hola
AppInventor.
[2]
1.1.
Primeros pasos
[3]
[4]
[5]
1.2.
[6]
[7]
[8]
Elige el primero de ellos que tiene en negrita el texto BotonPulsame.Clic. En realidad si te fijas bien, el texto completo es cuando BotonPulsame.Clic ejecutar. Lo que en realidad quiere decir: cuando
hagas clic sobre el botn BotonPulsame . . . .. Selecciona este bloque y
arrstralo hasta una zona libre de pantalla.
Podramos completar la frase con algo as como escribe el texto hola,
programador en el componente TextoHola. Si seleccionas ahora el componente TextoHola, vers que en los bloques asociados que aparecen a
su derecha hay precisamente uno con un mensaje muy similar al que
buscamos: poner TextoHola.Texto como. Arrstralo hasta colocarlo
dentro del bloque anterior, tal y como muestra la figura 1.8.
[9]
1.3.
Probando la aplicacin
[10]
Captulo
El Xilfono de Colores
En este captulo vamos a explorar tus habilidades artsticas construyendo un sencillo Xilfono mediante App Inventor para tu telfono mvil
Android. Mediante esta aplicacin podrs tocar tus canciones preferidas y algn captulo ms adelante incluso grabarlas para reproducirlas
posteriormente.
2.1.
Qu voy a construir?
[12]
2.2.
[13]
Categ.
I.U.a
I.U.
I.U.
I.U.
I.U.
I.U.
I.U.
I.U.
Medios
I.U.
I.U.
Sensores
Nombre
BotonDO
BotonRE
BotonMI
BotonFA
BotonSOL
BotonLA
BotonSI
BotonDO8
Nota
BotonPlay
BotonReset
Temporizador
Objetivo
Reproducir un DO
Reproducir un RE
Reproducir un MI
Reproducir un FA
Reproducir un SOL
Reproducir un LA
Reproducir un SI
Reproducir un DO (2a octava)
Reproducir las notas
Reproducir meloda almacenada
Borrar memoria
Conseguir intervalos entre notas
de Usuario
[14]
2.3.
Crear el teclado
2.3.1.
Vamos a crear las 2 primeras notas del teclado (DO y RE), que sern
2 botones.
1. En la categora Interfaz de usuario del diseador, encontrars el
componente Botn. Arrastra uno hasta la pantalla de la App, y renmbralo como BotonDO a travs de la del botn Cambiar nombre
en el rea de componentes. Vamos a convertirlo en una barra larga morada, como una tecla de un xilfono real, para ello hay que
establecer sus propiedades segn la siguiente lista:
Cambia la propiedad ColorDeFondo a Violeta.
Cambia la propiedad Texto a DO.
Cambiar el Ancho a Ajustar al contenedor para que ocupe todo
el ancho de la pantalla.
Cambia el Alto a 40 pixels.
2. Repite los pasos con un nuevo botn (BotonRE) ponindolo debajo
del anterior. Cambia el ancho, el alto, pon su propiedad ColorDeFondo a Rojo y cambia el texto por RE.
Ms adelante completaremos el resto del teclado con ms botones.
Ahora mismo, tu proyecto debe parecerse a imagen que se muestra en
la figura 2.2.
[15]
[16]
2.3.2.
2.3.3.
El comportamiento que tenemos que programar implica que se reproduzca un fichero de audio cada vez que pulsemos un botn. Si pulsamos BotonDO debe sonar 1.wav, si pulsamos BotonRE sonar 2.wav y
as sucesivamente. Vamos a utilizar el editor de bloques como se explica
a continuacin (hasta obtener un diseo como el de la figura 2.4):
1 Disponibles
en la URL http://www.esi.uclm.es/appinventor/download/cap6_xilofono.zip
[17]
[18]
[19]
2.3.4.
2.3.5.
Ya que tenemos 2 notas funcionando, te debera ser sencillo completar el teclado con las otras 6 notas que faltan. Cralas como se vio
[20]
[21]
Captulo
Whack A Zombie
ste captulo muestra cmo crear un sencillo juego tipo whacka-mole 1 mediante App Inventor para tu telfono mvil Android.
Este juego est inspirado en el clsico juego arcade que tiene
como objetivo machacar con un mazo a los topos que van saliendo de
sus madrigueras para conseguir la mayor cantidad posible de puntos.
A travs de este sencillo ejemplo, comprobars lo fcil que es crear un
juego totalmente funcional.
3.1.
Qu voy a construir?
La figura 3.1 muestra una captura de pantalla del juego que sers
capaz de desarrollar para Android al finalizar la lectura de este captulo.
Como puedes observar, el aspecto final de este juego, bautizado como
Whack-A-Zombie, est personalizado para machacar zombies en lugar
de topos2 .
1 http://en.wikipedia.org/wiki/Whac-A-Mole
2 Los
autores del libro tenemos ms simpata por los topos que por los zombies.
23
[24]
Figura 3.1: Captura de pantalla del juego Whack-A-Zombie discutido en este captulo y ejecutado en un telfono con Android 2.3. En la parte superior se muestra la barra de energa y la puntuacin del jugador, las cuales se actualizan
cuando pulsamos sobre la pantalla. En el
centro se muestra la zona de juego, en la
que el zombie se va moviendo de manera
aleatoria cada cierto tiempo. En la parte inferior aparece el botn de Reset para
comenzar a jugar de nuevo, reseteando
la puntuacin y la etiqueta de energa.
En concreto, la funcionalidad que implementars ser la siguiente:
Visualizacin de un zombie en movimiento que, de manera aleatoria, aparece en diversas posiciones de la pantalla con un intervalo
de un segundo.
Tratamiento de la interaccin tctil con el juego.
Si consigues machacar al zombie, entonces el juego reproducir un sonido, el telfono vibrar, el zombie aparecer en otro
lugar y la puntuacin se incrementar en una unidad.
Si fallas al machacar al zombie, entonces el nivel de energa se
ver reducido.
Reseteo del juego, a travs de un botn, para poder jugar de nuevo.
Actualizacin de la informacin del juego, es decir, puntuacin y
nivel de energa.
A travs del desarrollo del tutorial de este captulo aprenders a manejar los siguientes componentes:
Etiqueta para mostrar texto en el telfono.
DisposicinHorizontal para alinear etiquetas de texto.
SpriteImagen para imgenes dinmicas con las que interactuar a
travs de la pantalla del telfono.
[25]
Tipo
Lienzo
Categ.
Dibujo
Nombre
Lienzo
SpriteImagen
Reloj
Dibujo
Sensores
Zombie
Reloj
Botn
Sonido
I.U.
Medios
BotonReset
SonidoImpacto
Sonido
Medios
SoundFin
Etiqueta
I.U.
EtiquetaEnergia
Etiqueta
I.U.
EtiquetaPuntos
Etiqueta
I.U.
EtiquetaBarra
Etiqueta
I.U.
EtiquetaPuntuacion
Objetivo
Contenedor para el
sprite del zombie
Zombie a machacar
Control del movimiento
del zombie
Nuevo juego
Reproducir sonido y vibrar cuando se golpea
al zombie
Reproducir sonido al
terminar el juego
Mostrar el texto Energa
Mostrar el texto Puntos
Mostrar la barra de
energa
Mostrar el nmero de
puntos
Tabla 3.1: Lista completa de componentes utilizados en el juego WhackA-Zombie. Por cada componente se indica el tipo, la categora en la que
encontrarlo, cual ser su nombre en el juego Whack-A-Zombie, y su objetivo (para qu se ha utilizado).
Lienzo como superficie para colocar el componente SpriteImageSn.
Reloj para controlar cundo cambiar al zombie de posicin.
Sonido para reproducir sonidos y generar vibraciones en el telfono.
Botn para iniciar un nuevo juego.
La tabla 3.1 muestra el listado completo de componentes utilizados
para desarrollar el juego Whack-A-Zombie.
Adems, sers capaz de implementar la siguiente funcionalidad:
Mover al zombie de manera aleatoria.
Detectar cundo se ha machacado el zombie y cundo no.
Reproducir sonido y vibraciones en tu telfono mvil.
Manejar contadores para la energa y la puntuacin.
[26]
3.2.
En esta seccin aprenders a colocar todos los componentes que forman parte del juego Whack-A-Zombie. Para ello, describiremos paso a
paso las distintas acciones que has de realizar para obtener el aspecto
del juego final que se muestra en la figura 3.1.
3.2.1.
La pantalla de juego
3.2.2.
A continuacin, vamos a aadir al juego la barra de energa y el marcador de puntuacin. Estos componentes se actualizarn a medida que
el juego progrese segn el nmero de aciertos y fallos a la hora de machacar el zombie.
Para ello, arrastra dos componentes de tipo DisposicinHorizontal desde la paleta Disposicin justo por encima del componente Lienzo. Este
componente, como su nombre indica, nos va a servir para alinear, de
manera horizontal, otros componentes en su interior. Renombra el de la
parte superior a BarraVida, mientras que el otro ser BarraPuntuacion.
En ambos casos, puedes dejar el ancho y el alto a valores automticos,
ya que se ajustarn a continuacin con los componentes que gestionen.
[27]
[28]
3.2.3.
[29]
3.3.
3.3.1.
Al igual que App Inventor ya proporciona funciones para, por ejemplo, reproducir un sonido mediante la funcin play del componente
Sound, resulta muy interesante definir nuestras propias funciones o
[30]
procedimientos para poder utilizarlos cuando sea necesario. Un ejemplo podra ser el movimiento del zombie, es decir, podramos crear un
procedimiento que cada vez que fuera ejecutado recolocara al zombie en
una nueva posicin. Con esta idea en mente, hemos creado el procedimiento MoverZombie, cuyo diagrama de bloques se muestra en la figura
3.5.
Para poder mover el zombie correctamente, hay que tener en cuenta
que su posicin en la pantalla del telfono no sea mayor que su resolucin. En otras palabras, la posicin de nuestro zombie en todo momento
no debe estar fuera de las dimensiones del componente Lienzo que creamos previamente. La figura 3.6 muestra los valores de las coordenadas
X e Y considerados para llevar a cabo el movimiento del zombie.
La construccin del diagrama de bloque se iniciar arrastrando un
bloque de tipo como procedimiento ejecutar de la categora Procedimientos, tal y como se muestra en la figura 3.5. Renmbralo a a MoverZombie. Ahora ya puedes integrar una llamada al bloque llamar Zombie.MoverA, que encontrars al seleccionar dentro del rea de bloques
al componente Zombie.
En este punto, ya tenemos disponible la base para mover el zombie
a una nueva posicin. Ahora es necesario, precisamente, generar de
manera aleatoria dicha posicin, es decir, es necesario generar un nuevo
valor para las coordenadas X e Y del zombie, teniendo en cuenta que no
sobrepasen las dimensiones de la pantalla.
Haz clic sobre la categora Matemticas dentro de los bloques Integrados. Ensambla ahora un bloque del tipo entero aleatorio entre y al
parmetro x de Zombie.MoverA. El valor aleatorio de la nueva posicin
en X del zombie ha de ser un entero comprendido entre 1 y la anchura
del canvas (restando el tamao del zombie para evitar que pueda quedar oculto). Para ello, ensambla un bloque del tipo nmero (tambin
Matemticas en el parmetro entre del entero aleatorio que acabas de
aadir y asgnale un valor de 1.
Por otra parte, ensambla un bloque de resta, como se muestra en
la figura 3.5, donde la primera parte tenga la anchura del canvas y la
segunda la anchura del zombie en la rama y del entero aleatorio.
Finalmente, para generar la coordenada Y del zombie puedes seguir
el mismo esquema, utilizando simplemente la altura del Lienzo y del
Zombie. Deberas obtener un resultado similar al que se muestra en la
figura 3.5.
[31]
Figura 3.5: Procedimiento MoverZombie para colocar el zombie, de manera aleatoria, en distintas posiciones de la pantalla.
[32]
(0, Width)
48px
(0, 0)
48px
(0, Height)
(Height, Width)
[33]
3.3.2.
Una vez modelado el bloque para mover al zombie, ya es posible utilizarlo. En este contexto, el comportamiento esperado del juego que ests
desarrollando se basa en que el zombie comience a moverse justo al
arrancar la aplicacin. Para ello, utiliza el bloque Screen1.Inicializar,
tal y como se muestra en la parte izquierda de la figura 3.7 (bscalo haciendo clic sobre la categora Screen1 dentro del rea de bloques.
Despus, ensambla en este bloque el procedimento MoverZombie, disponible en la categora Procedimientos.
Adems, tienes que asegurarte que el zombie contine movindose
sin parar cada cierto tiempo sobre la pantalla mediante el componente
Reloj definido anteriormente. Este componente tena por defecto un valor de intervalo de 1000 milisegundos, es decir, 1 segundo3 . As, el zombie cambiar de posicin cada segundo, dificultando de esta manera el
golpeo por parte del jugador. Este comportamiento se especifica fcilmente mediante el componente Reloj.Temporizador. Ahora, tan slo
tienes que ensamblar en el mismo el bloque MoverZombie que definiste
previamente. Justo en este punto puedes apreciar la utilidad de MoverZombie. El resultado debera ser similar al que se muestra en la parte
central de la figura 3.7.
Por otra parte, tambin suele ser comn establecer unos valores de
inicio para algunos elementos en funcin de la aplicacin que se est desarrollando. En el caso del Whack-A-Zombie, tienes que definir la
cantidad de energa o vida inicial. Esta energa disminuir cuando falles
al golpear al zombie. Para definir la variable energia, ve a la categora
Variables y arrastra un bloque inicializar global como. A continuacin,
si haces clic sobre variable, podrs renombrarla a energia. Ahora, slo
falta asignarle el valor inicial, que ser de 100. Puedes hacerlo a partir
del bloque nmero de la categora desde Matemticas, o simplemente
tecleando el valor 100 y pulsando el retorno de carro sobre una zona vaca de la pantalla. El resultado esperado se muestra en la parte derecha
de la figura 3.7.
3 Puedes
ajustar este valor para que el zombie se mueva tan rpido como quieras.
[34]
3.3.3.
[35]
[36]
[37]
3.3.4.
Reinicio juego
Figura 3.9: Reseteo del juego e interaccin con el zombie (sonido de golpe
y vibracin del telfono).
La figura 3.9 muestra el cdigo necesario para efectuarlas. Este cdigo se ejecutar cuando el jugador pulse el botn Reset que est en la
parte inferior del juego, tal y como se indica en la figura 3.1 al inicio de
este captulo. Para aadir este ltimo bloque, sigue los siguientes pasos:
1. Aade un bloque cuando BotonReset.Clic. Precisamente, la palabra Clic hace referencia a pulsar dicho botn.
2. Ensambla el bloque poner global energia y asgnale un valor de
100, exactamente igual que en la inicializacin de la seccin 3.3.2.
[38]
3. Ensambla el bloque poner EtiquetaBarra.Ancho al valor de energa, exactamente igual que en la seccin 3.3.3.
4. Ensambla el bloque poner EtiquetaPuntuacion.Texto con un valor de 0.
5. Ensambla el bloque poner Reloj.TemporizadorHabilitado a cierto
(Built-in->Logic). Esto permite que el zombie empiece a moverse de
nuevo, exactamente igual que al inicio de la aplicacin.
En este punto, deberas comparar tu cdigo con el que se muestra
en la figura 3.9. Ahora, ya puedes probar tu juego y disfrutar de l en tu
telfono mvil.