M9 | L2 – Scene II

Astăzi vom afla despre:

  • Scene animate

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Povestea unui personaj

Exemplu: https://www.khanacademy.org/computer-programming/scene-02/5948728769724416

Scene animate

Am văzut cum să realizăm mai multe scene simple – dar scenele noastre au fost ceea ce numim „statice” – nu au fost animate și nici nu au avut niciun răspuns la interacțiunea cu utilizatorul. După cum vom vedea, necesită ceva mai multă finețe pentru a face față scenelor mai îndrăgite. Dar hei, să ne facem fantezie!

Să vorbim mai întâi despre animație. Ce se întâmplă dacă am vrea să-l arătăm pe Winston în faza sa de rock star, care tocmai bate în ritm? În mod normal, vom face acest lucru definind funcția de desen pentru a conține cod care desenează forme care mișcă ușor poziția fiecărui cadru. Iată un exemplu, în care poziția mâinilor care toacă se bazează pe valoarea curentă a milis (), numărul de milisecunde elapsate:

// Based on original by SPORTSBOSS 314

// https://www.khanacademy.org/cs/drummer/6586586242744320

var draw = function() {

    background(194, 255, 222);

    var x = cos(millis()*1);

    var y = cos(millis()+98);

    // face

    image(getImage(„creatures/Winston”),x+177, x+101,50, 50);

    // body

    strokeWeight(2);

    line(202, 213, x+203, x+150);

    line(x+220, x*20+266, 202, 213);

    line(x+188, x*2+266, 202, 213);

    line(x+167, x*20+150, 204, 169);

    line(y+164,y*20+148,204, 168);

    // drum set

    strokeWeight(3);

    fill(255, 255, 255);

    ellipse(162, 176, 54, 15);

    line(161, 264, 161, 184);

    line(134, 275, 162, 255);

    line(185, 275,162, 257);

    fill(0, 0, 0);

    ellipse(226, 268, 65, 65);

    fill(255, 255, 255);

    ellipse(226, 268, 60, 60);

};

Ce se întâmplă dacă adăugăm asta ca scenă 4 la exemplul nostru anterior? Vom muta codul într-o funcție drawScene4 () și vom modifica logica noastră 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();

    }

};

Codul:

var currentScene;

var drawScene1 = function() {

    currentScene = 1;

    background(235, 247, 255);

    fill(0, 85, 255);

    textSize(39);

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

};

var drawScene2 = function() {

    currentScene = 2;

    background(173, 239, 255);

    fill(7, 14, 145);

    textSize(39);

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

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

};

var drawScene3 = function() {

    currentScene = 3;

    background(173, 239, 255);

    fill(7, 14, 145);

    textSize(39);

    text(„Winston grows up!”, 10, 100);

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

};

var drawScene4 = function() {

    currentScene = 4;

    // Based on https://www.khanacademy.org/cs/drums/6586586242744320

    background(194, 255, 222);

    var x = cos(millis()*1);

    var y = cos(millis()+98);

    // face

    image(getImage(„creatures/Winston”),x+177, x+101,50, 50);

    // body

    strokeWeight(2);

    line(202, 213, x+203, x+150);

    line(x+220, x*20+266, 202, 213);

    line(x+188, x*2+266, 202, 213);

    line(x+167, x*20+150, 204, 169);

    line(y+164,y*20+148,204, 168);

    // drum set

    strokeWeight(3);

    fill(255, 255, 255);

    ellipse(162, 176, 54, 15);

    line(161, 264, 161, 184);

    line(134, 275, 162, 255);

    line(185, 275,162, 257);

    fill(0, 0, 0);

    ellipse(226, 268, 65, 65);

    fill(255, 255, 255);

    ellipse(226, 268, 60, 60);

};

mouseClicked = function() {

    if (currentScene === 1) {

        drawScene2();

    } else if (currentScene === 2) {

        drawScene3();

    } else if (currentScene === 3) {

        drawScene4();

    } else if (currentScene === 4) {

        drawScene1();

    }

};

drawScene1();

Observi ceva? A funcționat, dar doar un fel. L-am putut vedea pe Winston cu toba lui, dar toiagurile nu se mișcau. Ce trist! Este greu să faci muzică când ești înghețat în timp. Poate că ați prins deja problema: nu mai apelăm codul de desen pentru bețișoare din interiorul draw (), deci este apelat o singură dată – nu în mod repetat – și astfel redăm doar bețele momentan în timp la care este chemat pentru prima dată. Poate că ați ghicit deja soluția: definiți o funcție draw () și apelați drawScene4 () când este cazul.

draw = function() {

    if (currentScene === 4) {

        drawScene4();

    }

};

Să ne gândim puțin la asta: ori de câte ori definim o funcție draw () în codul nostru, va fi apelată în mod repetat (implicit la 60 FPS) și ori de câte ori este apelată, când scena curentă a fost deja setată la 4, apoi va apela funcția pentru a desena scena 4. Când este orice altă valoare, nu va încerca să deseneze nimic – păstrând tot ceea ce era deja pe ecran. Mai trebuie să facem desenul de scenă inițial în mouseClicked, această logică se ocupă doar de animarea fiecărui cadru după.

Unii dintre voi s-ar putea gândi: de ce nu avem doar o logică care numește fiecare funcție de desenare a scenei în interiorul draw ()? Ei bine, cu siguranță ai putea, și asta ar însemna că dacă ai adăuga animație la celelalte scene, atunci ar funcționa imediat. Dar presupunând că nu vă animați celelalte scene, asta înseamnă că faceți computerul să redeseneze aceste scene în mod repetat, fără niciun motiv. Din punct de vedere al performanței, nu este bine. Dacă știm că putem salva cu ușurință computerul lucrări inutile, ar trebui. Acesta va face programele noastre mai rapide și utilizatorii mai fericiți.