6. Grafika és animáció

6.1. A Canvas komponens

Canvas (vászon) komponens kétdimenziós rajzoláshoz használható, rajzolhatunk pontokat, vonalakat, köröket, stb, többféle színnel és vonalvastagsággal. A vásznan használhatunk ImageSprite komponenseket, amelyekkel animációkat is készíthetünk, amelyek rendszerint nélkülözhetetlenek játékok készítésénél.

A Canvas egy téglalap alakú területként jelenik meg a képernyőn, meghatározott (pixelben megadott) magassága és szélessége van. A vásznan minden pontot egy (x, y) koordináta pár jelöl, ahol x a vízszintes, y pedig a függőleges tengelyen való elmozdulást jelenti az origó (0, 0) 

pozíciójához képest, ami a vászon bal felső sarkában található.

Fontosabb tulajdonságok:

  • Height, Width - a vászon magassága és szélessége pixelben

  • PaintColor - a festőecset színe

  • LineWidth - az ecset vonalvastagsága pixelben

  • BackgroundColor, BackgroundImage - a vászon háttérszíne és háttérképe

Fontosabb metódusok:

  • DrawPoint(x, y) - a megadott (x, y) pozícióban egy pontot rajzol az ecset aktuális színével

  • DrawCircle(x, y, r, fegyelőre "információ hamarosan" üzenet van több aloldalon is, addig lehet nézegetni ill) - a megadott (x, y) középpontból rajzol egy r sugarú kört. Ha a fill = true, akkor a kör kitöltött lesz a PaintColor-ban megadott színnel.

  • DrawLine(x1, y1, x2, y2) - a két megadott pont között húz egy egyenes vonalat a PaintColor-ban megadott színnel és LineWidth vastagsággal.

  • Clear - törli a vászon tartalmát (a háttérképet kivéve). 

 

6.1.0. feladat

 

  1. Készíts egy alkalmazást, amelyben egy Canvas kitölti a teljes képernyőt. Rajzolj a Canvasra egy X-et, amelynek a szárai összekötik a bal felső és jobb alsó, illetve a jobb felső és bal alsó sarkokat. A két vonal legyen 2 pixel széles és kék színű.

  2. ​Készíts egy alkalmazást, amelyben egy Canvas kitölti a teljes képernyőt. Rajzolj a Canvasnak egy keretet három pixeles piros vonallal.

  3. Készíts egy alkalmazást, amelyben egy Canvas kitölti a teljes képernyőt. Rajzolj a Canvasnak közepére egy kört, ami érinti a Canvas széleit. Módosítsd úgy az alkalmazást, hogy egy 10 pexeles margó legyen a körvonal és a Canvas széle között.

  4. Készíts egy alkalmazást, amely egy négyzetet rajzol ki a vászon közepére, a négyzet oldalának hosszúsága egyezzen meg a vászon szélességével álló nézet mellett.

  5. Készíts egy alkalmazást, amely a vászon négy sarkába négy négyzetet rajzol, melyeknek az oldalhossza legyen a vászon szélességének 20%-a. Rajzolj a négyzetekbe egy-egy kitöltött kört is, a körvonal éríntse a négyzet mind a négy oldalát.

  6. Készíts egy alkalmazást, amely a vásznan véletlenszerűen elhelyez 1000 pontot. A színek legyenek szintén véletlenszerűek.

download.png
 

6.1.1. feladat


Készíts egy alkalmazást, amely egy vászonra egy négyzetet rajzol ki. Lehessen megadni a vonal színét és vastagságát. Amikor a vonalszín vagy vastagság megváltozik, frissüljön a rajz.

img035 - 6.1 - 1.png
download.png
 

6.1.2. feladat

 

Módosítsd úgy az alkalmazást, hogy a négyzet kitöltse a vászon teljes területét, kivéve egy megadott szélességű margót a vászon szélétől. A négyzetbe rajzoljuk egy kitöltött kört is úgy, hogy a kör és négyzet között maradjon 5 pixelnyi távolság. A rajz alkalmazkodjon a készülék álló vagy fekvő tájolásához, ehhez használd az 

OrientationSensor.OrientationChanged komponenst és eseményt.

img036 - 6.1 - 2.png
download.png
 
difficult.png

6.1.3. feladat

 

Módosítsd úgy az előző feladatban elkészített alkalmazást, hogy megadható legyen, hány négyzetet (a beleírt körrel együtt) jelenítsen meg a program (1 és 5 között). A megadott darabszám és margó alapján a program maga számolja ki, hogy mekkorák legyenek a négyzetek.

img037 - 6.1 - 3.png
download.png
 

Fontosabb események:

  • Touched(x, y, touchedSprite) - a vászon érintésérzékeny, akkor következik be, ha megéríntjük azt. Visszaadja a koordinátáját annak a pontnak, ahol az érintés történt.

  • Flung(x, y, spead, heading, xvel, yvel, touchedSprite) - akkor következik be, ha gyorsan elhúzzuk az újjunkat a vászon felett. Megkaphatjuk az érintés pozícióját, a mozgás irányát és sebességét.

  • Dragged(starX, startY, prevX, prevY, currentX, currentY, draggedAnySprite) - hasonló a Flung eseményhez, de lasabb mozgásnál is bekövetkezik.

 

6.1.4. feladat

 

Készíts egy alkalmazást, amely minden érintésre egy random színű céltáblát jelenít meg. Ha "seperünk" egyet a vásznan, törlődjön a tartalma.

img038 - 6.1 - 4.png
download.png

6.2. A Ball és ImageSprite komponensek

 

Ball és az ImageSprite komponensek szerepe az App Inventorban megegyezik a Scratch programozási környezet Szereplő funkciójával. Segítségükkel testesíthetjük meg a programunk, játékunk szereplőit.

Ball egy kétdimenziós körlap, ami a Canvas-on jelenhet meg és mozoghat.

Az ImageSprite funkciója és metódusai hasonlók, csak a szereplőt itt egy kép vagy grafika jelöli és pár tulajdonság eltér. Mindkét komponenst az Animation palettán találjuk, mindkettő reagálhat  érintésre (touch), vonszolásra (drag) visszapattanhatnak egymástól (bounce), illetve a vászon széleitől.

Fontosabb tulajdonságok:

  • X, Y - a komponens pozíciója a vásznan (a sprite bal felső sarkát használva referenciapontként).

  • Interval - hány milliszekundumonként kell a szereplőnek mozdulnia a Heading irányba. Például 1000-es beállított értéknél a szereplő egyszer lép másodpercenként. Tehát minél nagyobb az érték, annál lassabban fog mozogni a szereplő.

  • Heading - a mozgás iránya fokokban kifejezve (0 - jobbra, 90 - fel, 180 - balra, 270 - le).

  • Speed - a mozgás pixel-ben kifejezett távolsága. Ha például a Speed 10-re van beállítva és az Interval 100-ra, akkor a sprite-unk másodpercenként 100 pixelt fog megtenni 10 lépésben (10 x 100) a Heading értéke által meghatározott irányba.

  • Rotate - ImageSprite esetében visszapattanáskor forduljon-e a kép.

Fontosabb események:

  • EdgeReached(edge) - akkor következik be, amikor a Ball komponens elérte a Canvas szélét. Az edge értéke az érintett oldalt jelöli (1 - felső, 3 - jobb, -1 - alsó, -3 - bal).

  • Touched(x, y) - a sprite-ra rábökött a felhasználó, paraméterekként megkaphatjuk az érintés pillanatában érvényes pozíció koordinátáit. 

  • Dragged(startx, starty, prevx, prevy, currentx, currenty) - a sprite vonszolásakor bekövetkező esemény, a sprite új koordinátái a currentx és currenty paraméterekből olvashatók ki. 

Fontosabb metódusok:

  • MoveTo(x, y) - a megadott (x, y) pozícióba mozgatja a sprite-ot.

  • Bounce(edge) - az aktuális pozícióban visszapattanást szimulál egy edge paraméter által megadott virtuális faltól. 

6.2.1. feladat

 

Készíts egy alkalmazást, amelyben egy Ball a bal felső sarokból indulva "körbejárja" a képernyőt. Állíts be különböző sebességeket.

download.png
 
 

6.2.2. feladat

 

Készíts egy alkalmazást, amelyben egy labda pattog. Legyen egy gomb, amilvel elindíthatod, leállíthatod a labda mozgását, és két másik, amivel befolyásolhatod a sebességét. Egy negyedik gomb szimulálja a felső szegélytől való visszapattanást.

download.png
 
 

6.2.3. feladat

 

Készíts egy játék alkalmazást, amelyben egy gömböccel euro érméket szedünk össze a rendelkezésre álló 30 mp alatt. A cél legyen az, hogy ez idő alatt minél több érmét szedjünk össze. A gömböc irányítását a telefon döntésével oldjuk meg, a programozást az Orientation Sensor segítse. 

pacman_game.jpg

Az alkalmazáshoz szükséges képek letőlthetők innét:

start.png
pacman.png
euro.png
backg.jpg
download.png

6.2.4. feladat

 

Készíts egy játékot, amelyben három tojást kell "feltörnie" a felhasználónak. A játék elején mindhárom tojás ép. Az ép tojások állandóan véletlenszerűen mozognak. Ha rábökünk a tojásra, az leesik és összetörik és ezután már nem mozdul. Ha mindhárom tojást feltörtük, vége a játéknak. A tojások feltörését kísérje hangeffekt is. Az újra gombra nyomva induljon újra a játék.

6_2_4 - 6.2 - 2.png

Az alkalmazáshoz szükséges képek letőlthetők innét:

yard.png
egg.png
begg.png
download.png
 

6.2.5. feladat

 

Készíts egy játékot, amelyben a képernyő alján egy kosárral szedjük össze a képernyő tetejéről lepotyogó húsvéti tojásokat. A játék akkor ér véget, amikor nem sikerült elkapnunk egy tojást és az eléri az alsó szegélyt. Az elkapott tojások száma jelenjen meg pontszámként. A tojás színe legen véletlenszerű a lehetséges 3 közül. Az esés sebessége az idő előrehaladtával gyorsuljon, így nehezítve a játékot. Ha szeretnénk, adjunk a játékhoz hangeffektusokat is. Plusz feladatlént oldjuk meg, hogy a rekord pntszám megjegyzésre kerüljön.

easter_bg.jpg

Az alkalmazáshoz szükséges képek letőlthetők innét:

easter.jpg
egg2.png
egg1.png
egg3.png
btn_start.png

Hogyan lehetne továbbfejleszteni a játékot?

download.png