TEMA 3 1/14

TalpBarrejatEn aquest tema es mostra com crear TalpBarrejat, un joc inspirat en el clàssic arcade Whac-A-Mole, on criatures mecàniques apareixen breument fora dels forats, i els jugadors guanyen punts per colpejar amb un mall. TalpBarrejat va ser creat per un membre de l'equip de App Inventor per provar la funcionalitat de sprites.

El que construiràPer a fer l'aplicació TalpBarrejat com es mostra a la Figura 3-1, implementarà les següents funcions:

• Un talp apareix en llocs a l'atzar a la pantalla, movent-se una vegada cada segon.

• Tocar el talp fa que el telèfon vibri, s'incrementa el comptador d'encerts , i el talp passa immediatament a una nova ubicació.

• En tocar la pantalla, però sense tocar el talp, s'incrementa el numero d'errors.

• En prémer el botó Restablir restableix els comtes d'encerts i errors.

El que aprendràsEl tutorial inclou els següents components i conceptes:

• El component ImageSprite sensible al tacte per imatges mòbils.

• El component de Canvas, que actua com una superfície sobre la qual col·locar el ImageSprite.

• El component del rellotge per moure el sprite cada cert temps.

• El component de so per produir una vibració quan es toca el talp.

• El component Button per iniciar un nou joc.

• Els procediments per implementar un comportament repetit, com moure el talp.

• Generació de nombres aleatoris.

• Ús dels blocs de suma (+) i resta (-).

Figura 3-1. La interfície d'usuari de TalpBarrejat

TEMA 3 2/14

IntroduccióConnectar-se a la pàgina web de App Inventor i començar un nou projecte. Anomenar-lo "TalpBarrejat" i també establir el títol de la pantalla de "TalpBarrejat". Obriu l'Editor de blocs i connectar al telèfon.

Descarregar aquesta imatge d'un talp de la carpeta “Recursos 3” del tema 3. A la secció Media del Dissenyador de components, feu clic a Afegeix, busqui on es troba l'arxiu en el seu ordinador, i pujar-lo a App Inventor.

Disseny dels componentsAnem a utilitzar aquests components per fer TalpBarrejat:

• Un Canvas que serveix com un camp de joc.

• Un ImageSprite que mostra una imatge d'un talp i pot moure i sentir quan el talp es toca.

• El so que vibra quan es toca el talp.

• Etiquetes que mostren "Encerts:", "Errors:" i el nombre real d'encerts i errors.

• HorizontalArrangements per posicionar correctament les etiquetes.

• Un botó per restablir el nombre d'encerts i errors a 0.

• Un rellotge per fer el moviment del talp una vegada per segon.

La Taula 3-1 mostra la llista completa dels components.

Taula 3-1. La llista completa de components per a TalpBarrejatComponent Paleta Nom assignat Objectiu

Canvas Basic Canvas1 El contenidor per ImageSprite.

ImageSprite Animation Talp L'usuari haurà de tractar de tocar això.

Button Basic BRestablir L'usuari prem aquest per restablir la partida.

Clock Basic Clock1 Controlar el moviment del talp.

Sound Media Sound1 Vibrar quan el talp es toca.

Label Basic EtEncerts Mostra "Encerts:".

Label Basic EtComptaEncerts Mostra el nombre d'encerts.

Horizontal– Arrangement

Screen Arrangement

HorizontalArrangement1 Posició EtEncerts pròxima a EtComptaEncerts.

Label Basic EtErrors Mostra "Errors:".

Label Basic EtComptaErrors Mostra el nombre d'errors.

Horizontal– Arrangement

Screen Arrangement

HorizontalArrangement2 Posició EtErrors pròxima a EtComptaErrors.

TEMA 3 3/14

La col·locació dels components d'accióEn aquesta secció, anem a col·locar els components necessaris per a l'acció del joc. A la següent secció, anem a col·locar els components per a la visualització de la partida.

1. Arrossegueu un component Canvas, deixant-lo amb el nom predeterminat, Canvas1. Estableixi la seva Propietat Width a "Fill parent" per a que siga tan ampla com la pantalla i ajustar la seva alçada a 300 píxels.

2. Arrossegueu un component ImageSprite del Grup Animation de la Paleta. Col·loca'l en qualsevol lloc de Canvas1. Feu clic a canvia el nom a la part inferior de la llista Components i canvieu el seu nom a "Talp". Indiqueu la propietat Picture per talp.png, que has pujat abans.

3. Arrossegueu un component Button del Grup Basic de la Paleta, col·locant-lo sota Canvas1. Canviar el nom a "BRestablir" i estableixi la seva propietat Text en "Restablir".

4. Arrossegueu un component del rellotge. Apareixerà a la part inferior del visor en la secció "Non-visible components".

5. Arrossegueu un component de so del Grup Media de la Paleta. També es ficarà a la secció "Non-visible components".

La seva pantalla s'hauria d'assemblar a la Figura 3-2 (tot i que el seu talp pot estar en una posició diferent).

Figura 3-2. La vista Dissenyador de components

TEMA 3 4/14

La col·locació dels components LabelAra anem a col·locar els components per a la visualització de la puntuació de l'usuari, específicament el nombre d'encerts i errors.

1. Arrossegueu una HorizontalArrangement del Grup Screen Arrangement de la Paleta, col·locant-lo sota el botó i mantenir el nom predeterminat de HorizontalArrangement1.

2. Arrossegueu dues etiquetes del Grup Basic en HorizontalArrangement1.

a) Canviar el nom de l'etiqueta d l'esquerra a "EtEncerts" i estableixi la seva propietat Text a "Encerts: " (assegurant-se d'incloure un espai després dels dos punts).

b) Canviar el nom de l'etiqueta de la dreta de "EtComptaEncerts" i estableixi la seva propietat Text en "0".

3. Arrossegueu una segona HorizontalArrangement, col·locant-la sota HoritzontalArrangement1.

4. Arrossegueu dues etiquetes en HorizontalArrangement2.

a) Canviar el nom de l'etiqueta de l'esquerra a "EtErrors" i estableixi la seva propietat Text en "Errors: " (assegurant-se d'incloure un espai després dels dos punts).

b) Canviar el nom de l'etiqueta de la dreta de "EtComptaErrors" i estableixi la seva propietat Text en "0". La seva pantalla s'hauria d'assemblar a alguna cosa com la Figura 3-3.

Figura 3-3. La vista Dissenyador de components de tots els components de TalpBarrejat

TEMA 3 5/14

Afegir comportaments als ComponentsDesprés de crear els components anteriors, podem passar a l'Editor de Blocs per implementar el comportament del programa. En concret, volem que el talp vagi a un lloc a l'atzar en el Canvas a cada segon. L'objectiu de l'usuari és prémer al talp sempre que apareix, i l'aplicació es mostrarà el nombre de vegades que l'usuari prem o no toca el talp. (Nota: Es recomana utilitzar el dit, no un mall!) En pressionar el botó Restablir restableix el nombre d'encerts i errors a 0.

Trasllat del Talp

En els programes que has escrit fins ara, has cridat procediments Built-in, com ara vibrar en HolaGateta. No seria bonic si App Inventor tinguera un procediment que presentara una ImageSprite a un lloc a l'atzar a la pantalla? La mala notícia: no és així. La bona notícia és que pots crear els teus propis procediments! Igual que els procediments incorporats, el teu procediment es mostrarà en un calaix i es pot utilitzar en qualsevol lloc de l'aplicació.

En concret, crearem un procediment per moure el talp a un lloc a l'atzar a la pantalla, que anomenarem MoureTalp. Volem cridar MoureTalp en l'inici del joc, quan l'usuari toca amb èxit el talp, i un cop per segon.

Crear MoureTalp

Per entendre com moure el talp, hem de veure com Android funciona gràficament. El Canvas (i la pantalla) estan pensats com una quadrícula amb x (horitzontal) i y (vertical), on les coordenades (x, y) de la cantonada superior esquerra són (0, 0). La coordenada x augmenta a mesura que es mou cap a la dreta, i la coordenada y augmenta mentre es mou cap avall, com es mostra a la Figura 3-4. Les propietats x i y d'un ImageSprite indiquen on està la seva cantonada superior esquerra, de manera que la part superior esquerra del talp té els valors de x i y a 0.

Per determinar els valors màxims disponibles de x i y perquè el Talp capia a la pantalla, hem de fer ús de les propietats Width i Height de Talp i Canvas1. (Ample i alt del Talp són el mateix que la mida de la imatge que ha pujat. Quan va crear Canvas1, s'estableix la seva altura a 300 píxels i la seva amplada a "Fill parent", que copia l'amplada del seu element "parent", la pantalla.) Si el Talp és de 36 píxels d'amplada i el Canvas és de 200 píxels d'amplada, la coordenada x de la part esquerra del Talp pot ser tan baixa com 0 (tot el camí a l'esquerra) o tan alta com 164 (200 - 36, o Canvas1.Width - Talp.Width) sense que el Talp s'estenga fora de la vora dreta de la pantalla. De la mateixa manera, la coordenada y de la part superior de Talp pot variar de 0 a Canvas1.Height – Talp.Height.

La Figura 3-5 mostra el procediment que crearà, anotat amb comentaris descriptius (Que si ho desitja, pot afegir al seu procediment).

Per posar a l'atzar el Talp, haurà de seleccionar una coordenada x en l'interval de 0 a Canvas1.Width - Talp.Width. Igualment, es vol que la coordenada y per estar en l'interval de 0 a Canvas1.Height - Talp.Height. Podem generar un nombre aleatori mitjançant el procediment random integer, que es troba al calaix de Matemàtiques.

TEMA 3 6/14

Hauràs de canviar els paràmetres per defecte "from" d'1 a 0 i reemplaçar els paràmetres "to", com es mostra a la Figura 3-5.

Figura 3-4. Posicions del Talp a la pantalla, amb informació de coordenades d'alçada i amplada, les coordenades x i amples es mostren en blau, mentre que la coordenada y i altures es mostren en taronja

Figura 3-5. El procediment MoureTalp, que col·loca el talp en una ubicació aleatòria

TEMA 3 7/14

Per crear el procediment:

1. Feu clic al calaix Definició de la fitxa Built-In en l'Editor de Blocs.

2. Arrossega el bloc to procedure (no to procedureWithResult).

3. Feu clic al text "procedure" en el bloc de nou i escriviu "MoureTalp" per establir el nom del procediment.

4. Atès que volem moure el talp, feu clic a la pestanya My Blocks, feu clic al calaix Talp i arrossegueu Talp.MoveTo en el procedure, a la dreta de "do". Tingueu en compte que hem de proporcionar les coordenades x i y.

5. Per especificar que la nova coordenada x per el Talp ha d'estar entre 0 i Canvas1.Width - Talp.Width, com es va discutir anteriorment:

a) Feu clic a la pestanya Built-In per arribar als procediments incorporats.

b) Feu clic al calaix de Matemàtiques.

c) Arrossegueu el bloc random integer, posar el Tap (protuberància) en el seu costat esquerre en la "x" en el socket de Talp.MoveTo.

d) Canviar el número 1 en el socket "of" fent clic i després introduint 0.

e) Rebutgi el número 100 fent clic i pressionant Delete del teclat o el Botó Eliminar, o arrossegant a la paperera.

f) Feu clic al calaix de Matemàtiques i arrossegar una resta (-) en el bloc socket "to".

g) Feu clic a My Blocks per arribar als seus components.

h) Feu clic al calaix Canvas1 i desplaceu-vos cap avall fins que vegis Canvas1.Width, que heu d'arrossegar cap al costat esquerre de l'operació de resta.

i) De la mateixa manera, feu clic al calaix Talp i arrossegueu Talp.Width al costat dret del bloc resta.

6. Seguir un procediment similar per especificar que la coordenada y ha de ser un enter aleatori en l'interval de 0 a Canvas1.Height – Talp.Height.

7. Comproveu els seus resultats amb la figura 3-5.

Per provar-ho crida Talp.MoveTo, feu clic al bloc i trieu “Do It”. (És possible que hagi de reiniciar l'aplicació fent clic a "Connect to Device" en primer lloc.) Heu de veure el moviment de Talp a la pantalla del telèfon, anant a un lloc diferent cada vegada (excepte en el cas molt poc probable que el generador de nombres aleatoris escull el mateix lloc dues vegades seguides).

TEMA 3 8/14

Trucar a MoureTalp quan s'inicia l'aplicació

Ara que has escrit el procediment MoureTalp, farem ús. Perquè és molt comú que els programadors volen que passi alguna cosa quan s'inicia una aplicació, hi ha un bloc per a aquest mateix propòsit: Screen1.Initialize.

1. Feu clic a My Blocks, feu clic al calaix Screen1, i arrossegueu Screen1.Initialize.

2. Feu clic al calaix My Definitions, on trobaràs un bloc call MoureTalp. Arrossegueu cap a fora, posar-lo en Screen1.Initialize, com es mostra a la Figura 3-6.

Figura 3-6. Quan s'inicia l'aplicació aquesta crida al procediment MoureTalp

Cridar a MoureTalp cada segon

Fer que el Talp es moga cada segon requerirà el component del rellotge. Deixem la propietat CLOCK1 de TimerInterval amb el valor predeterminat de 1000 (mil·lisegons), o 1 segon. Això vol dir que cada segon, el que s'especifica en un bloc Clock1.Timer es durà a terme. Heus aquí com posar això en marxa:

1. Feu clic a My Blocks, feu clic al calaix CLOCK1, i arrossegueu Clock1.Timer.

2. Feu clic al calaix My Definitions i arrossegueu un bloc call MoureTalp al bloc Clock1.Timer, com es mostra a la Figura 3-7.

Figura 3-7. Cridarà al procediment MoureTalp quan el temporitzador s'apagui (cada segon)

Si això és massa ràpid o lent, pots canviar la propietat de CLOCK1 TimerInterval al Dissenyador de components per fer que es mogui a més o menys freqüència.

TEMA 3 9/14

Puntuació

Com es recordarà, s'han creat dues etiquetes, EtComptaEncerts i EtComptaErrors, que tenien valors inicials de 0. Ens agradaria incrementar els nombres en aquestes etiquetes cada vegada que l'usuari toca el Talp (un 1) o toqueu la pantalla sense tocar el Talp (un zero). Per això, utilitzarem el bloc Canvas1.Touched, el que indica que el Canvas va ser tocat, les coordenades x i y on s'hagi tocat (que no cal saber), si un sprite va ser tocat (que ens cal saber). La Figura 3-8 mostra el codi que crearà.

Figura 3-8. L'increment del nombre d'encerts (EtComptaEncerts) o errors (EtComptaErrors) quan es toca Canvas1

La traducció de la Figura 3-8 és que sempre que el Canvas es toca, pot comprovar si un sprite va ser tocat. Atès que només hi ha un sprite en el nostre programa, ha de ser Talp1. Si Talp1 es toca, afegir un al nombre de EtComptaEncerts.Text, en cas contrari, afegir un a EtComptaErrors.Text. (El valor de touchedSprite és fals si el sprite no va ser tocat.)

TEMA 3 10/14

Així és com es creen els blocs:

1. Feu clic a My Blocks, feu clic al calaix Canvas1, i arrossegueu Canvas1.Touched.

2. Feu clic a Built-In, feu clic al calaix de control i arrossegament ifelse, col·locant dins de Canvas1.Touched.

3. Feu clic a My Blocks, feu clic al calaix My Definitions, i arrossegueu touchedSprite i poseu en el sòcol ifelse.

4. Com volem que EtComptaEncerts.Text s'incrementi si la prova va tenir èxit (si el talp va ser tocat):

a) Del calaix EtComptaEncerts, arrossegueu el bloc set EtComptaEncerts.Text to, posant-lo a la dreta de "then-do".

b) Feu clic a Built-In, feu clic al calaix de Matemàtiques, i dibuixeu un signe més (+), col·locant-lo al socket "to".

c) Feu clic a My Blocks, feu clic al calaix EtComptaEncerts i arrossegueu el bloc EtComptaEncerts.Text a l'esquerra del signe més.

d) Feu clic a Built-In, feu clic al calaix de Matemàtiques i arrossegueu un bloc número 123 a la dreta del signe més. Feu clic a 123 i canviar a 1.

5. Repetiu el pas 4 per EtComptaErrors a la secció "else-do" de la ifelse.

Posa a prova la teva app. Pots provar aquest nou codi al telèfon tocant el Canvas, dins i fora del Talp, i veient el canvi en la puntuació.

TEMA 3 11/14

Abstracció de ProcedimentsL'habilitat de nomenar i cridar més tard, un conjunt d'instruccions com MoureTalp és una de les eines claus en informàtica i es coneix com a abstracció de procediments. Es diu "abstracció" perquè el que crida el procediment (que, en projectes del món real, és probable que sigui diferent de l'autor del procediment), només ha de saber el que fa el procediment (mou el talp), no com ho fa. Sense abstracció de procediments, programes informàtics grans no seria possible, ja que contenen codi massa gran per a una sola persona i per mantenir-lo en el seu cap alhora. Això és anàleg a la divisió del treball en el món real, on, per exemple, els enginyers de disseny dissenyen diferents parts d'un cotxe, cap d'ells compren tots els detalls, i el conductor només ha de entendre la interfície (per exemple, en prémer el pedal de fre per aturar el vehicle), no la implementació.

Alguns avantatges d'abstracció de procediments a més de copiar i enganxar codi són:

• És més fàcil per provar el codi si està nítidament separades de la resta del programa.

• Si es produeix un error en el codi, només ha de fixar-se en un sol lloc.

• Per canviar l'aplicació, com ara assegurar-se que el talp no es mou en algun lloc que va aparèixer fa poc, només ha de modificar el codi en un sol lloc.

• Els procediments es poden recollir en una biblioteca i utilitzar en diferents programes. (Malauradament, aquesta funcionalitat no s'admet actualment en App Inventor.)

• Trencar a trossos codi ajuda a pensar i executar l'aplicació ("divideix i venceràs").

• Triar un bon nom per als procediments ajuda a documentar el codi, el que fa que sigui més fàcil per a una altra persona (o per a tú, un mes més tard) de llegir.

TEMA 3 12/14

Restabliment de la puntuació

Un amic que et veu jugant TalpBarrejat probablement voldrà donar-li una oportunitat també, així que és bo tenir una manera de restablir el nombre d'encerts i errors a 0. Pots ser capaç de trobar la manera de fer això sense necessitat de llegir les següents instruccions. Penseu en la possibilitat de fer-ho sense de llegir les instruccions.

El que necessitem és un bloc BRestablir.Click que estableix els valors de EtComptaEncerts.Text i EtComptaErrors.Text a 0. Creu els blocs mostrats a la Figura 3-9.

Figura 3-9. Restabliment del nombre d'encerts (EtComptaEncerts) i d'errors (EtComptaErrors) quan fem click al botó BRestablir

En aquest punt, probablement no necessites pas a pas les instruccions per crear un controlador d'esdeveniments d'etiquetes de text, però aquí va un consell per ajudar a accelerar el procés: en lloc d'aconseguir el seu número del calaix de Matemàtiques, poseu 0 i el bloc ha de ser creat per a tu. (Aquest tipus de dreceres de teclat existeixen per altres blocs, també.)

Posa a prova la teva app. Intenta colpejar i perdre el talp i després prement el botó Restablir.

TEMA 3 13/14

Afegir comportament quan el Talp es toca

Hem dit anteriorment que volem que el telèfon vibri quan el Talp es toca, el que podem fer amb el bloc Sound1.Vibrate, com es mostra a la Figura 3-10. Observeu que els noms dels paràmetres x1 i y1 s'utilitzen en Talp.Touched perquè x i y s'han utilitzat ja en Canvas1.Touched.

Figura 3-10. Fer que el telèfon vibri breument (durant 100 milisegons) quan el Talp es toca

Posa a prova la teva app. Vegi com la vibració funciona quan s'arriben a tocar el Talp. Si la vibració és massa llarga o massa curt per al teu gust, canviar el nombre de milisegons a Sound1.Vibrate.

L'aplicació completa: TalpBarrejatFigura 3-11 il·lustra els blocs per a l'aplicació TalpBarrejat completa.

Figura 3-11. L'aplicació TalpBarrejat completa

TEMA 3 14/14

VariacionsAquí hi ha algunes idees per a afegir a TalpBarrejat:

• Agrega botons perquè l'usuari pugui fer que el Talp es moga més ràpid o més lent.

• Afegir una etiqueta sempre visible que mostre el nombre de vegades que el Talp ha aparegut (desplaçat).

• Afegir un ImageSprite segon amb una foto d'alguna cosa que l'usuari no ha de colpejar, com una flor. Si l'usuari ho toca, li penalitzarà mitjançant la reducció de la seva qualificació o acabarà el joc.

• En lloc d'utilitzar una imatge d'un Talp, permetre a l'usuari seleccionar una imatge amb el component ContactPicker.

ResumEn aquest tema, hem cobert una sèrie de tècniques útils per a aplicacions en general i els jocs en particular:

• El component Canvas fa ús d'un sistema de coordenades x-y, on x representa la direcció horitzontal (des de 0 a l'esquerra per Canvas.Width-1 a la dreta) i y la direcció vertical (de 0 a la part superior a la Canvas.Height-1 a la part inferior). L'altura i l'ample d'un ImageSprite es pot restar de l'alçada i l'amplada d'un Canvas per assegurar-se que el sprite s'ajusta del tot al Canvas.

• És possible crear aplicacions en temps real que no només reaccionen a la entrada de l'usuari, sinó també en resposta al temporitzador intern del telèfon. Específicament, el bloc Clock.Timer funciona a la freqüència especificada a la propietat Clock.Interval i es pot utilitzar per moure ImageSprite (o altres) components.

• Les etiquetes es poden utilitzar per mostrar les puntuacions que van cap amunt (o cap avall) en resposta a les accions del jugador.

• La retroalimentació tàctil es pot proporcionar als usuaris a través del mètode Sound.Vibrate, el que fa que el telèfon vibri durant el nombre especificat de milisegons.

• En lloc d'utilitzar els procediments incorporats en els mètodes, es poden crear per nomenar un conjunt de blocs (MoureTalp) que poden cridar-se igual que els incorporats. Això es coneix com a abstracció de procediments i és una idea clau en la informàtica, el que permet la reutilització de codi i fent possible aplicacions complexes.

• Es pot generar un comportament impredictible en el bloc random integer al Calaix de Matemàtiques, fent un joc diferent cada vegada que es juga.