18
Apuntes de Android –  AppInventor de Google Capítulo 5 LadyBug Chase Manejo de Sprites ¿ Qué aprender é ?................................................................................................................................. 2 Diseñar los componentes....................................................................................... ...............................2 Empezamos................... ........................................................................................................................3 Definir el comportamiento de los componentes......................... .....................................................4 Dotar de movimiento a la mariquita.................... ........................................................................4 PRUEBA!!!!.........................................................................................................................................6 Mostrar el nivel de energía............... ..................................................................... ......................6 Dibujar la barra de energía................................. .........................................................................7 Inanición............... ................................................................................................................... ....8 PRUEBA!!!!.........................................................................................................................................9 Añadir una pulga............... .......................................................................................................... 9 PRUEBA!!!!................. ...................................................................................................................... 12 PRUEBA!!!!....................................................................................................................................... 13 PRUEBA!!!!................. ...................................................................................................................... 14 Un últi mo detalle........................................................................................................................... 16 PRUEBA!!!!....................................................................................................................................... 16 PRUEBA!!!!....................................................................................................................................... 17 Variaciones......................................................................................................................................... 18 En este capítulo veremos un juego que tiene por protagonistas a una mariquita, una pulga y una rana. Con la aplicación Ladybug Chase el usuario podrá: Controlar el movimiento de una mariquita inclinando el teléfono. Comprobar su nivel de energía gracias a una barra que irá reduciendo su tamaño con el paso del tiempo o bien aumentando el nivel cuando la mariquita coma. Dirigir la mariquita para que se coma a la pulga y recupere energía. Evitar que la rana se coma la mariquita. Vicente Destruels Moreno Página 1

AppInventor Cap5 Final

Embed Size (px)

Citation preview

Page 1: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 1/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

Manejo de Sprites

¿ Qué aprenderé ?.................................................................................................................................2

Diseñar los componentes......................................................................................................................2

Empeamos...........................................................................................................................................!

De"inir el comportamiento de los componentes..............................................................................#

Dotar de mo$imiento a la mari%uita............................................................................................#

&'(E)A****.........................................................................................................................................+

,ostrar el ni$el de energía..........................................................................................................+

Di-uar la -arra de energía........................................................................................................../0nanici1n......................................................................................................................................

&'(E)A****.........................................................................................................................................3

Añadir una pulga.........................................................................................................................3

&'(E)A****.......................................................................................................................................42

&'(E)A****.......................................................................................................................................4!

&'(E)A****.......................................................................................................................................4#

(n ltimo detalle...........................................................................................................................4+

&'(E)A****.......................................................................................................................................4+

&'(E)A****.......................................................................................................................................4/

6ariaciones.........................................................................................................................................4

En este capítulo $eremos un uego %ue tiene por protagonistas a una mari%uita7 una pulga 8

una rana. Con la aplicaci1n Ladybug Chase el usuario podr9:

• Controlar el mo$imiento de una mari%uita inclinando el telé"ono.

• Compro-ar su ni$el de energía gracias a una -arra %ue ir9 reduciendo su tamaño con el paso

del tiempo o -ien aumentando el ni$el cuando la mari%uita coma.

• Dirigir la mari%uita para %ue se coma a la pulga 8 recupere energía.

• E$itar %ue la rana se coma la mari%uita.

6icente Destruels ,oreno &9gina 4

Page 2: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 2/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

¿ Qué aprenderé ?

Antes de empear la aplicaci1n7 de-es de re$isar todo el material %ue se $i1 durante el

desarrollo de “Dale Fuerte” en el capítulo !. Adem9s7 este capítulo 5 te enseñar9 a:

• (tiliar $arios componentes ImageSprite para detectar c;o%ues entre ellos.

• Emplear el componente OrientationSensor para detectar el grado de inclinaci1n del

telé"ono 8 recurrir a él para controlar un ImageSprite.

• Cam-iar la imagen %ue muestra un ImageSprite.

• (tiliar el componente Cloc  para controlar $arios e$entos.

• Emplear variables para registrar nmeros <como el ni$el de energía de la mari%uita=.

• Crear 8 utiliar procedimientos con par!metros.

• 'ecurrir al -lo%ue and.

Diseñar los componentes

Esta aplicaci1n tiene un componente Canvas %ue se utiliar9 como ta-lero de uego. En él

;a-r9 tres ImageSprite: uno para la mari"uita7 otro para la pulga 8 un ltimo para la rana.

>am-ién emplearemos un componente Sound para el croar  de este animal. 'ecurriremos a

OrientationSensor para medir el grado de inclinaci1n del telé"ono 8 mo$er la mari%uita en

consecuencia.

El componente Cloc  lo usaremos para modi"icar la direcci1n del mo$imiento de la pulga.

a-r9 un segundo Canvas %ue mostrar9 el nivel de energ#a de nuestra protagonista. &or ltimo7 un

 -ot1n $einiciar permitir9 reiniciar el uego cuando la mari%uita muera de ;am-re o sea de$orada

 por la rana.

6icente Destruels ,oreno &9gina 2

Page 3: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 3/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

@a siguiente ta-la contiene todos los componentes %ue emplearemos:

%ipo de

componente

&rupo de

'alette

C(mo lo

llamaremos

Finalidad

Canvas   Basic ieldCan$as >a-lero de uego.

 ImageSprite   Animation ,ari%uita &ersonae controlado por el usuario.

OrientationSensor    Sensors Brientationensor4 Detecta la inclinaci1n del telé"ono 8

controla el mo$imiento de la mari%uita.

Clock    Basic Cloc4 Determina cu9ndo de-e modi"icar la

 posici1n de 0mageprite.

 ImageSprite   Animation &ulga @a presa de la mari%uita. ImageSprite   Animation 'ana El depredador de la mari%uita.

Canvas   Basic Energ8Can$as ,uestra el ni$el de energía de la mari%uita.

 Button   Basic 'estart)utton 'einicia el uego.

Sound    )edia ound4 Cuando la rana se come a la mari%uita7

;ace %ue creo.

Empezamos

Conéctate a AppInventor e inicia un nue$o pro8ecto llamado LadyBugChase 8 cam-ia el

teto de la -arra de título por LadyBug Chase. A-re Blocs *ditor 8 agrega todas las im9genes del

capítulo suministradas 8 el arc;i$o de sonido al panel desde )edia <,ultimedia=.

i las prue-as las $as a realiar en el telé"ono7 de-er9s desacti$ar la rotaci1n autom9tica de

la pantalla. En la ma8oría de los aparatos7 esta opci1n estar9 en A+ustes,- 'antalla.

6icente Destruels ,oreno &9gina !

Page 4: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 4/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

Definir el comportamiento de los componentes

Dotar de movimiento a la mariquita

&ara mo$er a nuestra mari%uita de-eremos inclinar el telé"ono. 6amos a crear a la mari%uita

8 el sistema %ue controlar9 su mo$imiento.

• Añade un elemento Canvas7 %ue ser9 nuestro ta-lero de uego. Cam-ia el nom-re a

FieldCanvas. @a propiedad .idth ponla a Fill parent 8 /eight a 011 p#2els.

Coloca un elemento ImageSprite desde la secci1n Animation7 dentro de Canvas. Cam-iael nom-re a )ari"uita 8 modi"ica su aspecto incorporando la imagen de la mari%uita $i$a

dentro de la propiedad 'icture <imagen=.

• El $alor de la propiedad Interval ser9 31 milisegundos. Determinar9 la "recuencia con la

%ue se mo$er9 el elemento 0mageprite.

• @a propiedad /eading indica la direcci1n ;acia donde se mo$er9. 6iene de"inida en grados.

&or eemplo7 si tiene el $alor F se dirigir9 a la derec;a el $alor 3F indicar9 %ue se desplaar9

;acia arri-a 4F a la i%uierda7 etc. De momento7 no la modi"icamos.

• @a propiedad Speed determina el nmero de píels %ue de-er9 recorrer 0mageprite cada

$e %ue se cumpla el tiempo determinado por 0nter$al. @a con"iguraremos despes.

El encargado de controlar el mo$imiento de la mari%uita ser9 OrientationSensor7 %ue

detectar9 el grado de inclinaci1n del telé"ono. (tiliaremos el componente Cloc  para compro-ar la

orientaci1n del aparato cada 10 ms. >am-ién eaminaremos si ;a ;a-ido algn cam-io en la

direcci1n de la mari%uita < Heading =. Con"iguraremos estos comportamientos desde Blocs *ditor:

• Agrega un componente OrientationSensor7 desde Sensors7%ue aparecer9 en la secci1n

4on,5isible,components.

6icente Destruels ,oreno &9gina #

Page 5: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 5/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

• Añade un elemento Cloc 7 desde Basic7 %ue tam-ién estar9 en la secci1n 4on,5isible,

components 87 con"igura su propiedad %imerInterval a 4F ms.

A;ora asignaremos comportamientos a los componentes %ue aca-amos de agregar.

6amos a Blocs *ditor a crear los procedimientos 6pdate)ari"uita 8 Cloc7%imer 

como muestra la "igura de a-ao:

'ecuerda %ue para escri-ir un procedimiento de-erías ir a :

En $e de arrastrar los -lo%ues de los caones7 prue-a a escri-ir directamente so-re el 9rea

de tra-ao sus nom-res <como por eemplo7 Cloc37%imer=. &ara añadir comentarios ;a clic con el

 -ot1n derec;o del rat1n 8 selecciona la opci1n Add Comment <agregar comentario=. >ermina los

 -lo%ues tal %ue:

El procedimiento 6pdate)ari"uita usar9 dos de las propiedades de OrientationSensor:

•   Angle: 0ndica la direcci1n en la %ue se inclina el telé"ono <medida en grados=.

•   )agnitude: 0ndica la cantidad de inclinaci1n %ue se aplica al telé"ono. u $alor $a desde F

6icente Destruels ,oreno &9gina 5

Page 6: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 6/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

<cuando no se asigna ninguna= ;asta 4 <inclinaci1n m9ima=.

Al multiplicar )agnitude por 4FF7 estaremos diciéndole a la mari%uita %ue de-e mo$erse

entre F 8 4FF píels en la direcci1n %ue especi"i%ue la propiedad /eading. Esta operaci1n tendr9

lugar siempre %ue se agote el tiempo de"inido por %imerInterval7 %ue ser9 de 4F milisegundos.

Guarda primero el pro8ecto con el nom-re LadybugChase7 se generar9 el "ic;ero

“LadyBugChase7ap” %ue es el %ue de-es copiar a tu telé"ono. i $es %ue el mo$imiento de la

mari%uita es lento7 aumenta su $elocidad. i se desplaa demasiado r9pido7 redcela.

PRUEBA!!!!

Mostrar el nivel de energía

(tiliaremos una barra de color ro+o para mostrar el ni$el de energía de la mari%uita.

>endr9 un píel de alto 8 su anc;o indicar9 el ni$el de energía7 %ue ir9 desde 2FF <-arra de energía

llena= ;asta cero <muere la mari%uita=.

Desde Component Designer7 generaremos un nue$o elemento Canvas7 %ue colocaremos

de-ao de FieldCanvas 8 -autiaremos como *nergyCanvas. A su propiedad .idth le

asignaremos el $alor Fill parent 8 en la propiedad /eight le asignaremos el $alor de 4 píel.

6amos a crear una $aria-le llamada energy desde Blocs *ditor. A%uí crearemos una

$aria-le para la energía %ue tendr9 un valor inicial de 811 8 %ue guardar9 in"ormaci1n so-re el

ni$el de energía de la ,ari%uita:

• A-re el ca1n De9inition del Built,In de )locs Editor. Arrastra ;asta el 9rea de tra-ao un

 -lo%ue para de"inir una $aria-le. 'enom-ra el teto variable por energy.

• i ;u-iese un -lo%ue en la ranura %ue est9 a la derec;a de energy7 elimínalo.

• Desde ,at; arrastra el -lo%ue number ;asta el 9rea

de tra-ao7 col1calo en la ranura de la parte derec;a

6icente Destruels ,oreno &9gina +

Page 7: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 7/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

del -lo%ue de de"inici1n de la $aria-le energy. &on el $alor 811 como inicial para la

$aria-le.

Dibujar la barra de energía

,ostraremos el ni$el de energía a tra$és de una -arra roa. &ara generar el procedimiento

Dibu+a*nergia realiaremos lo siguiente:

4. Desde el ca1n De9inition arrastra un -lo%ue to procedure al 9rea de tra-ao.

2. Cam-ia el nom-re 8 ll9malo Dibu+a*nergia.

!. Desde el ca1n De9inition arrastra un -lo%ue name ;asta el 9rea de tra-ao. Col1calo en la

ranura arg de Dibu+a*nergia. a clic so-re él 8 cam-ia su nom-re por color.

#. 'epite el tercer paso para añadir un segundo argumento al -lo%ue Dibu+a*nergia. Esta $e

cam-ias el nom-re por longitud.

5. Completa el resto del procedimiento para %ue %uede como en la "igura siguiente:

A;ora crearemos un segundo

 procedimiento llamado

)uestra4ivel*nergia 8 %ue se

encargar9 de llamar dos $eces a

Dibu+a*nergia. Con la primera

6icente Destruels ,oreno &9gina /

Page 8: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 8/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

in$ocaci1n -orrar9 la línea %ue mostra-a el ltimo estado de energía conocido <di-uar9 encima de

ella otra -lanca= 8 con la segunda enseñar9 en la pantalla la línea correspondiente al nue$o estado

de energía7 como en la siguiente "igura:

Inanición

A di"erencia de lo %ue ocurría con las aplicaciones de los capítulos anteriores7 este uego

 puede terminarse. Cuando la mari%uita no consiga comer las su"icientes pulgas o sea de$orada por

la rana7 el uego "inaliar9. En cual%uiera de los casos7 detendremos el mo$imiento de la

 protagonista <asignaremos el $alor 9alse a )ari"uita7*nabled= 8 cam-iaremos su "oto por una en

la %ue aparece muerta. Esto ltimo lo conseguiremos escri-iendo el nom-re de la nue$a imagen

dentro de )ari"uita7'icture. 6amos a crear el procedimiento Fin como en la "igura:

A continuaci1n7 $amos a añadir tres -lo%ues de c1digo al procedimiento 8a creado

6pdate)ari"uita. Como recordar9s7 Cloc7%imer lo llama-a cada 4F milisegundos. @a "inalidad

de estos tres nue$os c1digos es la siguiente:

• 'educir el ni$el de energía.

• ,ostrar el nue$o ni$el en la pantalla.

• inaliar el uego si el ni$el de energía es F.

6icente Destruels ,oreno &9gina

Page 9: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 9/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

Guarda primero el pro8ecto con el nom-re LadybugChase87 se generar9 el "ic;ero

“LadyBugChase87ap “%ue es el %ue de-es copiar a tu telé"ono.

6eri"ica si el ni$el de energía $aría con el paso del tiempo. Agota el ni$el de energía para $er 

si la mari%uita se muere.

PRUEBA!!!!

Añadir una pulga

El siguiente paso ser9 añadir una pulga. El insecto de-er9 re$olotear por FieldCanvas. i la

mari%uita c;oca con ella7 es decir7 si se la come7 su ni$el de energía de-er9 aumentar 8 la pulga

desaparecer de la pantalla. Al poco tiempo7 la aplicaci1n $ol$er9 a colocar otra en el ta-lero de

 uego. Aun%ue para nosotros ésta sea el mismo componente ImageSprite7 para el usuario ser9 un

insecto di"erente.

El primer paso para añadir la pulga al uego es $ol$er a Component Designer para crear

otro elemento ImageSprite. Asegrate de no colocarlo encima de la mari%uita. Cam-ia su nom-re

 predeterminado por 'ulga 8 con"igura sus propiedades:

4. A-re la imagen de la pulga HAphid7png” en la propiedad 'icture.

2. Asigna el $alor 4F a Interval para %ue se mue$a cada 4F milisegundos como la mari%uita.

!. Asigna el $alor 2 a Speed para %ue no se mue$a demasiado r9pido 8 permita %ue la

mari%uita pueda cogerla. Io te preocupes por las propiedades X,Y o Heading  por%ue las

con"iguraremos desde Blocs *ditor m9s tarde.

)as9ndonos en las prue-as %ue ;emos realiado al uego7 ;emos $isto %ue es con$eniente

%ue la pulga cambie de direcci(n aproimadamente una $e cada 5F milisegundos <cada 5 ciclos

completos de Cloc4=. (na "orma de conseguirlo sería creando un segundo relo %ue tu$iese un

inter$alo <%imerInterval= de :1 milisegundos. &ero ;emos pre"erido utiliar una técnica distinta

 para %ue aprendas a usar el -lo%ue random 9raction %ue7 cuando se in$oca7 de$uel$e un nmero

6icente Destruels ,oreno &9gina 3

Page 10: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 10/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

aleatorio mayor o igual ue 0 y menor ue 1. Crea el procedimiento 6pdate'ulga 8 luego ;a %ue

Cloc37%imer lo in$o%ue como en la "igura %ue tienes m9s a-ao.

Cada $e %ue se agota el tiempo <4FF $eces por segundo=7 se llama a 6pdate)ari"uita 

<igual %ue ocurría antes= 8 a 6pdate'ulga. @o primero %ue ;ace 6pdate'ulga es generar una

"racci1n aleatoria comprendida entre F 8 4<por eemplo7 F745=. si este nmero es menor %ue F72F

<algo %ue pasar9 el 2F por cien de las $eces=7 la direcci1n de la pulga cam-iar9 a una cantidad

aleatoria de grados comprendida entre F 8 !+F. i la ci"ra es ma8or de F72F <algo %ue ocurrir9 el F

 por cien de las $eces=7 la pulga continuar9 su tra8ectoria.

El siguiente paso ser9 conseguir %ue la mari%uita se coma a la pulga cuando impacte con ella

<procedimiento nue$o llamado Come'ulga=. A"ortunadamente7 AppInventor cuenta con -lo%ues

 para detectar las colisiones entre componentes ImageSprite. ¿Qué ocurrir9 cuando la mari%uita

c;o%ue con la pulga?

• Aumentar9 el ni$el de energía 5F puntos.

• @a pulga desaparecer9 de pantalla <de-eremos asignar el $alor 9alse a su propiedad 5isible=.

6icente Destruels ,oreno &9gina 4F

Page 11: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 11/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

• @a pulga dear9 de mo$erse <asignaremos 9alse a su propiedad *nabled=.

• @a pulga se mo$er9 ;asta una u-icaci1n aleatoria de la pantalla. A%uí7 seguiremos el mismo

modelo de c1digo %ue $imos con DaleFuerte

• i consideras oportuno añade un sonido cuando se coma <; habla con tu pro9esor=.

Cada $e %ue se llame al procedimiento Come'ulga7 se suma :1 a la $aria-le energy.

@uego7 se asigna el $alor 9alse a las propiedades 5isible 8 *nabled para %ue la pulga desapareca

de la pantalla 8 detenga su mo$imiento. inalmente7 se generan unas coordenadas < e = aleatorias 8

se le entregan al procedimiento 'ulga7)ove%o. De esta "orma7 conseguimos %ue el insecto

reapareca en una nue$a u-icaci1n7 e$itando %ue la ,ari%uita se lo $uel$a a comer de inmediato.

El c1digo %ue de-es generar <sin sonido= es el siguiente:

&ara detectar la colisi1nJc;o%ue entre la mari%uita 8 la pulga ;emos de añadir el siguiente

c1digo:

6icente Destruels ,oreno &9gina 44

Page 12: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 12/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

El anterior c1digo tiene la siguiente eplicaci1n:

Cuando la mari%uita c;oca con otro elemento ImageSprite7 la aplicaci1n llama a

)ari"uita7Collide.ith7 utiliando el par9metro other para ;acer re"erencia al o-eto con el %ue

top1 el insecto. De momento7 el nico elemento con el %ue puede impactar la mari%uita es la pulga

 pero7 en -re$e7 añadiremos una rana. Antes de llamar a Come'ulga7 de-emos compro-ar %ue la

mari%uita ;a c;ocado7 e"ecti$amente7 con la pulga. >am-ién de-emos eaminar %ue la pulga esté

$isi-le en el ta-lero7 8a %ue si no lo est97 la mari%uita se la comería antes de %ue $ol$iese a aparecer 

8 $ol$ería a su-ir su ni$el de energía.

Guarda primero el pro8ecto con el nom-re LadyBugChase07 se generar9 el "ic;ero

“LadyBugChase07ap” %ue es el %ue de-es copiar a tu telé"ono.

PRUEBA!!!!

&ara %ue la pulga pueda aparecer en la pantalla de-eremos modi"icar 6pdate'ulga. >an s1lo

se alterar! la direcci(n de la pulga cuando sea visible. Io merece la pena cam-iarlo cuando es

in$isi-le. Cuando no apareca en la pantalla7 es decir7 cuando la mari%uita aca-e de comérsela7

;a-r9 un 5 por cien de posi-ilidades <4 entre 2F= de %ue se $uel$a a acti$ar de nue$o7 es decir7 %ue

$uel$a a aparecer como presa de la mari%uita.

El c1digo modi"icado de 6pdate'ulga es el siguiente:

6icente Destruels ,oreno &9gina 42

Page 13: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 13/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

Guarda primero el pro8ecto con el nom-re LadyBugChase>7 se generar9 el "ic;ero

“LadyBugChase>7ap” %ue es el %ue de-es copiar a tu telé"ono.

PRUEBA!!!!

A;ora agregaremos un bot(n de $einicio de partida. Desde Component Designer7

agregaremos un componente Button al 9rea de tra-ao 8 lo colocaremos de-ao de *nergyCanvas.

@o llamaremos $einiciar 8 en la propiedad %e2t escri-iremos $einiciar. Después7 en Blocs

*ditor? crearemos el c1digo asociado al pulsar el -ot1n:

• De$ol$er el ni$el de energía a 2FF.

• 6ol$er a acti$ar la pulga 8 mostrarla de nue$o en pantalla.

• 'eacti$ar a la mari%uita 8 cam-iar su imagen para %ue apareca $i$a.

6icente Destruels ,oreno &9gina 4!

Page 14: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 14/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

Guarda primero el pro8ecto con el nom-re LadyBugChase:7 se generar9 el "ic;ero

“LadyBugChase:7ap” %ue es el %ue de-es copiar a tu telé"ono.

PRUEBA!!!!

A;ora añadiremos a un depredador de nuestra mari%uita7 la rana7 %ue se mo$er9 ;acia ella.

i la atrapa el uego "inaliar9.

@o primero es colocar la rana en el ta-lero de uego FieldCanvas desde Component

Designer7 arrastrando un ImageSprite7 al %ue llamaremos $ana. 0ncorporaremos su imagen en la

 propiedad 'icture7 a su mo$imiento le asignaremos un inter$alo de 31 milisegundos 8 a su

velocidad le daremos el $alor 37 8a %ue de-er9 mo$erse m9s lento %ue el resto de criaturas del

 uego.

A;ora ;emos de crear el procedimiento 6pdate$ana 8 modi"icar el 8a creado Cloc37%imer.

6icente Destruels ,oreno &9gina 4#

Page 15: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 15/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

Atan87 es una "unci1n matem9tica de AppInventor? %ue de$uel$e el !ngulo correspondiente a los

$alores K e L suministrados.

A;ora ;emos de modi"icar el c1digo para controlar el c;o%ue de la mari%uita con cual%uier

otro elemento del ta-lero. A;ora7 si la mari%uita se topa con la rana7 la -arra 8 el nivel de energ#a 

de-erían de descender ;asta 1 8 el uego terminaría. El $alor de la $aria-le energy descender9 ;asta

F. e llamar9 a la "unci1n )uestra4ivel*nergia para %ue -orre la línea de energía en la pantalla 8

di-ue una nue$a %ue estaría $acía. Adem9s7 la aplicaci1n llamar9 al procedimiento Fin para %ue

detenga el mo$imiento de la mari%uita 8 cam-ie su imagen por un insecto muerto:

6icente Destruels ,oreno &9gina 45

Page 16: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 16/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

Un último detalle....

emos de tener en cuenta el retorno de la mari"uita en el -ot1n $einiciar. i no mo$emos

la mari%uita cuando reiniciamos el uego7 $ol$ería a aparecer en la -oca de la rana. Aun%ue $amos autiliar para ello la "unci1n random integer 8a conocida7 la pro-a-ilidad de %ue apareca la

mari%uita encima de la rana es tan -aa7 %ue no merece la pena complicar m9s el c1digo:

Guarda primero el pro8ecto con el nom-re LadyBugChase@7 se generar9 el "ic;ero

“LadyBugChase@7ap” %ue es el %ue de-es copiar a tu telé"ono.

PRUEBA!!!!

6amos a añadir e"ectos sonoros. &ara ello utiliaremos el componente Sound3 %ue añadimos

al principio de la pr9ctica <comprué-alo primero=. A;ora7 desde Blocs *ditor ;a lo siguiente:

• a %ue el telé"ono $i-re cuando la mari%uita se coma a la pulga. &ara ello7 de-er9s agregar

el -lo%ue Sound375ibrate a Come'ulga 8 asignarle un argumento de 3111 milisegundos.

6icente Destruels ,oreno &9gina 4+

Page 17: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 17/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

• a %ue la rana croe cuando se coma a la mari%uita. Añade una llamada Sound37'lay en

)ari"uita7Collide.ith usta antes de %ue se in$o%ue a la "unci1n Fin.

De-er9s de cargar el "ic;ero “Frog7.av” desde )edia 8 en las propiedades del o-eto

Sound3 asign9rselo en el campo Source7

Guarda primero el pro8ecto con el nom-re LadyBugChase@7 se generar9 el "ic;ero

“LadyBugChase@” %ue es el %ue de-es copiar a tu telé"ono.

PRUEBA!!!!

6icente Destruels ,oreno &9gina 4/

Page 18: AppInventor Cap5 Final

7/17/2019 AppInventor Cap5 Final

http://slidepdf.com/reader/full/appinventor-cap5-final 18/18

Apuntes de Android –  AppInventor de Google Capítulo 5 – LadyBug Chase

Variaciones

Algunas ideas para meorar el uego <M;a-lar con el pro"esor=:

• A;ora7 la rana y la pulga siguen mo$iéndose incluso después de terminar el uego. &ara

e$itarlo7 de-erías asignar el $alor 9alse a las propiedades *nabled %ue se encuentran en la

"unci1n Fin 8 el $alor true en $einiciar7Clic .

• ,uestra un marcador %ue indi%ue la cantidad de vida %ue le %ueda a la mari%uita. &ara

ello7 puedes crear una eti%ueta %ue incremente su $alor con Cloc37%imer.

• Aumenta la altura de la -arra de energía para %ue sea m9s llamati$a. 'ecuerda %ue puedes

;acerlo incrementando el $alor de la propiedad /eight de *nergyCanvas ;asta 8 8

di-uando dos líneas7 una so-re otra7 en Dibu+ar*nergia.

• Añade una imagen de "ondo para meorar el entorno 8 nue$os e"ectos de sonido7 como los

de la naturalea o algn a$iso de cuando el ni$el de energía de la mari%uita sea demasiado

 -ao.

• a %ue el +uego sea cada $e m!s di9#cil. &ara ello7 puedes incrementar la velocidad de la

rana o disminuir el $alor de la propiedad Interval.

• >écnicamente7 la mari%uita de-ería desaparecer cuando sea de$orada por la rana. Cam-ia el

 uego para %ue esto ocurra cuando sea comida pero permaneca en la pantalla cuando muera

de ;am-re.

• ustitu8e las im9genes de la mari%uita7 la pulga 8 la rana por otras %ue sean de tu gusto7

como por eemplo7 un ;o--it7 un orco 8 un mago dia-1lico.

6icente Destruels ,oreno &9gina 4