Główna zawartość
Animowane sceny
Google ClassroomOmówiliśmy już jak tworzyć wiele prostych scen - ale wszystkie nasze dotychczasowe sceny były "statyczne" - nie były animowane ani nie reagowały na interakcję użytkownika. Jak się zaraz okaże, obsługa złożonych scen wymaga trochę więcej wprawy. No to do dzieła!
Porozmawiajmy wpierw o animacji. Co zrobić, aby pokazać Winstona w czasie, gdy był gwiazdą rocka, grającego na perkusji? Zwykle zdefiniowalibyśmy funkcję
draw, zawierającą kod która rysuje kształty zmieniające pozycję w każdej kolejnej klatce animacji. Oto przykład, w którym pozycja rąk perkusisty oparta jest na wartości millis(), opisującej ile mineło milisekund:Co się stanie, jeśli dodamy to jako czwartą scenę do naszych poprzednich przykładów? Przenieśmy kod do funkcji
drawScene4() i zmodyfikujmy logikę 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();
}
};Wyprobuj to poniżej:
Widzisz coś? Działało, ale w pewien specyficzny sposób. Widzieliśmy Winstona z jego perkusją, ale jego pałeczki nie ruszały się. Smutne, prawda? Ciężko tworzyć muzykę gdy jest się zamrożonym w czasie. Możliwe, że już wiesz gdzie tkwi problem: nie wywołujemy już kodu rysującego pałeczki z metody
draw(), więc wywołany zostaje raz -- a nie wielokrotnie-- rysując pałeczki tylko w momencie, gdy pierwszy raz pojawiają się one na ekranie. Rozwiązanie również mogło już Ci przyjść do głowy: zdefiniować metodę draw() i wywoływać drawScene4() wtedy, gdy jest ona potrzebna.draw = function() {
if (currentScene === 4) {
drawScene4();
}
};Przemyślmy to: za każdym razem gdy zdefiniujemy funkcję
draw(), będzie co chwilę wywoływana(domyślnie 60 razy na sekundę) i za każdym razem gdy jest wywoływana a aktualnie ustawiona jest czwarta scena, funkcja ta będzie rysować scenę czwartą. Gdy wartość będzie jednak inna, funkcja ta nie będzie próbować nic narysować -- na ekranie zostaną tylko te rzeczy, które już się tam znajdowały. Wciąż jednak musimy narysować początkową scenę w mouseClicked, opisane powyżej rzeczy dotyczą klatek wyświetlanych po początkowej.Niektórzy z Was mogą sobie pomyśleć: czemu po prostu nie dodać logiki która wywoła każdą funkcję rysującą scenę w
draw()? Oczywiście możemy, co więcej sprawiłoby to, że w momencie dodania animacji do innych scen działałyby one od razu. Ale zakładając, że nie animujesz innych scen, oznaczałoby to wymuszenie na komputerze przerysowywania tych scen co chwilę bez żadnego powodu. Jeśli myślimy o wydajności, to nie jest dobre rozwiązanie. Skoro wiemy, że możemy w łatwy sposób zaoszczędzić komputerowi nadmiarowej pracy, powinniśmy to zrobić. Sprawi to, że nasze programy będą szybsze a użytkownicy bardziej zadowoleni.Dobrze, skoro już to omówiliśmy, oto historia w animowanej wersji z interakcją. Prawie słychać rytm z czwartej sceny!
Chcesz dołączyć do dyskusji?
A gdyby tak do ostatniej sceny
if (...)
{
while(mouseClicked===true){drawScene... ();}
drawScene();
//Next scene
}(3 głosy)
elo morelo mala makrelo(1 głos)