AppInventor. Disseny i implementació d’un joc

En aquesta pràctica ficaràs en pràctica tot aprés fins ara dissenyant i implementant joc propi.

Com comencem? Has de pensar en el funcionament del joc, quin serà l’objectiu, com es jugarà( si haurà puntuació, vides, etc.) i com finalitzarà.

Com seguim? Una vegada has pensat el joc, has de fer els passos per a convertir la teua idea en la realitat.

  1. Amb una eina de disseny ràpid
    1. Realitza un arbre de decisió de les pantalles (a l’estil dels arbres de decisió que has vist en les pràctiques anteriors).
    2. Disenya l’esbós de les pantalles.
  2. Busca i baixa els recursos necessaris per al teu joc (imatges, música, etc).
  3. En AppInventor
    1. Realitza el disseny gràfic del joc (recorda omplir el camp About indicant l’autoria del joc, així com canvia l’etiqueta del nom de les diferents pantalles)
    2. Implementa la funcionalitat del joc.
    3. Exporta el joc en .apk i prova’l en el teu dispositiu.

I ara què? En aquesta pràctica has de fer dos tipus de lliurament:

  1. Has de lliurar en la tasca de l’aula virtal els següents recursos: la imatge de l’arbre de decisió, les imatges dels esbossos de les pantalles, el projecte d’AppInventor (.aia, descarrega’l desde menú Project–>Export selected project (aia) to my computer), així com el vídeo de com executes el joc en el teu mòbil.
  2. Has de reflexionar sobre els següents preguntes:
    • Què has fet especialment bé en aquesta pràctica?
    • Quins són els prinipals problemes que has tingut i com els has solventat?
    • Què es podria millorar?

AppInventor. Arbes de decisió

En aquesta pràctica aprendràs un poquet sobre la intel·ligència artificial i una de les seues eines: arbres de decisió.

Com comencem? Mira aquest vídeo on s’explica el concepte d’intel·ligència artificial. Reflexiona:

  • Què vol dir que els algorismes aprenen «sesgos»?
  • Els sistemes entrentats, segons el que s’explica, són totalment neutros o també poden mostrar interessos en les seues decisions?
  • Quines dues coses son les que la ponent considera necessàries per a muntar el sistemes sofisticats?
  • Tú estàs propociant informació teua perquè algú puga muntar aquests tipus de sistemes?

Com seguim? Accedeix a aquest joc i juga un poquet. Aquest sistema expert utilitza arbres de decisió per a arribar a una conclusió a partir de les respostes de l’usuari a les preguntes que fa el sistema.

Anem a implememenar un joc d’acertar la figura que pensa l’usuari.

Donades aquestes tres figures, quin és l’arbre de decisió per saber en quina pensa l’usuari?

Has de fixar-te en carecaterístiques diferenciadores:

  • Nombre de costats
  • Grandària de costats

Aquest és l’arbre de decisió.

CREACIÓ DE L’APP

Crea un projecte d’AppInventor anomenat ArbreDecisio_elteuNom

Dissenya tres differents pantalles en AppInventor seguint el model que es presenta baix. Per tal d’afegir una pantalla nova has de fer servir el botó «Add Screen». Per a seleccionar una pantalla, se selecciona a través de primer desplegable d’aquesta barra.

Els recursos gràfics tens la imatge de les tres figures, la de triangle, la de quadrat i la de rectangle.

T’has de fixar en la definció d’alguns aspectes gràfics:

  • La propietat de aliniació vertical de la pantalla és centrada
  • La propietat d’aliniació horitzontal dels textos dels elements és centrada.
  • S’utilitza l’element «HoritzontalArrangement» per a permetre dos botons en la mateixa línia.
  • La propietat d’amplària dels elements és «ompli el contenidor», mentres que el dels botons és 50%

A l’hora d’implementar el joc només ens fa falta implementar els esdeveniments dels botons, seguint la lògica descrita en l’arbre de decisió.

En la Screen1, en l’esdeveniment del botó de jugar, volem que l’aplicació canvie a la pantalla2: Screen2.

Això ho farem amb l’ordre de canviar pantalla, tal com es mostra en la figura, indicant el nom de la pantalla.

En la Screen2, s’han d’implementar dos esdeveniments.

En la figura es mostra com s’invoca la pantalla del resultat (Screen4), passant-li el valor «TRIANGLE».

Falta implementar el comportament de btn_tresNO que ha d’obrir la pantalla de 2a pregunta de decisió (Screen3). En aquest cas, fa falta passar algun valor?

En la Screen3 cal implementar el canvi a pantalla Screen4 amb valor inici «QUADRAT» o «RECTANGLE» en funció de si la grandària de costats és igual o no.

En la Screen4 cal implementar l’esdeveniment d’inicialització de la pantalla.

A aquesta pantalla sempre s’arribarà amb un valor d’inici (TRIANGLE, RECTANGLE o QUADRAT) com a resultat de la decisió de l’arbre de decisió. Per tant hem de mostrar una figura o altra en funció d’eixe valor.

A més cal implementar la funcionalitat de botó «Tornar a inici» que portarà a la pantalla Screen1

I ara què? Realitza els següents exercicis:

  1. Joc d’endevinalla. Acaba la implementació de l’app. Fes captures de pantalla de la part gràfica i un vídeo del funcionament de l’app. Puja el material a la tasca corresponent de l’aula virtual.
  2. App què fer després de 4t d’ESO. Implementa l’app que ajuda a prendre la decisió sobre què fer a l’acabar 4t d’ESO. Realitza un disseny similar a l’app guiada. Busca els recursos
  3. App guia de la compra. Implementa l’app que ajuda a prendre la decisió si es necessita scomprar o no comprar un producte. Realitza un disseny similar a l’app guiada.

Atrapa l’or

En aquesta pràctica anem a implementar el joc Atrapa l’or! En aquest joc, un pirata intenta agafar les monedes d’or que hi ha en el menor temps possible. La pràctica original està explicada ací.

Per on comencem? Analitza la imatge de baix. I intenta contestar les següents preguntes:

  • Quins elements gràfics fan falta per a implementar al personatge i a les monedes?
  • Què cal utilitzar per ficar dos elements un al costat de l’altre (el botó i el text de temps)?
  • Quina propietat s’ha de canviar perquè els elements ocupen un àrea determinat de la pantalla?

Per on seguim? Anem a biaxar/buscar les imatges i música per al joc. Després anem a definir la part gràfica i per últim implementarem la funcionalitat.

  1. Baixa’t la imatge de pirata i la imatge de la moneda. A més busca un so per a la teua música.
  2. Crea un projecte nou de AppInventor, anomenat atrapaOr.
  3. Dissenya la part gràfica. Ha de quedar paregut a la imatge. T’has de fixar en:
    • La pantalla té en «AboutScreen» la procedència de la música emprada.
    • El personatge de pirata té velocitat 6
    • La disposició horitzontal té els elements verticalement aliniats al centre.
    • El rellotge té l’interval a 2000.
  1. Implementa la funcionalitat de l’app. Comportament del pirata

L’usuari llançarà el pirata contra les monedes. Això s’implementa amb l’esdeveniment «Flug» i s’utilitzarà la direcció del moviment dels dits.

Si el pirata toca una vora, ha de rebotar. Per això es farà servir l’esdeveniment «EdgeReached».

  1. Implementa la funcionalitat de l’app. Comportament de les monedes

Cada volta que s’acaba l’interval, totes les monedes canvien de lloc aleatòriament.

Aixó s’aconsegueix si es mou la moneda, en una posició aleatòria tenint en compte la grandària del llenç i de la moneda

En aquest exemple només és mostra una moneda. A l’esdeveniment, s’han de ficar totes les monedes.

  1. Implementa la funcionalitat de l’app. Caça de monedes.

Sempre que el pirata toca la moneda, es considera que l’ha agafat i, per tant, la moneda ha d’desaparèixer.

A l’exemple només està representada la col·lisió d’una moneda. Tu has de ficar-les totes.

I ara què? En aquest punt, has d’acabar d’implementar la funcionalitat de reinici de joc. El que es vol és que a prèmer el botó, tornen a aparèixer totes les monedes.

Recorda que has de fer captures de pantalla, tant de la part de disseny com la part de funcionalitat. A més intenta fer un vídeo mostrant com funciona el joc.

Reflexiona sobre dues qüestions:

  • Per què és bóna idea agarrar un número aleatori entre un rang fix a l’hora de menejar les monedes?
  • Quin és l’inconveninient en utilitzar l’estructura de control IF…THEN…ELSE en la detecció de la col·lisió del pirata amb les monedes?

I si ens quedem amb ganes de més? De forma opcional es poden fer les següents millores:

  • Afegir més monedes.
  • Comptar el temps que tarda el pirata en caçar totes les monedes
  • Incloure un personatge enemic i si el pirata col·lisiona, s’acaba el joc.
  • Afegir el control del pirata amb el sensor de la brúixola.

Bola màgica

En aquesta pràctica farem l’app de bola màgica. Pot recordar a Siri o Cortana o Alexa, … però és tan intel·ligent com ells?

Per on comencem? Analitza la imatge de baix. I intenta contestar les següents preguntes:

  • Quin és el comportament de l’app? Què fa l’app? Com s’utilitza?
  • Quins elements gràfics fan falta?
  • Quins recursos extra fan falta?
  • Quins esdeveniments s’implementen?

Per on seguim? Fes una ullada a aquest tutorial. Encara que està en anglès, analitzant les fotos pots fer-te una idea de què s’ha de fer. A més tens aquest vídeo on s’explica la implementació (només la part de sensor de moviment, la implementació de l’esdeveniment de botó és similar). Reflexiona:

  • El comportament de l’app és intel·ligent?
  • La resposta per part de l’app té correlació amb la pregunta de persona usuària?

I ara què? Crea un nou projecte en AppInventor. Fes captures de pantalla del disseny de part gràfica i de la part d’implmentació. A més inenta fer un vídeo de l’app funcionant en el teu mòbil. Ja pujaràs els fitxers quan la plataforma d’AULES estiga operativa.

"edutictac.es