Docstoc

Dokumentacija

Document Sample
Dokumentacija Powered By Docstoc
					ELEKTROTEHNIČKI FAKULTET SARAJEVO




    Edukativna escape igrica
             Opis projektnog zadatka iz
              Multimedijalnih sistema
               Amela Krezić, Marko Pejović, Sead Pavica, Melina Kulenović
Sadržaj


Sadržaj ........................................................................................................................................ 2
1. Sažetak.................................................................................................................................... 4
2. Opis projekta .......................................................................................................................... 5
3. Analiza i dizajn projekta ......................................................................................................... 6
   3.1. Analiza projekta ............................................................................................................... 6
   3.2. Dizajn projekta ................................................................................................................ 6
   3.3.Arhitektura ....................................................................................................................... 7
4. Korištene tehnologije ............................................................................................................. 8
   4.1. Adobe Flash ..................................................................................................................... 8
   4.2. Adobe Illustrator ............................................................................................................. 8
   4.3. Autodesk 3ds Max ........................................................................................................... 8
   4.4. Adobe Photoshop ............................................................................................................ 8
5. Tok razvoja igrice .................................................................................................................... 9
   5.1. Scenario igrice ................................................................................................................. 9
   5.2. Story-board igrice .......................................................................................................... 11
   5.3. Modeliranje scene i objekata igrice .............................................................................. 16
   5.4. Obrada slika u Adobe Photoshop programskom paketu .............................................. 19
   5.5. Kreiranje animacija ........................................................................................................ 19
   5.6. Pisanje koda................................................................................................................... 19
       Varijable............................................................................................................................ 19
       Funkcije............................................................................................................................. 20
       Pocetak ............................................................................................................................. 20
       Ucionica ............................................................................................................................ 20
       Tabla ................................................................................................................................. 21
       Varijable............................................................................................................................ 21
       Nema mobitel ................................................................................................................... 22
       Sto..................................................................................................................................... 22
       Login ................................................................................................................................. 23
       Ucionica iza ....................................................................................................................... 24
       Napajanje ......................................................................................................................... 24
       Postrojenje ....................................................................................................................... 27
       Uspjesan login .................................................................................................................. 28
       Obavjestenje..................................................................................................................... 29
7. Projektni plan i organizacija rada u tima .............................................................................. 30
8. Zaključak ............................................................................................................................... 31
1. Sažetak
Elektrotehnčki fakultet Sarajevo u sklopu kursa multimedijalni sistemi predviđa da studenti u
okviru tima razviju projekt na temu iz dotične oblasti. Naš tim je odlučio kao sadržaj datog
projekta izabrati kreiranje jednostavnije edukativne igrice koncipirane kao igrica bijega.

Ovaj dokument pretstavlja projektnu dokumentaciju koja je nastala pri razvoju igrice „Bijeg iz
laboratorije“. Cilj ovog dokumenta je da prikaže osnovne karakteristike igrice i da uvid u
nastajanje ovakve iste, odnosno predstavi alate i znanje koji su bili neophodni za njen razvoj.
2. Opis projekta
Cilj projekta je napraviti edukativnu igricu prema konceptu escape igrice. Kreiranjem ovakve
igrice imamo mogućnost da implementiramo neke od osnovnih koncepata multimedijalnih
sistema, te da učenje učinimo zanimljivijim.

Escape igre (igre bijega) su vrsta avanturističkih igrica, obično dizajnirane kao web igrice, na
Adobe Flash platformi, te koriste point-and-click (ili point-and-drag) stil igranja. Cilj igre je
pobjeći iz misteriozne sobe. Soba se obično sastoji od zaključanih vrata, više objekata koji se
mogu manipulirati kao i skrivenim tragovima. Pravilnom kombinacijom objekata i
interakcijom sa okolinom, igrač mora pronaći način da otključa vrata i pobjegne iz sobe.

Razlog zbog kojeg smo izabrali escape implementaciju edukativne igre je što nam omogućava
iskorištavanje znanja iz više oblasti, stečenog u toku obrazovanja na Elektrotehničkom
fakultetu, koje ćemo primijeniti u kreiranju interesantnih zadataka.

Za kreiranje igrice koristićemo Flash, a za kreiranje pojedinih objekata ćemo se koristiti
skupom alata (Illustrator, Photoshop i 3DS Max) s ciljem kreiranja vizualno privlačne igre.
Planirano je kreiranje više zadataka, povezanih u cjeline, čijim se rješavanjem postiže cilj igre.
Ovi zadaci su takve prirode da je za njihovo rješavanje potrebno primjeniti znanje stečeno na
kursevima slušanih na elektrotehničkom fakultetu, pretežno na smjeru računarstvo i
informatika.
3. Analiza i dizajn projekta
3.1. Analiza projekta
Igra je zamišljena kao web bazirana, single player 2D 'click and point' avantura. Korisniku je
omogućeno kretanje u 2D okruženju i interakcija s objektima. U zamišljenoj igrici, korisnik
analizira okruženje iz prvog lica. Prema ideji, okruženje je virtualna reprezentacija neke od
sala našeg fakulteta. Unutar okruženja se nalaze objekti, od kojih su neki dio interijera i ne
služe unaprjeđenju rješavanja zadatka. Drugi objekti su interaktivni, i svaki od njih ima važnu
ulogu pri rješavanju neke zagonetke i tako utiču na krajnji ishod igre. Treba napomenuti da
interakcija sa objektima nema određeni red izvršavanja, te se rješavanju cjelina zadataka
može pristupiti bilo kom trenutku od pokretanja igre. Sve cjeline su podijeljene na male
međusobno zavisne zadatke, odnosno sekvencu malih zadataka, čije je sekvencijalno
završavanje od krucijalnog značaja za radnju igre. Rješavanje svih cjelina vodi do uspješnog
završetka igre. Edukaciju korisnika osiguravamo smislenom interakcijom između tih cjelina,
kao i efektnim upozoravanja na greške koje korisnik pravi, te koje ga vode dalje od rješenja
sveukupnog problema, odnosno „bijega“ iz virtualnog okruženja.

3.2. Dizajn projekta
Prilikom dizajniranja aplikacije u obzir ćemo uzeti sljedeće bitne stavke:

      Kompatibilnost: Pošto će igrica biti izrađena u Adobe Flash formatu,
       možemo očekivati visoki nivo kompatibilnosti aplikacije sa različitim
       platformama, tj. njene portabilnosti.
      Ekstenzibilnost: Planirana izvedba će omogućiti dodavanje novih
       edukativnih zadataka u igricu, kroz dodavanje grafičkih elemenata i
       odgovarajućeg koda u ActionScript-u. Pri tome će trebati uzeti u
       obzir već postojeće zadatke, kako bi se osigurala pravilna
       integracija.
      Tolerancija grešaka: Kako se prvenstveno radi o igrici, određeni
       postotak grešaka se može tolerirati. Naravno, cilj nam je da kroz
       testiranje aplikacije, u za to predivđenom periodu, svedemo broj
       takvih grešaka na minimum. Ono što je neophodno je osigurati da niti
       jedna od preostalih grešaka u aplikaciji ne utiče na funkcionalnost
       iste te pravilan tok izvršavanja programa, tj. da se u skladu sa
       predviđenim redom zadataka može stići do rješenja.
      Održavanje: S obzirom na prirodu aplikacije, ukoliko testiranje bude
       uspješno obavljeno i bude postignut očekivani nivo funkcionalnosti,
       održavanje neće biti potrebno.
      Modularnost: U našem projektu, svaki zadatak će zahtjevati vlastiti
       kod, koji će u skladu sa povezanosti zadataka, trebati međusobno
       integrirati. Ovaj pristup doprinosi ekstenzibilnosti aplikacije.
      Pouzdanost: Zbog platforme na kojoj je igrica izgrađena, uz
       odgovarajuće testiranje, ne očekujemo veće probleme sa pouzdanosti.
      Ponovna iskoristivnost: Grafički elementi igre će biti dizajnirani
       tako da se mogu upotrijebiti u nekim drugim projektima sličnog tipa.
      Robusnost: Robusnost je osigurana kroz tačno predefinisani set koraka
       koji se mogu izvršiti unutar igrice. Interakcija sa objektima je
       omogućena u svakom momentu, stim da se željeni efekat potiže samo u
       slučaju ako za to postoje ispunjeni uslovi (u okviru rješavanja
       zadatka).
      Interakcija sa aplikacijom: Mora se osigurati jednostavnost i
       intuitivnost grafičkog inteterfejsa igre.

3.3.Arhitektura
Grafički interfejs će biti implementiran u Adobe Flash okruženju, pri čemu se sva interakcija
korisnika sa aplikacijom vrši kretnjama i klikovima miša. Svi važni događaji će se
implementirati u ActionScript 3.0 skriptom jeziku. Dizajn i crteži okruženja će se raditi ručno,
a njihova digitalizacija će se izvoditi u Illustratoru za vektorske 2D objekte. Okruženje u
kojem ćemo smjestiti radnju implementiraćemo u 3ds Max-u, i biće eksportovano kao Flash
vektorska slika. Poboljšanja slika nastalih u 3ds Maxu i digitaliziranih u Illustratoru će se vršiti
u Adobe Photoshopu,pošto se radi o vodećom softverskom alatu za tu namjenu.
4. Korištene tehnologije
4.1. Adobe Flash
Adobe Flash je multimedijalna platforma koju je originalno razvila firma Macromedia.
Trenutni razvoj i distribuciju ovog programskog okruženja vrši firma Adobe. Flash može vršiti
vektorsko i rastersku manipulacije grafičkih sadržaja. Tradicionalno se koristi za obogaćivanje
web sadržaja dodavanjem Flash komponenti standardnim web stranicama. Ove komponente
su razni vidovi animacija, reklama i 2D igrica. U skorije vrijeme postalo je popularno
kreiranje cijelih web stranica u Flashu. Okruženje dolazi sa skriptnim jezikom Actionscript
gdje postoje tri verzije, pri čemu je Actionscript 3.0 zadnja verzija koj se znatno razlikuje od
prethodnih verzija. Adobe Flash je dosta rasprostranjeno i široko podržano okruženje koje se
nalazi na velikom broju portabilnih uređaja, kao što su mobiteli, PDA i slično. Ekstenzija
generisanih Flash fajlova je .swf (Shock Wave Flash), i za pokretanje ovih fajlova u nekom od
poznatijih browsera potrebno je imati instaliran Adobe Flash Player.

4.2. Adobe Illustrator
Ovo je softwerski paket koji se koristi za obradu vektorske grafike. Ovaj softver je moguće
koristiti na windows i Mac OS platformi. Ovo je jedan od najrasprostranjenijih programa za
obradu vektorske grafike, iako postoje mnogo bolja i uspješnija rješenja. Vektorska grafika
podrazumijeva obradu slike koja se unutar računara generiše kao skup jednostavnih
geometrijskih oblika. Pa same izmjene na datoj vektorskoj slici podrazumijevaju osnovne
izmjene nad geometrijskih oblicima.

4.3. Autodesk 3ds Max
Autodesk 3ds Max ili u ranijim izdanjima Autodesk 3D Studio Max je softverski paket kreiran
za modeliranje, rendering i animaciju. Objekti u 3ds Max-u se mogu modelirati pomoću
geometrijskih primitiva, poligonalnim modeliranjem, patch i NURBS modeliranjem. 3ds Max
omogućava i nekoliko metoda renderinga, kao što su scanline rendering ili rendering
pomoću ray-tracing tehnika.

4.4. Adobe Photoshop
Photoshop je aplikacija za editovanje bitmap grafike. Fajlovi PSD formata se sastoje iz grafike
raspoređene u layere, koji pored bitmap grafike, u novim verzijama podržava i vektorske i 3D
elemente. Manipulacije na grafici se vrše setom osnovnih alata te mnogobrojnim efektima,
čiji se broj može povećati upotrebom plug-inova. Omogućen je eksport fajlova u sve
popularnije grafičke formate.
5. Tok razvoja igrice
Početak rada na projektu je počelo rađanjem ideje o igrici koja bi bila zabavna i korisna
istovremeno. S obzirom da su escape igrice trenutno izuzetno prihvaćene od strane igrača, te
da su u poređenju s drugim igricama relativno jednostave za implementaciju, izabrali smo
ovu formu edukativne igrice. Umjesto direktnog postavljanja pitanja i izvršavanja zadataka,
naša igrica svo preispitivanje znanja igrača vrši kroz zamke za čije rješavanje treba logika,
inovativnost i znanje iz date oblasti. Svi članovi tima su učestvovali u kreiranju priče na kojoj
bi počivala igrica, te izgledu scene i izradi pojedinih zadataka. Priču smo igraču pokušali
prenjeti preko uvodne i završne animacije koje prikazuju uvod u dešavanja u igrici, te rasplet
radnje kada se igrica uspješno riješi. Nakon toga je uslijedio duži vremenski period
osmišljanja zadatak i veza između istih i komponovanje jedne skladne cjeline. Svaki član je
sam prikupljao ideje za zadatke i pri zajedničkim sastancima smo pokušali uvažiti prijedloge i
povezati ih. Paralelno sa razvijanjem mogućih scenaria, svakom članu je dodjeljen određen
broj objekata za koje smo ustanovili da će biti dio scene, da izradi 3D model. Modeliranje
objekata i same scene smo radili u 3ds max-u, jer smo ovaj alat na prethodnim kursevima već
upoznali. Slikanjem 3D-modela smo dobili 2D prikaz koji smo mogli koristiti u Flash-u –
programskom okruženju u kojem smo u nastavku pisali kod igrice. Radi postizanja željenog
izgleda datih objekata koristili smo Adobe Photoshop i u njemu nastavili dalju obradu slika.

****Pisanje koda u Adobe Flashu.

5.1. Scenario igrice
Kao što je napomenuto, bilo je potrebno osmisliti tok igrice, odnosno pojedinačne zadatke
koje korisnik mora riješiti kako bi došao do rješenja igrice. Najprije je bilo potrebno kreirati
scenario igrice.

Igrica započinje sa nekoliko sličica koje prikazuju glavnog lika kako tone u san za stolom
tokom rada na zadatku. Slijedeća scena je prikaz prostorije sa fakulteta u kojoj se nalazi
pomenuti lik. Na stolu se nalazi papir sa tekstom „Rješite sljedeći zadatak“, ali na papiru se
ne nalazi postavka zadatka. Time započinje igrica koja je koncipirana tako da posmatra
prostoriju iz perspektive osobe koja igra (prvo lice). Lik vidi prostoriju u kojoj se održavala
nastava. Prostorija je prazna, čuje se tek po koji zvuk. Vrata i prozori su zaključani. Zagonetke
koje se moraju riješiti radi ostvarenja glavnog cilja su:

-Na tabli je zapisan broj. Broj zapravo prestavlja riječ kodiranu ASCI kodom. Igrač treba
prepoznati riječ i shvatiti da je ona lozinka za laptop.

-Laptop se nalazi na stolu profesora i upaljen je ali za ulaz je potrebno ukucati lozinku.

-Ukoliko igrač ukuca pravilnu lozinku pojavljuje se izgled ekrana laptopa. Prikazan je kod
programa i prikazano je da postoje greške u kodu. Ukoliko igrač ispravi sve greške
pomenutog C++ koda pokreće se program. Program služi za ispis četiri integer broja.
-U prostoriji igrač može da pronađe dvije boce, jedna od 5L i druga od 3L. U prostoriji se
također nalazi kanta sa vodom.

-U prostoriji se nalazi 'postrojenje' i na dnu te čudnovate mašine je kutija. Lik ne može
dohvatiti kutiju, te zato treba da u mašinu uspe tačno 4L vode kako bi mogao dohvatiti
kutiju. Igrač treba da shvati kako od pomenutih posuda i vode u prostoriji, dobiti tačno 4L i
usuti ih u mašinu.

-U pomenutoj kutiji se nalazi ključ za ladicu od stola koja je zaključana.

-Igrač u ladici nađe mobitel koji ne radi zbog prazne baterije. Igrač treba da napuni bateriju
spajanjem na kolo koje postoji u prostoriji.

-Pin koji je dobiven pokretanjem programa treba da unese u mobitel.

-Uključenjem mobitela i unošenjem pina, lik igirice shvata da se na mobitelu nalazi nova
poruka. Sadržaj te poruke je IP adresa.

-Lik igrice će nastojati unijeti tu IP adresu u web browser laptopa, ali neće biti moguće,
budući da mreža nije uspostavljena.

-Popravkom i uključivanjem odgovarajućeg kabla na laptop lik igrice će uspostaviti mrežu.

-Ukucavanjem IP adrese u browser prikazuje se web stranica sa demom sa simulaciju zvuka
koji se propušta kroz odgovarajući filter. Lik igrice će morati podesiti filter da propušta
zvukove u frekvencijama koje može opaziti ljudski sluh. Nakon što to učini pojavit će se
odgovarajući zvuk, koji će probuditi lika iz sna, pri čemu će se ispred njega prikazati rješen
zadatak. Time se završava igrica.

-Tokom rada na igrici, bit će dodano još nekoliko zagonetki koje će dovesti do opisanog
rješenja igrice.
5.2. Story-board igrice
Kako bismo bili u mogućnosti definisati potrebne grafičke elemente prilikom implementacije
igrice bilo je potrebno kreirati story-board igrice koji će biti vodilja prilikom kreiranja igrice.
Na osnovu scenarija igrice izdvojit ćemo niz scena kroz koje će se odvijati igrica što je također
i uputstvo za kreiranje grafičkih elemenata igrice.




1. Lik igrice tone u san




2. Budjenje iz sna - pogled na sto nad kojim je lik igrice zaspao
3. Prikaz izgleda prostorije u kojoj se lik igrice nalazi

                                                          Potrebno je omogućiti da se klikom
                                                          na tablu, laptop koji se nalazi na
                                                          stolu profesora, električno kolo
                                                          (koje s enalazi na jednom od
                                                          stolova) na postrojenje prikažu
                                                          scene koje sadrže samo pomenute
                                                          objekte. Grafički prikaz tih scena će
                                                          biti dat u nastavku. Potrebno je
                                                          kreirati prikaz ovih slika sa i bez
                                                          kante i flaše. Također će biti
                                                          potreban i prikaz izgleda zadnjeg
                                                          dijela prostorije (pogled od table
                                                          prema suprotnom zidu) u okviru
kojeg će se vidjeti samo stolovi i stolice. Pri čemu će na jednom od stolova biti električno
kolo.



4. Prikaz table na kojoj se nalazi kodirana riječ

                                                   Na tabli se nalazi ASCII kodirana riječ.
                                                   Potrebno ej da na tabli budu napisana i
                                                   određena uputstva o ASCII i binarnom
                                                   kodiranju, kako bi se ostavrila i
                                                   edukativna svrha ovog zadatka. Klikom
                                                   na kantu s vodom, moguće je 'uzeti'
                                                   kantu (odnosno staviti ju u meni bar u
                                                   kojem se nalaze predmeti koje je
                                                   korisnik tokom igrice pronasao i koje
                                                   moze koristiti za rješavanje zadataka).
                                                   Potreban je prikaz ove scene sa i bez
                                                   kante sa vodom. Klikom na desnu
stranu omogućava se prikaz stola sa laptopom. Klikom na lijevu stranu slike omogućit će s
eprikaz scene sa postrojenjem. Ponovnim klikom na tablu prikazat će se prvobitna scena sa
prikazom cijele prostorije.
5. Laptop

                                                       Na stolu se nalazi laptop. Ladica stola
                                                       je zaključana. Na stolu su također i 2
                                                       kabla i konektor, i papir na kojem se
                                                       nalaze određene informacije o
                                                       kablovima (kako bi se ostvarila
                                                       edukativna svrha zadataka). Bit će
                                                       potreban prikaz ove scene sa
                                                       različitim prikazima ekrana na
                                                       laptopu. (ekran za unos pasvorda,
                                                       ekran s aprikazom C koda, ekran sa
                                                       ispisom rezultata C koda i prikazom
                                                       browser-a, ekran sa 'no network
                                                       connection' prikazom, ekran sa
prikazom programa za simulaciju zvuka). Na prozoru u pozadini se nalazi flaša od 3L, koju
korisnik može uzeti. Klikom na lijevu stranu prikazuje se scena s atablom, klikom na desnu
stranu prikazuje se scena sa prikazom zadnjeg dijela prostorije. Klikom na ladicu stola
prikazuje se scena s aladicom. Klikom na kablove prikazat će se scena sa zumiranim
kablovima i uputstvom koej sadrži edukativne informacije.

6. Postrojenje

                                                           Prikaz postojenja s vodom, pri
                                                           čemu se na plakatu na zidu nalazi
                                                           određena šema stroja ili neke
                                                           edukativne informacije. Pored
                                                           postrojenja se nalazi flaša od 5L,
                                                           koju korisnik može uzeti.

                                                           Klikom na desnu stranu slike
                                                           omogućava se prikaz scene sa
                                                           tablom, klikom na lijevu starnu
                                                           omogućava se prikaz zadnjeg
                                                           dijela prostorije.
7.Kutija sa ključem

                      Prikaz scene sa kutijom i ključem, pri čemu ej
                      korisnik u mogućnosti uzeti ključ. Klikom na
                      donji dio slike omogućava se prikaz scene sa
                      postrojenjem.




8. Ladica

                          Prikaz scene sa ladicom. Potreban je
                          prikaz scene sa zatvorenom ladicom, i sa
                          otvorenom ladicom u kojoj se nalazi
                          mobitel, koji lik igrice može uzeti. Klikom
                          na gornji dio slike, prikazuje se scena sa
                          laptopom.
9.Mobitel

                                 Potreban je prikaz mobitela sa različitim ekranima ('battery
                                 low' ekran, 'enter pin', 'nova poruka', i ekran sa prikazom
                                 poruke koja sadrži IP adresu). Ponovnim klikom na mobitel,
                                 mobitel s evraća u meni bar u kojem se nalaze svi predmeti
                                 koje je korisnik sakupio tokom igrice.




10. Električno kolo

                                                      Prikaz scene sa električnim kolom, do
                                                      koje se dolazi kada se na sceni sa
                                                      prikazom zadnjeg dijela prostorije
                                                      klikne na sto na kojem se nalazi
                                                      električno kolo. Na stolu su napisane
                                                      određene edukativne informacije,
                                                      vezane za zadatak sa električnim
                                                      kolom. Klikom na ovu scenu se
                                                      omogućava prikaz zadnjeg dijela
                                                      prostorije.



      Kao posebne predmete bit će potrebno izdvojiti flaše (3L i 5L), kanta s vodom, ključ,
mobitel i konektor, kako bi se mogla vršiti interakcija sa tim objektima.

       Nakon ispunjenja posljednjeg zadatka i pojave određenog zvuka, lik igrice se budi iz
sna i prikazuje se scena (2) sa rješenim zadtakom, te zatim slijedi prikaz prostorije (3) sa
otvorenim vratima.
5.3. Modeliranje scene i objekata igrice
Nakon kreiranja scenarija i story board-a igrice bili smo u mogućnosti definisati potrebne
grafičke elemente. Bilo je potrebno kreirati scenu u kojoj će se odvijati planirana radnja
igrice. Za modeliranje scene i pojedinačnih objekata koristili smo softverski paket Autodesk
3ds Max 2009.

Korištene su tehnike poligonalnog modeliranja, te su primjenjivane i tehnike NURBS
modeliranja za predmete sa nepravilnim površinama.

Kreirani su modeli sljedećih predmeta:

-sto za profesora,

-stolovi za studente,

-stolica za profesora,

-stolice za studente,

-laptop,

-mobitel,

-tabla,

-vrata,

-postrojenje sa vodom,

-prozor,

-ključ,

-kanta sa vodom,

- 2 flaše različitih veličina,

-olovka,

-knjiga,

-papir,

-sat,

-svjetlo,

-prekidač.
Nakon kreiranja pojedinačnih modela, kreirana je učionica, u koju su ukomponovani svi
pomenuti predmeti. Bilo je potrebno postaviti osvjetljenje scene. Na modele su primjenjene
odgovarajuće teksture i podešene su osobine materijala.

Autodesk 3ds Max omogućava i rendanje slika 3D scena, koje se mogu eksportovati u
odgovarajući format. Slike su eksportovane u .jpg i .png format. Prilikom rendanja slika,
praćen je story-board igrice. Slike pojedinačnih modela su eksportovane u .png format, zbog
potrebe za transparentnom pozadinom. U nastavku je prikazano nekoliko slika kreiranih
modela izrendanih pomoću default-nog 3ds max render alata. Potrebno je napomenuti da u
dokumentu nećemo prikazati sve kreirane slike, ali su one dostupne u projektnom folderu
koji je priložen uz dokumentaciju.
5.4. Obrada slika u Adobe Photoshop programskom paketu
Teksture u sceni su kreirane korištenjem Adobe Photoshop-a. Budući da je potrebno da
igrica ima i edukativni karakter, na pojedinim mjestima u sceni se nalaze uputstva, kao što je
uputstvo na tabli za Ascii kod, ili plakat na zidu o Pascalovom principu.

Bilo je potrebno kreirati slike tih uputstava te ih primjeniti kao teksture na modele u
kreiranoj 3ds max sceni.

5.5. Kreiranje animacija
Animacija koja prestavlja uvod u igricu je kreirana je u Adobe CS4 After Effects-u. Ovaj
softever se uglavnom koristi za pravljenje animacija i dodavanje efekata. Animacija je nastala
povezivanjem nekoliko ručno narctanih slika, ubacivanjem pozadine i dodavanjem nekoliko
efekata.

Bilo je potrebno kreirati animaciju mijenjanja nivoa vode u postrojenju. Animacija je kreirana
u Autodesk 3ds max-u i Adobe Premire softverskom paketu. 3ds max daje mogućnost
animiranja različitih parametara objekata kao što su pozicija, rotacija, skaliranje i gotovo
svaki parametar koji utječe na oblik i izgled površine objekta. Animacija je kreirana
korištenjem key-frame animiranja, koje se sastoji u postavljanju ključeva za odgovarajuće
frame-ove. U ključnom frame-u se definiraju parametri koji se animiraju. Prilikom kreiranja
animacije mijenjanja nivoa vode bilo je potrebno definisati poziciju nivoa vode u svakom
ključnom frame-u. Poziciju nivoa vode u svim ostalim frame-ovima je proračunao sam
softver. Za dodatno editovanje animacije korišten je Adobe Premiere.

5.6. Pisanje koda
Kao što je i ranije spomenuto, kod za igricu je pisan u Adobe Flash-u korištenjem ActionScript
3.0. S obzirom da se niko od članova tima nije ranije susretao sa ovim alatom, dosta vremena
smo potrošili na učenje osnovnih funkcionalnosti alata. Zadatke smo kodirali rasporedom
kojim smo ih i osmišljali. Igrica je implementirana kroz određeni broj scena, a varijablama i
funkcijama je definisana interakcija korisnika sa igricom.

U nastavku ćemo opisati određene dijelove koda.

Varijable
Definisano je nekoliko varijabli kojima je omogućeno kontrolisanje toka događaja. U
zavisnosti od vrijednosti varijabli i tok događaja će se razlikovati. Pomoću ovih varijabli se
zapravo bilježi koje zadatke je korisnik uspješno ispunio, a koje ne.



       var   nadjenMobitel:Boolean=new Boolean();
       var   nadjenKljuc:Boolean=new Boolean();
       var   brojTelefona:Boolean=new Boolean();
       var   imeScene:String=new String();
       var   nasuto2L:Boolean=new Boolean();
          var nasuto4L:Boolean=new Boolean();




Funkcije
Igrica je implementirana kroz određeni broj funkcija kojima je definirana interakcija korisnika
sa scenom u igrici. Prelazak na odgovarajuću scenu se ostavruje pomoću gotoAndPlay(scene,
frame) sintakse. Event handling je ostavren korištenjem addEventListener sintakse. Tom
sintaksom je omogućeno osluškivanje događaja kao što je npr. klik mišem, te poziv
odgovarajuće funkcije za taj događaj.

          mcTabla2.addEventListener(MouseEvent.CLICK,povecajTablu);

U prethodnom primjeru se na klik mišem na odgovarajući dio scene, poziva funkcija
povecajTablu.

          function povecajTablu(evt:MouseEvent):void
          {
                gotoAndPlay(1,"Tabla");
          }

Ova funkcija vodi korisnika na novu scenu čiji je naziv „Tabla“.

Osim click-and-point interakcije, od korisnika se u određenim scenama igrice zahtjeva i unos
teksta (prilikom unosa password-a i ispravke greške u prikazanom kodu). Pri tome se samo
upoređuje string kojeg unese korisnik i string koji je definisan u samom programu.

U nastavku je prikazan kod igrice.

Pocetak
          stop();

          mcPlay1.addEventListener(MouseEvent.CLICK,pocniIgru);

          function pocniIgru(evt:MouseEvent):void
          {
                gotoAndPlay(1,"Ucionica");
          }


Ucionica
stop();

          //zvukPozadina.play;

          mcMobitel1.visible=nadjenMobitel;
          mcKljuc1.visible=nadjenKljuc;
          mcBrojTelefona.visible=brojTelefona;
          imeScene=this.sceneName;

          mcLaptop.addEventListener(MouseEvent.CLICK,pokreniLaptop);
        mcTabla2.addEventListener(MouseEvent.CLICK,povecajTablu);
        mcIza2.addEventListener(MouseEvent.CLICK,idiIza);
        mcPostrojenje1.addEventListener(MouseEvent.CLICK,pokreniPostrojenje);

        if(!nadjenMobitel)
        {
        mcBrojTelefona.addEventListener(MouseEvent.CLICK,porukaNemaMobitel);
        }

        function pokreniLaptop(evt:MouseEvent):void
        {
              gotoAndPlay(1,"Sto");
        }

        function idiIza(evt:MouseEvent):void
        {
              gotoAndPlay(1,"Ucionica iza");
        }


        function povecajTablu(evt:MouseEvent):void
        {
              gotoAndPlay(1,"Tabla");
        }

        function pokreniPostrojenje(evt:MouseEvent):void
        {
              gotoAndPlay(1,"Postrojenje");
        }

Tabla
        stop();

        mcMobitel1.visible=nadjenMobitel;
        mcKljuc1.visible=nadjenKljuc;
        mcBrojTelefona.visible=brojTelefona;
        imeScene=this.sceneName;

        mcBack1.addEventListener(MouseEvent.CLICK,vratiNazad);
        if(!nadjenMobitel)
        {
        mcBrojTelefona.addEventListener(MouseEvent.CLICK,porukaNemaMobitel);
        }

Varijable
        var nadjenMobitel:Boolean=new Boolean();
        var nadjenKljuc:Boolean=new Boolean();
        var brojTelefona:Boolean=new Boolean();
        var imeScene:String=new String();
        var nasuto2L:Boolean=new Boolean();
        var nasuto4L:Boolean=new Boolean();
        imeScene="Ucionica";
        var zvukPozadina=new Pozadina();
      nadjenMobitel=false;
      nadjenKljuc=false;
      brojTelefona=false;
      nasuto2L=false;
      nasuto4L=false;

      function porukaNemaMobitel(evt:MouseEvent):void
      {
            gotoAndPlay(1,"Nema Mobitel");
      }

      function porukaPraznaBaterija(evt:MouseEvent):void
      {
            //gotoAndPlay(1,"Prazna Baterija");
      }

Nema mobitel
      stop();

      mcBack1.addEventListener(MouseEvent.CLICK,nestalaScena);

      function nestalaScena(evt:MouseEvent):void
      {
            gotoAndPlay(1,"Ucionica");
      }

Sto
      stop();

      mcMobitel1.visible=nadjenMobitel;
      mcKljuc1.visible=nadjenKljuc;
      mcBrojTelefona.visible=brojTelefona;
      imeScene=this.sceneName;

      mcBack1.addEventListener(MouseEvent.CLICK,vratiNazad);
      mcLogin1.addEventListener(MouseEvent.CLICK,otvoriLogin);

      if(!nadjenMobitel)
      {
      mcBrojTelefona.addEventListener(MouseEvent.CLICK,porukaNemaMobitel);
      }

      function vratiNazad(evt:MouseEvent):void
      {
            gotoAndPlay(1,"Ucionica");
      }

      function otvoriLogin(evt:MouseEvent):void
      {
            gotoAndPlay(1,"LogIn");
      }
Login
stop();

          mcMobitel1.visible=nadjenMobitel;
          mcKljuc1.visible=nadjenKljuc;
          mcBrojTelefona.visible=brojTelefona;
          loginPoruka.visible=false;

          mcLogof.addEventListener(MouseEvent.CLICK,prethodnaScena)

          if(!nadjenMobitel)
          {
          mcBrojTelefona.addEventListener(MouseEvent.CLICK,porukaNemaMobitel);
          }

          function prethodnaScena(event:MouseEvent):void
          {
                gotoAndPlay(1,"Sto");
          }

          Sifra.addEventListener(MouseEvent.CLICK,unosSifre);
          Sifra.addEventListener(KeyboardEvent.KEY_DOWN,provjeraSifreEnter);

          function unosSifre(event:MouseEvent):void
          {
                Sifra.background=true;
                loginPoruka.visible=false;
          }

          mcUlaz.addEventListener(MouseEvent.CLICK,provjeraSifre);

          function provjeraSifreEnter(evt:KeyboardEvent):void
          {
                if(evt.keyCode==Keyboard.ENTER)
                {
                      if(Sifra.text!="nyquist")
                            {
                            loginPoruka.visible=true;
                            loginPoruka.text="Wrong login password";
                            }
                            else
                            {
                            gotoAndPlay(1,"Uspjesan Login");
                            }
                }
          }

          function provjeraSifre(event:MouseEvent):void
          {
                if(Sifra.text!="nyquist")
                {
                      loginPoruka.visible=true;
                      loginPoruka.text="Wrong login password";
               }
               else
               {
                      gotoAndPlay(1,"Uspjesan Login");
               }
       }



Ucionica iza
       stop();

       mcMobitel1.visible=nadjenMobitel;
       mcKljuc1.visible=nadjenKljuc;
       mcBrojTelefona.visible=brojTelefona;
       imeScene=this.sceneName;

       mcBack1.addEventListener(MouseEvent.CLICK,vratiNazad);
       if(!nadjenMobitel)
       {
       mcBrojTelefona.addEventListener(MouseEvent.CLICK,porukaNemaMobitel);
       }

       mcNap2.addEventListener(MouseEvent.CLICK,pribliziNapajanje);

       function pribliziNapajanje(evt:MouseEvent):void
       {
             gotoAndPlay(1,"Napajanje");
       }

       mcObav1.addEventListener(MouseEvent.CLICK,pribliziObavjestenje);

       function pribliziObavjestenje(evt:MouseEvent):void
       {
             gotoAndPlay(1,"Obavjestenje");
       }



Napajanje
       stop();

       mcMobitel1.visible=nadjenMobitel;
       mcKljuc1.visible=nadjenKljuc;
       mcBrojTelefona.visible=brojTelefona;
       porukaNapon.visible=false;
       imeScene=this.sceneName;

       txtNapojna.visible=false;
       txtIzaZareza.visible=false;

       var brojiPaljenja:int;
       var brojiNapon:int;
       var izaZareza:int;
brojiPaljenja=0;
brojiNapon=0;
izaZareza=0;


mcBack1.addEventListener(MouseEvent.CLICK,vratiNazad2);

mcPrekidac2.addEventListener(MouseEvent.CLICK,upaliIliUgasi);
mcGlavni1.addEventListener(MouseEvent.CLICK,promjeniGlavni);
mcSporedni1.addEventListener(MouseEvent.CLICK,promjeniSporedni);

if(!nadjenMobitel)
{
mcBrojTelefona.addEventListener(MouseEvent.CLICK,porukaNemaMobitel);
}


function vratiNazad2(evt:MouseEvent):void
{
      gotoAndPlay(1,"Ucionica iza");
}


function upaliIliUgasi(evt:MouseEvent):void
{
      porukaNapon.visible=false;
      brojiPaljenja=brojiPaljenja+1;
      if((brojiPaljenja%2)!=0)
      {
            txtNapojna.visible=true;
            txtIzaZareza.visible=true;
      }
      else
      {
            txtNapojna.visible=false;
            txtIzaZareza.visible=false;
      }
}

function promjeniGlavni(evt:MouseEvent):void
{
      porukaNapon.visible=false;
      if((brojiPaljenja%2)!=0)
      {
            brojiNapon=brojiNapon+1;
            txtNapojna.text=String(brojiNapon%13)+".";
      }

}

function promjeniSporedni(evt:MouseEvent):void
{
      porukaNapon.visible=false;
     if((brojiPaljenja%2)!=0)
     {
           izaZareza=izaZareza+1;
           txtIzaZareza.text=String(izaZareza%10);
     }

}

mcVeza1.visible=false;
mcConnect1.addEventListener(MouseEvent.CLICK,pocniCrtati);
mcCharge1.addEventListener(MouseEvent.CLICK,pocniPuniti);


function pocniCrtati(evt:MouseEvent):void
{
      porukaNapon.visible=false;
      if((brojiPaljenja%2)==0)
      {
            mcVeza1.visible=nadjenMobitel;
      }
      else
      {
            porukaNapon.visible=true;
            porukaNapon.text="You should turn off DC power supply,
before connecting circuit...";
      }
      if(!nadjenMobitel)
      {
            porukaNapon.visible=true;
            porukaNapon.text="You don't have cell phone";

     }

}

function pocniPuniti(evt:MouseEvent):void
{
            porukaNapon.visible=false;
            var pomoc:String;
            pomoc=String(brojiNapon%13)+"."+String(izaZareza%10);

            if(pomoc!="3.6")
            {
                  porukaNapon.visible=true;
                  porukaNapon.text="Voltage on DC power supply is not
correct";
            }
            if((brojiPaljenja%2)==0)
            {
                  porukaNapon.visible=true;
                  porukaNapon.text="DC power supply is turned off";

            }
                  if(!nadjenMobitel)
                  {
                        porukaNapon.visible=true;
                        porukaNapon.text="You don't have cell phone";

                  }
      }



Postrojenje
      stop();

      mcNasuto1.visible=nasuto4L;
      mcNasuto2L1.visible=nasuto2L;

      mcMobitel1.visible=nadjenMobitel;
      mcKljuc1.visible=nadjenKljuc;
      mcBrojTelefona.visible=brojTelefona;
      imeScene=this.sceneName;
      var X:int;
      var Y:int;

      var dodirivanje1:Boolean;
      dodirivanje1=false;

      mc3Lpuna2.visible=false;
      mc2L2.visible=false;

      if(!nadjenMobitel)
      {
      mcBrojTelefona.addEventListener(MouseEvent.CLICK,porukaNemaMobitel);
      }

      mcBack1.addEventListener(MouseEvent.CLICK,vratiNazad);

      mc5l2.addEventListener(MouseEvent.MOUSE_DOWN,pocniPomjerati);
      mc5l2.addEventListener(MouseEvent.MOUSE_UP,prestaniPomjerati);

      function pocniPomjerati(evt:MouseEvent):void
      {
            X=mc5l2.x;
            Y=mc5l2.y;
            mc5l2.startDrag();
            if(mc5l2.hitTestPoint(152,392))
            {
                  mc5l2.visible=false;
                  mc3L2.visible=false;

                  mc3Lpuna2.visible=true;
                  mc2L2.visible=true;
                  dodirivanje1=true;
              }
      }
      function prestaniPomjerati(evt:MouseEvent):void
      {
            mc5l2.stopDrag();
            if(dodirivanje1)
            {
                  mc5l2.x=X;
                  mc5l2.y=Y;
            }
      }


Uspjesan login
      stop();

      mcMobitel1.visible=nadjenMobitel;
      mcKljuc1.visible=nadjenKljuc;
      mcBrojTelefona.visible=brojTelefona;
      imeScene=this.sceneName;

      var tacanKod:String="cout<<number1%number2<<endl;";
      mcZatvori.visible=false;
      mcProgram1.visible=false;

      mcRun.addEventListener(MouseEvent.CLICK,provjeriKod);
      mcZatvori.addEventListener(MouseEvent.CLICK,izadjiOdavde);
      mcNazad1.addEventListener(MouseEvent.CLICK,izadjiOdavde);

      if(!nadjenMobitel)
      {
      mcBrojTelefona.addEventListener(MouseEvent.CLICK,porukaNemaMobitel);
      }

      function provjeriKod(evt:MouseEvent):void
      {
            var Kod:String=nepravilanKod1.text;
            Kod=Kod.substring(0,tacanKod.length);
            if(Kod!=tacanKod)
            {
                  poruka.text="Your program has 1 error.";
            }
            else if(Kod==tacanKod)
            {
                  mcZatvori.visible=true;
                  mcProgram1.visible=true;
                  brojTelefona=true;
                  mcBrojTelefona.visible=brojTelefona;
            }
      }

      function izadjiOdavde(evt:MouseEvent):void
      {
            gotoAndPlay(1,"Sto");
      }


Obavjestenje
      stop();

      mcBack1.addEventListener(MouseEvent.CLICK,vratiNazad2);
7. Projektni plan i organizacija rada u tima
Planirana dinamika

1. Sedmica: Osmislit scenarij igre

2. Sedmica: Kreiranje edukativnih zadataka i UML-a njihove interakcije

3. Sedmica: Uraditi preliminarnu analizu potrebnih grafičkih elemenata

4. Sedmica: Uraditi storyboard igrice (ispitna)

5/6. Sedmica: Pripremanje multimedijalnih elemenata igrice (potrebnog teksta, grafičkih
elemenata, animacija i zvučne podloge)

7/8/9. Sedmica: Kodiranje

10. Sedmica: Black-box i white-box testiranje

11. Sedmica: Kompletiranje i predaja projekta (zadnja sedmica predavanja)

Zadaci planirani za prve četiri sedmice se rade timski. Grafičke elemente pripremaju Amela i
Marko, Melina animacije a Sead zvučne efekte. Kodiranje (u ActionScriptu) će se podijeliti po
članovima tima i raditi paralelno u toku predviđenih sedmica, uz korištenje Assemble.
Raspored zadataka članovima u fazi finaliziranja projekta će se vršiti shodno problemima i
novim zadacima koji se pojave u prethodnom periodu.

Planiranu dinamiku nismo uspjeli u potpunosti održati, posebno zbog stalnih uvođenja
izmjena u scenarij igrice. Ipak smo pokušali ravnomjerno rasporediti zadatke po članovima
tima i uskladiti ih sa njihovim specifičnim vještinama. Promjene u raspoređivanju pojedinih
zadatak su bile minimalne. Neke izmjene u odnosu na prvobitni plan su npr. da su Amela i
Melina pripremale grafičke elemente, kao 3D modele, a Marko radio animacije. Pisanje koda
smo podjelili pon članovima tima, što ravnopravnije moguće, no, uglavnom ga nismo
paralelno pisali. Početak je uradio Sead a potom su rad nastavili Amela, Melina i Marko.
Problemi koji su se javljali u toku razvoja smo nastojali rješavati u hodu ovisno o
raspoloživosti članova tima. Na kraju smo napravili web site, za čije osmišljanje su bile
odgovorne uglavnom Amela i Melina, dok su Sead i Marko bili zaduženi za dovršavanje igrice
i dodavanje nekoliko detalja kao tekst i slično.
8. Zaključak
„Bijeg iz laboratorije“ je edukativna igrica bijega namjenjena igračima koji raspolažu
osnovnim znanjem iz oblasti koje se proučavaju na elektrotehničkom fakultetu. Cilj igrice je
preispitivanje stečenih znanja u mističnoj atsmoferi escape igrice.

Kreiranje igtice se pokazalo kao veoma zanimljiv ali i zahtjevan zadatak. Teškoće se već
javljaju pri osmišljanju zamki i zadataka kao i njihovom usklađivanju. Drugi bitan aspekt koji
nije za zanemariti je da pravljenje igrice zahtjeva kreiranje scene i objekata, koje smo mi
modelirali, što je vremenski dosta zahtjevan proces. Iako je pisanje koda na početku bio
izazov zbog nepoznavanja alata, tokom vremena se Adobe Flash pokazao kao dobro razvojno
okruženje, sa skriptom koja podrazumjeva dosta intuitivno pisanje koda.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:14
posted:11/8/2012
language:Croatian
pages:31