• No results found

Development of a web game with HTML5 technologies

N/A
N/A
Protected

Academic year: 2021

Share "Development of a web game with HTML5 technologies"

Copied!
27
0
0

Loading.... (view fulltext now)

Full text

(1)UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO. Matic Leva. RAZVOJ SPLETNE IGRE S POMOČJO TEHNOLOGIJ HTML5 Diplomsko delo. Maribor, avgust 2014.

(2) RAZVOJ SPLETNE IGRE S POMOČJO TEHNOLOGIJ HTML5 Diplomsko delo. Študent:. Matic Leva. Študijski program:. bolonjski univerzitetni program. Smer:. Računalništvo in informacijske tehnologije. Mentor:. izr. prof. dr. Damjan Strnad. Somentor:. red. prof. dr. Nikola Guid. Lektorica:. Ksenija Pečnik, prof. slov. jezika.

(3) i.

(4) Razvoj spletne igre s pomočjo tehnologij HTML5 Ključne besede: HTML5, CSS3, jQuery, Knockout.. UDK:. 004.92(043.2). Povzetek V diplomskem delu opišemo ustvarjanje iger prirastka, ki jih lahko igramo v spletnem brskalniku in katerih logika se izvaja izključno na spletnem odjemalcu. V ta namen predstavimo lastno igro omenjenega tipa. Diplomsko delo opisuje korake načrtovanja igre in njene programske ter grafične rešitve na tujih in lastnem primeru. Pri izdelavi igre smo uporabili skriptni jezik Javascript, knjižnici Knockout in jQuery, animacije v CSS3 in moderne elemente HTML5. V delu so predstavljeni tudi načini oglaševanja in trženja takšne igre, ki smo jo ovrednotili z vidika zabave in novosti za prihodnje igralce.. ii.

(5) Development of a web game with HTML5 technologies Key words: HTML5, CSS3, jQuery, Knockout.. UDK:. 004.92(043.2). Abstract. In the thesis we describe the creation of incremental games that we can play in the web browser and which logic executed only in the web client. For this purpose we present our own game of this type. The thesis describes steps planning the game, its software and graphic solutions on other and our own example. In the development of the game we used the script language Javascript, the frameworks Knockout and jQuery, animations, CSS3 and modern HTML5 elements. The thesis also presents ways of advertising and marketing of such a game, which we evaluated from the view of entertainment and novelty for future players.. iii.

(6) KAZALO KAZALO SLIK.................................................................................................................. V SEZNAM PROGRAMSKE KODE..................................................................................... V 1. UVOD ....................................................................................................................... 1. 2. PREDSTAVITEV SKUPKA TEHNOLOGIJ HTML5 .................................................. 2. 3. 4. 5. 2.1. DHTML ............................................................................................................... 2. 2.2. Aplikacijski programski vmesnik za lokalno hrambo ............................................ 3. 2.3. Element »platno« ................................................................................................ 4. 2.4. Zvočni element ................................................................................................... 5. UPORABA HTML5 ZA IMPLEMENTACIJO SPLETNIH IGER ................................. 6 3.1. jQuery in Knockout ............................................................................................. 6. 3.2. Animacije in prehodi v CSS3 .............................................................................. 7. 3.3. Ohranjanje stanja med sejami ............................................................................ 8. 3.4. Vključevanje multimedije..................................................................................... 9. IZGRADNJA SPLETNE IGRE LEMONADE STAND ...............................................10 4.1. Opis igre ............................................................................................................10. 4.2. Načrtovanje in programske rešitve .....................................................................13. 4.3. Grafično oblikovanje ..........................................................................................14. 4.4. Oglaševanje in trženje .......................................................................................16. ZAKLJUČEK ...........................................................................................................18. VIRI .................................................................................................................................20. iv.

(7) KAZALO SLIK Slika 4.1: Osnovni izgled uporabniškega vmesnika ..........................................................11 Slika 4.2: Možnosti nakupa nadgradenj se odklepajo po lestvici napredka.......................12 Slika 4.3: Primer osebne nadgradnje nakupa limon. Z nakupom nadgradnje se poveča število limon, ki jih kupimo z enim klikom, za 1.................................................................13 Slika 4.4: Statični izsek animacije, ki se izvede med nakupom nadgradnje ......................15 Slika 4.5: Kartica z dosežkom ..........................................................................................16. SEZNAM PROGRAMSKE KODE Programska koda 2.1: Primer uporabe CSS za določanje videza ..................................... 3 Programska koda 3.1: Primer uporabe knjižnice jQuery za premik elementa .................... 6 Programska koda 3.2: Primer povezovanja modela in pogleda s pomočjo atributov elementov ......................................................................................................................... 7 Programska koda 3.3: Primer zveznega prehoda s trajanjem 0,1 s med različnima višinama zavihka .............................................................................................................. 8 Programska koda 4.1: Uporaba zvočnih elementov za predvajanje zvočnih učinkov .......15. v.

(8) Razvoj spletne igre s pomočjo tehnologij HTML5. 1 UVOD Računalniške igre so se v zadnjih desetletjih razvile v samostojno industrijo, ki igralcem ponuja obilo zabave, priložnosti za učenje in druženje. Kot v vsaki industriji tudi v industriji računalniških iger prevladujejo žanri iger, ki so najbolj popularni, in žanri, ki ustrezajo samo majhni niši kupcev. Med manj razširjene igre uvrščamo tudi igre prirastka (angl. incremental games). Igre prirastka so v osnovi zelo enostavne igre, pri katerih s klikanjem na gumb ali več gumbov povečujemo količino surovin in tako napredujemo skozi igro. Pri tem moramo poskrbeti, da igralec vedno znova odkriva nekaj novega, kar lahko storimo z možnostjo kupovanja nadgradenj ali pa z odklepanjem dosežkov. Takšne igre ne vključujejo kratkoročne in napete akcije, ampak se pogosto igrajo po več dni skupaj, večino časa pasivno.. Predmet tega diplomskega dela je proučitev tehnologij HTML5 in njihove uporabe za razvoj spletnih iger, ki se izvajajo na odjemalcu, torej v uporabnikovem spletnem brskalniku, in za svoje delovanje ne potrebujejo komunikacije s strežnikom. Tehnologije, ki se uporabljajo za izgradnjo takšnih iger, lahko razdelimo na dve skupini. Prva skupina, iz katere sta najbolj znana primera Adobe Flash in Java, za svoje delovanje potrebuje vtičnike. V drugo skupino sodijo tehnologije DHTML (DOM, dogodki HTML, JavaScript, CSS), ki so vgrajene v spletne brskalnike. Igre iz obeh skupin so dosegljive na večini platform in v večini spletnih brskalnikov. Prednost iger iz druge skupine je, da za njihovo delovanje ne potrebujemo dodatno nameščenih programov. Pri obeh skupinah je namen doseči interaktivno igralno izkušnjo, ki bo na voljo vsem uporabnikom z modernimi spletnimi brskalniki.. Namen diplomske naloge je opisati in predstaviti pomembne metode razvoja iger s pomočjo skupka tehnologij HTML5. Cilj je s pomočjo omenjenih tehnologij izdelati igro prirastka, ki se bo izvajala v uporabnikovem spletnem brskalniku in bo ponujala interaktivno igralno izkušnjo.. 1.

(9) Razvoj spletne igre s pomočjo tehnologij HTML5. 2 PREDSTAVITEV SKUPKA TEHNOLOGIJ HTML5 V tem poglavju bomo obravnavali posamezne spletne tehnologije iz skupka tehnologij, ki smo jih uporabili pri razvoju spletne igre prirastka. Na kratko bomo opisali vsako tehnologijo in podali kratek primer uporabe.. 2.1. DHTML. Dinamični HTML (angl. dynamic HTML - DHTML) je oznaka za skupek tehnologij, s katerimi lahko razvijamo interaktivne spletne strani. Združuje statični označevalni jezik HTML, skriptni jezik Javascript (JS), ki se izvaja na odjemalcu, predstavitveni jezik CSS (angl. Cascading Style Sheets) in objektni model dokumenta (angl. Document Object Model - DOM) [4]. HTML je jezik, s katerim definiramo elemente na spletni strani. CSS definira videz teh elementov, JS pa doda raven interaktivnosti na spletno stran. Objektni model dokumenta je hierarhija objektov v JS, ki posnema zgradbo dokumenta HTML in izpostavlja metode za manipulacijo z elementi v dokumentu. Prav tako vsak element proži različne dogodke, na katere se lahko odzivamo z definiranimi funkcijami [5]. Tako lahko dosežemo interaktivnost, ki smo je navajeni pri namiznih aplikacijah. Nekateri primeri uporabe so: -. animacija besedila in slik, ki lahko sledijo uporabniško določeni poti;. -. interaktivna navigacija, pri kateri se podmeniji odpirajo na uporabnikov klik;. -. branje podatkov, ki jih je vnesel uporabnik, in njihova obdelava v realnem času brez potrebe po strežniku;. -. izris podatkov v obliki 2D- ali 3D-grafov.. Vsi spletni brskalniki ne sledijo priporočilom W3C, zato se pojavljajo določene razlike med objekti, ki predstavljajo elemente v dokumentu oz. na spletni strani. Knjižnica jQuery je bila ustvarjena z namenom, da se olajša sprehajanje po drevesu DOM in spreminjanje tega drevesa [2]. jQuery ponuja tudi enoten vmesnik za te operacije in tako skrije razlike med spletnimi brskalniki. CSS definira videz elementov s pomočjo pravil, ki morajo slediti točno določenemu vzorcu. Vsako pravilo mora imeti selektor, ki izbere enega ali več elementov v dokumentu, in enega ali več parov lastnost/vrednost. V spodnjem primeru smo elementom razreda count-modifier določili širino in obrobo (Programska koda 2.1). Selektorji lahko izbirajo. 2.

(10) Razvoj spletne igre s pomočjo tehnologij HTML5. elemente na podlagi tipa elementa, razreda elementa ali unikatnega imena, ki ga lahko dodelimo elementu. Razred in ime lahko elementu priredimo kot atributa, tip elementa pa se razbere iz značke. Selektorji razumejo osnovna razmerju v drevesu, kot so sin, potomec, sosed, prvi tega tipa, zadnji tega tipa, vsi potomci in podobno. Znotraj vsakega pravila moramo definirati videz elementa, ki ga izberemo s tem selektorjem. To dosežemo tako, da zapišemo par lastnost-vrednost in vsak tak par določa en vidik videza. Ta pravila se dedujejo od očetov na potomce, kar pomeni, da če definiramo nek videz na očetu, se bo uporabil tudi na vseh potomcih, za katere je ta videz smiseln. Prav tako lahko pravila povozimo z drugimi, ki imajo višjo prioriteto ali so zapisana nižje v datoteki CSS in imajo enako prioriteto. Prioriteta se določa na podlagi selektorjev, pri čemer si od najmanj vplivnega do najbolj vplivnega sledijo tip, razred in unikatno ime elementa. .count-modifier { width: 15rem; border-left: 2px solid black; }. Programska koda 2.1: Primer uporabe CSS za določanje videza. Javascript je skriptni jezik, ki je nastal leta 1995 in je bil prvič uporabljen v spletnem brskalniku Netscape. Ima dinamične tipe, za dedovanje uporablja prototipe in njegove funkcije so prvega razreda. Je zelo odprt jezik in podpira objektno usmerjeno, imperativno in funkcijsko programiranje [3]. Ustvarjen je bil z namenom izvajanja skript na odjemalčevi strani, vendar se sploh v zadnjem času pojavljajo druga izvajalna okolja JS, kjer ga lahko uporabljamo za izgradnjo namiznih aplikacij (Windows Widgets) ali spletnih strežnikov (node.js). JS je bil zasnovan kot interpretiran jezik, vendar vsi moderni brskalniki uporabljajo prevajanje v realnem času, kar pospeši njegovo izvajanje. JS je formaliziran v standardu ECMAScript, ki definira tudi druge programske jezike.. 2.2. Aplikacijski programski vmesnik za lokalno hrambo. Lokalna hramba je notranja hramba, ki jo implementira vsak spletni brskalnik posebej in njen vmesnik ponudi razvijalcem spletnih strani. Njen namen je zagotoviti hrambo večje količine podatkov, ki so zasebni in do njih lahko dostopajo samo spletne strani, ki so jih. 3.

(11) Razvoj spletne igre s pomočjo tehnologij HTML5. shranile. Velikost te hrambe je na začetku navadno omejena, vendar si jo lahko uporabnik po potrebi poveča in nikjer v priporočilih W3C za HTML5 ni omenjeno, kolikšna naj bi bila največja dovoljena velikost. Po priporočilih naj bi vsak spletni brskalnik podpiral vsaj dve vrsti hrambe: sessionStorage in localStorage. Prva je namenjena začasnemu hranjenju podatkov,. ki se izbrišejo takoj, ko uporabnik zapre spletni brskalnik. Druga je namenjena hranjenju trajnejših podatkov in je v tem bolj podobna piškotkom. Podatki v localStorage se tako ohranijo tudi med sejami. Vsi podatki so v lokalni hrambi shranjeni v parih ključ-vrednost in do želenih vrednosti lahko dostopamo samo z ustreznim ključem. JS objekt localStorage ponuja tri metode, s katerimi lahko shranjujemo podatke in dostopamo do. njih: setItem(), removeItem() in clear(). Pri uporabi metode setItem() moramo paziti, da ne uporabimo ključa, ki je že zaseden, saj bo metoda brez opozorila prepisala shranjene podatke, ki ustrezajo temu ključu. Ker je localStorage stalna hramba, moramo skrbeti za ustrezno sproščanje pomnilnika, saj lahko v nasprotnem primeru velikost hrambe naraste preko smiselnih mej in spletna stran postane neodzivna.. 2.3. Element »platno«. Platno (angl. canvas) se uporablja za izrisovanje 2D ali 3D grafike brez nameščenih dodatkov v brskalniku. V 2D-načinu lahko kontroliramo vsako točko posebej, v 3D načinu pa uporabljamo WebGL, tj. implementacijo OpenGL za splet. Vsa manipulacija se izvaja z JS s pomočjo izrisnega konteksta, ki ga ponuja element platno. Ta kontekst je lahko 2D ali 3D, kar določimo s parametrom v klicu getContext().. 2D kontekst ponuja velik nabor metod za izris osnovnih objektov (lok, Bézierova krivulja, pravokotnik, mnogokotnik, besedilo in slika) in določanje lastnosti izrisanih objektov (senca, debelina, barva, debelina obrobe, barva obrobe). Vsebino platna je mogoče premikati, vrteti in skalirati. Izris objektov je proceduralne narave, saj moramo najprej nastaviti lastnosti, s katerimi hočemo izrisati objekt, in ga šele nato izrišemo. Te lastnosti se ohranijo, dokler ne nastavimo novih in vsi naslednji objekti so izrisani s temi lastnostmi. Kot že omenjeno, lahko na platno izrišemo tudi sliko. To izvedemo s pomočjo JS objekta Image, kamor lahko shranimo že obstoječo sliko na spletni strani ali pa jo naložimo s spletnega strežnika z zahtevo AJAX. Sliki, ki jo izrisujemo, lahko določimo velikost in položaj na platnu. Določimo lahko tudi velikost in položaj dela slike, ki ga želimo izrisati.. 4.

(12) Razvoj spletne igre s pomočjo tehnologij HTML5. Tako lahko ustvarimo eno veliko sliko, v katero združimo več manjših in za pridobitev vseh sličic porabimo samo eno zahtevo na strežnik. Iz te velike slike lahko nato z omenjeno metodo izrežemo manjše sličice in jih prikažemo ločeno. Prav tako lahko te sličice vrtimo okoli poljubne osi ali jim spreminjamo velikost in tako ustvarjamo iluzijo animacije.. 2.4. Zvočni element. Zvočni elementi se uporabljajo za vključevanje zvočnih vsebin na spletne strani. Takšen element lahko določa več zvočnih virov in spletni brskalnik bo izbral najbolj primernega. Zvočni element podpira širok nabor atributov, ki lahko razširijo ali spremenijo njegovo delovanje. Med najbolj pomembne atribute sodijo src, autoplay, controls, loop in volume. Kot lahko sklepamo iz imena, atribut volume določa glasnost zvoka in zahteva. vrednost med 0 in 1. Če dodamo atribut loop, se bo zvok predvajal v zanki, in če dodamo atribut autoplay, se bo zvok začel predvajati takoj. Atribut controls zvočnemu elementu doda gumbe za nadzor nad predvajanjem, s katerimi lahko uporabnik določa glasnost zvoka in položaj v zvočnem posnetku ter ustavi ali nadaljuje predvajanje posnetka. Najbolj pomemben, vendar ne nujen atribut, je src, ki določa vir zvočnega posnetka. Ta vir je lahko v treh zapisih (mp3, wav in ogg), vendar vsi trije niso podprti v vseh glavnih brskalnikih. Zato je najboljša praksa, da vključimo vse tri vire in brskalniku prepustimo najboljšo izbiro. Ker v atributu src ne moremo določiti več virov naenkrat, lahko uporabimo več elementov source, ki jih dodamo kot otroke glavnemu elementu audio in z vsakim definiramo ločen. zvočni vir. Da lahko brskalnik izbere najboljši vir, lahko elementu source poleg src dodamo tudi atributa type in media, ki določata tip zvočnega vira oz. ciljno napravo. Hkrati z elementi source lahko zvočnemu elementu dodamo tudi elemente track, ki skrbijo za avtomatski prikaz podnapisov ali pripisov. Zvočni element podpira manipulacijo z JS. S klici funkcij play() in pause() lahko nadziramo predvajanje zvoka, z javno spremenljivko currentTime lahko določamo položaj predvajanja in z volume glasnost predvajanja.. 5.

(13) Razvoj spletne igre s pomočjo tehnologij HTML5. 3 UPORABA HTML5 ZA IMPLEMENTACIJO SPLETNIH IGER Opise tehnologij v prejšnjem poglavju bomo v tem poglavju razširili z dejanskimi primeri uporabe pri razvoju spletne igre prirastka. Kjer je to potrebno ali smiselno, so za lažje razumevanje dodani izseki programske kode, ki ponazarja uporabo.. 3.1. jQuery in Knockout. Tako jQuery kot Knockout sta knjižnici za gradnjo interaktivnih spletnih strani. jQuery olajša sprehod skozi drevo dokumenta oz. spletne strani in upravljanje z elementi. Knockout omogoča povezovanje objekta v JS z elementi in deluje na principu model – pogled – model pogleda (MVVM). Najuporabnejši del jQuery je funkcija $, ki kot parameter sprejme selektor CSS in vrne vse elemente, ki ustrezajo temu selektorju. Vsaka referenca na element HTML je ovita v objekt jQuery, ki izpostavlja nabor metod za upravljanje s tem elementom (Programska koda 3.1) [8]. Omogoča nam, da pišemo enake programe v JS za vse brskalnike. Uporablja se skoraj v vsakem spletnem projektu in je zato neprecenljivo orodje za razvoj spletnih strani. $(".modifier").mousemove(function(event) { $(this).find(".popout").offset({ top: event.pageY + 10, left: event.pageX + 10 }); });. Programska koda 3.1: Primer uporabe knjižnice jQuery za premik elementa Knockout je knjižnica JS, ki omogoča ustvarjanje modelov in vezavo teh modelov na elemente spletne strani. Ponuja nabor funkcij, s katerimi lahko ustvarimo opazovane spremenljivke, objekte in polja. Knjižnica te spremenljivke nato nadzoruje in takoj, ko zazna spremembo spremenljivke, sproži spremembo na spletni strani. Od standardne strukture model – pogled – kontroler (MVC) se razlikuje po tem, da ne ponuja vmesnega. 6.

(14) Razvoj spletne igre s pomočjo tehnologij HTML5. upravljavca, ki bi skrbel za povezavo med modelom in pogledom [7]. V Knockoutu se model veže neposredno na pogled. Komunikacija lahko poteka v obratni smeri, tako da z akcijami na pogledu spreminjamo model. Ker Knockout ne ponuja vmesnega upravljavca, moramo ustrezne metode vključiti v model, kar lahko pri velikih projektih vodi do nepregledne in sklopljene programske kode in logike. Pri manjših projektih je takšna poenostavitev dobrodošla, saj ne rabimo definirati vseh povezav med tremi deli arhitekture MVC, ampak samo ustvarimo model. Ta model nato s pomočjo atributov elementov HTML pripnemo na pogled (Programska koda 3.2). Vrednost atributa je lahko spremenljivka v našem modelu, funkcija v našem modelu ali kakršen koli ukaz v JS. <div data-bind = "click: increase, event: { contextmenu: decrease}"> <span data-bind = "text: $data.count"></span> <span data-bind = "text: $data.cost()"></span> </div>. Programska koda 3.2: Primer povezovanja modela in pogleda s pomočjo atributov elementov. 3.2. Animacije in prehodi v CSS3. CSS3 je prihodnji standard, ki temelji na CSS 2.1 in uvaja ogromno novih možnosti za oblikovanje elementov. V osnutku novih priporočil W3C za standard CSS3 so definirane tudi animacije in prehodi. Razlika med animacijo in prehodom je v končnem stanju elementa. Pri animaciji spreminjamo trenutno stanje elementa, ki se na koncu animacije povrne v začetno stanje, prehod pa definira animiran prehod med dvema stanjema, tako da je element na koncu prehoda v novem stanju [6].. Izvajanje animacije objektov temelji na dodajanju in odstranjevanju razredov CSS, kar običajno izvedemo kar s skriptnim jezikom JS. Ker animacija ne spremeni končnega stanja objekta, moramo elementu najprej dodati razred, ki bo poskrbel za animacijo (t. i. vmesni razred). Ko se animacija zaključi, vmesni razred odstranimo in elementu dodamo razred, ki definira njegovo končno stanje (t. i. končni razred). To lahko naredimo na dva načina. V prvem, bolj enostavnem načinu najprej določimo vmesni razred in nato s funkcijo window.setTimeout() določimo zamik, po katerem bomo dodali končni razred. Pomanjkljivost te metode je, da predvidevamo, da se bo animacija izvajala točno tako. 7.

(15) Razvoj spletne igre s pomočjo tehnologij HTML5. dolgo, kot smo določili v definiciji animacije. Druga metoda je ta, da najprej določimo vmesni razred in nato registriramo poslušalca za dogodek zaključka animacije. V tem primeru bomo res dodali končni razred šele takrat, ko se animacija zaključi. Prehodi temeljijo na prehajanju iz enega stanja elementa v drugega. V začetnem stanju ima element določeno lastnost, za katero želimo, da se zvezno spreminja. Nato mu dodamo razred, ki določa enako lastnost z drugimi vrednostmi. Ker se pravila CSS prekrivajo, bo to novo pravilo prepisalo začetnega in element bo prešel v novo stanje (Programska koda 3.3). Če mu ne bi določili zveznega prehoda, bi se ta prehod zgodil v trenutku, sedaj pa se zgodi čez čas in zvezno. a { line-height: 2rem; transition: all 0.1s; } a.active { line-height: 2.5rem; }. Programska koda 3.3: Primer zveznega prehoda s trajanjem 0,1 s med različnima višinama zavihka. 3.3. Ohranjanje stanja med sejami. Igre prirastka so posebne v smislu, da se izvajajo tudi, če igralec ne igra aktivno. Zato se spremeni pojem igralne seje, ki v ostalih igrah pomeni čas, ko igralec aktivno igra igro. Ker igralec namerno konča sejo, je veliko lažje določiti, kdaj naj se izvedejo metode za zaključek seje. Navadno to vključuje shranjevanje stanja v igri in računanje statistike pretekle igralne seje. Pri igrah prirastka je stvar bolj zapletena, saj igralec neha aktivno igrati, četudi noče zaključiti seje in ne ustavi igre. Zato ne moremo pričakovati, da bo jasno povedal, kdaj bi morali shraniti stanje igre, in poiskati moramo drugo rešitev. Težavo smo rešili z rednim shranjevanjem stanja igre vsakih 10 sekund. To pomeni, da se seja lahko prekine kadar koli in igralec bo izgubil kvečjemu zadnjih 10 sekund igranja. Za interval 10 sekund smo se odločili po občutku, saj nismo hoteli vplivati na izvajanje igre na. 8.

(16) Razvoj spletne igre s pomočjo tehnologij HTML5. slabših sistemih ali da bi igralec izgubil prevelik del igranja. Igralec namreč ne more ročno shraniti stanja igre. Za hranjenje podatkov smo uporabljali objekt localStorage, ki je vseboval vse potrebne podatke za obnovitev seje. Shranjeno stanje se obnovi na začetku igre, takoj ko se prikaže spletna stran in še preden se začne izvajati glavna zanka igre.. 3.4. Vključevanje multimedije. Da je igra bolj privlačna, razvijalci navadno dodajo grafične in zvočne elemente. Ker smo igro razvijali v spletnem okolju, bi bili omejeni na osnovne slike in animacije, zato smo uporabili eksperimentalne tehnologije, ki so nam omogočale veliko večji nabor multimedije. Tako smo lahko vključili zvok, animirano sliko in animirane elemente strani. Zvok smo vključili s pomočjo elementa audio, animirane slike s pomočjo elementa canvas, druge statične elemente pa smo animirali s pomočjo animacij in prehodov CSS3.. 9.

(17) Razvoj spletne igre s pomočjo tehnologij HTML5. 4 IZGRADNJA SPLETNE IGRE LEMONADE STAND V tem poglavju bomo podrobno opisali, kako izgleda dokončana igra, razložili bomo tudi namen in cilj razvoja spletne igre prirastka in smernice, ki smo jih upoštevali pri razvoju. Našo igro bomo primerjali tudi z ostalimi podobnimi igrami.. 4.1. Opis igre. Igre prirastka so v osnovi zelo enostavne igre, pri katerih s klikanjem na gumb ali več gumbov povečujemo količino surovin in tako napredujemo skozi igro.. 4.1.1 Kupovanje, proizvodnja in prodaja Igralec v igri je v vlogi prodajalca, ki na stojnici prodaja limonado. Igra poteka tako, da igralec kupuje sestavine za limonado, jo izdeluje in nato prodaja. Na začetku igralec začne igrati z eno limono. Uporabniški vmesnik je sestavljen iz treh gumbov in seznama surovin (Error! Reference source not found.). S klikom na drugi gumb lahko začetno limono spremenimo v limonado. S klikom na tretji gumb lahko prodamo limonado in zaslužimo 2 €. Nato lahko s prvim gumbom kupimo 2 limoni in krog je zaključen. Naše premoženje se tako z vsakim tretjim klikom na gumbe povečuje, saj je denar glavna surovina za nakup nadgradenj. Večina iger prirastka ima samo eno surovino, ki jo lahko igralec povečuje s klikom na gumb in porablja za nakup nadgradenj, sami pa smo razširili to idejo na tri surovine in tri gumbe. Te tri surovine so limona, limonada in denar. Ker ima naša igra tri gumbe, smo onemogočili uporabo enostavnih programov za klikanje in igralec mora na začetku dejansko klikati in igrati. Navada igralcev iger prirastka je, da uporabljajo program za klikanje, ki simulira hitro klikanje in s tem si igralci olajšajo igranje. Miškin kazalec postavijo nad ustrezen gumb, zaženejo program in počakajo, da imajo dovolj surovin za nadgradnjo. Ker je naša igra zasnovana s tremi gumbi, takšni enostavni programi še vedno potrebujejo pomoč igralca, ki mora miškin kazalec prestavljati z gumba na gumb.. 10.

(18) Razvoj spletne igre s pomočjo tehnologij HTML5. Slika 4.1: Osnovni izgled uporabniškega vmesnika. 4.1.2 Nadgradnje Igre prirastka imajo dve značilnosti. Prva je ta, da imajo igre implicitni konec, ko igralec nima več spodbude, da bi nadaljeval z igro, vendar se igra kljub temu ne zaključi. Če hoče, lahko igralec z igro kadarkoli nadaljuje. Razvijalci igre igralca zadržijo pri igri dosežejo s sistemom nadgradenj in dosežkov, ki je opisan pozneje. Primer takšne igre je Cookie Clicker [1], kjer imamo določeno število nadgradenj in ko kupimo vse, nimamo razloga, da bi igrali naprej. Drugi primer je igra TF2 Idler [9], pri kateri poskušamo zbrati 28 različnih kap. Te kape lahko primerjamo z dosežki, ki jih dosega igralec. Druga skupna značilnost iger prirastka so redne nagrade, katerih interval se počasi povečuje. To pomeni, če smo bili prvič nagrajeni 1 minuto po začetku igranja, bomo drugič nagrajeni po 3 minutah, tretjič po 6 minutah od začetka igranja in tako naprej. Tako zagotovimo, da je igra zanimiva za priložnostne igralce, ki se je bodo naveličali po eni uri igranja, in za vztrajne igralce, ki bodo igro igrali več tednov skupaj in za katere bo interval nagrad na koncu dolg tudi po ves dan. Redne nagrade so običajno izvedene v obliki nadgradenj in dosežkov. Nadgradnje lahko kupujemo z valuto, ki jo pridelujemo v igri, to so lahko denar, kovina, piškoti in podobno. Ker bi nekateri igralci takoj na začetku igranja raje kupili najvišjo nagrado, se razvijalci iger navadno odločijo za postopen napredek – igralec lahko kupi nadgradnjo samo, če so kupili vse nadgradnje, ki so nižje na lestvici napredka (Error! Reference source not found.).. 11.

(19) Razvoj spletne igre s pomočjo tehnologij HTML5. Slika 4.2: Možnosti nakupa nadgradenj se odklepajo po lestvici napredka. Videli smo, da nadgradnje in dosežki vzajemno definirajo igre prirastka in tudi sami smo pri razvoju igre upoštevali oboje. Po približno minuti igranja naše igre dosežemo 40 € premoženja, kar je dovolj za prvo nadgradnjo. Odločimo se lahko za nadgradnjo nakupa, proizvodnje ali prodaje. Če se odločimo za nadgradnjo nakupa, bomo z enim klikom kupili kar dve limoni za 2 €, podobna analogija je pri ostalih dveh nadgradnjah. Ta nadgradnja nam bo omogočila, da bomo hitreje porabili ves denar za nakup limon in hitreje zaključili krog nakup-proizvodnja-prodaja, saj smo podvojili hitrost nakupa (Error! Reference source not found.). Pomemben trik, ki ga uporabljajo razvijalci iger, je, da igralcu ne pokažejo vseh nadgradenj, ampak samo naslednjo možno, in ga spodbudijo, da igra še naprej in odklene vse možne nadgradnje. Tako igralec na začetku ni postavljen pred zid ciljev, ki jih mora doseči, ampak te cilje odkriva med igranjem, kar je bolj zanimivo. Kljub temu so nadgradnje dvorezen meč, saj povečajo kompleksnost igre, kar je lahko breme za razvijalce. Ker nadgradnje igralcu omogočajo hitrejše napredovanje skozi igro, se lahko zgodi, da je napredek prehiter, igralec prehitro kupuje nadgradnje in s tem manjša to optimalno časovno okno med nagradami. Kot smo opisali na začetku poglavja, se mora to časovno okno s časom igranja večati. Navadno se za te namene naredijo matematični modeli naraščanja premoženja in cen nakupov nadgradenj, nato pa se z določanjem začetnih parametrov določijo najbolj optimalne cene nadgradenj.. 12.

(20) Razvoj spletne igre s pomočjo tehnologij HTML5. Slika 4.3: Primer osebne nadgradnje nakupa limon. Z nakupom nadgradnje se poveča število limon, ki jih kupimo z enim klikom, za 1.. V lastni igri smo za popestritev igranja implementirali osebne nadgradnje in nadgradnje infrastrukture. Osebne nadgradnje smo že opisali in so namenjene začetnemu obdobju igranja, saj nam povečajo učinek enega klika. Nadgradnje infrastrukture so namenjene poznejšemu obdobju igranja, saj omogočijo samodejno kupovanje, proizvodnjo in prodajo. Če kupimo te vrste nadgradenj, ne rabimo več aktivno igrati in klikati, ampak samo čakamo in premoženje se nam veča samodejno. Ker so te nadgradnje namenjene poznejšemu obdobju, so temu primerno dražje.. 4.1.3 Dosežki Drugi način za privabljanje igralčeve pozornosti so dosežki. Vsakič, ko izpolnimo določeno nalogo, nam je priznan dosežek. Ker so ti dosežki neredni in igralec ne ve, kdaj se bodo pojavili, morajo biti podeljeni na čim bolj privlačen način, s čimer nagradijo igralca za potrpežljivost. V naši igri se listek z napisanim dosežkom navidezno zaleti v ekran in ko ga skrijemo, se zvije in skrije za igralno ploščo. Dosežki so podeljeni, ko igralec doseže določeno količino limon, limonade in denarja, ko ima odklenjeno določeno število nadgradenj in tudi za določeno število podeljenih dosežkov.. 4.2. Načrtovanje in programske rešitve. 4.2.1 Razvojno okolje Glavno razvojno okolje, ki smo ga uporabljali, je bilo Sublime Text 3 z razširitvami. Za pisanje CSS smo uporabljali predprocesor SASS, ki je nadvrsta jezika CSS. Podpira spremenljivke, vejitve, zanke, gnezdenje selektorjev in mnogo drugih uporabnih stvari, ki niso podprte v osnovnem CSS. SASS se prevede v CSS, za kar smo uporabljali razširitev 13.

(21) Razvoj spletne igre s pomočjo tehnologij HTML5. Sublime. Ta razširitev je datoteko SASS ob vsakem shranjevanju prevedla v datoteko CSS. Prevajanje se izvede s pomočjo programskega jezika Ruby. Da smo si olajšali delo s HTML, smo uporabljali razširitev Emmet. Emmet ponuja mnogo bližnjic za vstavljanje kode HTML in urejanje že obstoječe. Ker je JS šibko tipiziran jezik, smo za statično analizo uporabljali razširitev JSLint, ki samodejno pregleduje napisano programsko kodo in opozarja na morebitne napake. Med razvojem smo uporabljali spletni brskalnik Google Chrome, ker ima najboljšo podporo za neposredno spreminjanje pravil CSS. Tako lahko zelo na hitro uredimo videz določenega elementa in nato vsa pravila kopiramo v izvorno datoteko, saj se spremembe v brskalniku ne shranijo med osvežitvijo strani.. 4.2.2 Uporaba dogodkov DOM Za beleženje uporabnikovih akcij smo uporabljali dogodke DOM. Knjižnica Knockout že sama ponuja lastne poslušalce za dogodke, mi le z atributom elementa določimo metodo v modelu, ki naj razreši ujet dogodek. Poslušalec za desni miškin klik ni definiran, zato smo ga morali definirati sami. Za pristop z dogodki smo se odločili, ker smo lahko na tak način ujeli prav vsak uporabnikov klik.. 4.3. Grafično oblikovanje. Za uporabniški vmesnik smo uporabili samo tri barve: belo, črno in rumeno, v ozadje igre pa smo dodali zbledelo sliko limon. Glavno sličico, ki predstavlja igro, nam je narisal uporabnik, ki je videl in igral našo igro. To sličico smo dodali poleg naslova igre in kot ikono spletne strani, ki je vidna v zavihku spletnega brskalnika. Vse ostale sličice smo poiskali na internetu in pridobili pravice za njihovo uporabo. Elemente na spletni strani smo oblikovali in animirali z jezikom CSS, tudi številke, ki se prikažejo ob kliku na gumb za nakup ali prodajo surovin, in kartice, na katerih so zapisani dosežki. Pri animaciji nakupa in prodaje nadgradenj smo si pomagali s knjižnico jQuery.. 4.3.1 Animacija zavihkov Ko uporabnik pomakne miško na zavihek, ki odpre seznam nadgradenj, dosežkov ali nastavitev, se ta zavihek poveča, spremeni v belo barvo in zaigra se zvočni učinek. To animacijo smo dosegli s pomočjo prehodov CSS. Začetno stanje prehoda je stanje, ko. 14.

(22) Razvoj spletne igre s pomočjo tehnologij HTML5. zavihek ni izbran, končno stanje pa, ko se miškin kazalec premakne nad element, ki predstavlja zavihek. CSS poskrbi za prehod med tema dvema stanjema. Zvočni učinek smo zaigrali s pomočjo elementa audio (Programska koda 4.1). <audio id="increase" src="sounds/increase.ogg"></audio> <audio id="decrease" src="sounds/decrease.ogg"></audio> <audio id="button_1" src="sounds/tab.ogg"></audio>. Programska koda 4.1: Uporaba zvočnih elementov za predvajanje zvočnih učinkov. 4.3.2 Nakup in prodaja nadgradenj Ker smo hoteli igro narediti čim bolj privlačno za igralce in uporabiti najnovejše spletne tehnologije, smo za prikaz nakupa in prodaje nadgradnje uporabili 3D premike elementov. Ko igralec z levim miškinim gumbom klikne na gumb za nakup nadgradnje, se gumb na skrivaj podvoji in njegova kopija se umesti pod originalni gumb. To kopiranje in umeščanje se izvede s pomočjo jQuery. Z animacijami CSS se kopija gumba najprej zelo hitro zmanjša, nato se premakne navzdol izpod originalnega gumba in malo poveča, nato pa se pomakne nazaj nad originalni gumb in poveča do velikosti originalnega gumba. Učinek je podoben mešanju kart (Error! Reference source not found.). Obratna animacija se izvede za prodajo nadgradnje, vendar se animacija sproži z desnim miškinim gumbom. Med izvajanjem animacije se s pomočjo elementa audio zaigra zvočni učinek, kar še poveča videz kart, ki se mešajo pred igralcem.. Slika 4.4: Statični izsek animacije, ki se izvede med nakupom nadgradnje. 15.

(23) Razvoj spletne igre s pomočjo tehnologij HTML5. 4.3.3 Podelitev dosežka Tudi pri animaciji kartic z dosežki smo poskušali doseči učinek otipljivih ploščic, ki se zaletijo v naš ekran in zvijejo pod igralno ploščo, ko jih ne potrebujemo več. Prihod ploščice smo dosegli z vrtenjem in spreminjanjem velikosti elementa, ki predstavlja ploščico (Error! Reference source not found.). Ko igralec prebere opis dosežka in klikne na ploščico, se ta zavrti in se hkrati zmanjša. To daje občutek, kot da se je ploščica obrnila v ekran in proti zgornjemu robu igralne plošče. Nato smo jo premaknili navzgor, zmanjševali in povečevali prosojnost elementa, dokler ploščica ni izginila. Animacijo za prihod in odhod kartice spremljata dva zvočna učinka, ki smo ju implementirali enako kot pri animaciji za nakup in prodajo nadgradnje.. Slika 4.5: Kartica z dosežkom. 4.4. Oglaševanje in trženje. Igro smo sprva naredili za lastno zadovoljstvo, zato nismo razmišljali o njeni prodaji in oglaševanju. Če bi igro kljub temu želeli prodajati, bi morali rešiti mnogo pomanjkljivosti takšnega tipa iger. Krepko bi morali spremeniti zgodbo igre in verjetno dodati tudi povezovanje med igralci. Problem je, da igra sama ni zanimiva širši javnosti, saj večina ljudi pri igranju iger zahteva napeto akcijo ali zahtevne naloge, igre prirastka pa ne izpolnjujejo nobene od teh zahtev. Igra je namenjena niši v igralski populaciji in kot taka ni primerna za širše oglaševanje. Na spletni strani reddit.com pa obstaja majhna skupina ljudi, ki jih druži zanimanje za takšne igre. Ko smo objavili igro, smo prejeli veliko pozitivnih kritik in predlogov za izboljšave.. 16.

(24) Razvoj spletne igre s pomočjo tehnologij HTML5. Pri trženju takšne igre obstaja enak problem kot pri oglaševanju, saj ni veliko ljudi, ki bi kupili igro. Najboljši poslovni model za našo igro bi zato bil, da bi jo ponudili zastonj in zraven prikazovali oglase. Lahko bi jo ponudili tudi za mobilne naprave in si tako povečali krog igralcev, vendar bi nezadovoljstvo igralcev zaradi oglasov presegalo zaslužek. Če bi hoteli z igro nekaj zaslužiti, bi si morali izbrati kak drug žanr iger.. 17.

(25) Razvoj spletne igre s pomočjo tehnologij HTML5. 5 ZAKLJUČEK Večina razvijalcev iger se danes še vedno odloča za razvoj iger, ki jih namestimo na računalniški sistem, saj jim igralci s tem dovolijo večji nadzor nad računalniškimi viri in posledično so lahko igre bolj zahtevne in ponujajo večje igralne učinke. Razvoj spleta v zadnjih letih odpira nove možnosti in mnogo razvijalcev poskuša narediti preboj s spletnimi igrami, ki so zaradi dostopnosti na vseh operacijskih sistemih privlačne za redne igralce. Po naših izkušnjah takšne igre ponujajo podobno igralno izkušnjo kot namizne igre, vendar so vizualno manj privlačne. To področje smo raziskali v diplomskem delu, kjer smo predstavili razvoj igre prirastka, ki jo lahko igramo v spletnem brskalniku. Takšna igra za svoje delovanje ne potrebuje spletnega strežnika, saj se vsa igralna logika izvaja v spletnem brskalniku. Pri razvoju smo uporabili moderne spletne tehnologije CSS3, HTML5 in JS. S pomočjo animacij in prehodov CSS3 smo lahko animirali elemente na spletni strani in se tako približali videzu iger, ki jih namestimo na računalniški sistem. Tehnologije HTML5 so nam omogočale trajno hrambo podatkov, ki so se ohranjali med sejami in igralcu omogočali nadaljevanje igranja, kjer je nazadnje končal. HTML5 smo prav tako uporabili za predvajanje zvočnih učinkov ob igralčevih akcijah. Jezik, v katerem je bila napisana igralna logika, je bil JS. Igra ponuja tristopenjski način povečevanja premoženja, nadgradnje za povečanje hitrosti povečevanja premoženja in dosežke, ki jih lahko odklenemo z igranjem. Razvijalci se med izdelavo igre pogosto odločijo, da nedokončano igro ponudijo ožji skupini ljudi, ki jo preizkusijo in povedo svoje mnenje. Tudi sami smo storili podobno in igro v razvoju objavili v skupini incremental_games na spletni strani reddit.com. Dobili smo odziv igralcev, ki so igro preizkusili, in šele takrat smo lahko predvideli prvi odziv prihodnjega trga na igro. Odziv je potrdil naše prizadevanje za unikatno igralno izkušnjo, igralci so bili navdušeni nad idejo nakupa, proizvodnje in prodaje. Večina iger prirastka ima namreč samo eno akcijo, kjer s klikom povečamo eno samo surovino in tudi cene nadgradenj so izražene v tisti surovini. Naša igra pa ponuja tristopenjski sistem povečevanja premoženja, kar jo izpostavlja iz množice ostalih iger prirastka. Možnih je veliko izboljšav igre, kar bi jo naredilo bolj zabavno in konkurenčno ostalim igram. Najbolj pomembna je vsebina, saj lahko sedaj igralec igro konča v nekaj urah. Z. 18.

(26) Razvoj spletne igre s pomočjo tehnologij HTML5. dodajanjem nadgradenj in dosežkov bi podaljšali igralni čas igre. Izgled igre bi lahko izboljšali z uporabo 3D elementov, vendar bi to povečalo čas in zahtevnost razvoja. HTML5 in CSS3 sta mlada standarda v razvoju, zato ne moremo pričakovati enake zmogljivosti kot pri namiznih aplikacijah, vendar izkušnje kažejo, da lahko kljub pomanjkljivosti razvijemo zanimivo in interaktivno spletno igro. Z manjšimi popravki in dopolnitvami je igra pripravljena za ciljno publiko in jo lahko postavimo na internet. Kot je bil namen, se lahko igra izvaja v vseh modernih spletnih brskalnikih in za svoje delovanje ne potrebuje strežnika.. 19.

(27) Razvoj spletne igre s pomočjo tehnologij HTML5. VIRI 1. Thiennot, Julien. Cookie Clicker. Cookie Clicker. [Elektronski] 17. 2 2014. orteil.dashnet.org/cookieclicker/. 2. Lubbers, Peter, Albers, Brian in Salim, Frank. Pro HTML5 Programming. s.l. : Apress, 2011. 3. Crockford, Douglas. JavaScript: The Good Parts. s.l. : O'Reilly Media, 2008. 4. Lindley, Cody. DOM Enlightenment. s.l. : O'Reilly Media, 2013. 5. HTML5. [Elektronski] 14. 03 2014. http://www.w3.org/TR/html5. 6. CSS developer guide. Mozzila Development Network. [Elektronski] 14. 03 2014. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS. 7.. Knockout. documentation.. [Elektronski]. 14.. 03. 2014.. http://knockoutjs.com/documentation/introduction.html. 8. jQuery API. [Elektronski] 14. 03 2014. http://api.jquery.com. 9. Bazaar.tf. TF2 Idler. [Elektronski] 17. 2 2014. http://bazaar.tf/crystal/idler.. 20.

(28)

References

Related documents

a) All contracts are perfected by mere consent. b) All contracts are perfected by delivery of the object. c) All contracts are required to be in writing. d) All

The best people to identify and prioritize community health problems:.. Public health nurses and

This paper covers; context of wheel-rail profile estima- tion; development of simulation models that include gauge width variation with the use of disturbance signals

You may be able to coerce fat cells into becoming just about anything you want. Fat tissue belongs to a class of body material called connective tissue, which

The first panel of Table 2 reports estimates for the main parameters of interest from Specification [1], which includes a constant, wave dummies, the part-time work variable,

For older people with dementia living in the community, estimated average annual costs of secondary health care are higher in the first year after diagnosis of dementia than

A two-port network is represented by four external variables: voltage and current at the input port, and voltage and current at the output port, so that the two-port

While wage curves using household survey data have been estimated for Belgium 1 , suggesting wage setting is consistent with endogenous models of wage determination, there is no