Интерактивни сцени

След като знаем как да анимираме сцените, нека се уверим, че можем да се справим с другия вид нестатични сцени: сцените, които отговарят на действията на потребителя. Например искаме да нарисуваме сцена, в която Уинстън има бебета (разбира се след периода му на рок звезда!) – но искаме потребителят да може да щракне, за да даде на Уинстън ОЩЕ бебета. Защото светът винаги има нужда от повече Уинстъновци, нали така?

Ето как ще изглежда тази сцена като самостоятелна програма. Програмата рисува статичната част от сцената, а след това в mouseClicked рисува изображенията на бебета на Уинстън на мястото, на което е било щракнато с мишката. Така програмата ги поставя върху това, което вече е било нарисувано.

Как можем да интегрираме това в програма с много сцени? Можем да започнем, като обвием всичкия статичен код във функция за рисуване на сцена drawScene5() и да добавим логика за смяна на сцените в mouseClicked:

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();
    }
};

Ето как ще изглежда това:

Но как можем да интегрираме функционалността в mouseClicked? Вече дефинирахме mouseClicked в своя код и не можем да я дефинираме два пъти. В JavaScript последната дефиниция на функция "печели", като пренаписва всички предишни дефиниции. Това означава, че трябва да намерим подходящо място, за да поставим тези редове за рисуване на бебета в нашата съществуваща функция mouseClicked. Да обсъдим възможностите:

1. Можем да поставим реда в началото на функцията:

mouseClicked = function() {
    image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    ...
};

Така ще се извиква ВСЕКИ път, когато потребителят щракне с мишката, дори и ако не сме в сцената за поставяне на бебета (и ще бъде странно, ако бебето Уинстън има бебе). Няма да стане така.

2. Можем да поставим реда в if блока currentScene === 4:

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();
    }
};

В крайна сметка там извикваме drawScene5(), а бебетата трябва да се добавят към 5. Но помисли за това: това ще значи, че винаги рисуваме допълнително бебе всеки път, когато нарисуваме сцена. Освен това означава, че не можем да рисуваме повече бебета, защото currentScene ще бъде 5, а кодът в този блок няма да се изпълни повече.

3. Можем да поставим реда в if блока на currentScene === 5 :

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();
    }
};

Това означава, че няма да можем да рисуваме бебета до първия клик след първоначалното рисуване на сцената. Но, както виждаш от следващия ред, бебето може да бъде заменено със сцена 1.

Тук забелязваме пробойната в нашата идея за интегрирането на тази сцена с кликване на бебе: използваме съвсем същото действие – кликване с мишката някъде по екрана – за да променяме сцените, но и за да взаимодействаме със сцените. Сега имаме главоблъсканица и трябва да помислим за по-радикални възможности за включване на сцената.

4. Можем да спрем да прерисуваме сцена 1 в края и да кажем на потребителят да рестартира. Разбира се, това ще работи, но разчита на факта, че нашият екран, контролиран от кликване, се появява последен. Ами ако искаме тази сцена да се появи по-рано? Това решение няма да работи.

5. Можем да използваме различно действие – като mouseDragged. Това ще работи, защото влаченето не извиква събитието при кликване. Все още трябва да проверяваме дали currentScene === 5, за да сме сигурни, че влаченето не рисува бебета на всяка друга сцена:

mouseDragged = function() {
    if (currentScene === 5) {
        image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    }
};

Опитай го по-долу, като се увериш, че провлачваш към финалната сцена:

Добре, това донякъде работи, макар че се притеснявам колко бебета ще има Уинстън накрая. Това не е най-доброто решение, тъй като означава, че трябва да се ограничим до създаване на сцени, които не отговарят на щракване с мишката. Не искаме да сме ограничени по този начин, трябва да има по-добър начин.

Ами ако вместо това различаваме къде щракаме с мишката и така щракване на едно място може да означава смяна на сцените, а щракване на друго да се използва за действие в сцената. Подобно на бутон! Всъщност това е начинът, по който повечето програми с много сцени се справят с този проблем, но ще поговорим за това в следващия урок.

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Все още няма публикации.

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.