Fő tartalom
Egyszerű képernyő-váltások
Tegyük fel, hogy szeretnénk Winston történetét egy illusztrált novelláskötetben bemutatni, ahol a felhasználók kattintással tudják a történet következő részét elolvasni. Kezdjük a fő képernyővel, aminek csak címe van:
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);
Ezután azt szeretnénk, hogy a felhasználó kattintást követően lássa a történetének első fejezetét: Winston varázslatos születését. Ehhez definiáljunk egy
mouseClicked
függvényt, ami mindig meghívódik, ha a felhasználó az egérrel kattint, és tegyük ezt a rajzoló kódot ide a második képernyőbe. Ne feledjük, hogy meg kell hívnunk a background()
függvényt, mielőtt kirajzolnánk a második képernyőt, különben egymáson lennének a képernyők:mouseClicked = function() {
// Scene 2
background(173, 239, 255);
fill(7, 14, 145);
textSize(25);
text("Lil Winston is born!", 10, 100);
image(getImage("creatures/BabyWinston"), 80, 150);
};
Próbáld ki az alábbi programot – kattints, hogy lásd a képernyőváltást, és a kicsi Winston születését!
Most próbáld meg a második képernyő kódját módosítani, például azzal, hogy megváltoztatod a szöveget, vagy a kép helyét. Észrevetted, hogy minden alkalommal, amikor meg szeretnéd nézni a módosított kódod eredményét, kattintanod kell, hogy lásd a második képernyőt?
Engem ez nagyon idegesít, hiszen így nagyon sokáig tart, ha addig szeretném módosítgatni a második képernyőt, amíg teljesen elégedett nem vagyok vele. Mi lenne, ha 10 képernyőnk lenne, és a tizedik képernyőt szeretnénk módosítani? Minden szerkesztésnél 10-szer kellene kattintanunk! Nem hangzik túl jól.
Találjunk ki rá valami megoldást! Persze túlélhető egy ilyen bosszantó dolog, de mindannyian szeretnénk hatékony programozók lenni, viszont ha nem láthatjuk valós időben a kódunk eredményét, akkor nem leszünk azok. Most például egyszerűen becsomagolhatjuk a második képernyő kódját egy függvénybe, amit a
mouseClicked
-en belül meghívunk, mikor debuggolunk. Megmutatom, hogyan is gondolom:var drawScene2 = function() {
background(173, 239, 255);
fill(7, 14, 145);
textSize(25);
text("Lil Winston is born!", 10, 100);
image(getImage("creatures/BabyWinston"), 80, 150);
};
mouseClicked = function() {
drawScene2();
};
// Scene 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);
drawScene2();
Nemcsak a második képernyőt helyezhetjük el egy függvényben, hanem akár az elsőt is! Csak helyezzük el a kódot egy függvény törzsében, majd hívjuk meg!
var drawScene1 = function() {
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);
};
Most próbáljuk ki az alábbi programot! Ez alkalommal ha módosítani szeretnéd a második képernyőt, csak kommenteld ki a
drawScene2()
hívást, hogy rögtön lásd, hogyan renderelődik ki.Remek, most már van főképernyőnk és második képernyőnk is. Mit tegyünk, ha szeretnénk egy harmadikat is? Vagy ha visszatérnénk inkább az első képernyőhöz, amikor kattintunk a harmadikon? Meg kell változtatnunk a
mouseClicked
-en belüli logikát, hogy feltételtől függően válassza ki, melyik képernyőt mutassa ahelyett, hogy mindig a második képernyőt jelenítené meg. Ez tehát azt jelenti, hogy kelleni fog nekünk egy if utasítás, amivel megvizsgálhatunk bizonyos feltételeket. Elsőként gondoljuk át pszeudokód segítségével:// Ha a felhasználó kattint az egerével:
// ha az aktuális képernyő az első, ugorjon a 2.képernyőre
// ha az aktuális képernyő a második, ugorjon a 3. képernyőre
// ha az aktuális képernyő a harmadik, ugorjon vissza az 1-re
Úgy tűnik, számon kell tartanunk az „aktuális képernyőt”, és egészen logikus is lenne, hogy számként tároljuk. Készítsünk is ehhez egy
currentScene
globális változót, és vizsgáljuk meg az értékét a mouseClicked
-en belül.var currentScene;
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene1();
}
};
A feltételek olyanok, mint a pszeudokódunkban, de van egy kis gond: igazából sosem állítottuk be a
currentScene
értékét, így ezek a feltételek sosem lesznek igazak. Akár az if utasításon belül is beállíthatnánk, de szerencsésebb, ha a képernyőt kirajzoló függvényeken belül állítjuk be, így a változó értéke mindig a megfelelő értéket fogja kapni, attól függetlenül, hogy honnan hívjuk meg az adott képernyőt kirajzoló függvényeket.var drawScene1 = function() {
currentScene = 1;
...
};
var drawScene2 = function() {
currentScene = 2;
...
};
var drawScene3 = function() {
currentScene = 3;
...
};
Alább összeraktuk az egészet egy programba. Kattintgasd végig és figyeld meg, hogy visszaugrik az első képernyőre, hogyha a végére értél! Próbálj meg hozzáadni egy negyedik képernyőt (lehetne mondjuk Winston találkozása Jaj ne! figurával, vagy Winston találkozása Winstoniával, és Winstonsinba költözés), és készíts belőle saját változatot:
Szeretnél részt venni a beszélgetésben?
Még nincs hozzászólás.