Hlavní obsah
Animované scény
Už víme, jak vytvořit několik jednoduchých scén - ale naše scény byly dosud "statické" - nebyly animovány, nedokázaly reagovat na interakci uživatele. Jak brzy uvidíme, pro vytvoření zajímavějších scén je potřeba trochu cviku. Tak pojďme na to!
Pojďme nejdříve pohovořit o animaci. Co kdybychom chtěli zobrazit Winstona jako rockovou hvězdu, která hraje na bubny? Normálně bychom to udělali definováním funkce
draw, ta by obsahovala kód, který kreslí tvary pohybující se o určitou pozici za každý snímek. Zde je příklad, ve kterém je poloha rukou hrajících na bubny založena na aktuální hodnotě millis(), počtu uběhlých milisekund:Co když to přidáme jako scénu 4 k našemu předchozímu příkladu? Kód přesuneme do funkce
drawScene4() a upravíme logiku mouseClicked.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();
}
};Vyzkoušej to níže - zkus se několikrát proklikat scénami:
Všimni si, že to fungovalo, ale jen do určité míry. Viděli jsme Winstona se sadou bubnů, ale jeho bubnovací hůlky se nepohybovaly. Jak smutné! Je těžké dělat hudbu, když je člověk zamrznut v čase. Možná už vidíš problém: nevoláme kód pro kreslení hůlek z
draw(), a tak se zavolá pouze jednou, ne opakovaně, a vykresluje proto hůlky pouze v okamžiku, kdy je poprvé zavolán. Možná už vidíš řešení: definuj funkci draw() a ve vhodném momentě zavolej drawScene4().draw = function() {
if (currentScene === 4) {
drawScene4();
}
};Pojďme se nad tím na chvilku zamyslet: kdykoliv v našem kódu definujeme funkci
draw(), bude poté volána opakovaně (výchozí nastavení bude 60 snímků za sekundu), a kdykoli je zavolána, když je aktuální scéna nastavena na 4, zavolá pak funkci k nakreslení scény 4. Když je to nějaká jiná hodnota, nebude se pokoušet nic nakreslit-- zachová tak, co již bylo na obrazovce. Stále ale ještě musíme provést počáteční vykreslení scény v mouseClicked, tato logika se jen stará o animaci každého snímku poté.Možná si říkáš: proč nepoužijeme logiku, která zavolá každou funkci pro nakreslení scény uvnitř
draw()? Můžeš takovou logiku použít, znamenalo by to ale, že když přidáš animaci do dalších scén, pak by pracovaly okamžitě. Ale za předpokladu, že nebudeš ostatní scény animovat, to způsobí to, že bude počítač tyto scény opakovaně překreslovat bez důvodu. Z pohledu výkonu to není dobré. Pokud víme, že můžeme počítači ušetřit zbytečnou práci, měli bychom to udělat. Díky tomu budou naše programy rychlejší a uživatelé šťastnější.Teď, když jsme to všechno probrali, tady máš příběh v celé své klikatelné, animované slávě. Skoro je až slyšet údery přicházející ze scény 4!
Chceš se zapojit do diskuze?
Zatím žádné příspěvky.