Animation and Game Development kurs

Kurs obrađuje problematiku kreiranja igara u web pregledaču pomoću JavaScripta. Polazniku obezbeđuje osvrt na fundamentalne grane JavaScripta, neophodne za kontrolu vremenske linije, i animaciju, poput DOM metoda i događaja, kao i funkcija za rad sa vremenom i komunikacije sa serverom za potrebe toka igre kroz tehnologiju WebSocketa. 

Deo kursa posvećen je HTML elementu canvas i različitim načinima njegove upotrebe. Od jednostavnog 2D crtanja do moćnog WebGL endžina i popularnog frameworka za njegovu upotrebu Three.js-a.

Kursom je obuhvaćeno i proučavanje nekih od najpoznatijih gotovih rešenja za kreiranje igara u JavaScriptu. JavaScript je, uz canvas HTML element, postao neprikosnoveno oruđe za realizaciju igara i kompleksne grafike unutar web pregledača. U ovom kursu canvas je detaljno obrađen. U kontekstu 2D crtanja objašnjeni su koncepti crtanja oblika na canvas elementu, izmene aktuelne boje, transformacija na canvasu, kao i animiranja njegovih delova. Polaznik se upoznaje sa postavljanjem slika na canvas, kao i na korišćenje sprite sheetova i atlasa. Osim 2D konteksta, predstavlja se i upotreba canvas elementa sa 3D kontekstom.

U drugom delu kursa predstavljaju se alati i biblioteke za kreiranje grafičkih aplikacija različitih namena. Adobe Animate CC, višenamenski program za kreiranje multimedijalnih aplikacija, sa mogućnošću izvoza u HTML/CSS, ima odličan grafički interfejs i pogodan je kako za dizajnere koji ne žele da ulaze preduboko u problematiku JavaScripta, tako i za iskusne developere. 

CreateJS je JavaScript okvir koji izlaže osnovne alate za rad sa canvas grafikom, ostavljajući developeru prostor za fokusiranje na ključne tačke aplikacije. Sličan je i okvir Phaser, koji je, za razliku od CreateJS-a, orijentisan isključivo na igračku produkciju, zbog čega su u njemu već integrisana različita rešenja koja olakšavaju proizvodnju igara, poput fizike, glavne petlje aplikacije, animacija i slično.

Zanima vas ovaj kurs? Možete ga pohađati u okviru ovih ITAcademy programa: Frontend JavaScript Program New.

Opis i cilj Animation and Game Development kursa

Cilj kursa je da polaznika pripremi za najzahtevnije zadatke u oblasti JavaScript programiranja. Nakon njegovog kompletiranja polaznik će moći samostalno da kreira i objavljuje igre pomoću JavaScripta, da kreira različite vrste grafičkih aplikacija sa bogatim korisničkim iskustvom, kao i da kontroliše interakciju između aplikacije i servera pomoću WebSocketa.

Ovaj kurs, kao i sve ostale kurseve na ITAcademy, možete pohađati čak iako nemate predznanja iz ove oblasti. Pre svega, to vam je omogućeno tako što je kompletno gradivo podeljeno u tematske celine, odnosno module. Ove zasebne celine osmišljene su tako da olakšavaju usvajanje novih znanja i polaznike postepeno pripremaju za predstojeća predavanja. 

Prva tematska celina baviće se radom sa grafikama. U okviru ovog modula polaznici će se upoznati sa upravljanjem grafike pomoću DOM-a, savladaće rad sa canvas elementima i naučiti kako se koristi WebGL. Takođe, uvodna tematska celina omogućiće im da usvoje veštine za upravljanje multimedijom (audio i video), ali i da se detaljnije upoznaju sa pojmom three.js framework. 

Druga i treća oblast ovog kursa baviće se upravljanjem vremenom pomoću tajming funkcije, kao i povezivanjem sa serverom. U okviru predavanja na ovim modulima polaznicima će biti približeni pojmovi kao što su setTimeout, setInterval, requestAnimationFrame, Node.js i WebSocket. 

Interakcija sa korisnikom naziv je narednog modula, tokom koga polaznike očekuju predavanja na kojima će raditi na upravljanju funkcijama miša, odnosno upravljanju događajima tastature. 

Druga polovina kursa donosi tematske celine na kojima ćete usvajati nešto kompleksnija znanja. Prvi među takvim modulima je onaj koji se bavi radom sa bibliotekama Create.js. Na ovim predavanjima naučićete da kreirate scene, postavljate osnovne oblike na scenu i uređujete interakciju sa korisnikom. Nakon toga sledi deo kursa na kome ćete izučavati softver Adobe Animate CC, dok vas na kraju očekuje jedna od najzanimljivijih tematskih celina, na kojoj ćete učiti da kreirate igre pomoću phaser frameworka. 

1. Da li se pomoću JavaScripta mogu praviti igre za web pregledač?

Isprva, web pregledač nije bio u stanju da interpretira JavaScript dovoljno brzo da bi se pomoću njega mogle startovati igre. Naročito ne igre visokih grafičkih performansi.

Danas je situacija drugačija. Računari su bolji i brži, web pregledači takođe. Pa su tako i kapaciteti JavaScripta porasli. 

Revolucionarna verzija HTML-a (5) otvorila je vrata mnogim inovacijama koje su pretvorile pregledač u moćnu mašinu, a JavaScript u njen „mozak”. Uvedena je podrška za 3D grafiku, kroz tehnologiju WebGL, podrška za brzu dvosmernu komunikaciju sa serverom, kroz tehnologiju WebSocket, omogućena je reprodukcija audio i video sadržaja i slično.

Zbog svega toga, ne samo da je pomoću JavaScripta moguće praviti igre za web pregledač već je ovaj jezik preuzeo i udeo nekih drugih tehnologija u ovoj oblasti. 

Danas su JavaScript igre veoma zastupljene, i njihov broj i kvalitet neprestano rastu.

2. Šta je to Adobe Animate?

Program Macromedia/Adobe Flash imao je dugogodišnju dominaciju u sferi bogatih klijentskih web aplikacija. Ovaj program imao je odličan i prilagodljiv interfejs, koji je omogućavao različitim profilima kreiranje interaktivnih multimedijalnih web aplikacija. Dizajneri su mogli lako napraviti aplikaciju pomoću odličnog grafičkog interfejsa, a programeri da programiraju u jeziku ActionScript. Rezultati ostvarivani pomoću ovog programa bili su odlični i unikatni. 

Vremenom, Flash je počeo da gubi dominaciju na tržištu u korist JavaScripta. Pre svega zato što web pregledač nije bio u stanju da bez posebnog dodatka emituje programe napravljene u Flashu, ali i zbog slabije podrške na pregledačima za mobilne uređaje.

2015. godine program Flash je restrukturiran i obogaćen opcijom izvoza u HTML-u (JavaScript), što ga je ponovo učinilo konkurentnim. Takođe je izmenjeno i ime aplikacije u Adobe Animate pod kojim ga danas poznajemo i proučavamo.

3. Kako se objekti u programu kreću?

U velikom broju slučajeva igre sadrže dosta animiranih elemenata. Ovi elementi se kreću, uzajamno interaguju, stvaraju se i nestaju. Za njihovo kretanje odgovorni su vreme i prostor. Ako u nekom vremenskom intervalu pomerimo nešto u više koraka, ono će biti animirano. JavaScript ima podršku za rad sa vremenom. Postoje različite funkcionalnosti pomoću kojih možemo da kažemo programu da sačeka neko vreme pre nego što nešto uradi. Što je vreme čekanja manje, kretanje je prirodnije.

Ponekad se pravi iluzija kretanja tako što se slike sa različitim pozama nekog karaktera brzo smenjuju. Ovakva vrsta animacije se naziva sprajt animacija i vrlo je česta u dvodimenzionalnoj grafici, naročito u igrama.

Polaznici kursa Animation and Game Development

4. Čemu sve služe slike u jednoj igri?

Jedan od najbitnijih faktora u računarskim igrama je grafika. Ona često ima veliki uticaj na igrivost i korisničko iskustvo. Slike, kao jedan od elemenata u grafici igara, pojavljuju se u različitim ulogama. Na primer, u ulozi pozadine za neke scene ili menija. Takođe, pomoću slika se simulira kretanje tako što se različite slike sa različitim pozama smenjuju u kratkim vremenskim intervalima (sprajtovi). Slike se koriste i za oblaganje 3D objekata (teksture).

5. Koja je razlika između 2D i 3D grafike?

Jedna od podela u računarskoj grafici je na dvodimenzionalnu i trodimenzionalnu grafiku. Ova podela se generalno odnosi na pristup koji ćemo upotrebiti prilikom crtanja, dok je konačan rezultat svakako dvodimenzionalan, s obzirom na to da je dvodimenzionalan i sam ekran računara. 

Kod 2D grafike prostor za crtanje se posmatra kao platno za crtanje, po kome iscrtavamo i bojimo različite oblike ili iscrtavamo slike. Ovaj koncept je jednostavan, jer se odvija samo u dve dimenzije, ali, s obzirom na to da je obično praćen rasterizovanim slikama, teži je za modifikaciju. Kod 3D grafike nema jasno definisanog prostora za crtanje, već se ono obavlja kroz nekoliko koraka. Prvo se pomoću poligona definišu trodimenzionalni objekti u neograničenom 3D prostoru, zatim se poligoni oblepljuju slikama, da bi konačno u procesu projekcije bili pretvoreni u 2D sliku na ekranu. 3D grafika je inicijalno komplikovanija za postavku od 2D grafike, ali sa druge strane, jednom definisani 3D elementi pogodni su za kasniju manipulaciju. JavaScript ima podršku za 2D i 3D grafiku kroz različite kontekst HTML elementa canvas i tehnologiju WebGL.

6. Šta su Create.js i Phaser?

Za pravljenje igre u web pregledaču potrebno je dosta koraka. Ove korake treba da poznaje svako ko želi da pravi igre, ali ne mora neminovno i da ih pređe s ciljem kreiranja sopstvenog proizvoda. Često se osnovni koraci (sistem za grafiku, animaciju, kontrolu i slično) prepuštaju nekom gotovom proizvodu (nekoj biblioteci koja odgovara potrebama). Dve biblioteke koje su se dobro pokazale u kontekstu JavaScript igara su Crate.js i Phaser. Create.js je generička platforma, koja se sastoji od četiri različita zasebna, ali uzajamno kompatibilna proizvoda (biblioteka za grafiku, animaciju, zvuk i preloading). Koristi se za kreiranje igara, ali i drugih proizvoda koji zahtevaju 2D grafiku visokih performansi unutar web pregledača.

Phaser je platforma okrenuta kreiranju JavaScript/HTML igara za web pregledač. Za razliku od create.js, specijalizovana je baš za igre, pa programer ne mora puno da se bavi detaljima da bi došao do inicijalnog rezultata.

7. Da li je, i koliko teško, napraviti igru?

Pravljenje računarskih igara je komplikovano. Postoji puno faktora o kojima treba voditi računa. Performanse, memorija, korisničko iskustvo, grafika i slično. 

U tom smislu, kreiranje igara jeste teško. Čak i pomoću toliko jednostavnih platformi kakve su JavaScript i HTML. 

Ali u praksi nije tako. Dosta problema na različitim nivoima je već rešeno kada je u pitanju JavaScript. To je jezik sa ogromnim brojem frameworka i biblioteka i postoje rešenja za gotovo sve generičke probleme. Pa za sve što ne možemo da rešimo možemo uvek da se poslužimo gotovim rešenjem. Uz različita pomagala koja su trenutno na raspolaganju, developer se lako može fokusirati na suštinske probleme u kreiranju aplikacije/igre. 

Plan i program predavanja:

1. Rad sa grafikom

  • Upravljanje grafikom pomoću DOM-a
  • Rad sa canvas elementom
  • Upotreba WebGL-a
  • Upravljanje multimedijom (audio i video)
  • Three.js framework

2. Upravljanje vremenom pomoću timing funkcija

  • setTimeout
  • setInterval
  • requestAnimationFrame

3. Povezivanje sa serverom

  • Node.js
  • Upotreba WebSocketa

4. Interakcija sa korisnikom

  • Upravljanje funkcijama miša 
  • Upravljanje događajima tastature

5. Rad sa bibliotekom Create.js

  • Uvod u create.js i inicijalizacija aplikacije
  • Kreiranje scene
  • Postavljanje osnovnih oblika na scenu, bounding boxovi
  • Rad sa sprajtovima (atlasi, sprite sheetovi, animacija sprajtova)
  • Interakcija sa korisnikom (kontrola tastature i miša)
  • Rad sa bibliotekom Box2D

6. Adobe Animate CC

  • Uvod i upoznavanje sa okruženjem
  • Scena, simboli i vremenska linija
  • Animacija, ključni frejmovi i tweenovi
  • Izvoz aplikacije

7. Kreiranje igara pomoću phaser frameworka

  • Uvod u phaser i kreiranje i konfigurisanje phaser projekta
  • Kreiranje objekta igre, priprema i učitavanje resursa
  • Animacija i korisnički ulaz
  • Interakcija između objekata, fizika i rad sa česticama

3 načina da dobijete odlično plaćen posao

Spremili smo dokument koji otkriva tri pouzdana načina za dolazak na dobro plaćenu poziciju za stručan rad sa računarima. Preuzmite izveštaj ovde.

Da li ima mesta? Upisni rok je otvoren!

Da saznate sve o upisu, kliknite ovde