Основно съдържание
Програмиране
Курс: Програмиране > Раздел 4
Урок 2: Управление на сцениАнимирани сцени
Видяхме как се правят няколко прости сцени – но нашите сцени бяха "статични" – те не бяха анимирани и не взаимодействаха с потребителя. Както ще видим, създаването на красиви сцени изисква малко повече финес. Но сега се поразвихрим!
Нека първо си поговорим за анимация. Ами ако искахме да покажем Уинстън в ролята на рок звезда, удрящ силно по барабаните? Бихме го направили, като дефинираме функцията
draw, така че да съдържа кода, който рисува форми, които да се преместват във всеки кадър. Ето един пример, в който позицията на ръцете, удрящи барабаните, се базира на текущата стойност на millis() – броя на изминалите милисекунди:Ами ако добавим това като сцена 4 в предишния пример? Ще преместим кода във функцията
drawScene4() и ще модифицираме логиката 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();
}
};Опитай, като щракнеш няколко пъти с мишката:
Забелязваш ли нещо? Работи, но само частично. Можем да видим Уинстън с неговите барабани, но барабанните пръчки не се движат. Колко тъжно! Трудно е да се прави музика, когато сме замразени във времето. Вероятно вече виждаш проблема: вече не извикваме кода, който рисува палките, във функцията
draw(), затова той се извиква само веднъж – а не няколко пъти – и палките застават в позицията, в която са извикани първия път. Вероятно вече предполагаш и какво е решението: да дефинираме функция draw() и да извикаме drawScene4(), когато е необходимо.draw = function() {
if (currentScene === 4) {
drawScene4();
}
};Да помислим за това: винаги когато дефинираме функция
draw() в своя код, тя ще се извиква продължително (по подразбиране 30 FPS – кадъра в секунда), а когато бъде извикана и настоящата сцена е настроена на 4, ще извика функцията, която рисува сцена 4. Когато има каквато и да е друга стойност, няма да нарисува нищо – ще се запази това, което вече е на екрана. Все още трябва да направим рисуването на началната сцена в in mouseClicked, тъй като логиката дотук се грижи за анимирането на следващите фреймове.Mоже би си мислиш – защо не направим логика, която да извиква всяка функция за сцена в
draw()? Ами, можем да го направим и това ще означава, че ако сме добавили анимация в останалите сцени, тя ще заработи веднага. Но ако предположим, че не сме анимирали останалите сцени, то по този начин ще искаш от компютъра да прерисува постоянно тези сцени без причина. Това не е добре от гледна точка на изпълнението. Трябва да спестяваме излишната работа на компютъра винаги, когато можем. Така програмата ни ще е по-бърза, а потребителите ни – по-щастливи.Добре, след като обсъдихме всичко това, ето и нашата история в цялата си анимирана, достойна за щракане прелест. Можеш почти да чуеш звука на барабаните от сцена 4!
Искаш ли да се присъединиш към разговора?
Все още няма публикации.