PaintPot

Aquest tutorial introdueix el component Canvas (llenç) per crear gràfics simples de dues dimensions. Construiràs una aplicació que et permet dibuixar a la pantalla del telèfon amb diferents colors.

Nota històrica: PaintPot va ser un dels primers programes desenvolupats per demostrar el potencial de les computadores personals, tan enrere com en els anys 70.

Que estàs construint

Amb l’aplicació PaintPot pots:

• Mullar el dit al pot de pintura virtual per dibuixar amb el color seleccionat.
• Arrossegar el dit per la pantalla per dibuixar una línia.
• Prémer la pantalla per fer punts.
• Utilitza un botó per netejar la pantalla.
• Incloure una imatge com a fons del dibuix.

Aquest tutorial suposa que ja has completat el Tutorial HelloPurr amb l’emulador o el Tutorial HelloPurr amb el teu telèfon Android . El qual introdueix els següents conceptes de App Inventor:

• El component Canvas (Llenç) per dibuixar.
• Control de l’aparença de la pantalla amb components Arrangement (disposició).
• Control d’esdeveniments que prenen arguments.
• Variables

Abans de començar

Assegura’t que el teu ordinador i el teu telèfon estan preparats per utilitzar App Inventor, i navega fins al lloc web de App Inventor en beta.appinventor.mit.edu . Comença un nou projecte a la finestra del Dissenyador, i escriu com a títol PaintPot. Obre l’Editor de blocs, fes clic a Connect to Phone (connectar al telèfon), i assegura’t que el telèfon ha iniciat l’aplicació App Inventor.

Títol de la pantalla

Per començar cita en el panell Properties (Propietats) a la dreta del Designer (dissenyador) i canvia Title (títol) de la pantalla a PaintPot. Hauries veure aquest canvi al telèfon, amb el nou títol mostrat a la barra de títol.

Hi ha tres noms en App Inventor, i és fàcil confondre’ls:

1. El nom que tries per al teu projecte mentre treballes al. Aquest serà també el nom de l’aplicació si la empaquetas per al telèfon.
2. El nom de “Screen1” (pantalla1), que veuràs en en panell que enumera els components de l’aplicació. No pots canviar aquest nom en la versió actual de App Inventor.
3. El títol (title) de la pantalla, el qual és el que veuràs a la barra de títol del telèfon. Aquest comença sent “Screen1”, que és el que vas usar en HelloPurr. Però pots canviar, com estàs fent per Paintpot.

Prepara els components

Usaràs aquests components per crear PaintPot:

• Tres botons per seleccionar pintura vermella, blava o verda i un altre botó per netejar el dibuix.
• Un Llenç (canvas), la superfície de dibuix. Aquest llenç té una imatge de fons, la qual és el gatet del tutorial HelloPurr. També pots dibuixar en un llenç en blanc. Aquest és només un llenç sense imatge de fons.
• També hi ha un component que no veus: utilitza un component HorizontalArrangement (disposició horitzontal) per alinear els tres botons de color.

Això fa cinc components en total. Tomemoslos i construïm l’aplicació.

Botons de color

• Arrossega un component Botó al visor i canvia l’atribut Text del botó a “Xarxa” (vermell) i el seu color de fons (BackgroundColor) a vermell.
• Fes clic a Button1 en la llista de components del visor per ressaltar (ja hauria d’estar ressaltat) i utilitza el botó Rename … per canviar el seu nom de Button1 aButtonRed.
• De la mateixa manera, crea dos botons per al blau i el verd, truca’ls ButtonBlue i ButtonGreen, col·locant verticalment sota el botó vermell.

Així és com això hauria d’aparèixer en el dissenyador, amb els tres noms dels botons en la llista de components del projecte. En aquest projecte estàs canviant els noms dels components millor que deixant els seus noms per defecte, com vas fer en HelloPurr. Utilitza noms significatius en els teus projectes els fa més fàcils de llegir per a tu mateix i per altres.

També hauries de veure els tres botons a la pantalla del telèfon.

Aparença amb Disposició de pantalla (Screen Arrangemen)

Ara has de tenir tres botons, un sobre l’altre. El següent pas és alinear horitzontalment. Faràs això usant un component HorizontalArrangement (disposició horitzontal).

1. Des de la categoria Screen Arrangement de la paleta, arrossega un component HorizontalArrangement i col·loca sota els botons. Canvia el nom d’aquest component de HorizontalArrangement1 a ThreeButtons
2. Al tauler Properties (Propietats), canvia Width (ample) de ThreeButtons a Fill Parent … pel que omplirà per complet l’ample de la pantalla.
3. Mou els tres botons dins del component HorizontalArrangement. Nota: Veuràs una línia vertical que mostra on anirà la peça que aquestes arrossegant.

Si mires la llista de components del projecte, veuràs els tres botons inclosos sota ThreeButtons per indicar que són ara els seus subcomponents. Fixa’t que tots els components estan inclosos sota Screen1.

També has de veure els teus tres botons alineats en una fila a la pantalla del telèfon, encara que algunes coses no apareguin exactament com en el Dissenyador. Per exemple, la vora de la disposició (Arrangement) es mostra en el Dissenyador però no en el telèfon.

Generalment, usaràs la disposició de pantalla per crear simples dissenys verticals o horitzontals. Pots crear dissenys més complexos niant components de disposició de pantalla. Existeix a més un component Disposició de Taula TableArrangement.

Llenç i botó de neteja

Els dos components finals són el llenç (canvas) i el botó de neteja.

1. Des de la categoria Basic de la Paleta arrossega un component Llenç (Canvas) al Visor. Canvia el seu nom a DrawingCanvas. Estableix l’atribut Width (ample) a Fill Parent Estableix l’atribut Height (alt) a 300 píxels.
2. Afegeix un imatge de fons (Background Image) al llenç. Feu clic al camp conté None … al costat de BackgroundImage al panell de Propietats de la tela Pots utilitzar el mateix arxiu kitty.png, si encara el tens a l’escriptori d’un tutorial anterior. O pots usar una altra imatge.
   

   Pots usar qualsevol imatge que vulguis, però obtindràs millors resultats si la mida de la imatge (en píxels) s’aproxima a la mida que mostressis al telèfon. A més, imatges grans poden trigar més temps a carregar-se, i poden excedir la quantitat de memòria que el telèfon assigna per les aplicacions.

3. Des de la Paleta, arrossega el botó final a la pantalla, col · locant-sota el llenç. Canvia el seu aneu a ButtonWipe Canvia el seu atribut Text a Wipe.

Ara hauràs completat els passos per configurar l’aparença de la teva aplicació. Així és com hauria d’aparèixer en el Dissenyador. A continuació, definiràs com es comporten els components.

Afegeix comportaments als components

L’Editor de blocs deu ser ja obert. Primer configura els botons que canvien el color de la pintura.

Afegeix controladors d’esdeveniments de botó

En l’Editor de blocs:

1. Canvia a la columna My Blocks.
2. Obre el calaix de ButtonRed i arrossega fora el bloc when ButtonRed.Click.
3. Obre el calaix DrawingCanvas. Arrossega fora el bloc set DrawingCanvas.PaintColor to (hauràs de desplaçar la llista de blocs del calaix per trobar-lo) i col · loca-en la secció do (fer) de when ButtonRed.Click.
4. Canvia a la columna Built-In. Obre el calaix Colors, arrossega el bloc per al color vermell i col·loca-ho en set DrawingCanvas.PaintColor to.
5. Repeteix els passos del 2 al 4 per als botons blau i verd.
6. L’últim botó de configurar és el de neteja Wipe. Canvia de nou a la columna My Blocks. Crea un controlador d’esdeveniment clic per ButtonWipe arrossegant when ButtonWipe.Click des del calaix ButtonWipe. Des del calaix DrawingCanvas, arrossega call DrawingCanvas.Clear i col · loca-a l’àrea do del bloc when ButtonWipe.Click.

Els blocs per als botons han ser així:

Afegeix controlador d’esdeveniment tocar

Ara per al següent pas: dibuixar en el llenç. Organitzaràs les coses perquè quan toquis el llenç, aconsegueix algun punt en el lloc on tocs. I si arrossegues el dit lentament pel llenç, es dibuixi ua línia.

• En l’Editor de blocs, obre el calaix de la tela (canvas) i arrossega el bloc when DrawingCanvas.Touched a l’espai de treball.

Així que deixis anar fora el bloc, els tres buits de la dreta s’ompliran automàticament amb blocs de noms anomenats x, i, i touchedSprite.

Ja hem vist esdeveniments de botó clic. Els clics són simples, perquè no hi ha res de saber sobre el clic que no sigui que ha succeït. Altres controladors d’esdeveniments, com ara when ... Touched, necessiten informació sobre l’esdeveniment. En App Inventor, aquesta informació s’expressa com el valor delsarguments relacionats amb el controlador d’esdeveniments. Per l’esdeveniment when ... Touched els dos primers arguments representen les coordenades x i i d’on va succeir el toc.

Per aquest esdeveniment tocar, fes al llenç dibuixar un petit cercle al punt amb les coordenades x, i.

• Arrossega fora una ordre call DrawingCanvas.DrawCircle des del calaix canvas i col·loca-en la secció do de when DrawingCanvas.Touched.

A la part dreta de when DrawingCanvas.DrawCircle hi ha tres connexions on has d’especificar els valors per x i i on s’ha de dibuixar el cercle i r, el qual és el radi del cercle.

Per x i i, utilitzarà els valors dels arguments proporcionats pel controlador Touched:

1. Obre el calaix My Definitions a la part superior de la columna. Busca els blocs per value x i value y. Els blocs es crearàn automàticament quan s’arrossegui el bloc del controlador d’esdeveniment tocar.
2. Arrossega value x i value y conéctalos en els seus llocs corresponents al bloc when DrawingCanvas.Touched. Assegura’t d’arrossegar els blocs de value no els que corresponen a name, són molt similars.

També necessitaràs especificar el radi del cercle de dibuixar. Cinc (píxels) és un bon valor per a aquesta aplicació:

• Fes clic en una àrea buida del la pantalla perquè aparegui el menú activable i selecciona matemàtiques math (verd). Selecciona 123 de la llista desplegable, per crear un bloc número. Canvia el 123 a 5 i conéctalo al buit per al radi.
  

  També pots sol escriure 5 seguit de Intro, per crear un bloc amb el valor 5. Això és un exemple de typeblocking: si comences a escriure, l’Editor de blocs mostra uns llista de blocs els noms coincideixen amb el que aquestes escrivint, si prems un nombre crearà un bloc número.

Així és com s’hauria de veure el controlador d’esdeveniment tocar:

Prova el que has fet fins ara al telèfon. Toca un botó de color. Ara toca el llenç, i el dit de deixar un punt a cada lloc que tocs. Prement el botó Wipe has netejar el teu dibuix.

Afegeix Esdeveniments d’arrossegament

Finalment, afegeix el controlador d’esdeveniment d’arrossegament. Aquesta és la diferència entre tocar i arrossegar:

• Un toc és quan poses el dit en el llenç i el lleves sense moure’l.
• Un arrossegament és quan és quan poses el dit en el llenç i mous el dit mentre el mantens en contacte.

Quan arrossegues el dit per la pantalla, sembla dibuixar una gran línia corba per on mous el dit. El que realment fas és dibuixar centenars de petites línies rectes: cada vegada que mous el dit, fins i tot molt poc, estens la línia des de l’última posició del teu dit a la nova posició.

Un esdeveniment d’arrossegament té 6 arguments. Aquests són tres parells de coordenades x i i que mostren:

• La posició anterior del teu dit on va començar l’arrossegament.
• La posició actual del teu dit.
• La posició immediatament anterior del teu dit.

També hi ha un sprite, el qual ignorarem en aquest tutorial.

Ara fes que arrossegar dibuixi una línia entre la posició prèvia i l’actual creant un controlador d’arrossegament:

1. Des del calaix DrawingCanvas, arrossega el bloc when DrawingCanvas.Dragged a l’espai de treball.
2. També des del calaix DrawingCanvas, arrossega el bloc call DrawingCanvas.DrawLine al buit do (fer) del bloc when DrawingCanvas.Dragged.
3. Feu clic al calaix My Definitions. Has de veure els blocs per als arguments que necessites. Arrossega els blocs de value (valor) corresponents als buits apropiats en when DrawingCanvas.Dragged: x1 i y1 han de ser prevX i prevY; x2 i y2 han de ser currentX i currentY

Aquí està el resultat:

Prova el teu treball al telèfon: arrossega el dit per la pantalla per dibuixar línies i corbes. Toca la pantalla per crear punts. Fes servir el botó Wipe per netejar la pantalla.

Revisió

Aquí hi ha algunes de les idees vistes en aquest tutorial:

• Pots utilitzar components de Disposició de pantalla (Screen Arrangement) per especificar l’aspecte en lloc de col · locar els components un sobre l’altre.
• El component Canvas et permet dibuixar al. Aquest a més sent els tocs i arrossegaments.
• Alguns controladors d’esdeveniments són anomenats amb informació sobre l’esdeveniment, com les coordenades d’on s’ha tocat la pantalla. Aquesta informació està representada per arguments. Quan selecciones un controlador d’esdeveniment que té arguments, App Inventor crea blocs de value per aquests i els col·loca al calaix My Definitions.

A la Part 2 , veuràs com utilitzar variables globals per crear punts de diferent grandària.

PicCall

PicCall et mostra com utilitzar App Inventor per fer aplicacions per utilitzar funcions reals del telèfon, com trucar als amics.

Abans de començar

Per executar PicCall, el teu telèfon estigui configurat i activat per fer trucades. Si no és així, pots encara construir PicCall per practicar, però el telèfon no podreu fer trucades.

Atenció: PicCall no funciona en tots els telèfons Android en la implementació actual de App Inventor: tindràs un avís d’error en alguns telèfons quan es tracti de triar un número de telèfon. A més, no podràs veure tots els teus contactes només aquells creats a partir de Gmail. Aquestes limitacions s’eliminaran en el futur.

En aquest tutorial, a diferència de a HelloPurr, se li donen noms als components, en comptes d’utilitzar els noms predeterminats que App Inventor ofereix (com “Button1”). L’ús de noms significatius és una bona pràctica de programació: t’ajuda a mantenir els programes ordenats al teu cap, i ajuda a altres a entendre teus programes.

El teu telèfon ha de contenir també alguns contactes amb fotos. Pots utilitzar l’aplicació Contactes per guardar les imatges dels teus contactes. També pots fer clic a Contactes al teu compte de Gmail en el teu ordinador i afegir fotos allà.

Assegura’t que el teu ordinador i el telèfon s’han configurat per utilitzar App Inventor, i navega fins al lloc web de App Inventor en beta.appinventor.mit.edu . Inicia un nou projecte a la finestra del Designer (dissenyador). Nómbralo PicCall i canvia el Title (títol) de la pantalla a PicCall. Obre l’Editor de blocs, fes clic a Connect to Phone, i comprova que el telèfon ha iniciat l’aplicació App Inventor.

Primers passos

Comença com a HelloPurr col·locant un botó a la pantalla. Fes que el botó tingui 150 píxels d’amplada i 150 píxels d’alt. Ajusta la propietat Image del botó a una imatge. Pots fer servir la imatge del gatet si la tens a mà – canviaràs aquesta imatge aviat. Ajusta la propietat Text del botó a “Press to Call”, encara que també canviarà això aviat.

Canvia el nom del component Button a TopButton (botó a dalt) (Crearàs 1 BottomButton (botó baix) més endavant en el tutorial.) Per canviar el nom, d’un component, fes clic al botó Rename al panell components i introdueix el nou nom.

En aquest tutorial, a diferència de a HelloPurr, se li donen noms als components, en comptes d’utilitzar els noms predeterminats que App Inventor ofereix (com “Button1”). L’ús de noms significatius és una bona pràctica de programació: t’ajuda a mantenir els programes ordenats al teu cap, i ajuda a altres a entendre teus programes. No confonguis name (el nom) d’un component amb text (el text) d’un component. Textés el text que apareix a la pantalla. Name és el nom que el teu programa fa servir per fer referència al component. Veuràs el nom en l’estructura de la llista Components al Designer (dissenyador) i en els calaixos de l’editor de blocs.

Fer trucades telefòniques

En HelloPurr, vas fer que el telèfon reproduís un so quan el botó era premut. En PicCall gairebé el mateix, excepte que en comptes de reproduir un so, el telèfon fa una trucada.

El component de App Inventor PhoneCall fa trucades telefòniques. Pots trobar PhoneCall a la secció Social de la Paleta. Obre la secció i arrossega un componentPhoneCall al visor. Es col · locarà a la zona Non-visible components. Nómbralo TopCall. La propietat PhoneNumber de PhoneCall determina el número que voleu marcar. Ajusteu a algun número de telèfon al que t’agradaria dir. Així és com el Dissenyador ha de quedar:

Ara canvia a l’Editor de blocs i arrossega el bloc when TopButton.Click do. A la ranura do, col · loca un bloc call TopCall.MakePhoneCall des del calaixTopPhoneCall, de manera que el controlador d’esdeveniments quedi així:

Prova el que hem fet fins ara al telèfon: Prem el botó i fes la trucada. Es pot empaquetar això com una aplicació. Seria una aplicació força limitada, sempre trucant al mateix número, encara que algunes persones poden trobar útil.

Informació de contacte del telèfon

A més de fer trucades telefòniques, les aplicacions de App Inventor també poden obtenir informació de la llista de contactes del telèfon. Això es fa amb el componentPhoneNumberPicker (Selector de número de telèfon).

Arrossega un component PhoneNumberPicker de la secció Social de la Paleta, col · loca sota TopButton i Canvia-li el nom a TopPick. PhoneNumberPicker és n tipus de botó: quan el pressiones, porta al capdavant teva llista de contactes del telèfon i et permet triar algun. Cámbai el nom del PhoneNumberPicker a TopPick, i canvia la seva Text a “Press to pick a number to call”. Prova prement el selector al telèfon: has de veure aparèixer teus contactes, i podràs triar un. Res passarà després de triar, perquè encara no has indiacado als components que facin res. Això serà el següent.

Utilitzant el selector

Canvia a la finestra de blocs i obre el calaix TopPick. Arrossega el bloc when TopPick.AfterPicking do. Aquest et permet definir un controlador d’esdeveniments que diu el que s’ha de fer després d’haver escollit un nombre dels teus contactes.

Ara obre el calaix TopCall i arrossega setembre TopCall.PhoneNumber to i introdueix a la ranura del bloc when TopPick.AfterPicking do. Ara arrossegaTopPick.PhoneNumber del calaix TopPick a la presa buida. Així és com el controlador d’esdeveniments ha de quedar:

Prova-ho al telèfon: Prem el botó selector, seleccioneu un contacte i un número de telèfon. A continuació, prem el botó de trucada de telèfon per fer la trucada. Afegeix una ordre al controlador d’esdeveniments per establir la propietat de TopButton Text a TopPick.PhoneNumber:

Imatges

Si tens una imatge emmagatzemada amb els teus contactes, pots fer que el botó la mostri, juntament amb el número de telèfon, en lloc d’utilitzar sempre la imatge del gatet. Per això, afegeix una ordre al controlador d’esdeveniments, per establir la propietat Image de TopButton perquè sigui la propietat Picture de TopPick:

PhoneNumberPicker té dues propietats que són fàcils de confondre: Picture i Image. Picture és la imatge associada amb el contacte que s’ha seleccionat. Image és la imatge del component PhoneNumberPicker tal com apareix en el Designer (dissenyador) i al telèfon.

Millores

Aquí hi ha algunes variacions que pots provar:

• Afegeix un segon botó, BottomButton i un segon PhoneNumberPicker, perquè la teva aplicació ofereixi l’opció de dos nombres.
• Afegeix una etiqueta amb instruccions sobre com utilitzar l’aplicació.
• Mostra el nom de la persona a qui es diu a més del número de telèfon. Utilitza altra etiqueta més per mostrar la informació addicional.

Usant PicCall

Pots empaquetar PicCall i descarregar-lo al telèfon perquè puguis utilitzar-lo quan no estiguis connectat a l’ordinador. Però hi ha una gran limitació: Cada vegada que es reinicia PicCall, comença de nou i no recorda el que has triat l’última vegada. Més endavant, veurem com utilitzar el component TinyDB per crear aplicacions que puguin recordar informació d’una vegada a una altra. Aquesta informació se li crida dades persistents.

Revisió

Aquestes són les idees principals tractades en aquest tutorial:

• Pots nomenar els components mitjançant el botó Rename.
• App Inventor té components que poden utilitzar la informació emmagatzemada al telèfon. PhoneNumberPicker pot obtenir números de telèfon i fotos dels teus contactes, i PhoneCall pot fer trucades.

Atenció: En alguns sistemes Android, la llista que apareix en executar el selector de número de telèfon no mostra les imatges associades amb els seus contactes. Tot i que la imatge no es mostra, la propietat “imatge” seguirà retornant una imatge que es mostrarà quan s’executi l’aplicació, sempre que el telèfon tingui una imatge per a aquest contacte.

MoleMash

Que estàs construin

En el joc MoleMash, un talp apareix en posicions aleatòries en un camp de joc, i el jugador aconsegueix punts golpendo al talp abans que desaparegui. Aquest tutorial mostra com construir MoleMash com un exemple de joc simple que utilitza una animació.

En aquest toturial se suposa que has completat algun dels tutorials HelloPurr amb l’emulador , o HelloPurr amb el telèfon i PaintPot .

Primers passos

Connecta’t al lloc web de App Inventor i comença un nou projecte. Nómbralo MoleMash, i també estableix el Title(títol) de la pantalla a MoleMash. Obre l’Editor de blocs i connecta el telèfon.

També descàrrega aquesta imatge d’un talp i guarda-la al teu ordinador.

Introducció

Dissenyaràs el joc perquè el talp es mogui cada mig segon. Si és tocat la puntuació s’incrementarà en un punt i el telèfon vibrarà. Prement restart posaràs el comptador a zero.

Aquest tutorial introdueix:

• Sprites d’imatge
• Temporitzadors i el component Clock
• Procediments
• Prendre un nombre aleatori entre 0 i 1
• Blocs de text
• Typeblocking (creació de bloc mitjançant el teclat)

Els primers components

Molts components et resultaran familiars de tutorials anteriors:

• Un Canvas (llenç) anomenat MyCanvas. Aquesta és l’àrea on el talp es mourà.
• Una Label (etiqueta) anomenada ScoreLabel que mostra la puntuació, p. ex. el nombre de vegades que el jugador colpeja el talp.
• Un Button (botó) anomenat ResetButton

Arrossega aquests components des de la Paleta al Visor i assigneu els seus noms. Col · loca en MyCanvas dalt i s’ajusta seves dimensions a 300 píxels d’amplada per 300 píxels d’alt. Canvia la propietat Text de ScoreLabel a Score: —. Canvia la propietat Text de ResetButton a Reset. Afegeix també un component Sound i nómbralo Noise. Usaràs Noise per fer que el telèfon vibri quan el talp sigui tocat, de la mateixa manera que vas fer amb el ronc del gat en HelloPurr.

Temporitzadors i el component Clock (rellotge)

Necessitaràs que el talp salti periòdicament, i faràs això amb l’ajuda d’un component Clock.

El component Clock proporciona diverses operacions relacionades amb el temps, com dir-te la data. Aquí, usaràs el component com un temporitzador que es dispari a intervals regulars. L’interval de tret està determinat per la propietat TimerInterval de Clock. Arrossega un component Clock, es col · locarà a l’àrea de components no visibles (non-visible components). Nómbralo MoleTimer. Ajusta la seva TimeInterval a 500 milisegons per fer que el talp es mogui cada mig segon. Assegura’t queEnabled (activat) està marcat.

Afegir un Sprite d’imatge (imatge animada)

Per afegir el talp en moviment utilitzarem un sprite.

Els sprites són imatges que es mouen a la pantalla en un Canvas (llenç). Cada sprite té una velocitat i una direcció, i també un interval que determina la freqüència dels moviments del sprite a la seva velocitat assenyalada. Els sprites també poden detectar quan es toquen. En MoleMash, el talp té una velocitat zero, de manera que no es mou per si mateix. En el seu lloc, vas a configurar la posició del talp cada vegada que s’activi el temporitzador. Arrossega un component ImageSprite al Viewer(visor). Trobaràs aquest component en la categoria Animation de la Paleta. Col · loca dins de l’àrea MyCanvas. Estableix aquestes propietats per al sprite Mole:

• Picture: Usa mole.png, el qual has descarregat a l’inici d’aquest tutorial.
• Enabled: marcat
• Interval: 500
• L’interval no importa aquí, perquè la velocitat del talp és zero: no es mou per si mateix.
• Heading: 0 La direcció no importa aquí tampoc, perquè la velocitat és 0.
• Speed: 0.0
• Visible: activat
• Width: Automatic
• Height: Automàtica

Has de veure les propietats X i Y ja emplenades. Aquestes van ser determinades pel lloc on posaves el sprite quan ho arrossegar a MyCanvas. Arrossega una mica més al talp. Has de veure com canvien X i Y. Has de veure també al talp al telèfon connectat, i moure pel telèfon quan ho arrossega al Designer (dissenyador). Ja has especificat tots els components. El Designer hauria ser així. Fixa’t que Mole està inclòs sota MyCanvas en l’estructura de la llista de components, indicant que el sprite és un sub-component de la tela (canvas).

Comportament de components i controladors d’esdeveniments

Ara anem a especificar el comportament dels components. Això introdueix algunes idees noves de App Inventor. La primera és la idea d’un procediment.

Un procediment és una seqüència d’instruccions a les quals es pot fer referència a totes alhora amb un únic comandament. Si tens una seqüència que cal utilitzar més d’una vegada en un programa, aquesta es pot definir com un procediment, per no haver-la repetir cada vegada que la facis servir. Els procediments en App Inventor poden prendre arguments i retornar valors. Aquest tutorial cobreix només el cas més simple: els procediments que no tenen arguments i no tornen cap valor.

Definir els procediments

Defineix dos procediments:

• MoveMole mou el sprite Mole a una nova posició a l’atzar en el llenç.
• UpdateScore mostra la puntuació, en canviar el text de ScoreLabel

Comença amb MoveMole:

• En l’Editor de blocs, sota Built-In, obre el calaix Definition. Arrossega un bloc te procedure i canvia l’etiqueta procedure a MoveMole.
  

  Nota: Hi ha dos blocs similars: procedure i procedureWithResult. Aquí has d’utilitzar procedure.

  El bloc to MoveMole té una ranura amb l’etiqueta do. Aquí és on has poses les declaracions per al procediment. En aquest cas hi haurà dos estats: un per establir la posició del talp x i un altre per definir la posició i. En cada cas, establiràs la posició a una fracció aleatòria, entre 0 i 1, de la diferència entre la mida del llenç i la mida del talp. Crearàs el valor usant blocs random-fraction i multiplicació i resta. Trobaràs aquests blocs al calaix Math.

• Construeix el procediment MoveMole. La definició completa ha de tenir aquest aspecte:
  

  Deixa buida la ranura arg de MoveMole perquè MoveMole no pren cap argument. Observa com els blocs es connecten entre si: La primera instrucció utilitza el bloc Mole.X gets per definir la posició horitzontal de talp. El valor connectat a la ranura del bloc és el resultat de multiplicar:

  1. el resultat del bloc call random-fraction, el qual té un valor entre 0 i 1
  2. el resultat de restar l’amplada del talp de l’amplada de la tela.

  La posició vertical es manegen de manera similar.

Amb MoveMole fet, el següent pas és definir una variable per a la puntuació anomenada score per mantenir la puntuació, (nombre d’encerts) i donar-li valor inicial 0.També hem de definir un procediment UpdateScore que mostri la puntuació en ScoreLabel. El contingut actual per mostrar en ScoreLabel és el text “Score:” pres del valor de score.

• Per crear la part de l’etiqueta “Score:”, arrossega un bloc text des del calaix Text. Canviar el bloc a “Score:” en lloc de “text”.
• Utilitza un bloc join per unir aquest al bloc que dóna el valor de la variable score. Pots trobar el bloc join al calaix Text.
• Així és com score i UpdateScore han d’aparèixer:

Afegeix un temporitzador

El següent pas és fer el talp mantenir-se en moviment. Aquí és on farem servir MoleTimer. El component Clock té un controlador d’esdeveniments anomenat when … Timer que es dispara repetidament a una velocitat determinada per TimerInterval.

Estableix MoleTimer per trucar a MoveMole cada vegada que s’activi el temporitzador, mitjançant la construcció d’un controlador d’esdeveniments com aquest:

Observa com el talp comença a moure al telèfon tan aviat com es defineix el controlador d’esdeveniments. Aquest és un exemple de com les coses en App Inventor comencen a succeir de forma instantània, tan aviat com es defineixen.

Afegeix un controlador tàctil per el talp

El programa ha d’incrementar la puntuació cada vegada que es toqui el talp. Els sprites, com els llenços, responen als esdeveniments tàctils. Així que crea un controlador d’esdeveniments tàctil per Mole que:

1. Incrementi la puntuació.
2. Truqui a UpdateScore per mostrar la nova puntuació.
3. Fer que el telèfon vibri durant 1/10 de 2 (100 mil · lisegons).
4. Truqui a MoveMole perquè el talp es mogui immediatament, en lloc d’esperar al temporitzador.

Així és com ha d’aparèixer això en blocs. Segueix i acobla els blocs Mole.Touched com es mostren.

Heus aquí un consell: Pots utilitzar typeblocking: per crear ràpidament els blocs.

• Per crear un bloc de valor 100, només has d’escriure 100 i prémer Intro.
• Per crear un bloc MoveMole, només has d’escriure MoveMole seleccionar el bloc que vulguis de la llista

Restablir la puntuació

Un detall final és restablir la puntuació. Això simplement és qüestió de fer que el botó Reset canviï la puntuació a 0 i truqui a UpdateScore.

Programa Complet

Aquí hi ha el programa MoleMash complet:

Variacions

Quan tinguis en funcionament el joc, és possible que desitgis explorar algunes variacions. Per exemple:

• Fer al joc variar la velocitat del talp en resposta al bé que el jugador ho està fent. Per variar la rapidesa dels moviments del talp, hauràs de canviar la propietatInterval de MoleTimer s.
• Portar un registre de quan el jugador colpeja el talp, i quan falla el tir, i mostrar una puntuació amb els encerts i errors. Per fer això, hauràs de definir controladors tàctils per Mole, com fins ara, i per MyCanvas. Una de les qüestions subtils, si el jugador toca el talp, això també compta com un toc per la tela? La resposta és sí. Tots dos esdeveniments es registraran.

Revisió

Aquestes són algunes de les idees incloses en aquest projecte:

• Els sprites són sensibles al tacte i es poden programar per moure en un llenç.
• El component Clock pot ser utilitzat com un temporitzador per fer que ocorrin esdeveniments a intervals regulars.
• Es defineixen els procediments mitjançant els blocs to.
• Per a cada procediment que es defineix, App Inventor crea automàticament un bloc de trucades associat i el col · loca al calaix My Definitions.
• La crida a random-fraction produeix un nombre entre 0 i 1
• Els blocs de text especifiquen, literalment, de la mateixa manera que els blocs de nombres especifiquen nombres literals
• Typeblocking és una manera de crear blocs de forma ràpida, escrivint el nom d’un bloc

Paintpot 2

PaintPot (Part 2)

En aquest projecte s’estén la Part 1 del tutorial per crear punts grans i petits, per demostrar com s’utilitzen les variables globals.

Començant

Assegura’t d’haver completat el procés de configuració i de tenir el teu projecte PaintPot Part 1 complet i carregat.

Comença des d’on ho vas deixar al final de la part 1, amb el projecte obert a in App Inventor. Fes servir el botó Save As per fer una còpia de PaintPot i poder treballar amb la nova versió sense afectar l’original. Anomena la còpia com PaintPotV2 (sense espais). Després de guardar la còpia, has de veure PaintPotV2 al Dissenyador.

Creant les variables

La mida dels punts dibuixats en el llenç està determinat pel controlador d’esdeveniment when DrawingCanvas.Touched on call Drawing.DrawCircle és anomenat amb r, el radi del cercle, igual a 5. Per canviar el gruix, tot el que necessitem fer és utilitzar diferents valors per ar. Utilitza r = 2 for punts petits i r = 8 per als punts grans.

Comença per crear noms per a aquests valors:

1. Obre l’Editor de blocs, si no està ja obert, i connecta el telèfon. El telèfon es mostrin els botons i el llenç que vas crear anteriorment.
2. En l’Editor de blocs, a la columna Built-In, obre el calaix Definitions. Arrossega un bloc def variable. Canvia el text que diu variable a small (petit). Un signe d’exclamació groc d’advertència apareixerà al bloc. Si passes el ratolí sobre el veuràs un missatge d’advertència explicant que el bloc té un connector buit.
3. Necessites omplir en el connector amb un bloc de nombre que especifiqui el valor per small – usa 2 com a valor. Per crear el bloc de nombre, escriu el número 2.Apareixerà un menú, que mostra tots els blocs possibles, que inclouen “2” en el seu nom. Fes clic en el primer, que és el número 2 en si, i un bloc de nombre amb el valor 2 hauria d’aparèixer. Col · loca en el bloc def variable. La marca groga d’advertència desapareixerà, perquè l’espai buit s’ha omplert. (El segon valor apareix al menú és el bloc de matemàtiques atan2, que no vas a utilitzar aquí.)

Aquests són els passos de la seqüència:

Ja has definit una variable global anomenada small el valor és el número 2.

De la mateixa manera que per small, defineix una variable global big, el valor sigui 8.

Finalment, defineix una variable global dotsize i dóna-li un valor inicial de 2.

Podries preguntar si no seria millor l’estil de programació per fer que el valor inicial de dotsize ser el valor de small en lloc de 2. Això seria cert, excepte per una subtil qüestió de programació: Fer això suposaria que small ja té un valor quan a dotsize s’assigna el seu valor. En App Inventor no pots fer suposicions sobre l’ordre en què es processaran els blocs def. En general, és clar, desitjaràs especificar l’ordre en què són assignades les variables. Pots fer això assignant tots els valors quan s’iniciï l’aplicació, utilitzant l’esdeveniment Inici de pantalla. El tutorial Quiz Em dóna un exemple de la inicialització.

L’ús de variables

Ara canvia la crida a DrawCircle al controlador d’esdeveniments contacte perquè utilitzi el valor de dotsize en lloc d’utilitzar sempre 5.

En l’Editor de blocs, canviar a la columna My Blocks, i obre el calaix My Definitions Has de veure sis nous blocs, per a cada una de les tres variables definides:

• Un bloc global … que produeix el valor de la variable
• Un bloc setembre global … que estableix la variable a un nou valor.

Aquests blocs s’han creat de forma automàtica, de manera semblant a la manera com els blocs de x i i es creen quan es defineix el controlador d’esdeveniment when DrawingCanvas.Touched a la part 1 d’aquest tutorial. “Global” significa “variable global”, en contrast amb els arguments de controladors d’esdeveniments, els blocs estan etiquetats com “valor”. La diferència és que els arguments valor només són accessibles dins del cos del controlador d’esdeveniments, mentre que les variables globals són accessibles en tot el programa.

• Vés al controlador d’esdeveniments when MyCanvas.Touched i reemplaça el bloc de nombre 5 en call DrawCircle pel bloc global dotsize del calaixMyDefinitions.

Canvi dels valors de les variables

Ara crea una forma per canviar dotsize de petit (2) a gran (8). Fes això amb els botons.

1. Al Dissenyador, arrossega un component HorizontalArrangement al panell de visualització sota del component DrawingCanvas Nomena el component comBottomButtons
2. Arrossega el botó Wipe existent a BottomButtons.
3. Arrossega dos components botó més de la Paleta dins BottomButtons, col · locant al costat del botó Wipe.
4. Anomena els botons com ButtonBig i ButtonSmall, i canvia la seva Text (text) a “Big dots” i “Small dots”, respectivament.
5. En l’Editor de blocs sota My Blocks, crea un controlador d’esdeveniment when … Clicked des ButtonSmall que canviï dotsize al valor de small. Per canviar dotsize fa servir el bloc setembre global dotsize to des del calaix MyDefinitions i col · loca-en el bloc global small.
6. Crea un controlador d’esdeveniment similar per ButtonBig.

Els dos controladors d’esdeveniment Click haurien de tenir aquest aspecte:

Ja està! Pots dibuixar en PaintPot i utilitzar els nous botons per dibuixar punts, ja siguin grans o petits. Tingues en compte que en arrossegar el dit encara dibuixes una prima línia. Això és perquè els canvis que acabes de realitzar no afecten la manera com es diu a DrawLine.

Aquí hi ha el programa complet en el Dissenyador

i en la finestra de blocs.

Un error en el qual pots treballar: El programa que acabes de construir, té amb un petit error. Si comences a dibuixar abans de prémer qualsevol dels botons de color per a la pintura, el color de la pintura serà negre, però després de triar un color, no hi ha manera de tornar a negre. Pensa en com es pot arreglar això.

Revisió

Has creat variables globals usant blocs def des del calaix Definitions.

Per a cada variable global que es defineix, App Inventor proporciona automàticament un bloc global que dóna el valor de la variable, i un bloc setembre global … ment per canviar el valor de la variable. Aquests blocs es poden trobar al calaix My Definitions.