Cursul Animation and Game Development

Cursul Animation and Game Development se ocupă cu crearea de animații și jocuri video care rulează într-un browser web. Cursul acordă o atenție egală animației elementelor din mediul de utilizator și animației caracterelor/personajelor din jocurile video.

Descrierea și scopul cursului Animation and Game Development

Cursul Animation and Game Development începe cu diferite abordări de creare a animației folosind limbajul CSS. Cursanții se vor familiariza cu tehnici eficiente de creare a animației CSS, care îmbunătățesc mediul de utilizator al site-urilor și, astfel, crește atmosfera generală de utilizator atunci când sunt folosite.

Al doilea modul al cursului Animation and Game Development se ocupă cu prezentarea unui Web API, numit Canvas API. Diferite tehnici de desenare a graficii folosind un astfel de set de funcționalități îi ajută pe cursanți să creeze o grafică care poate fi animată folosind limbajul JavaScript.

Al treilea modul al cursului Animation and Game Development ilustrează procesul complet de creare a unui joc real care rulează în interiorul unui browser web folosind setul original de funcționalități – limbajul JavaScript și diferite Web API-uri. Astfel, cursanții au posibilitatea de a vedea toate provocările care vin odată cu crearea jocurilor web la cel mai de jos nivel.

Biblioteca populară CreateJS este tema modului patru din curs. De fapt, este vorba despre un set de biblioteci JavaScript care vă permit să creați cu ușurință conținut interactiv într-un browser web folosind un set de bază de tehnologii web. Cursanții au posibilitatea de a folosi această bibliotecă pentru a învăța cum să deseneze și să anime graficul într-un canvas și să gestioneze resursele într-un mod eficient.

Ultimul modul al cursului Animation and Game Development este dedicat familiarizării cu bazele cadrului software Phaser. Este vorba despre un cadru software foarte puternic pentru dezvoltarea jocurilor care rulează într-un browser web. Familiarizarea cu Phaser este însoțită și de crearea unui alt joc video real.

Scopul cursului este de a le permite cursanților să creeze în mod independent animații folosind limbajele CSS și JavaScript. Introducerea cursanților în lumea dezvoltării jocurilor folosind Vanilla JavaScript, CreateJS și cadrul software Phaser.

Cursul Animation and Game Development vă va răspunde la următoarele întrebări:

1. Ce este o animație?

Încă din cele mai vechi timpuri ale existenței civilizației umane, omul a încercat să imortalizeze aparițiile din jurul său făcându-le astfel eterne. Odată cu apariția primelor picturi și desene, la om a apărut nevoia ca, pe lângă spectacolele statice, desenate, să evoce și magia mișcării. Tocmai acest proces, care creează iluzia mișcării, se numește animație. În esență, animația implică întotdeauna schimbarea rapidă a cadrelor similare în fața ochilor spectatorilor, obținându-se astfel aspectul de mișcare.

De-a lungul timpului, oamenii au folosit diferite tehnici pentru a realiza o animație. Cele mai timpurii exemple de animație s-au bazat pe percepția privitorului în crearea iluziei de mișcare. Pe măsură ce umanitatea a progresat, a apărut ideea de a crea o mașină care să schimbe alternativ imaginile, creând iluzia mișcării. Primul dispozitiv de acest gen a fost fenakistoscopul. În prezent, mașinile moderne de animație sunt calculatoarele. Și anume, animația computerizată este reprodusă pe monitoare, adică pe display-uri, iar hardware-ul calculatorului este controlat de logica software. Cursul Animation and Game Development este dedicat unui tip de animație pe calculator, care se realizează într-un browser web.

2. Cum se creează o animație într-un browser web?

În lumea dezvoltării web moderne, animația ocupă un loc foarte important. Animația poate fi folosită pentru a-i indica subtil utilizatorului ceea ce se întâmplă în fundalul site-ului web și, în felul acesta, crește atmosfera generală a utilizatorului. Animația este utilă în special atunci când trebuie să se prezinte o schimbare a stării mediului de utilizator al unui site web sau al unei aplicații. Pe lângă asta, baza aproape fiecărui joc este animația. Acestea sunt, de asemenea, cele două locuri principale pentru a aplica animația pe web.

Animația poate fi realizată pe web în diferite moduri, totul în funcție de efectul care trebuie obținut. Animația în cadrul aplicațiilor web poate fi creată folosind două limbaje, așadar, se poate spune că există:

• animație CSS,
• animație JavaScript.

Ambele tipuri de animație sunt acoperite în detaliu în cadrul cursului Animation and Game Development, astfel încât cursanții au posibilitatea de a se familiariza cu diferite abordări originale ale creării animației, dar și cu abordări care presupun utilizarea unor biblioteci speciale JavaScript: CreateJS și Phaser.

3. Ce sunt animațiile CSS, dar tranzacțiile CSS?

Cel mai simplu mod de a crea o animație într-un browser web este folosirea limbajului CSS. Limbajul CSS are două seturi de funcționalități cu care se poate defini animația care va fi realizată pe elementele mediului grafic de utilizator al aplicațiilor web. Astfel de seturi de funcționalități sunt denumite ilustrativ:

• CSS tranzicije,
• CSS animacije.

Ambele sisteme de animație CSS permit schimbarea identică – treptată a proprietăților vizuale ale elementelor într-o anumită perioadă de timp, ceea ce creează iluzia de animație. Cu toate acestea, sistemul de animații CSS permite un control mult mai precis al animației.Cursanții au posibilitatea să citească despre această caracteristică, dar și altele ale sistemului de animație CSS în cadrul cursului Animation and Game Development. Utilizarea ambelor sisteme menționate pentru a realiza animația CSS este ilustrată pe exemple reale.

4. Ce este un element canvas și Canvas API?

Prezentarea graficelor arbitrare în documentele HTML se poate face folosind un element special. Este vorba despre elementul canvas. În mod implicit, elementul canvas nu are o reprezentare vizuală în browserul web, ci conținutul său este creat dinamic folosind limbajul JavaScript și două seturi de funcționalități ale browserului web – Canvas API și WebGL.

Cursul Animation and Game Development acordă o atenție deosebită setului de funcționalități din cadrul interfeței de programare a aplicației Canvas.

Canvas API are o mulțime de metode și caracteristici care permit desenarea propriei grafici în elementul canvas, care este creat în timpul execuției aplicațiilor web, dar și grafica care a fost pregătită în avans. Și anume, Canvas API permite desenarea imaginilor existente în elementul canvas, care stă la baza dezvoltării jocurilor 2D.

5. Cum se creează jocurile web?

Jocurile video sunt unul dintre cele mai accesibile produse din industria software. Datorită simplității lor și a numărului mare de forme diferite în care există, jocurile și-au găsit drumul către milioane de utilizatori de diferite vârste, genuri, statut social, dar și alfabetizare digitală. Anii '90 au fost momentul în care a fost creat World Wide Web și, odată cu acesta, ideea de a juca jocuri într-un browser web. De atunci și până în prezent, jocurile web au parcurs un drum lung de la tehnologii precum Java Applets și Flash, la abordări moderne, care implică utilizarea tehnologiilor web native.

Dezvoltarea modernă a jocurilor pentru browsere web implică utilizarea unui set de tehnologii care sunt parte integrantă a browserelor web. Practic, acest lucru înseamnă că toate elementele necesare pentru execuția și afișarea jocurilor există chiar în browserul web. La dezvoltarea jocurilor web moderne se utilizează elementul HTML canvas, limbajul JavaScript și diferite seturi de funcționalități ale browserului web. Astfel de funcționalități pot fi utilizate direct sau printr-o bibliotecă care facilitează dezvoltarea. Cursul Animation and Game Development acoperă ambele abordări.

6. Ce este CreateJS?

CreateJS este un set de biblioteci JavaScript care vă permit să creați cu ușurință conținut interactiv într-un browser web folosind un set de bază de tehnologii web.

CreateJS este alcătuit din următoarele biblioteci JavaScript complet independente:

• EaselJS – facilitează lucrul cu elementul canvas,
• TweenJS – permite crearea ușoară de animații influențând valorile atributelor HTML și ale proprietăților JavaScript,
• SoundJS – facilitează lucrul cu sunetul,
• PreloadJS – permite lucrul ușor cu resurse, precum imagini, vectori și efecte sonore.

Fiecare bibliotecă care face parte din CreateJS este complet independentă, ceea ce înseamnă că pot fi utilizate și combinate după bunul plac. Cursul Animation and Game Development cuprinde toate bibliotecile menționate recent care fac parte din CreateJS.

7. Ce este Phaser?

Phaser este un cadru software pentru dezvoltarea jocurilor care rulează în elementul canvas al unui browser web. Este vorba despre un cadru software open-souce, complet gratuit, care poate fi folosit gratuit pentru uz personal sau comercial. Phaser este folosit pentru dezvoltarea de jocuri 2D și a fost creat de compania Photon Storm. Părțile componente Phaser sunt diverse sisteme care fac parte din procesul de dezvoltare a jocurilor web:

• sistem de încărcare a resurselor,
• trei sisteme de fizică, care pot adăuga logică la jocurile care simulează comportamentul obiectelor din natură,
• sistem pentru lucrul cu spritesheets,
• sistem de particule care facilitează crearea de efecte, precum explozii, ploaie sau incendiu,
• sistem Phaser Pointer pentru editarea interacțiunii utilizatorului,
• sistem audio.

Cursanții au posibilitatea de a se familiariza cu cadrul software Phaser la cursul Animation and Game Development pe exemplul creării unui joc real.

Planul și programa cursului:

Modulul 1: Introducere în animația web 

• Introducere
• Tranziția și animația CSS
• Bazele animației JavaScript

Modulul 2: Canvas API

• Introducere în utilizarea Canvas API
• Desenarea formelor geometrice
• Stilizarea formelor geometrice
• Desenarea textului și a imaginilor
• Transformare și animație

Modulul 3: Jump & Run

• Introducere, structura de proiect și desenarea primei grafici
• Bucla principală și fundalul jocului
• Eroul principal și adversarii, editarea interacțiunii utilizatorului 

Modulul 4: CreateJS

• CreateJS – desenarea, stilizarea și editarea interacțiunii utilizatorului
• CreateJS – animație și lucrul cu resursele

Modulul 5: Phaser

• Phaser – integrare, resurse, desenare și fizică
• Phaser – animație, editarea interacțiunii de utilizator, coliziune