Moure un element

En aquest apartat veurem quines opcions tenim per moure un element per la pantalla com a pas previ per fer un joc.



Més concretament es pretén donar resposta a les preguntes següents:


  • Com podem moure un element per la pantalla?
  • Com podem programar la interacció amb un element en moviment?
  • Què és una variable i com la podem utilitzar?


Per poder actuar sobre un element que tenim a la pantalla, aquest element ha d'estar sobre un llenç (Canvas), que és l'element amb el que podem interactuar quan l'app s'està executant des del dispositiu mòbil. Així doncs, creem aquest element a la nostra app. Les mides del Canvas les hem de modificar de manera que el llenç ocupi tota la pantalla. Canviem les propietats Height i Width i triem l'opció Fill parent.


A continuació necessitem l'element que es mourà per la pantalla. Aquest element serà el component ImageSprite que també trobarem a la categoria Drawing and Animation. Aquest element ha de tenir una imatge. Podem mirar a internet la imatge que més ens agradi, tenint en compte que ha de ser petita com una icona. Aquesta imatge la posem a la propietat Picture de l'element ImageSprite. En aquest exemple hem posat una fletxa:



Recordem que l'ImageSprite l'hem de col·locar sobre el Canvas, en la posició que vulguem.


Movem la fletxa

Per moure la fletxa tenim diferents opcions. La primera és anar a la propietat Speed del component ImageSprite i posar el valor que vulguem, per exemple 5. L'altra és fer que, en inicialitzar-se l'Screen1; és a dir, quan iniciem l'execució de l'app, assignem el valor 5 a la velocitat mitjançant aquestes instruccions:



Ara la fletxa ja es mou, però quan toca amb el límit del Canvas s'atura i ja no fa res més. Podem fer que reboti quan arribi al límit:



Força avorrit… Una nova cosa que podríem afegir a la fletxa és que no sempre comencés el moviment cap al mateix lloc, sinó que comenci en una direcció a l'atzar:



Com que la fletxa està al Canvas podem interaccionar amb ella. Anem a fer que puguem modificar la direcció de la fletxa amb el dit en la direcció que vulguem:



Canvi de velocitat

Finalment anem a fer que la fletxa vagi cada cop més ràpid. Per fer-ho introduirem el concepte de variable.


Podem imaginar una variable com una capseta on guardem un valor (qualsevol valor). Sovint, en els programes que farem ens caldrà guardar valors i anar-los canviant a mida que el programa s'executa. El lloc on guardem aquests valors és una variable. En el nostre cas, tenim una capseta anomenada velocitat on guardarem un número que indicarà la velocitat amb la que es mourà la pilota.


Així doncs, el primer que cal fer és declarar la variable, és a dir, comunicar a l'App Inventor la seva existència. Això ho farem amb la instrucció Initialize global de la categoria Variables, tot assignant-li un valor:



Ara hem de modificar el programa que teníem abans per assignar la variable "velocitat" com a velocitat de la fletxa:



Per acabar hem de decidir en quin moment es fa el canvi de velocitat. En el nostre exemple farem aquest canvi cada cop que modifiquem la direcció de la fletxa amb el dit:



Veiem que per canviar la velocitat agafem el valor anterior (get), li sumem 1 i el resultat l'assignem (set) al nou valor de la velocitat.