M9 | L3 – Scene III

Astăzi vom afla despre:

  • Scene interactive

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Povestea unui personaj

Exemplu: https://www.khanacademy.org/computer-programming/scene-03/5016411628847104

Scene Interactive

Acum, că știm cum să facem scene animate, să ne asigurăm că putem face față celuilalt tip de scenă nestatică: scene care răspund la interacțiunea utilizatorului. De exemplu, vrem să desenăm o scenă în care Winston are bebeluși (după faza sa de rock star, desigur) – dar vrem, de asemenea, să lăsăm utilizatorul să facă clic pentru a oferi mai multor copii lui Winston. Pentru că putem folosi întotdeauna mai mulți Winstonitos în lume, nu?

Iată cum ar arăta acea scenă ca un program independent. Programul desenează partea statică a scenei, iar apoi în mouseClicked, desenează imagini pentru copii Winston în locația mouse-ului, făcând clic pe ele deasupra a ceea ce a fost deja desenat.

mouseClicked = function() {

    image(getImage(„creatures/BabyWinston”), mouseX-20, mouseY-20);

};

background(173, 239, 255);

fill(7, 14, 145);

textSize(25);

text(„Winston has babies!”, 10, 47);

textSize(17);

text(„Click to make more babies”, 10, 78);

image(getImage(„creatures/Winston”), 21, 183);

fill(71, 71, 71);

rect(32, 185, 108, 15);

rect(46, 126, 82, 60);

image(getImage(„creatures/BabyWinston”), 150, 250);

Cum am integra asta în programul nostru cu mai multe scene? Ei bine, am începe prin a înfășura tot codul de desen static într-o funcție de desen de scenă drawScene5 () și adăugând logică de comutare a scenei la 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();

    }

};

Dar cum integrăm funcționalitatea mouseClicked? Am definit deja un mouseClicked în codul nostru și nu îl putem defini de două ori. În JavaScript, ultima definiție a funcției „câștigă”, aceasta înlocuiește orice definiții anterioare. Asta înseamnă că trebuie să găsim un loc bun pentru a pune acea linie de desenare a bebelușului în mouse-ul nostru existentClick.

Am putea folosi un alt tip de interacțiune – cum ar fi mouseDragged. Acest lucru va funcționa, deoarece tragerea nu provoacă, de asemenea, un eveniment de clic. În continuare trebuie să verificăm dacă currentScene === 5, pentru a ne asigura că tragerea nu atrage bebelușii în nicio altă scenă:

mouseDragged = function() {

    if (currentScene === 5) {

        image(getImage(„creatures/BabyWinston”), mouseX-20, mouseY-20);

    }

};

Final:

https://www.khanacademy.org/computer-programming/scene-03/5016411628847104

Deci, acest tip de lucrări funcționează, deși sunt puțin îngrijorat de câți copii ar putea ajunge Winston. În general, aceasta nu este o soluție optimă, deoarece înseamnă că trebuie să ne limităm la proiectarea scenelor care nu răspund la clicurile mouse-ului. Nu vrem să avem această constrângere, trebuie să existe o cale mai bună.

Ce se întâmplă dacă am diferenția clicurile mouse-ului în funcție de locație, astfel încât un clic într-o locație ar însemna schimbarea scenelor, iar clicurile în altă parte ar putea fi utilizate pentru interacțiunea în scenă? Știi, ca un buton! De fapt, așa abordează majoritatea programelor multi-scenă asupra acestei probleme și vom vorbi despre asta în continuare