M9 | L4 – Scene IV

Astăzi vom afla despre:

  • Scene controlate de butoane

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Povestea unui personaj

Exemplu: https://www.khanacademy.org/computer-programming/scene-04/6165933671268352

Scene controlate de butoane

Am scăpat până acum, doar făcând clic pe utilizator oriunde, pentru a schimba scenele. Dar ne-am dat seama că există un dezavantaj în această abordare: nu putem folosi clicuri în scene pentru niciun fel de interacțiune suplimentară. Modul în care multe jocuri și aplicații rezolvă acest lucru este prin adăugarea de elemente specifice UI, cum ar fi meniuri și butoane, și navigarea scenelor numai la interacțiunea cu un anumit element UI. Să adăugăm un buton în dreapta sus pentru a controla scenele din programul nostru.

Ce este un „buton”? Sunt două lucruri: 1) indicatorul vizual că o zonă poate fi făcută clic și 2) logica care face ca zona să răspundă la clicuri. Să începem cu indicatorul vizual, un rect () cu ceva text () și să-l înfășurăm într-o funcție, în cazul în care dorim să-l numim de mai multe ori:

var drawButton = function() {

    fill(81, 166, 31);

    rect(15, 10, 50, 25);

    fill(255, 255, 255);

    textSize(16);

    text(„NEXT”, 19, 29);

};

Acum, unde să-l apelam? Ca regulă generală, vrem să apelăm funcții doar de câte ori este necesar, și nu mai mult de atât. Altfel, risipim doar energia computerului nostru!

Știm că trebuie să-l numim draw (), pentru că altfel va dispărea în timp ce toboșarul bate. Amintiți-vă că metoda draw () este numită în mod constant, mai des decât toate celelalte metode. Asta înseamnă că o putem numi doar din draw () și că ar trebui să se ocupe și de toate celelalte cazuri.

draw = function() {

    if (currentScene === 4) {

        drawScene4();

    }

    drawButton();

};

Butonul nu face nimic! Adică, utilizatorul ar putea crede că face ceva, dacă decide să facă clic doar pe acea zonă. Dar, de fapt, ar putea da clic oriunde și ar face același lucru. Trebuie să ne schimbăm logica făcută cu mouse-ul, astfel încât să verificăm locația butonului înainte de a decide ora schimbării scenei.

Toate aceste lucruri trebuie să fie adevărate:

  • Mouse-ul este mai mare decât poziția x din partea stângă a rectului?
  • Mouse-ul X este mai mic decât poziția x din partea dreaptă a rectului?
  • Este mouseY mai mare decât poziția y a părții superioare a rectului?
  • Este mouseY mai mic decât poziția y a părții de jos a rectului?

Folosim && pentru a verifica dacă toate cele patru condiții sunt adevărate și, dacă da, trecem la următoarea scenă:

mouseClicked = function() {

    if (mouseX >= 15 && mouseX <= 65 &&

        mouseY >= 10 && mouseY <= 45) {

        …

    }

};

Acum, că avem un mod de a ști când un clic este destinat schimbării scenelor, putem folosi clicuri pentru alte interacțiuni în scenele noastre, atâta timp cât nu fac clic pe buton. Asta înseamnă că putem lăsa utilizatorul să adauge copiii Winston făcând clic în loc să tragă, așa cum am dorit inițial. Vom adăuga altceva la if și vom muta codul de la mouseDragged în altul:

mouseClicked = function() {

    if (mouseX >= 15 && mouseX <= 65 &&

        mouseY >= 10 && mouseY <= 45) {

        …

    } else {

        if (currentScene === 5) {

            image(getImage(„creatures/BabyWinston”),

                  mouseX-20, mouseY-20);

        }

    }

};

Codul final:

https://www.khanacademy.org/computer-programming/scene-04/6165933671268352