App Inventor órai és házi feladatok 2. óra

Az előadások a következő témára: "App Inventor órai és házi feladatok 2. óra"— Előadás másolata:

1 App Inventor órai és házi feladatok 2. óra
Laták Ivett

2 Ne feledd! Ha új eszközről dolgozol és valami nem működik, vagy elfelejtettél valamit a korábbi órákról, bármikor visszatérhetsz az előző diasorokhoz! Forrásfájlokat a oldalon, a Házi feladat -> AppInventor2 mappa egyes óráinak anyagai közt találsz, de magad is kereshetsz az interneten. Ha elakadsz, kérdésed van, vagy szeretnéd megmutatni, mit alkottál, a címen elérsz!

3 2. óra: légycsapó A feladat:
Készítsünk programot, amely során a kijelzőn egy légy véletlenszerűen változtatja a helyét. Ha a játékos megérinti a legyet, egy légycsapó hangját halljuk. Mi fog kelleni hozzá? a légy képe légycsapó-hang

4 Légycsapó – megoldás: elemeink
Hogy a legyünket legyen mire rakni, egy Canvas (=Vászon) komponensre lesz szükségünk először a Drawing and Animation részlegből. Húzzuk a kijelzőre! Már tudjuk, hogy egy gombnál (button) beállíthatjuk, hogy egy bizonyos kép formáját vegye fel. De a gombot sajnos nem tudjuk mozgatni, ezért másra lesz szükségünk a légyhez: Drawing and Animation/Image Sprite Tallózzuk be a légy képfájlját az ImageSprite Picture tulajdonságnál! A Media részlegből a Sound-ra is szükségünk van a hang kiadásához. Tallózzuk be (a Source tulajdonságnál) az mp3-at! A mozgatáshoz kelleni fog egy Clock (=Óra) komponens is a Sensors (=Érzékelők) részlegből. Ennek jobb oldalt a TimerInterval tulajdonsága mondja meg, hány ezredmásodpercenként „kattan egyet” az óránk. Ha 1000-re van állítva, az nyilván éppen egy másodpercet jelent.

5 Légycsapó – megoldás: tikk-takk
Megvannak a komponenseink, a programozáshoz térjünk át a Blokk-nézetre! Szeretnénk, ha a legyünk másodpercenként változtatná a helyét: egy tetszőleges (random) helyre költözne. A Clock komponens egyetlen eseményére van szükségünk, ez a „when Clock1.Timer do.” azaz „amikor az óránk kattan egyet, akkor…” No de hogyan helyezzük át a legyet minden másodpercben? A legyünk helyzetét a síkban koordinátákkal tudjuk megadni. Rá kell bírnunk a programot, hogy másodpercenként véletlenszerű koordinátákra helyezze a legyünket.

6 Légycsapó – megoldás: koordináták
Ahhoz, hogy meg tudjuk adni a koordinátákat, ismernünk kell, a grafikus programozásban (általában) hogy néz ki a koordinátarendszer. Az origó a bal felső sarokban van. Az x tengely a képernyő felső szélén, az y tengely a bal oldalán. A matematikaórán: A grafikus programozásban:

7 Légycsapó – megoldás: koordináták
Milyen hosszú az x és y tengely, mettől meddig futhatnak a koordináták? Mind az x, mind az y tengelyen a 0 az első lehetséges koordináta. (A (0;0) koordinátájú pont épp a kijelző bal felső sarka.) Az x tengely utolsó pontja: megnézhetnénk, milyen széles a kijelzőnk (pl. 320 pixel), de mi azt szeretnénk, ha telefonon és tableten is ugyanolyan jól működne a programunk függetlenül attól, milyen széles a képernyője. A vásznunknak (=Canvas) van Width (=Szélesség) tulajdonsága. Ezt fogjuk használni. Az y tengely utolsó pontja: hasonlóan a Canvas.Height tulajdonság adja meg.

8 Légycsapó – megoldás: véletlen
Már tudjuk, hogy mettől meddig terjed a koordinátarendszerünk vízszintes és függőleges irányban. De hogyan választunk egy véletlenszerű pontot a síkunkon? A Math részlegben található random (=véletlen) függvénnyel. Állítsuk be, hogy a program mettől meddig választhat véletlenszerűen egy egész (=integer) számot, és a randomszám-generátort össze is építhetjük a when Clock.Timer eseményünkkel. De hogyan? A légy (ImageSprite) rendelkezik „set X to” és „set Y to” (=állítsd be Y-t arra, hogy…) blokkokkal. Ez az X és Y a szereplő bal felső sarkának koordinátáját jelenti.

9 Légycsapó – megoldás: kilóg
Baj van! Ha a légy bal felső sarkát a (Canvas.Width; 0) vagy a (0; Canvas.Height) pontba tesszük, a légy ki fog lógni a képről. Megoldás: kivonás! Az X koordináta csak Canvas.Width – ImageSprite.Width -ig, az Y koordináta pedig Canvas.Height – ImageSprite.Height -ig menjen. Amikor az óra kattan, állítsd át X-et és Y-t egy véletlen számra:

10 Légycsapó – megoldás: érintés
Mit is szeretnénk, ha a játékos megérinti a legyet? adjon ki légycsapó-hangot rögvest mozduljon el a légy, ne hagyja magát többször is lecsapni ugyanott! Ez könnyű, már tanultuk előző órán, csak az ImageSprite- nak nem Click, hanem Touched (=Megérintve) eseménye van. Ha az ImageSprite meg lett érintve, hívjuk meg a hang Play (=Lejátszás) metódusát:

11 Légycsapó – megoldás: eljárás
Mozduljon el a légy. Ezt már egyszer leprogramoztuk! A lusta programozó nem szeret egy lépéssorozatot többször leírni, hanem inkább létrehoz egy eljárást (=Procedure) neki. Az eljárás egy „mini program”, aminek adhatunk egy egyedi nevet. Ha egy bizonyos lépéssorozatot többször is fel akarunk használni a programunkban, a parancsokat az eljárásba írjuk, és később ezt az eljárást a neve alapján akárhányszor „meghívhatjuk” egyetlen parancs segítségével. Az eljárással kapcsolatos blokkok a Procedure részlegben vannak. Létrehozni a .. to procedure blokkal tudunk. Írjuk át a nevét valami beszédesebbre!

12 Légycsapó – megoldás: eljárás
A már elkészített légymozgató parancsainkat helyezzük át a mozogj eljárásba! A Procedures részlegben az új eljárás meghívását lehetővé tévő új blokk született: call mozogj. A légy mozgatását végző eljárást hívjuk meg a Touched eseménynél, és a korábban elkészített Clock.Timerbe is tegyük be! Így átláthatóbb is, nem?

13 Mi volt a házi? 8.a: Amikor rákattintunk a légyre, kapjunk pontot!
Segítségek: minden érintéskor a pontszám növekedjen eggyel a változónak (Variable) is van „set” tulajdonsága, ezzel állíthatjuk át az értékét. A következő oldalakon a megoldást láthatod. Ha szeretnél jobban érteni az androidos alkalmazások programozásához, csak akkor lapozz tovább, ha már magad megcsináltad, vagy legalább megpróbálkoztál a feladattal! Ha kérdésed van, felteheted a címen.

14 Légycsapó – megoldás: pontszerzés
Jelenítsük meg a felhasználónak, hányszor sikerült eddig elkapnia a legyet, azaz hány pontot szerzett eddig! Ahhoz, hogy a kijelzőn látszódjon a pontszámunk, a Designer felületen rakjunk a telefon képernyőjére (mindegy, hogy a Canvas alá vagy fölé) egy Labelt (=Címke), ezt a User Interface részlegen találjuk. A Labelnek mindenféle tulajdonsága van, amit átállíthatunk, ha látványosabbá akarjuk tenni a feliratot: FontSize (=Betűméret), FontBold (=Félkövér betű), TextColor (=Szövegszín). A Label Text mezőjét állítsuk át 0-ra, mert a „Text for Label1” nem túl szép.

15 Légycsapó – megoldás: pontszerzés
Amíg nem programozzuk le, hogy minden érintés növelje a pontunkat és frissítse a kijelzőn a számot, addig a felhaszná- ló hiába csapkodja a legyet, a kijelző 0-t fog mutatni. Hozzunk létre egy változót (=variable), amiben az aktuális pontállást tároljuk! A Variablesnek egy külön részlege van a blokkok között. Változót deklarálni az initialize paranccsal lehet, name helyett pedig egy beszédesebb nevet is adjunk neki! Értékadás: a „pont” legyen kezdetben 0 (Math).

16 Légycsapó – megoldás: pontszerzés
Még az kell, hogy amikor a légyre csapunk, növeljük a pontszámot eggyel, és a friss értéket jelenítsük meg a kijelzőn a Variables részlegben a változók értékét lekérdezhetjük (get), vagy átállíthatjuk másra (set). Hogy a program tudja, melyik változóról beszélünk, állítsuk a nemrég létrehozott global pont-ra mindkét elemet!

17 Légycsapó – megoldás: pontszerzés
Ha megérintjük a legyet (az eddig leprogramozott eseményeken felül), állítsa át a pont változónk értékét eggyel nagyobbra, azaz pont + 1 -re! És ha ez megvan, utána a Label komponens Text tulajdonságát állítsa át a (most már frissített, aktuális) pont változó értékére! (Ezt a blokkot természetesen a Label blokkaji közt találjuk meg. Tegyük be ezt is a Touched eseménybe!

18 Mi volt a házi? 7.a: Tegyünk fel egy új szereplőt a vászonra, például egy darazsat. Ha a darázsra kattintunk, ne növekedjen, hanem csökkenjen eggyel a pontszámunk! Megoldási lehetőségek: a pont változónk csökkenjen eggyel a darázs érintésekor (ne felejtsd el a pontszám változtatása után frissíteni a Label tartalmát!) tegyél egy új Labelt a kijelzőre, ami a mínuszpontokat fogja mutatni a felhasználónak (ehhez egy új változót is létre kell hozni, ami a mínuszpontokat tartja számon) Ha kérdésed van, felteheted a címen.

19 Mi volt a házi? 10.c: Ha a légy mellé kattintunk, vonjon le tőlünk pontot! Megoldási lehetőségek: A jelenlegi pont változó értékét is módosíthatod, de létrehozhatsz egy új változót (és egy új Labelt) is, ami számon tartja a mínuszpontokat. Segítségek (csak ha nem tudod, mihez kezdj): Canvas.Touched (amikor megérinted a vásznat)… Csakhogy amikor a legyet megérinted, az a vászon megérintésének is számít, úgyhogy szükség lesz egy elágazásra (if), amit a Control részlegben találsz. Vizsgáld, hogy vászonérintés közben megérintette-e a legyet (touchedAnySprite = megérintette-e valamely szereplőt) Ha kérdésed van, felteheted a címen.