M9 | L1 – Scene I

Astăzi vom afla despre:

  • Schimbari simple de scene

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Povestea unui personaj

Exemplu: https://www.khanacademy.org/computer-programming/scene-01/5027056436854784

Ce sunt scenele?

Multe jocuri au ceea ce numim „scene” și au nevoie de un mod de a gestiona acele „scene”. Ce vreau să spun prin scene?

Fiecare scenă este o stare distinctă a programului care afișează informații diferite și există o modalitate prin care utilizatorul poate ajunge de la o scenă la alta. Poate că este un simplu clic al mouse-ului sau o apăsare a tastei sau poate selectează o scenă dintr-un meniu.

Odată ce ați realizat că aveți nevoie de ceva de genul scenelor pentru programul vostru, va trebui să decideți cum să le programați. La fel ca multe lucruri din programare, există multe modalități de a face acest lucru, dar sperăm că vă vom oferi câteva idei.

Schimbari simple de scene

Să presupunem că vrem să spunem povestea lui Winston ca o carte de poveste ilustrată, utilizatorul făcând clic pentru a citi următoarea parte a poveștii. Vom începe cu o scenă principală care are doar un titlu:

background(235, 247, 255);

fill(0, 85, 255);

textSize(25);

text(„The Story of Winston”, 10, 200);

Acum, vrem ca utilizatorul să poată face clic pentru a vedea prima parte a poveștii, nașterea epică a lui Winston. Pentru a face acest lucru, putem defini o funcție mouseClicked care va fi apelată ori de câte ori utilizatorul face clic pe mouse și putem introduce codul pentru a desena a doua scenă acolo. Rețineți că trebuie să apelăm background () înainte de a desena a doua scenă; altfel vom vedea ambele scene una peste alta:

mouseClicked = function() {

    // Scene 2

    background(173, 239, 255);

    fill(7, 14, 145);

    textSize(25);

    text(„Lil Winston is born!”, 10, 100);

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

};

Acum vreau să încercați să editați codul pentru a doua scenă, cum ar fi schimbarea textului sau plasarea imaginii. Observați că de fiecare dată când doriți să vedeți rezultatele codului modificat, trebuie să faceți clic pentru a vedea a doua scenă?

Personal, mi se pare enervant, deoarece înseamnă că durează atât de mult până când editez scena 2 pentru a fi exact cum îmi place. Imaginați-vă dacă am avea 10 scene și am dori să edităm scena 10 – ar trebui să facem clic de 10 ori pentru fiecare modificare. Da!

Deci, să rezolvăm această problemă. Da, tu și cu mine putem supraviețui cu supărare, dar vrem cu toții să fim programatori mai productivi și nu vom fi mai productivi dacă putem vedea rezultatele codării noastre în timp real? În acest caz, un lucru ușor de făcut este să înfășurați tot codul de scenă 2 într-o funcție, să apelați acea funcție de la mouseClicked și apoi să apelați acea funcție când depanăm. Iată ce vreau să spun:

var drawScene2 = function() {

    background(173, 239, 255);

    fill(7, 14, 145);

    textSize(25);

    text(„Lil Winston is born!”, 10, 100);

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

};

mouseClicked = function() {

    drawScene2();

};

// Scene 1

background(235, 247, 255);

fill(0, 85, 255);

textSize(25);

text(„The Story of Winston”, 10, 200);

drawScene2();

Atâta timp cât am transformat scena 2 într-o funcție, la fel de bine putem transforma scena 1 într-o funcție, înfășurând tot codul și apelându-l.

var drawScene1 = function() {

    background(235, 247, 255);

    fill(0, 85, 255);

    textSize(25);

    text(„The Story of Winston”, 10, 200);

};

Acum, încercați programul de mai jos. De data aceasta, dacă doriți să faceți modificări la scena 2, puteți pur și simplu să comentați apelul drawScene2 () și să vedeți modificările efectuate imediat.

Cod complet:

var drawScene1 = function() {

    // Scene 1

    background(235, 247, 255);

    fill(0, 85, 255);

    textSize(39);

    text(„The Story of Winston”, 10, height/2);

};

var drawScene2 = function() {

    background(173, 239, 255);

    fill(7, 14, 145);

    text(„Lil Winston is born!”, 10, 100);

    image(getImage(„creatures/BabyWinston”), width/2, height/2);

};

mouseClicked = function() {

    drawScene2();

};

drawScene1();

//drawScene2();

Super, așa că avem o scenă principală și o a doua scenă. Ce se întâmplă dacă vrem să afișăm o a treia scenă? Sau să ne întoarcem la prima scenă odată ce facem clic pe a treia? Trebuie să schimbăm logica interioară a mouseClicked, astfel încât să aleagă condiționat care dintre scene să se afișeze, în loc să apelăm întotdeauna scena 2. Asta înseamnă că avem nevoie de o instrucțiune if care va verifica un fel de condiție.

Se pare că trebuie să ținem evidența „scenei actuale” și ar avea cel mai mult sens să o stocăm ca număr. Să declarăm o variabilă globală currentScene și să o verificăm în mouseClicked.

var currentScene;

mouseClicked = function() {

    if (currentScene === 1) {

        drawScene2();

    } else if (currentScene === 2) {

        drawScene3();

    } else if (currentScene === 3) {

        drawScene1();

    }

};

Condițiile arată ca pseudo-codul nostru, dar există o problemă: nu setăm niciodată curentScene la o valoare, deci aceste condiții nu vor fi niciodată adevărate. Am putea să o setăm în condițiile if, dar probabil că este mai bine să o setăm în interiorul funcțiilor de desenare a scenei, astfel încât variabila să fie setată corect, indiferent de unde numim funcții de desenare a scenei.

var drawScene1 = function() {

    currentScene = 1;

    …

};

var drawScene2 = function() {

    currentScene = 2;

    …

};

var drawScene3 = function() {

    currentScene = 3;

    …

};

Am pus totul împreună în programul de mai jos. Faceți clic pe el și vedeți cum se deplasează până la începutul poveștii. Încercați să adăugați o scenă patru (întâlnirea lui Winston cu Oh Noes? Întâlnirea lui Winston cu Winstonia și mutarea la Winstonsin?):

https://www.khanacademy.org/computer-programming/scene-01/5027056436854784