Fő tartalom
Programozás
Animált képernyők
Láthattad, hogyan készíthetsz több egyszerű képernyőt, de – az eddigi képernyőink „statikusak” voltak – nem volt bennük animáció, illetve nem reagáltak felhasználói interakcióra sem. Látni fogod majd, hogy kicsi fifika kell majd ahhoz, hogy látványosabb képernyőket készíts. Hajrá, legyünk látványosak!
Elsőként beszéljünk az animációkról! Mi lenne, ha Winstont rocksztárként szeretnénk megmutatni, egyik dobszólója közben? Alapesetben ezt úgy oldanánk meg, hogy definiáljuk a
draw függvényt, ami tartalmazza azt a kódot, ami minden képkockánál kicsit elmozdítja a helyzetet. Itt egy példa arra, ahol a doboló kéz helyzete az aktuális millis() értékétől függ, vagyis az eltelt ezredmásodpercek számától:Mi lenne, ha hozzáadnánk ezt az előző példához negyedik képernyőként? Elhelyezzük ezt a kódot a
drawScene4() függvényben, és módosítjuk a mouseClicked logikáját.var drawScene4 = function() {
currentScene = 4;
background(194, 255, 222);
var x = cos(millis()*1);
var y = cos(millis()+98);
...
};
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene1();
}
};Próbáld ki az alábbit – kattintsd végig párszor:
Feltűnt valami? Működött, de csak részben. Láthattuk Winstont a dobfelszerelésével, de a dobverői nem mozogtak. Ez szomorú! Nehéz úgy zenélni, ha az idő megállt. Talán már észre is vetted mi a gond: a dobverő-rajzolást már nem a
draw()-on belül hívjuk meg, így csak egyszer fut le (nem ismétlődve fut), ezért a dobverők csak abban a pillanatban renderelődnek ki, amikor először meghívjuk. Az is lehet, hogy már van is ötleted a megoldásra: definiáljunk egy draw() függvényt, és hívjuk meg ezt a megfelelő helyen a drawScene4() függvényben!draw = function() {
if (currentScene === 4) {
drawScene4();
}
};Gondoljuk csak végig: minden alkalommal, amikor definiálunk egy
draw() függvényt a kódunkban, folyamatosan meghívódik (alapértelmezett esetben 60 FPS-sel), és minden alkalommal amikor meghívódik, az aktuális képernyő száma már 4-re van állítva, és ekkor meghívja a függvényt, hogy rajzolja ki a 4-es képernyőt. Ha más értéke van, nem próbál semmit rajzolni – így megmarad az, ami a képernyőn volt. Még be kell állítanunk a kezdőképernyőt a mouseClicked-ben, ez a logika csak az utána következő képkockák animációjáról gondoskodik.Néhányan talán arra is gondoltatok: miért nem használjuk ezt a logikát és hívjuk meg minden képernyő rajzoló függvényben a
draw()-t? Megtehetnénk, de ez azt jelentené, hogy ha hozzáadsz animációt a többi képernyőhöz, rögtön működni is fognak. Viszont ha nem animálsz a többi képernyődben, akkor arra veszed rá a számítógépet, hogy azokat a képernyőket is folyton újra-és-újra rajzolja minden ok nélkül. Hatékonysági szempontból ez nem túl jó. Ha megkímélhetjük a számítógépet attól, hogy feleslegesen dolgozzon, akkor kíméljük is meg! Ettől a programjaink gyorsabbak, a felhasználóink pedig elégedettebbek lesznek.Rendben, átbeszéltünk az egészet és itt is van a kattintható történet, az animált rocksztárral. Te is érzed a lüktetést, ahogy a negyedik képernyőhöz érsz?
Szeretnél részt venni a beszélgetésben?
Még nincs hozzászólás.