Animation and Game Development kurs

Kurs Animation and Game Development bavi se pristupima za kreiranje animacije i video- igara koje se izvršavaju unutar web pregledača. U kursu se podjednaka pažnja posvećuje animaciji elemenata korisničkog okruženja i animaciji karaktera unutar video-igara.

Opis i cilj Animation and Game Development kursa

Kurs Animation and Game Development započinje različitim pristupima za kreiranje animacije korišćenjem jezika CSS. Polaznici imaju prilike da se upoznaju sa efikasnim tehnikama za kreiranje CSS animacije, kojom se oplemenjuje korisničko okruženje sajtova i time podiže opšti korisnički ugođaj prilikom njihovog korišćenja.

Drugi deo kursa Animation and Game Development posvećen je upoznavanju jednog Web API-ja koji se zove Canvas API. Različite tehnike za crtanje grafike korišćenjem takvog skupa funkcionalnosti polaznicima pomažu da kreiraju grafiku koja se može animirati upotrebom jezika JavaScript. 

Treća celina kursa Animation and Game Development ilustruje kompletan proces kreiranja jedne realne igre koja se izvršava unutar web pregledača, i to korišćenjem izvornog skupa funkcionalnosti – JavaScript jezika i različitih Web API-ja. Polaznici tako imaju prilike da uvide sve izazove koje donosi kreiranje web igara na najnižem nivou. 

Popularna biblioteka CreateJS tema je četvrte celine kursa. Reč je zapravo o skupu JavaScript biblioteka koje omogućavaju lako kreiranje interaktivnog sadržaja unutar web pregledača korišćenjem osnovnog skupa web tehnologija. Polaznici imaju prilike da korišćenjem ove biblioteke nauče da crtaju i animiraju grafiku unutar canvasa i da efikasno rukuju resursima. 

Poslednja celina kursa Animation and Game Development posvećena je upoznavanju osnova Phaser softverskog okvira. Reč je o veoma moćnom softverskom okviru za razvoj igara koje se izvršavaju unutar web pregledača. Upoznavanje sa Phaserom propraćeno je kreiranjem još jedne realne video-igre.

Cilj kursa jeste osposobljavanje polaznika za samostalno kreiranje animacije korišćenjem CSS i JavaScript jezika. Uvođenje polaznika u svet razvoja igara korišćenjem Vanilla JavaScripta, CreateJS-a i softverskog okvira Phaser. 

Kurs Animation and Game Development će vam odgovoriti na pitanja:

1. Šta je animacija?

Još od najranijih vremena postojanja ljudske civilizacije čovek je nastojao da pojave oko sebe naslika i na taj način ovekoveči.  Sa pojavom prvih slika i crteža, kod čoveka se javila potreba da, pored statičnih, nacrtanih predstava, dočara i magiju pokreta. Upravo takav proces, kojim se stvara iluzija pokreta, naziva se animacija. U svojoj osnovi, animacija uvek podrazumeva brzo smenjivanje sličnih kadrova pred očima posmatrača, čime se dobija privid kretanja.

Tokom vremena ljudi su koristili različite tehnike za postizanje animacije. Najraniji primeri animacije oslanjali su se na percepciju gledaoca u stvaranju iluzije prikaza pokreta. Kako je čovečanstvo napredovalo, javila se ideja o kreiranju mašine koja bi obavljala naizmeničnu promenu slika, čime bi se dobila iluzija kretanja. Prvi uređaj takve vrste bio je fenakistiskop. Današnje, moderne mašine za stvaranje animacije su kompjuteri. Naime, kompjuterska animacija se reprodukuje na monitorima, odnosno displejima, a izvodi je hardver računara kontrolisan od strane softverske logike. Kurs Animation and Game Development posvećen je jednoj vrsti kompjuterske animacije, i to onoj koja se izvršava unutar web pregledača.

2. Kako kreirati animaciju unutar web pregledača?

U svetu modernog web razvoja animacija zauzima veoma važno mesto. Animacija se može koristiti da korisniku na suptilan način ukaže na ono što se događa u pozadini web sajta, te da na taj način podigne opšti korisnički ugođaj. Animacija je posebno korisna kada je potrebno dočarati promenu stanja korisničkog okruženja web sajta ili aplikacije. Pored toga, osnova gotovo svake igre jeste animacija. To su ujedno  i dva osnovna mesta primene animacije na webu. 

Animaciju je na webu moguće ostvariti na različite načine, a sve u zavisnosti od efekta koji je potrebno postići. Animacija se unutar web aplikacija može kreirati korišćenjem dva jezika, pa se tako može reći da postoji: 

• CSS animacija,
• JavaScript animacija. 

Oba tipa animacije detaljno su obrađena u kursu Animation and Game Development, pa tako polaznici imaju prilike da se upoznaju sa različitim izvornim pristupima za kreiranje animacije, ali i sa pristupima koji podrazumevaju upotrebu posebnih JavaScript biblioteka: CreateJS i Phaser.

3. Šta su CSS animacije, a šta CSS tranzicije?

Najjednostavniji način za kreiranje animacije unutar web pregledača podrazumeva korišćenje CSS jezika. CSS jezik poseduje dva skupa funkcionalnosti pomoću kojih je moguće definisati animaciju koja će se obaviti nad elementima grafičkog korisničkog okruženja web aplikacija. Takvi skupovi funkcionalnosti slikovito se nazivaju: 

• CSS tranzicije,
• CSS animacije.

Oba CSS sistema za animiranje omogućavaju identično – postepenu promenu vizuelnih osobina elemenata tokom određenog vremenskog perioda, čime se stvara privid animacije. Ipak, CSS animations sistem omogućava znatno preciznije kontrolisanje animacije. O takvoj, ali i ostalim osobinama CSS sistema za animiranje polaznici imaju prilike da čitaju u kursu Animation and Game Development. Na realnim primerima ilustrovano je korišćenje oba pomenuta sistema za postizanje CSS animacije.

4. Šta je canvas element i Canvas API?

Prikaz proizvoljne grafike unutar HTML dokumenata može se obaviti korišćenjem jednog posebnog elementa. Reč je o elementu canvas.  canvas element podrazumevano ne poseduje vizuelnu reprezentaciju unutar web pregledača, već se njegov sadržaj dinamički kreira korišćenjem JavaScript jezika i dva skupa funkcionalnosti web pregledača – Canvas API i WebGL

U kursu Animation and Game Development posebna pažnja je posvećena skupu funkcionalnosti objedinjenih unutar Canvas aplikativnog programskog interfejsa.

Canvas API poseduje brojne metode i svojstva koji omogućavaju da se unutar canvas elementa nacrta sopstvena grafika, koja se kreira tokom izvršavanja web aplikacija, ali i grafika koja je unapred pripremljena. Naime, Canvas API omogućava da se unutar canvas elementa crtaju postojeće slike, što je osnova razvoja 2D igara. 

5. Kako se kreiraju web igre?

Video-igre su jedan od najpristupačnijih proizvoda softverske industrije. Zbog svoje jednostavnosti i velikog broja različitih oblika u kojima postoje, igre su pronašle put do miliona korisnika različitog uzrasta, pola, društvenog položaja, ali i digitalne pismenosti. Devedesete godine prošlog veka su  vreme kada nastaje World Wide Web, a zajedno sa njim i ideja o igranju igara unutar web pregledača. Od tada pa do danas, web igre su prešle veliki put od tehnologija kao što su Java Applets i Flash, pa do modernih pristupa, koji podrazumevaju korišćenje izvornih web tehnologija. 

Moderan razvoj igara za web pregledače podrazumeva korišćenje skupa tehnologija koje su sastavni deo web pregledača. To praktično znači da svi neophodni elementi za izvršavanje i prikaz igara postoje unutar samih web pregledača. Prilikom razvoja modernih web igara koriste se canvas HTML element, JavaScript jezik i različiti skupovi funkcionalnosti web pregledača. Takve funkcionalnosti je moguće koristiti direktno ili posredstvom neke biblioteke koja olakšava razvoj. U kursu  Animation and Game Development obrađuju se oba pomenuta pristupa.

6. Šta je CreateJS?

CreateJS je skup JavaScript biblioteka koje omogućavaju lako kreiranje interaktivnog sadržaja unutar web pregledača korišćenjem osnovnog skupa web tehnologija.

• CreateJS je sačinjen iz sledećih, potpuno nezavisnih JavaScript biblioteka:
• EaselJS – olakšava rada sa canvas elementom,
• TweenJS – omogućava lako kreiranje animacija uticanjem na vrednosti HTML atributa i JavaScript svojstava,
• SoundJS – olakšava rad sa zvukom,
• PreloadJS – omogućava lak rad sa resursima kao što su slike, vektori i zvučni efekti. 

Svaka biblioteka koja je sastavni deo CreateJS-a u potpunosti je nezavisna, što znači da je njih moguće koristiti i kombinovati po sopstvenom nahođenju. U kursu Animation and Game Development obrađuju se sve upravo navedene biblioteke koje su sastavni deo CreateJS-a.

7. Šta je Phaser?

Phaser je softverski okvir za razvoj igara koje se izvršavaju unutar canvas elementa web pregledača. Reč je o potpuno besplatnom softverskom okviru, otvorenog koda, koji je moguće koristiti za ličnu ili komercijalnu upotrebu, bez ikakvih naknada. Phaser je namenjen za razvoj 2D igara, a kreirala ga je kompanija Photon Storm. Sastavni delovi Phasera su razni sistemi koji su neizostavni deo procesa razvoja web igara: 

• sistem za učitavanje resursa,
• tri sistema fizike, čime se u igre može dodati logika koja simulira ponašanje objekata u prirodi,
• sistem za rad sa spritesheetovima,
• sistem za rad sa česticama koji olakšava kreiranje efekata kao što su eksplozija, kiša ili vatra,
• Phaser Pointer sistem za obradu korisničke interakcije,
• sistem za rad sa zvukom.

Sa Phaser softverskim okvirom u kursu Animation and Game Development polaznici imaju prilike da se upoznaju na primeru kreiranje jedne realne igre.

Plan i program predavanja:

Modul 1: Uvod u web animaciju

• Uvod
• CSS tranzicija i animacija
• Osnove JavaScript animacije

Modul 2: Canvas API

• Uvod u korišćenje Canvas API-ja
• Crtanje geometrijskih oblika
• Stilizovanje geometrijskih oblika
• Crtanje teksta i slika
• Transformacija i animacija 

Modul 3: Jump & Run

• Uvod, projektna struktura i crtanje prve grafike
• Glavna petlja i pozadina igre
• Glavni junak i protivnici, obrada korisničke interakcije

Modul 4: CreateJS

• CreateJS – crtanje, stilizovanje i obrada korisničke interakcije
• CreateJS – animacija i rad sa resursima

Modul 5: Phaser

• Phaser – integracija, resursi, crtanje i fizika
• Phaser – animacija, obrada korisničke interakcije, kolizija