Tag Archives: AppInventor 2

Vakondok gyilok feladatleírás az AppInventor 2-ben

A játékban egy vakondok véletlenszerűen bukkan fel különböző helyeken. A játékosnak el kell találnia mielőtt eltűnik. Ez a feladatleírás azt mutatja meg, hogyan tudod a játékot felépíteni.

Fogjunk hozzá!

Indítsd el a telefon emulátor szoftverét (aistarter) és az AppInventort és nyiss egy új projektet VakondokGyilok néven.

Mentsd le a gépedre a vakond képét! http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/moleMash/mole.png

A feladat

A játékban a vakondoknak minden fél másodpercben át kell ugrania egy másik lyukba. Ha sikerült rákattintani (touched), akkor kapsz egy pontot és a telefon vibrál egyet. Ha megnyomod az újraindítás gombot a számláló nullázódik.

Az első objektum példányok:

  • Helyez el egy elrendezést (Layout/VerticalArrangement) a Desing felületen.
    • Align horizontal: Center; Height: Fill parent; Width: Fill parent
  • Helyezz el egy vásznat (Drawing an Animation/Canvas), ezen fog mozogni a vakondok.
    • Height: 300 pixel; Width: 300 pixel, BackgroundColor: Green
  • Helyezz el Cimkét (User Interface/Label), amelyik a pontszámaidat jelzi.
    • FontSize: 18: ; Text: Score: –; TextColor: Red
  • Helyezz el Gombot (User Interface/Button), amelyikkel a pontokat tudod nullázni.
    • BackgroundColor: Blue; FontSize: 18; Text: Reset; TextColor: White
  • Helyezz el Hang objektumot (Media/Sound), amelyik majd zajong.
  • Helyezz el egy óra objektumot (Sensor/Clock)

Időmérés az óra objektummal:

Ahhoz, hogy időnként a vakondok elugorjon, szükséged van egy óra objektumra (The aid of Clock). Az órát különböző feladatokra tudod használni, például időmérés vagy a dátum lekérdezése.

Ezért az óra TimerInterval tulajdonságát állítsd 500-ra (500 milliszekundum) és nevezd el VakondOra névre.

Figyelj oda, hogy a TimerEnabled kapcsoló bekapcsolt állapotban legyen (Checked)!

A vakondok Image Sprite (Kép szellem, megtestesülés) létrehozása:

  • Helyezz el a vásznon egy Canvas and Animation/ImageSprite objektumpéldányt.
  • A Components panel alatt találsz egy Media panelt benne egy Upload gombbal kattints rá és tallózd be a lementett vakondok képet.
  • Az ImageSprite példány Picture tulajdonságára kattintva választd ki a feltöltött képet.

A vakond mozgásához a vásznon be kell állítani néhány tulajdonságot, mint a sebesség (Speed), amely az önálló mozgási sebességét határozza meg, Interval – azt határozza meg, hogy milyen időközönként mozogjon a megadott sebességgel (ennek sincs most jelentősége) és Heading (ami egyelőre nem tudom mire való, de ha sebesség null, akkor mindegy mi az értéke). A sebesség és heading nulla lesz, mert te fogod megmondani, hogy mikor és hol jelenjen meg a vakondok.

Tehát összefoglalva a beállítandó tulajdonságai az ImageSprite példánynak:

  • Picture: mole.png
  • Enabled: engedélyezve
  • Interval: 500
  • Heading: 0
  • Speed: 0.0
  • Visible: checked
  • Width: Automatic
  • Height: Automatic

Ha most megnézed a telefonodon (ha beállítottad) vagy az emulátoron akkor ezt látod.

Példányok viselkedése és eseménykezelés

Most egy új eddig még nem használt gondolat következik. Saját eljárást (Procedures) fogsz készíteni. Az eljárás egy olyan utasítás gyűjtemény, amely meghívásakor egy sor, előre meghatározott parancs fog lefutni.

Az eljárások (Procedures) sok félék lehetnek. Lehet bemenő paraméterük és visszaadott értékük is. A mostani példában ezek közül egyikre sem lesz szükség.

Határozzunk meg (Define) a két eljárást

Először át kell kapcsolnod a Blocks ablakra. Majd Built-in csoportban választd a Procedures objektumok közül az elsőt. (Ez alapértelemezetten paraméter és visszatérés nélküli eljárás blokkja.

MoveVakondok – Ez fogja egy új véletlenszerűen kiválasztott helyre vinni a vakondokot.

UpdateScore – Ez fogja kiírni az aktuális pontszámot a címkében.

Kezdjük a MoveVakondok eljárás elkészítését:

Be kell állítani egy véletlenül kiválasztott helyre, amely még a vásznon van. Ehhez az X és Y koordinátáit kell előállítani. Nézd meg és hozd létre a következő eljárást a MoveVakondok blokkban:

Lépések:

  1. Az ImageSprite1 blokkjai közül kiválasztod a set ImageSprite1 X és elhelyezed a MoveVakondok blokkban.
  2. A Math csoportból kiválasztod a szorzás blokkot és hozzáilleszted a set blokkhoz.
  3. Az első paraméter helyére helyezd el a Math csoport random fraction blokkját.
  4. A második paraméter helyére a Math csoportból helyezz el kivonás blokkot.
  5. A kivonás blokk első paramétere a Canvas1 blokkjai közül a Canvas1 Width, a második paraméter az ImageSprite1 blokkjai közül az ImageSprite1 Width legyen.

Ez a vakond képének X pozícióját határozta meg. A Canvas1 Width a vászon szélessége és azért, hogy a vakondok a szélén nehogy lelógjon a képről ezért a vászon szélességénél egy vakondok kép szélességgel kisebb számot generál. A random fraction blokk (ez is egy eljárás) 0 és 1 között egy tört számot állít elő.

Ismételd meg az előző műveleteket az Y koordináta előállítása érdekében a Canvas1 Height és ImageSprite1 Height objektumpéldányokkal is.

A UpdateScore eljárás készítése:

Miután készen vagy a MoveVakondok eljárással ideje foglalkozni a pontok módosítását végző UpdateScore eljárás megírásával. Először egy score változóra van szükség, amelyik az applikáció indításakor 0 kezdőértékkel kell deklarálni. Amikor az eljárást meghívod majd a programból, ezt a score változó értéket fogja az eljárás növelni és beállítani a Label1 Text tulajdonságát az aktuális pontszámra.

Először készíts egy score nevű globális változót! A Variables csoportban találod a name helyére írd a score nevet.

Ne felejtsd el lenullázni. 🙂 (Math csoport)

Majd készítsd el az UpdateScore eljárást. Így néz ki:

Lépések:

  1. Illeszd be a Label1 blokkjai közül a képen láthatót.
  2. Csatold hozzá a Text csoport join blokkját.
  3. A Text csoport üres String blokkját csatold hozzá a join blokkhoz és írd bele Score:
  4. A Variables csoporból a join blokkhoz csatold hozzá a képen látható blokkot és választd ki a global score változót.

Készítsd el az időzítőt

A következő lépés a vakondok ide-oda mozgatása. Erre a feladatra a VakondOra időzítőjét fogod használni. Amikor letelik az intervallumban a beállított idő, akkor bekövetkezik egy intervallum vége esemény és ekkor új pozícióra kell tenni a vakondok sprite-ját.

Így néz ki az eseménykezelés:

Lépések:

  1. Választd ki a VakondokOra eseménykezelő blokkjai közül a when MoveVakondok.Timer
  2. A Procdure csoportból pedig a call MoveVakondok eljárást.

Az applikáció indítása után a Timer minden 500 ms-ban meghívja a MoveVakondok eljárást, amely mint emlékszel új véletlen X és Y értéket állít elő, ezzel új pozícióba helyezed a vakondokot.

A kattintás érzékelése

Amikor a vakondokra kattintasz, akkor növelni kell a score értékét eggyel.

Ehhez tehát kell egy eseménykezelő, amely figyeli a kattintás (touch) eseményt.

Ez így néz ki:

Lépések:

  1. Válaszd ki az ImageSprite1 eseménykezelő blokkjai közül a when ImageSprie1.Touched blokkot.
  2. A Variables csoportból a set blokkot és választd ki a global score változót, hiszen ezt szeretnéd növelni.
  3. Választd a Math csoportból az összeadás blokkot.
  4. Az első paraméter a Variables csoportból a get (global score), mert az aktuális score értéket kell növelni.
  5. A második paraméter a +1 a Math csoportból.

Már csak a megszerzett pontokat kell kiírni a kijelzőre. Erre már megalkottad a megfelelő eljárást, ez az UpdateScore. Már csak meg kell hívni.

Azonban, ha jól meggondolod, akkor a kattintás után a szegény vakondokot is el kell mozdítani.

Most itt tartunk:

Esetleg, mivel a Sound objektumot is példányosítottuk (Sound1), ezért ha annak a Vibrate viselkedését (Behavior) is meghívod 100 ms-ig, akkor a telefonod vibrálni is fog (Az emulátor nem :))

Ezzel készen is vagy a nagyon egyszerű, de indulásnak nagyon jó applikáció elkészítésével. Bár azt hiszem elfelejtetted a Reset gombot, amellyel le kellene nullázni a pontokat.

A pontok nullázása

A Button1 objektumpéldány Click eseménykezelőjét kell beilleszteni a programodba. A score változót állítsd be nullára és ne feled meghívni az UpdateScore eljárást, hogy a felhasználó értesüljön az új pontszámról.

A teljes alkalmazás:

Változatok

  1. változat:

Az idő elteltével gyorsuljon a vakond mozgása. Vagyis vezess be egy új változót és például 20 ugrás után csökkentsd az ugrások között eltelt időt.

  1. változat:

Számold a hibás kattintásokat is és add meg a százalékos teljesítményét is a felhasználónak.

  1. változat (Extrém programozóknak):

Mi lenne, ha rajzolnál lyukakat jelképező ellipsziseket 6-8 db-t. A vakondok csak ezeken a helyeken bukkanhatna fel.

  1. változat (Extrém programozóknak):

Bármilyen egyéb ötlet, amivel a program érdekesebb lehet.

Az eredeti tutorial:

http://appinventor.mit.edu/explore/ai2/tutorials.html – 2016-12-13.

AppInventor 2

Tavaly a kollégám hívta fel a figyelmemet az MIT android programázási felületére. Még csak próbálkozom, és a felület oldalán lévő tutoriálok nézegetésével töltöm az időt, de biztos vagyok benne, hogy napi tanítási gyakorlatomban is fel fogom használni.

Az alkalmazás az http://ai2.appinventor.mit.edu/ címen érhető el. Kell hozzá egy gmail-es e-mail cím is. Szükséged lehet még egy emulátorra is, http://appinventor.mit.edu/explore/ai2/setup-emulator.html, bár sokkal élvezetesebb, ha a telefonodra fordítod a programodat egyből. Esetleg getting-started oldal is segítséget nyújthat.