AppInventor Cap5 Final

AppInventor de Apuntes de Android – AppInventor de Google

Capítulo 5 – LadyBug Chase

Manejo de Sprites ¿ Qué aprenderé aprender é ?............................................... ?...................................................................... .............................................. ........................................................... .................................... 2 Diseñar los componentes.................. componentes......................................... .............................................. .............................................. ......................................................2 ...............................2 Empeamos.......................................... Empeamos................... .............................................. .............................................. .............................................. .............................................. ............................! .....! De"inir el comportamiento de los componentes................................................ componentes.......................................................................... .......................... ....# Dotar de mo$imiento a la mari%uita........................................... mari%uita.................................................................. .............................................. ..........................# ...# &'(E)A****........................................ &'(E)A****................. .............................................. .............................................. .............................................. ...................................................+ ............................+ ,ostrar el ni$el de energía...................................... energía............................................................. .............................................. .............................................+ ......................+ Di-uar la -arra de energía........................................................ energía............................................................................... ................................................../ .........................../ 0nanici1n...................................... 0nanici1n............................................................. .............................................. .............................................. .............................................. ........................... .... &'(E)A****........................................ &'(E)A****................. .............................................. .............................................. .............................................. ...................................................3 ............................3 Añadir una pulga...................................... pulga............................................................. .............................................. .............................................. ..................................... .............. 3 &'(E)A****........................................ &'(E)A****................. .............................................. .............................................. .............................................. ................................................. .......................... 42 &'(E)A****........................................ &'(E)A****................. .............................................. .............................................. .............................................. ................................................. .......................... 4! &'(E)A****........................................ &'(E)A****................. .............................................. .............................................. .............................................. ................................................. .......................... 4# (n ltimo lti mo detalle............................................... detalle...................................................................... .............................................. ....................................... .............................. .............. 4+ &'(E)A****........................................ &'(E)A****................. .............................................. .............................................. .............................................. ................................................. .......................... 4+ &'(E)A****........................................ &'(E)A****................. .............................................. .............................................. .............................................. ................................................. .......................... 4/ 6ariaciones........................ ariaciones................................................ ............................................... .............................................. .......................................................... ................................... ........4 ........ 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



¿ Qué aprenderé ? Antes de empear 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: •

(tiliar $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. un ImageSprite.

•

Cam-iar la imagen %ue muestra un ImageSprite.

•

(tiliar el componente Cloc para para controlar $arios e$entos.

•

Emplear variables para registrar nmeros
•

Crear 8 utiliar procedimientos con par!metros.

•

'ecurrir al -lo%ue and.

Diseñar los componentes Esta aplicaci1n tiene un componente Canvas %ue se utiliar9 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 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 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.


&9gina 2



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

%ipo de

&rupo de

C(mo lo

componente

'alette

llamaremos

Canvas

ImageSprite

Finalidad

Basic

ieldCan$as

>a-lero de uego.

Animation

,ari%uita

&ersonae controlado por el usuario.

OrientationSensor Sensors

Brientation Brientationensor4 ensor4 Detecta la la inclinaci1n inclinaci1n del del telé"ono telé"ono 8 controla el mo$imiento de la mari%uita.

Clock

Basic

Cloc4

Determina cu9ndo de-e modi"icar la posici1n de 0mageprite.

ImageSprite

Animation

&ulga

@a presa de la mari%uita.

ImageSprite

Animation

'ana

El depredador de la mari%uita.

Canvas

Basic

Ener nerg8C g8Can$a an$ass

,ues ,uestr traa el el ni$ ni$el el de ener energí gíaa de de la la mar mari% i%ui uita ta..

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 teto de la -arra de título por LadyBug Chase. A-re Blocs *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 realiar 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.


&9gina !



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-ia el nom-re a )ari"uita 8 modi"ica su aspecto incorporando la imagen de la mari%uita $i$a dentro de la propiedad 'icture
•

El $alor de la propiedad Interval ser9 31 milisegundos. Determinar9 la "recuencia con la %ue se mo$er9 el elemento 0mageprite.

•

@a propiedad /eading indica la direcci1n ;acia donde se mo$er9. 6iene de"inida en grados. &or eemplo7 si tiene el $alor F se dirigir9 a la derec;a el $alor 3F indicar9 %ue se desplaar9 ;acia arri-a 4F a la i%uierda7 etc. De momento7 no la modi"icamos.

•

@a propiedad Speed determina el nmero de píels %ue de-er9 recorrer 0mageprite cada $e %ue se cumpla el tiempo determinado por 0nter$al. @a con"iguraremos despes.

El encargado de controlar el mo$imiento de la mari%uita ser9 OrientationSensor7 %ue detectar9 el grado de inclinaci1n del telé"ono. (tiliaremos el componente Cloc para para compro-ar la orientaci1n del aparato cada 10 ms. ms . >am-ién >am-ién eaminaremos si ;a ;a-ido algn cam-io en la direcci1n de la mari%uita < Heading Heading =. =. Con"iguraremos estos comportamientos desde Blocs *ditor:

•

Agrega un componente OrientationSensor7 desde Sensors7%ue aparecer9 en la secci1n 4on,5isible,components.


&9gina #

AppInventor de Apuntes de Android – AppInventor de Google •


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 Blocs *ditor a crear los procedimientos 6pdate)ari"uita 8 Cloc7%imer como muestra la "igura de a-ao:

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

En $e de arrastrar los -lo%ues de los caones7 prue-a a escri-ir directamente so-re el 9rea de tra-ao sus nom-res ermina >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
•

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


&9gina 5



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 desplaa demasiado r9pido7 redcela.

PRUEBA!!!!

Mostrar el nivel de energía (tiliaremos 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
Desde Component Designer7 generaremos un nue$o elemento Canvas7 %ue colocaremos de-ao de FieldCanvas 8 -autiaremos 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 Blocs *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 ca1n De9inition del Built,In de )locs Editor. Arrastra ;asta el 9rea de tra-ao un -lo%ue para de"inir una $aria-le. 'enom-ra el teto 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-ao7 col1calo en la ranura de la parte derec;a


&9gina +



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 roa. &ara generar el procedimiento Dibu+a*nergia realiaremos lo siguiente:

4. Desd Desdee el el ca ca1 1n De9inition arrastra un -lo%ue to procedure al 9rea de tra-ao.

2. CamCam-ia ia el el nomnom-re re 8 ll9m ll9malo alo Dibu+a*nergia.

!. Desd Desdee el el ca ca1 1n De9inition arrastra un -lo%ue name ;asta el 9rea de tra-ao. 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 para añadir añadir un segund segundo o argumento argumento al -lo%ue -lo%ue Dibu+a*nergia. Esta $e cam-ias el nom-re por longitud.

5. Completa Completa el resto resto del procedimi procedimiento ento para para %ue %uede %uede como como en la "igura "igura siguiente: 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


&9gina /



in$ocaci1n -orrar9 la línea %ue mostra-a el ltimo estado de energía conocido
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 "inaliar9. En cual%uiera de los casos7 detendremos el mo$imiento de la protagonista
A continuaci1n7 $amos a añadir tres -lo%ues de c1digo al procedimiento 8a creado 6pdate)ari"uita. Como recordar9s7 Cloc7%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.

•

inaliar el uego si el ni$el de energía es F.


&9gina 



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. Asegrate de no colocarlo encima de la mari%uita. Cam-ia su nom-re predeterminado por 'ulga 8 con"igura sus propiedades: 4. A-re A-re la la imag imagen en de de la pulg pulgaa HAphid7png” en la propiedad 'icture.

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

!. Asig Asigna na el $alo $alorr 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 propiedades X,Y o Heading por%ue por%ue las con"iguraremos desde Blocs *ditor m9s tarde.

)as9ndonos en las prue-as %ue ;emos realiado al uego7 ;emos $isto %ue es con$eniente %ue la pulga cambie de direcci(n aproimadamente una $e cada 5F milisegundos
&9gina 3



aleatorio mayor o igual ue 0 y menor ue 1 . Crea el procedimiento 6pdate'ulga 8 luego ;a %ue Cloc37%imer lo in$o%ue como en la "igura %ue tienes m9s a-ao.

Cada $e %ue se agota el tiempo <4FF $eces por segundo=7 se llama a 6pdate)ari"uita
El siguiente paso ser9 conseguir %ue la mari%uita se coma a la pulga cuando impacte con ella
Aumentar9 el ni$el de energía 5F puntos.

•

@a pulga desaparecer9 de pantalla

&9gina 4F



•

@a pulga dear9 de mo$erse
•

@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 desapareca 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 reapareca 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
&ara detectar la colisi1nJc;o%ue entre la mari%uita 8 la pulga ;emos de añadir el siguiente c1digo:


&9gina 44



El anterior c1digo tiene la siguiente eplicaci1n:

Cuando la mari%uita c;oca con otro elemento ImageSprite7 la aplicaci1n llama a )ari"uita7Collide.ith7 utiliando 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 eaminar %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 apareca 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:


&9gina 42



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-ao 8 lo colocaremos de-ao de *nergyCanvas. @o llamaremos $einiciar 8 en la propiedad %e2t escri-iremos $einiciar. Después7 en Blocs *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 apareca $i$a.


&9gina 4!



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 mari%uita7 la rana7 %ue se mo$er9 ;acia ella. i la atrapa el uego "inaliar9.

@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 Cloc37%imer.


&9gina 4#



Atan87 es una "unci1n matem9tica de AppInventor? %ue de$uel$e el !ngulo correspondiente !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-ue 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:


&9gina 45



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 a utiliar para ello la "unci1n random integer 8a conocida7 la pro-a-ilidad de %ue apareca la mari%uita encima de la rana es tan -aa7 %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 utiliaremos el componente Sound3 %ue añadimos al principio de la pr9ctica
•

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.


&9gina 4+


•


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!!!!


&9gina 4/



Variaciones Algunas ideas para meorar el uego
•

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 Cloc37%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-uando dos líneas7 una so-re otra7 en Dibu+ar*nergia.

•

Añade una imagen de "ondo para meorar el entorno 8 nue$os e"ectos de sonido7 como los de la naturalea o algn a$iso de cuando el ni$el de energía de la mari%uita sea demasiado -ao.

•

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 permaneca 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 eemplo7 un ;o--it7 un orco 8 un mago dia-1lico.


&9gina 4

AppInventor Cap5 Final

Recommend Documents