Troba el camí

Si segueixes bé les instruccions podràs crear un petit joc on hauràs de portar el personatge a través del poble per arribar al seu destí. Abans de començar a crear-lo, però, necessitaràs unes quantes imatges que hauràs de posar a la pantalla. Seran les següents.

● La imatge del nostre personatge, que buscarà el camí fins al pròxim edifici. ● Imatges de cases, per poder fer els carrers. ● La imatge de l’edifici on volem arribar.

El primer que has de fer és entrar a l’aplicació, a l’adreça ai2.appinventor.mit.edu. Pots utilitzar el teu compte de correu de l’escola i, quan ho facis a casa, un compte de correu de Google.

1. Crea un nou projecte i posa-li un nom. Aquest nom ha de ser sense espais. Pots posar-li cami (no hi posis accents).

2. Busca on diu Media . Aquí hi posaràs tots els recursos que necessitis (imatges i sons

principalment). Per pujar-los al servidor, clica el botó Upload file , busca l’arxiu que necessitis i confirma. Ho has de fer amb les imatges que ja tens.

3. En els Components clica a Screen1 (per ara només hi ha aquest) per veure les seves

Propietats . Desmarca les opcions ShowStatusBar i TitleVisible . Deixa també a AlignHoritzontal i a AlignVertical el valor Center .

4. Primer arrossega una Label al Viewer . La trobaràs en el menú Palette i el submenú User

interface . Busca Text i escriu “Troba el camí”. Busca en les seves propietats FontSize i escriu 30 per fer la lletra més gran. Fixa’t que ha passat.

5. A partir d’aquí començarem a posar tots els elements necessaris per poder portar el personatge

a lloc. El primer de tot és un Canvas (llenç), on hi podrem posar les imatges. El pots trobar al menú Palette dins el submenú Drawing and animation . Arrossega’l a la pantalla.

6. En les seves propietats busca Width (amplada) i Heigth (altura) i tria l’opció Fill parent (omple).

7. En el següent pas has d’arrossegar vuit ImageSprite dins del Canvas . Trobaràs aquest

component dins del menú Palette , dins el submenú Drawing and animation . Posa l’última a la part superior i centrada, ja que serà l’edifici on haurà d’arribar.

8. Ves tocant cada un d’ells al menú Components i canvia’ls el nom amb el botó Rename . Pots

posar-los “casa1”, “casa2”, “casa3”,... L’edifici on haurem d’arribar renombra’l com a “arribada”.

9. Torna’ls a tocar un a un i busca en les propietats d’aquell sprite. És el menú Properties . Busca la propietat Picture , toca-la i assigna-li la imatge d’una de les casetes que has pujat. En la que has nombrat “arribada”, assigna-li la imatge de l’edifici on ha d’anar.

10. També en les propietats de cada imatge busca Width i Heigth . Toca i en el desplegable que surt

posa 40 píxels.

11. Ara pots moure per la pantalla totes les casetes i muntar el teu camí. Si te’n fa falta més, pots afegir-ne alguna altra, però no massa, ja que el personatge ha de poder passar!

12. Torna a afegir un altre ImageSprite . Aquest serà el del nostre personatge. Col·loca’l en un punt allunyat del destí i anomena’l “personatge”.

13. En les propietats, assigna la imatge “nena1” a Picture , 40 píxels a Height i 30 píxels a Width . Ja

hi tenim tots els elements!

14. Busca la propietat Speed del personatge i posa-hi el valor 6. Desmarca l’opció Rotate . És la velocitat amb que es mourà!

15. Per programar el comportament del personatge hem d’anar a Blocks. En trobareu el botó a la

part superior dreta.

16. A la part esquerra de la nova pantalla hi trobareu el menú Blocks . Busca-hi el personatge (el nom) i toca’l. Apareix un seguit de peces com si fossin d’un trencaclosques.

17. Busca i arrossega a la pantalla el següent bloc.

18. Ara torna’l a tocar i afegeix aquest altre.

19. Finalment, busca en el menú Blocks l’etiqueta Variables. Toca-la i arrossega aquest bloc. Obre pel triangle i tria l’opció heading .

20. Finalment uneix-ho tot i et quedarà aquest bonic bloc. Ja pots moure el personatge!

21. Si ho has provat notaràs que pot passar per marxar de la pantalla o passar per damunt de les cases. Anem a evitar-ho.

22. El primer que farem serà que no pugui sortir de la pantalla. Toca altra vegada l’etiqueta

personatge i arrossega aquest bloc.

23. Toca l’etiqueta personatge i uneix-li aquest altre.

24. En l’etiqueta Variables busca el següent, uneix-lo al bloc i tria l’opció edge en el desplegable.

25. Finalment t’ha quedat així. Ara ja no marxarà de la pantalla!

26. Ja només queda que no pugui passar per sobre les cases. Per fer això, quan xoqui amb una casa farem que s’aturi. A més, si és la casa on volem anar, farem que canvii el text inicial i aparegui un “Molt bé! Has arribat!”.

27. Primer toca l’etiqueta personatge i busca aquest bloc. Vol dir “quan el personatge xoqui amb un

altre fes alguna cosa”.

28. Ara toca l’etiqueta Control , busca el bloc següent i afegeix-lo. És un bloc amb una condició. Si (if ) passa alguna cosa llavors (then ) fes.

29. Toca el botonet blau i arrossega el bloc else . Això vol dir que si no passa el que li diem primer faci una altra cosa.

30. La primera cosa que ha de passar és que xoqui amb la caseta on volem anar. Recorda que l’hem anomenat “arribada”. Toca l’etiqueta Logic i afegeix aquest bloc al costa d’if .

31. Torna a agafar el get de Variables i posa’l al primer forat. Tria l’opció other . Per tal que surti la

peça ha d’estar ja en el bloc, de la següent manera.

32. Pel segon forat toca en el menú Blocks l’etiqueta “arribada”, i busca l’últim bloc de tots, que és aquest.

33. A continuació volem que, toqui la casa que toqui, el personatge s’aturi. per fer això comença amb aquest bloc, dins l’etiqueta “personatge”.

34. Ara toca l’etiqueta Math i arrossega el primer bloc. En aquest hi pots posar un número clicant sobre ell. Ja ens està bé el 0.

35. Aquest bloc el pots duplicar clicant amb el botó dret sobre la paraula set. En el desplegable que hi surt tria l’opció Duplicate . Ho pots fer encara una altra vegada, perquè en necessites tres.

36. Afegeix aquest últim bloc tant al costat de then com al costat d’else . Et queda així.

37. El bloc que encara et sobra el pots afegir al primer, a “when personatge.Flung”, i canviar el 0 per 6, de la següent forma.

38. Ja només ens queda canviar el text quan arribi al destí. Toca l’etiqueta “Label1”, busca aquest bloc i afegeix-lo al then del “when personatge.CollidedWith”.

39. Busca en l’etiqueta Text el primer bloc i uneix-lo a l’anterior. Clica dins i escriu el text “Molt bé! Has arribat!”. Et quedarà així.

I ja està! Ja pots portar el teu personatge pels carrers de Fondarella!

LES CINC DIFERÈNCIES Llegeix i segueix bé les instruccions per crear un joc de diferències per jugar a la tauleta amb app inventor. Prèviament a la programació hauràs de preparar tots els recursos que necessitis, bàsicament les imatges. Les que necessites són les següents:

● Imatge de fons amb les diferències. ● Imatge de 50 x 50 píxels amb un cercle vermell i el fons transparent. ● Imatge de 50 x 50 píxels completament transparent.

Pots baixar les imatges de 50 x 50 píxels clicant en el seu enllaç. El primer que has de fer és entrar a l’aplicació, a l’adreça ai2.appinventor.mit.edu. Pots utilitzar el teu compte de correu de l’escola i, quan ho facis a casa, un compte de correu de Google.

1. Crea un nou projecte i posa-li un nom. Aquest nom ha de ser sense espais. Pots posar-li diferencies (no hi posis accents).

2. Busca on diu Media . Aquí hi posaràs tots els recursos que necessitis (imatges i sons

principalment). Per pujar-los al servidor, clica el botó Upload file , busca l’arxiu que necessitis i confirma. Ho has de fer amb les tres imatges que ja tens.

3. En els Components clica a Screen1 (per ara només hi ha aquest) per veure les seves

Propietats . Busca BackgroundImage (imatge de fons) i obre el desplegable clicant al nom. Pots assignar ara una imatge al fons de la pantalla. Tria la foto amb les diferències.

4. També en les Propietats d’Screen1 desmarca les opcions ShowStatusBar i TitleVisible . Deixa

també a AlignHoritzontal i a AlignVertical el valor Center .

5. Primer arrossega una Label al Viewer . La trobaràs en el menú Palette i el submenú User interface . Busca en les seves propietats FontSize i escriu 30 per fer la lletra més gran. Busca Text i escriu “Les 5 diferències”. Fixa’t que ha passat.

6. A partir d’aquí començarem a posar tots els elements necessaris per poder tocar les diferències

que trobem en el dibuix. El primer de tot és un Canvas (llenç), on hi podrem posar les imatges. El pots trobar al menú Palette dins el submenú Drawing and animation . Arrossega’l a la pantalla.

7. En les seves propietats busca Width (amplada) i Heigth (altura) i tria l’opció Fill parent (omple).

8. En el següent pas has d’arrossegar deu ImageSprite dins del Canvas . Trobaràs aquest

component dins del menú Palette , dins el submenú Drawing and animation .

9. Per no despistar-nos amb tantes imatges iguals, ara hi canviarem el nom. En el menú Components marca el primer ImageSprite i clica el botó Rename . En el diàleg que apareix posa-hi Error1 a New Name. Fes el mateix amb les quatre pròximes i escriu Error2, Error3, Error4 i Error5.

10. En les propietats de totes aquestes imatges, busca Picture i en el desplegable busca la imatge

del cercle vemell (cercle.png).

11. En els altres cinc ImageSprite fes el mateix, però renombra’ls amb Transparent1, Transparent2,... Assigna a Picture la imatge transparent (transparent.png).

12. En totes les imatges anteriors posa-hi les mides a Width de 30 pixels i a Height de 30 pixels.

13. Ara has de posar els cercles vermells on correspon, o sigui, sobre els errors de la imatge. Per

fer-ho, posa el número que correspongui a la x i a la y de Properties . La x és l’amplada i la y és l’altura. La màxima amplada és 320, i la màxima altura és 480. Per tant, si vols posar un cercle al mig de la pantalla, has de posar 160 a x (la meitat de l’amplada) i 240 a y (la meitat de l’altura).

14. Posa els valors de x i y per parelles, o sigui, la mateixa x i la mateixa y a Error1 i a Transparent1;

la mateixa x i la mateixa y a Error2 i a Transparent2,...

15. Quant tinguis totes les imatges en la seva posició, ves a les Propietats de Error1 i desmarca l’opció visible. Fes el mateix amb Error2, Error3, Error4 i Error5.

16. Ara ja només falta la lògica del joc. Cada vegada que toquis on hi ha un error, o sigui, on has

posat les imatges transparents, ha d’aparèixer el cercle. Clica el botó Blocks .

17. A l’esquerra de la pantalla, al menú Blocks , busca i toca Transparent1 .

18. En el desplegable que surt al costat busca el bloc de la imatge i arrossega’l a la pantalla. Aquest bloc vol dir “quan toquis la imatge anomenada Transparent1 fes alguna cosa ” (que direm en el pròxim punt).

19. Ara busca i toca Error1 al menú Blocks. En el desplegable busca el següent bloc i arrossega’l

dins l’anterior.

20. Busca i toca Transparent1 al menú Blocs. En el desplegable busca els següents blocs i

arrossega’ls com has fet abans.

21. Ara, en el menú Blocks , tria l’opció Logic , busca el valor false i afegeix-lo al final de cada un

dels blocs verds anterior. Clicant aquest últim bloc pots canviar-lo a true . El que fem és que el cercle vermell sigui visible i la imatge transparent ja no es pugui tocar. Finalment t’ha de quedar així:

22. Amb el primer bloc verd (set Error1.Visibre to true) fem que ara el cercle vermell sigui visible. Amb el segon bloc verd (set Transparent1.Enabled to false) fem que ja no es pugui tocar la imatge, i amb el tercer fem que no sigui ja visible.

23. Clica amb el botó dret sobre el bloc i tria l’opció Duplicate . En la còpia nova, canvia

Transparent1 per Transparent2, i Error1 per Error2.

24. Fes el punt anterior per cada un dels errors que hi ha a la imatge.

25. Ara ja només queda contar i quan hagin tocat els cinc errors passi alguna cosa. Busca en el menú Blocks i toca Variables .

26. Arrossega la primera opció (la de la següent imatge) a la pantalla.

27. Clica i canvia name per comptador . Aquest nom és perquè amb aquest comptarem quants

errors va trobant el jugador.

28. Busca dins de Blocks el grup Math , i arrossega al bloc anterior la primera opció.

29. Com segurament t’hauràs fixat, hi ha el número 0. Vol dir que el comptador encara està a 0, no han trobat cap error. Ara ve la part més difícil d’entendre!!

30. Busca dins Blocks , al grup de Variables el següent bloc i arrossega’l al bloc de Transparent1.

31. En el desplegable, tria global comptador. Per ara ha d’estar així:

32. Ara busca a Math el següent bloc i afegeix-lo al final del bloc anterior. Ha de quedar així:

33. Pel primer forat busca a Variables el bloc següent i tria en el desplegable global comptador .

34. En el segon forat busca a Math i tria el següent bloc. Canvia el 0 per 1.

35. Amb això fas que cada vegada que toquis un error, sumi un número. Hem d’arribar a cinc. Ara

tindràs aquest bloc així.

36. Clica amb el botó dret sobre el bloc taronja on diu set globat comptador to , tria l’opció

Duplicate i ves-lo enganxant en els altres when Transparent1.Touched de color marró, de manera que tots els blocs quedin igual.

37. Finalment, només queda que el programa faci alguna cosa quan arribem a cinc errors. Farem

que el text inicial “Les 5 diferències ” canvii per “Molt bé! Les has trobat totes! ”. Busca a la llista Control i tria el següent bloc.

38. Busca a Math el següent bloc i enganxa’l al forat de if .

39. Fes el mateix que ens punts 34 i 35. En el segon forat, però, ara ha de ser 5.

40. Ara toca a Label1 , busca el següent bloc i enganxa’l al forat de then .

41. Finalment, busca a Text el següent bloc i enganxa`l a aquest últim. Toca dins d’aquest bloc i escriu l’oració “Molt bé! Les has trobat totes! ”.

42. T’ha d’haver quedat de la següent forma.

43. Duplica i enganxa aquest bloc a cada un dels botons, de la forma que veus en el dibuix i ja ho

tindràs!

Tria el dibuix correcte En aquest joc simplement farem una pregunta i el jugador ha de triar el dibuix correcte entre quatre opcions. Per poder fer això necessitaràs primer quatre imatges, una de les quals serà la correcta. El jugador haurà d’observar la imatge a la realitat i trobar la imatge que existeix. Necessitaràs les següents imatges de 200 x 200 píxels. El primer que has de fer és entrar a l’aplicació, a l’adreça ai2.appinventor.mit.edu. Pots utilitzar el teu compte de correu de l’escola i, quan ho facis a casa, un compte de correu de Google.

1. Crea un nou projecte i posa-li un nom. Aquest nom ha de ser sense espais. Pots posar-li tria (no hi posis accents).

2. Busca on diu Media . Aquí hi posaràs tots els recursos que necessitis (imatges i sons

principalment). Per pujar-los al servidor, clica el botó Upload file , busca l’arxiu que necessitis i confirma. Ho has de fer amb les quatre imatges que ja tens.

3. En els Components clica a Screen1 (per ara només hi ha aquest) per veure les seves

Propietats i desmarca les opcions ShowStatusBar i TitleVisible .

4. Ara arrossega a la pantalla un component Label . El trobaràs al menú Palette , en el submenú User Interface .

5. Clica Label , que trobaràs al menú Component , i veuràs les seves propietats en el menú

Propietats . En aquestes, busca Text i escriu la pregunta “Quina imatges trobes a l’edifici?”.

6. Busca en el menú Palette el component TableArrangement , que trobaràs al submenú Layout i arrossega’l a la pantalla. És una taula on podràs organitzar els botons i imatges que necessites.

7. 8. Toca el component que has afegit al menú Components i en les seves propietats (menú

Properties) busca Height (altura) i Width (amplada). Clica cada un d’ells i escriu 100 al camp on diu percent . Així omplirà tota la pantalla.

9. Dins de la taula que acabes d’incloure, arrossega-hi quatre Button , del submenú User Interface .

Vigila no posar-los un damunt de l’altre. Ho veuràs amb el voltant blau que apareix quan el poses. Mira’n l’exemple en les imatges següents.

10. Ara busca en el menú Components i ves canviant els noms genèrics que hi apareixen. Toca Button1 , el botó Rename i en el diàleg que hi apareix posa-hi el nou nom, Imatge1 . Fes el mateix amb els quatre botons.

11. Ara clica la Imatge1 i busca en el menú Properties la propietat Heigth (altura), toca-la i omple el camp percent amb 45. Busca també Width (amplada) i omple el percentatge amb 47.

12. Busca també en les propietats Image i selecciona una de les imatges que en els primers punts hi

has carregat. Recorda tenir clar en quin botó poses la imatge correcta! Busca també la propietat Text i esborra el seu contingut.

13. Repeteix els punts 11 i 12 pels altres botons.

14. Ja tenim tots els elements necessaris a la pantalla. Ara és l’hora de programar! Busca i toca el

botó Blocks , a la part superior dreta, per poder fer-ho.

15. A la part esquerra, al menú Blocks toca la Imatge1 . En el menú que surt busca i arrossega cap a la pantalla el següent bloc. Si tradueixes veuràs que vol dir “quan cliquem la imatge1 fes alguna cosa”. Imaginem que aquesta és la imatge correcta.

16. Busca a Blocks la Imatge2 . En el menú, busca el següent bloc. Amb aquest, fem invisible o no aquesta imatge.

17. Ara busca en el menú de Blocks l’etiqueta Logic , i quan la toquis el següent bloc.

18. Ara uneix-los tots de la següent forma. Així, quan toquis la imatge 1, que és la correcta, la imatge 2, que és incorrecta, desapareixerà.

19. Ara afegeix els mateixos blocs però amb la imatge 3 i 4. Pots copiar-lo clicant a sobre de set amb el botó dret del ratolí i triant l’opció Duplicate .T’ha de quedar així.

20. A continuació farem que la imatge 1, la correcta, ocupi tota la pantalla. Toca-la en el menú, i del desplegable tria aquests dos blocs.

21. Ara busca en el menú Blocks l’etiqueta Math , tria la primera de totes i afegeix-la als blocs anteriors. Canvia el número 0 per 100 tocant a sobre.

22. Afegeix els dos blocs al primer, el de “when Imatge1.Click do”. Et quedarà així.

23. Finalment, canviarem el text de la pregunta i hi escriurem “Molt bé!” . Per fer això, toca l’etiqueta Label1 i busca aquest bloc.

24. En l’etiqueta del menú Blocks anomenada Text , busca i afegeix al bloc anterior la primera que hi ha, amb les cometes. Dins aquesta escriu “Molt bé!” .

25. Finalment, afegeix-la al bloc inicial. Et quedarà així.

I ja està! Ara quan toquis la resposta correcta, desapareixeran les altres i es farà gran la bona! Ara, amb tot el que has après, et proposo que hi afegeixis alguna cosa, com per exemple un so o una vibració quan toquem una resposta incorrecta. Com a pista et dono els següents punts:

● Necessitaràs carregar un so des de l’ordinador a Media . ● Hauràs d’utilitzar el component Sound , que trobaràs al menú Palette i al submenú Media . ● A les Propietats d’aquest Sound hi hauràs d’assignar el so que has carregat. ● En els blocs, hauràs de buscar “when Imatge2.Click do” i “Sound1.Play”. També pots fer

“Sound1.Vibrate” i dir-li quants segons vols que vibri amb un número. Recorda Math . ● Ho hauràs de fer amb totes les imatges incorrectes.

Per acabar, pots posar un so diferent quan cliquem la imatge correcta?