Fő tartalom
Interaktív képernyők
Most, hogy már tudjuk, hogyan készítsünk jópofa animált képernyőket, győződjünk meg róla, hogy mindenféle egyéb nem-statikus képernyőket is tudunk kezelni: olyan képernyőket, amik reagálnak a felhasználók interakcióira. Például szeretnénk rajzolni egy képernyőt, ahol Winstonnak gyereke van (természetesen a rocksztár időszaka után) – de azt is szeretnénk, hogy a felhasználók kattintással teremthessenek TOVÁBBI gyerekeket is Winstonnak. Hiszen az hasznos, ha még több kis Winstonito születik a világra, igaz?
Így nézne ki a képernyő önálló programként. A program a képernyő statikus részét rajzolja ki, majd a
mouseClicked-ben Winston gyermekeit rajzolja oda, ahova a felhasználó kattintott, a korábbi rajzra rakosgatva őket.Hogyan integrálhatjuk ezt a több-képernyős programunkba? Először is a statikus kódot elhelyeznénk egy képernyőt rajzoló
drawScene5() függvénybe, és a képernyő-váltó logikát pedig a mouseClicked-en belül helyeznénk el:var drawScene5 = function() {
currentScene = 5;
background(173, 239, 255);
fill(7, 14, 145);
textSize(39);
text("Winston has babies!", 10, 47);
...
};
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
} else if (currentScene === 5) {
drawScene1();
}
};Így nézne ki az egész:
De hogyan integrálhatjuk a
mouseClicked funkcionalitást? Már van egy mouseClicked a kódunkban, és nem definiálhatjuk kétszer. JavaScriptben az utolsó függvény definíció „nyer”, vagyis felülírja az előző függvénydefiníciót. Ez azt jelenti, hogy jó helyre kell tennünk a babarajzoló sort a már létező mouseClicked függvényen belül. Beszéljük át a lehetséges megoldásokat:1. Tehetjük a sort a függvény legelejére:
mouseClicked = function() {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
...
};Ekkor MINDEN alkalommal meghívódna, amikor a felhasználó kattint az egérrel, akkor is, ha nem a gyerekeket készítő képernyőn lennénk (és furcsa lenne, hogy a kis Winstonnak gyereke született). Ezért ez nem jó.
2. Tehetjük a sort a
currentScene === 4 if blokkon belülre:mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
} else if (currentScene === 5) {
drawScene1();
}
};Végül is itt hívjuk a
drawScene5() függvényt, és a gyerekeket az 5. képernyőhöz kell adnunk. De gondold csak végig: ez azt jelentené, hogy minden alkalommal, amikor egy újabb gyereket rajzolunk, a képernyőt is megrajzoljuk. Vagyis így nem fogunk újabb gyerekeket rajzolni, mert a currentScene értékét beállítjuk 5-re, és a kód az if blokkban nem fog ismét meghívódni.3. Tehetjük a sort a
currentScene === 5 if blokkjába:mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
} else if (currentScene === 5) {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
drawScene1();
}
};Ez azt jelenti, hogy nem rajzolunk gyerekeket az első kattintást követően, a képernyő kezdeti kirajzolása után. De ahogy láthatod az ezt követő sorból, a gyerek rögtön felül is lenne írva az 1-es képernyővel.
És itt rájöhetünk a baba-kattintós képernyőnk integrálására vonatkozó ötletünknek a végzetes hiányosságára: teljesen ugyanazt az interakciót – a képernyőre bárhova kattintást – szeretnénk használni arra is, hogy képernyőt váltsunk és arra is, hogy képernyőn belüli interakcióra reagáljunk. Van itt most egy igazi rejtvényünk, így radikálisabb megoldás szükséges ahhoz, hogy a képernyőnket megfelelően integrálni tudjuk.
4. A végén megállíthatjuk az első képernyő újra-rajzolását, és mondhatjuk azt a felhasználónak, hogy ebben az esetben indítsa újra a programot. Persze ez működhetne, de ez azon alapul, hogy a kattintás-vezérelt képernyőnk az utolsó képernyő. Mi lenne, ha ez a képernyő egy korábbi kattintás-vezérelt képernyő lenne? Ez a megoldás akkor már nem működne.
5. Másfajta interakciót is használhatunk – például a
mouseDragged -et Ez működne, mert a húzás nem okoz kattintás eseményt. Továbbra is meg kellene vizsgálnunk, hogy currentScene === 5, hogy meggyőződjünk arról, hogy nem rajzolunk-e babákat bármely másik képernyőre:mouseDragged = function() {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
}
};Próbáld ki az alábbit, és figyelj rá, hogy az utolsó képernyőn húzni kell az egeret:
Ez végül is működik, bár kicsit aggódok, hogy végül Winstonnak mennyire sok gyereke lesz. Általánosságban ez nem optimális megoldás, hiszen korlátoznunk kell a képernyő tervezését úgy, hogy ne mindig egérkattintásra reagáljon. Nem szeretnénk ilyen megszorításokat tenni, muszáj ennél jobb megoldást találnunk.
Mi lenne, ha az egérkattintásokat megkülönböztetnénk helyzetük szerint, tehát ha mondjuk egy adott helyre kattintunk, az azt jelentené, hogy képernyőt váltunk, más helyeket pedig tudnánk képernyőn belüli interakciókra használni? Tudod, mint ahogyan a gombok működnek! A több-képernyős programokban is így oldják meg ezt a problémát, és erről fogunk a továbbiakban beszélni.
Szeretnél részt venni a beszélgetésben?
Még nincs hozzászólás.