Programiranje video igara u biblioteci Qt5

Pužar, Sara

Master's thesis / Diplomski rad

2020

Degree Grantor / Ustanova koja je dodijelila akademski / stručni stupanj: University of Zagreb, Faculty of Science / Sveučilište u Zagrebu, Prirodoslovno-matematički fakultet

Permanent link / Trajna poveznica: https://urn.nsk.hr/urn:nbn:hr:217:787247

Rights / Prava: In copyright

Download date / Datum preuzimanja: 2021-10-06

Repository / Repozitorij:

Repository of Faculty of Science - University of Zagreb

SVEUCILISTE U ZAGREBU

PRIRODOSLOVNO–MATEMATICKI FAKULTET

MATEMATICKI ODSJEK

Sara Puzar

PROGRAMIRANJE VIDEO IGARA UBIBLIOTECI QT5

Diplomski rad

Voditelj rada:prof. dr. sc. Mladen Jurak

Zagreb, veljaca, 2020

Ovaj diplomski rad obranjen je dana pred ispitnim povjerenstvomu sastavu:

1. , predsjednik

2. , clan

3. , clan

Povjerenstvo je rad ocijenilo ocjenom .

Potpisi clanova povjerenstva:

1.

2.

3.

Hvala roditeljima i seki na neiscrpnoj podrsci i ohrabrivanju koje su mi pruzili krozgodine studiranja.

Hvala decku, prijateljima i drustvu iz praktikuma na svim suzama i zabavama kojima sumi ispunili dane.

Hvala mentoru, prof. dr. sc. Mladenu Juraku, na pomoci i odgovorima na mojih bezbrojpitanja.

Sadrzaj

Sadrzaj iv

Uvod 1

1 Qt 5 21.1 Meta-Object sustav . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2 Signali i utori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.3 Qt Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101.4 Qt Quick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111.5 Infrastruktura za programiranje 2D igara . . . . . . . . . . . . . . . . . . 13

2 Oblikovni obrasci 252.1 Osnovna podjela oblikovnih obrazaca . . . . . . . . . . . . . . . . . . . 252.2 Oblikovni obrasci u razvoju programskih igara . . . . . . . . . . . . . . . 26

3 Implementacija video igre 343.1 Pregled igre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343.2 Struktura aplikacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373.3 Funkcionalnosti igre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

4 Zakljucak 50

Bibliografija 51

iv

Uvod

Qt je alat za razvijanje grafickih sucelja i aplikacija. Prva verzija Qt-a objavljena je usvibnju 1995., a nastala je iz potrebe Haavard Norda i Eirik Chambe-Enga za izradomvise-platformske (engl. cross-platform) C++ aplikacije za skladistenje ultrasound slika[4]. Danas je aktualna najnovija Qt5 verzija koja u odnosu na svoje prethodniku nudi novefunkcionalnosti i optimizirane performanse [9]. Iako primarna uloga Qt-a nije izrada videoigara, s obzirom na sve vecu popularnost ovog oblika zabave, Qt se poceo koristiti u svrhurazvoja igara [11]. Qt5 nudi nekoliko klasa i mehanizama koji olaksavaju implementacijuigara, cije ce se mogucnosti istraziti i predstaviti u ovom radu.

Danas gotovo trecina svjetske populacije za sebe tvrdi kako igraju igre, a iako jeuvrijezeno misljenje kako su igre za djecu, prosjecna dob ljudi koji ih igraju je 34 godine[13]. Popularnosti igara doprinijela je i svestranost platformi na kojima se igre igraju, aindustrija video igara toliko je narasla da nadmasuje filmsku i glazbenu industriju [17]. Us-pjeh mobilnih igara svakom godinom raste te se priblizava uspjehu konzolnih i racunalnihigara [14].

Ovaj rad je podijeljen u tri osnovna dijela. U prvom dijelu bit ce predstavljen Qt,njegove bitne karakteristike te podrska za izradu video igara. U drugom dijelu objasnjavase pojam oblikovnih obrazaca, njihova uporaba u razvoju video igara te poveznica sa Qt5.U posljednjem poglavlju predstavljena je video igra, The Camel Run, koja je napravljena usklopu ovog rada, koristeci Qt 5.13.1. biblioteku.

1

Poglavlje 1

Qt 5

Qt je framework namijenjen izradi grafickih korisnickih sucelja i aplikacija prilagodenihrazlicitim operacijskim sustavima. Razvijen je u programskom jeziku C++, te se najcescekoristi kod aplikacija radenih u tom jeziku. Uz C++, Qt5 pruza mogucnost povezivanja i sdrugim programskim jezicima kao sto je python. Qt5 podrzava vrlo jednostavno koristenjestandarda C++11 i C++14, a omoguceno je i osposobljavanje standarda C++17 [18]. Uzpodrsku za izradu grafickih sucelja, Qt pruza alate za razna druga podrucja kao sto suparalelizam i mrezna komunikacija [5]. 2018. godine najavljena je objava Qt6 bibliotekeza kraj 2020. godine [8] .

Verzije i instalacijaQt framework odrzava The Qt Company te je dostupan pod razlicitim licencama:

1. Komercijalna verzija

a) namijenjena izradi komercijalnih proizvoda

b) dostupni su svi moduli

c) Qt programska potpora za korisnike

2. Qt otvorenog koda (engl. Open-source)

a) ogranicena dostupnost modula

b) obaveza koristenja jedne od sljedecih licenci: LPGL v3, GPL v2 ili GPL v3.

Instalacija Qt-a sastoji se od svega nekoliko koraka te su upute o instalaciji navedene uQt-evoj dokumentaciji [20].

2

POGLAVLJE 1. QT 5 3

ModuliQt5 je sastavljen od vise modula koji se razlikuju po svojoj dostupnosti. Postoji 14 osnov-nih modula koji su podrzani na svim razvojnim platformama te na svim testiranim ciljnimplatformama. Osnovni moduli su dostupni u komercijalnoj verziji i u sklopu verzije otvo-renog koda, te se smatra kako su to moduli koji implementiraju funkcionalnosti potrebne zarazvoj vecine Qt aplikacija. Medu osnovnim modulima nalaze se i moduli koji su koristeniu razvoju igre napravljene u sklopu ovog rada:

• Qt Core

• Qt GUI

• Qt Multimedia

• Qt Widgets.

Uz osnovne module, Qt5 broji preko 40 dodatnih modula koji ne spadaju u osnovnu ins-talaciju. Dodatni moduli nisu nuzno dostupni u obje verzije Qt5, takoder nisu ni podrzanina svim razvojnim platformama, ni na svim testiranim ciljnim platformama. Iako u sklopuovog rada dodatni moduli nece biti koristeni, u nastavku slijedi popis nekih od modulakorisnih za izradu video igara:

• Qt 3D

• Qt Android Extras

• Qt Gamepad

• Graphical Effects

1.1 Meta-Object sustavJedno od osnovnih obiljezja Qt-a je Meta-Object sustav. Meta-Object sustav pruza potporuza mehanizam signala i utora, o kojem ce u sekciji 1.2 biti vise govora, takoder pruzapotporu za sustav svojstava (engl. Property system) te za dohvacanje informacija za vrijemeizvodenja (Run-Time type information - RTTI).

Prema Qt-ovoj dokumentaciji [20], Meta-Object sustav bazira se na sljedecim sastav-nicama:

• QObject klasa bazna je klasa koju nasljeduju sve klase unutar kojih se koriste funk-cionalnost koje Meta-Object sustav pruza.

POGLAVLJE 1. QT 5 4

• Q OBJECT je makro koji se koristi unutar privatnog dijela deklaracije klase kakobi se osposobile znacajke Meta-Object sustava.

• Meta-Object Compiler (moc) svaku klasu koja nasljeduje QObject nadopunjujepotrebnim kodom koji implementira meta-object znacajke.

QObject klasaQObject je bazna klasa za sve Qt objekte. Ona je klasa koja implementira mehanizam sig-nala i utora. QObject i klase koje ju nasljeduju, medusobno se mogu organizirati u stablastustrukturu (hijerarhiju). Objektima QObject klase, objekte roditelje moze se pridruziti nadva nacina, kroz konstruktor - predajuci pokazivac na objekt roditelj ili koristeci metodusetParent(*parent). U trenutku odredivanja roditelja, pocetni objekt se automatski do-daje na listu djece objekta roditelja. Na taj nacin, roditelj preuzima vlasnistvo na objektomdjetetom. Zahvaljujuci ovakvoj strukturi, roditelj se brine o oslobadanju memorije kojedijete zauzima te automatski brise i dijete unutar svog destruktora.

Jos jedna bitna stavka klase QObject jest to sto pruza osnovne funkcionalnosti vremen-skog brojaca kroz metode startTimer(); i killTimer();. Za naprednije funkcional-nosti vremenskog brojaca postoji klasa QTimer.

Meta-Object CompilerMeta-Object Compiler (moc) unatoc svom nazivu zapravo nije kompajler vec generatorkoda. Stovise, moc nije jedini generator koda unutar Qt biblioteke. User Interface Com-piler (uic) je takoder generator koda koji iz opisa sucelja zapisanog u XML-u, generiraC++ kod, dok Resource Compiler (rcc) generira kod kojim se resursi ugraduju u Qt apli-kaciju. Moc je sastavni dio Qt-a pomocu kojeg je omoguceno automatsko ili jednostavnijeimplementiranje slozenih funkcionalnosti.

Moc cita datoteke zaglavlja klasa te u njima trazi javljanje kljucne rijeci Q OBJECT.Ukoliko pronade javljanje kljucne rijeci, moc generira novu izvornu C++ datoteku u kojojgenerira meta-object kod potreban za klase koje koriste Q OBJECT makro. GeneriraniC++ kod sadrzi implementacije metoda te instancu QMetaObject objekta koji sadrzi metapodatke. Takoder, kod mora biti kompiliran i povezan (engl. linked) s implementacijomklase. Kod koji moc generira (Meta-Object kod) potreban je za implementaciju sljedecihznacajki:

• signali i utori

• sustav svojstava

• informacije dobivene za vrijeme izvodenja koda (engl. run-time type information).

POGLAVLJE 1. QT 5 5

Signali i utori implementiraju se nakon sto moc u kodu klase naide na kljucne rijecislots, kojoj uvijek prethodi modifikator pristupa, ili signals.

Sustav svojstava (engl. The Property System), pruza mogucnost definiranja svojstavakroz koristenje Q PROPERTY() makroa. Svojstva definirana na taj nacin ponasaju se slicnokao varijable clanice, klase unutar koje je definiran makro, uz dodatne mogucnosti. Primjerdodatnih znacajki jest mogucnost citanja i pisanja bez poznavanja klase kojoj to svojstvopripada, vec je dovoljno samo poznavanje imena svojstva. Citanje i pisanje moguce jeizvesti koristenjem funkcija property() i setProperty().

Jos neke kljucne rijeci koje moc prevada u C++ kod su:

• Q ENUM() deklarira listu enumeracija

• Q CLASSINFO() omogucuje dodavanje para imena i vrijednosti nekom meta-objektu

• Q FLAGS() deklarira enumeracije koje se ne iskljucuju medusobno.

Kljucne rijeci, Qt ekstenzije jeziku C++, su zapravo makroi koje moc definira u datoteciqobjectdefs.h, na nacin prikazan u isjecku koda 1.1, preuzetom iz izvora [15].

Isjecak koda 1.1: Definicija makroa1 # d e f i n e s l o t s s l o t s2 # d e f i n e s i g n a l s s i g n a l s3 # d e f i n e Q SLOTS Q SLOTS4 # d e f i n e Q SIGNALS Q SIGNALS5 # d e f i n e Q PROPERTY( t e x t ) Q PROPERTY( t e x t )6 # d e f i n e emi t

Obicno kompiliranje C++ koda ide u 2 koraka:

1. Kreiranje svih datoteka objekata

2. Povezivanje datoteka objekata za program.

Kod koristenja moc-a potreban je jedan pretkorak, odnosno predkompiliranje svih potreb-nih datoteka koristeci moc. Moc takoder upozorava o neispravnim ili opasnim izrazimaunutar deklaracije klase s Q OBJECT makroom.

Isjecak koda 1.2: Definicija klase koja sadrzi kljucnu rijec Q OBJECT1 c l a s s Coin : p u b l i c QObject , p u b l i c Q G r a p h i c s E l l i p s e I t e m2 {

3 Q OBJECT4 Q PROPERTY( q r e a l o p a c i t y READ o p a c i t y WRITE s e t O p a c i t y )5 Q PROPERTY( QRectF r e c t READ r e c t WRITE s e t R e c t )6

POGLAVLJE 1. QT 5 6

7 p u b l i c :8 e x p l i c i t Coin ( QGraph ics I t em ∗ p a r e n t = 0 ) ;9 enum { Type = UserType + 4 } ;

10 i n t t y p e ( ) c o n s t ;11 vo id e x p l o d e ( ) ;12 boo l e x p l o s i o n ( ) c o n s t ;13 vo id s e t E x p l o s i o n ( boo l e x p l o s i o n ) ;1415 p r i v a t e :16 boo l mExplos ion ;17 } ;

Zasto Qt koristi mocDva bitna pojma vezana uz racunarstvo su introspekcija i refleksija. U kontekstu racunarstva,introspekcija je svojstvo programa da ispita karakteristike objekta za vrijeme izvrsavanja,dok je refleksija svojstvo da proces koji se odvija ispita te modificira vlastitu strukturu teponasanje. Pod karakteristike spadaju ime objekta, bazna klasa koju nasljeduje, metode,varijable clanice ili tip objekta [16]. Dok neki jezici kao sto je Python podrzavaju i intros-pekciju i refleksiju, C++ ima ogranicenu podrsku za introspekciju [15]. Tu na snagu stupamoc, je alat koji omogucuje introspekciju.

RTTI u C++

Identificiranje tipova podataka za vrijeme izvodenja (Run-Time type identification - RTTI)u C++ osposobljeno je kroz sljedece funkcije:

• dynamic cast() - pretvorba tipova podataka

• typeid() - dohvacanje tipova podataka.

Uz navedene metode, moguce je dohvacanje imena klase, lokaciju tablice virtualnih funk-cija te hijerarhiju [12]. Unatoc tome, RTTI ima ogranicenja i mane zbog kojeg se cestoizbjegava, a u pojedinim je projektima cak i zabranjena njegova upotreba [6].

Ogranicenja i mane RTTI-a:

• RTTI se moze koristiti samo s polimorfnim klasama, dakle klasama koje sadrze barjednu virtualnu funkciju.

• Neki C++ kompajleri ne sadrze podrsku za RTTI. S druge strane, zbog potrebe za do-datnim informacijama za spremanje tipova podataka, neki kompajleri koji podrzavajuRTTI zahtijevaju eksplicitnu sklopku za omogucavanje RTTI-a.

POGLAVLJE 1. QT 5 7

• Funkcija dynamic cast() nije stabilna kod koristenja dinamickih biblioteka te superformanse nepredvidive.

• RTTI nije u skladu s C++ zero-overhead policy, princip prema kojem izvrsavanjeimplementiranih apstrakcija ne smije trajati duze od vlastitih implementacija [6].

Introspekcija koristeci moc

Moc, kao sto je vec receno, je generator koda koji implementira razne metode te kreiraobjekt QMetaObject. Instanca QMetaObject klase je instancirana za svaku klasu kojasadrzi Q OBJECT makro te sadrzi sve meta podatke potrebne za Qt-eve mehanizme.

Neki od podataka koji se mogu dohvatiti su:

• ime klase putem metode className()

• meta objekt klase koju nasljeduje putem superClass()

• informacije o metodama klase putem method() i methodCount()

• informacije o svojstvima klase putem property() i propertyCount().

Kod koji moc generira je pisan koristeci standardni C++, zbog cega ga je mogucekompilirati koristeci bilo koji C++ kompajler [20], a kao stabilniju alternativu funkcijidynamic cast(), Qt nudi metode qobject cast() i qt metacast() [5].

Iako se introspekcija rijetko koristi za razvoj jednostavnih grafickih aplikacija, potrebnaje za izradu skriptnih izvodaca te alata za izgradnju grafickih sucelja [20]. U kontekstu Qt-anavedeni elementi introspekcije koriste se implementaciju internih funkcionalnosti, medukojima su i signali i utori. Alternativa realizaciji signala i utora pomocu introspekcije, jeC++ sustav predlozaka (engl. template sustav), medutim takva bi realizacija, prema TheQt company, bila manje robusnija i citljivija [5].

1.2 Signali i utoriSignali i utori (engl. Signals and slots) jedno je od najbitnijih obiljezja Qt5, a neophodanje i u izradi video igre. Signali i utori su mehanizam pomocu kojeg je implementiranakomunikacija razlicitih objekata unutar Qt5. Primjer scenarija u kojem je koristen navedenimehanizam je pritisak na gumb Start nakon kojeg se salje signal clicked() povezan smetodom startGame().

Komunikacija izmedu gumba i metode jest ono u cemu se Qt5 razlikuje od vecineostalih platformi. Na drugim platformama komunikacija razlicitih objekata cesto je os-tvareno koristenjem callback() funkcije, odnosno prosljedivanjem pointera na funkciju

POGLAVLJE 1. QT 5 8

koja odraduje posao. Takav pristup sa sobom nosi probleme prosljedivanja krivih tipovapodataka. Qt5 za razmjenu poruka izmedu objekata koristi signale i utore. Prema [5]navedeni mehanizam je izgraden iz tri koncepta:

• Signal - poruka koju objekt salje

• Utor - metoda koja se izvrsava kao reakcija na signal

• Veza - connect metoda koja spaja signale i utore.

Prednost signala i utora je sto se jedan signal moze povezati s vise razlicitih utora, tejedan utor moze biti povezan s vise signala, kao sto je prikazano na slici 1.1. Povezaniobjekti mogu biti razlicitih klasa, a mogu pripadati i razlicitim dretvama.

Slika 1.1: Shematski prikaz povezivanja signala i utora

Signali i utori deklariraju se kao metode u definiciji klase. Signali su u definiciji klasenaznaceni kljucnom rijeci signals, ne smiju imati povratnu vrijednost te su uvijek javnodefinirani. Signali se ne implementiraju, vec se implementacija generira pomocu moc-a.Utori su naznaceni kljucnom rijeci slots, takoder ne smiju imati povratnu vrijednost, alimogu biti privatne, zasticene ili javne metode. Prednost utora je sto osim uloge u meha-nizmu signala i utora, mogu se koristiti zasebno te pozivati kao metoda klase. Povezivanjesignala i utora provodi se koristeci metodu connect, gdje liste tipova parametara metodasignala i utora moraju odgovarati.

POGLAVLJE 1. QT 5 9

SintaksaPostoje dvije vrste sintakse za pozivanje connectmetodom, medutim prednost se daje no-vijoj sintaksi iz vise razloga. Prema Qt-ovoj dokumentaciji [20], nova sintaksa omogucuje:

• automatsko pretvaranje tipova (engl. castanje), ako je moguca implicitna konverzija

• uporaba metode klase kao utora

• provjera postojanja signala i utora te tipova za vrijeme kompiliranja.

Stara sintaksa:connect(sender, SIGNAL(signal(int)),receiver, SLOT(slot(int)));.

Nova sintaksa:connect(sender, &Sender::signal, receiver, &Receiver::slot);

Poziv nove sintakse se sastoji od objekta koji salje signal - sender (instanca klaseSender), signala koji salje - &Sender::signal, objekta koji prima signal - receiver(instanca klase Receiver), te utora, metode koja se izvrsava kao reakcija na signal -&Receiver::slot.

Primjer signala i utoraQt-eve klase imaju preddefinirane signale i utore. Primjer je klasa QLineEdit, grafickielement za unos teksta. Neki od signala koje sadrzi su:

• textChanged() - signal se salje kada se promijeni tekst

• returnPressed() - signal se salje kad je pritisnuta tipka za potvrdivanje.

Neki od utora su:

• paste() - metoda koja unosi tekst zapamcen u meduspremniku (engl. clipboard)

• clear() - metoda koja brise tekstualni sadrzaj grafickog elementa.

Preddefinirani signali i utori mogu se povezivati s vlastitim implementacijama utorai signala. Utor clear() moze biti povezan sa signalom koji emitira pritisak neke tipkena tipkovnici, dok se na signal textChanged() moze vezati utor s funkcijom provjerezadovoljava li uneseni tekst odredene uvjete.

POGLAVLJE 1. QT 5 10

Meta object kod iza signala i utoraIndeksiranje metoda

Signali, utori i metode neke klase koja sadrzi Q OBJECTmakro popisani su u pripadajucemQMetaObject objektu. Svakoj je metodi pridruzen indeks, pocevsi od 0, prateci navedeniredoslijed. Ovaj indeks naziva se relativni indeks. Cesce koristen indeks naziva se apso-lutni indeks. Prilikom odredivanja apsolutnog indeksa metodama, ukljucuju se i metodesvih klasa iz lanca nasljedivanja. Tada se indeksima dodaje pomak jednak broju metoda ubaznim klasama.

Signali

Slanje signala u kodu izvodi se pozivajuci kljucne rijeci emit te u nastavku poziv metodesignala. Kljucna rijec emit je zapravo prazni makro, kao sto je prikazano u isjecku koda1.1, koji sluzi programeru za lakse razumijevanje koda. Slanje signala implementira se uautomatski generiranoj implementaciji signala u datoteci moc CLASS.cpp, gdje je CLASSime klase. Signal se implementira kao obicna metoda koja poziva activate() metoduQMetaObjecta te joj prosljeduje povratni tip i argumente kao u isjecku koda 1.3.

Isjecak koda 1.3: Implementacija signala, preuzeto s [15]1 vo id className : : s igna lName ( Type a rg1 )2 {

3 vo id ∗ a [ ] = { Q NULLPTR , c o n s t c a s t <vo id ∗>4 ( r e i n t e r p r e t c a s t <c o n s t vo id ∗>(& a r g 1 ) ) } ;5 QMetaObject : : a c t i v a t e ( t h i s , &s t a t i c M e t a O b j e c t , 0 , a ) ;6 }

1.3 Qt WidgetsQt Widgets je modul koji sadrzi osnovne elemente korisnickog sucelja potrebne za izraduQt aplikacija. Widgeti (izvedenica iz rijeci: Windows i Gadgets) su osnovni blokovi odkojih se gradi graficko korisnicko sucelje. Primaju dogadaje (engl. events) uzrokovaneracunalnim misem, tipkovnicom ili nekim drugim objektom, te iscrtavaju reprezentacijusebe na prozor.

Unatoc svom vidljivom obliku, widgeti su u Qt-evoj grafici pravokutnici te se na ekraniscrtavaju u odnosu na gornji lijevi kut te prema Z-redoslijedu. Z-redoslijed (eng. Z-order)je redoslijed koji odreduje preklapanje objekata, odnosno kojim se redoslijedom iscrtavaju.Sluze prikazivanju informacija, statusa, sluze korisniku za unos podataka ili kao spremisteza druge widgete koje zelimo grupirati. QWidget je osnovna klasa koju nasljeduju svi

POGLAVLJE 1. QT 5 11

elementi korisnickog sucelja definirani u sklopu Qt Widgets modela, a sama QWidget klasanasljeduje QObject i QPaintDevice.

Definiranjem roditelj-potomak veze izmedu komponenta grafickog sucelja, olaksavase upravljanje memorijom jer objekti roditelji upravljaju oslobadanjem memorije objekatapotomaka. Objekti se na navedeni nacin mogu povezivati, te grade hijerarhijsku strukturu.Glavnom prozoru aplikacije nikad nije pridruzen objekt roditelj.

Qt Widgets uobicajeno se koristi za izradu desktop aplikacija. Widgeti su najcesceelementi za izgradnju korisnickog sucelja, primjereni za staticna sucelja [20].

Qt DesignerQt Designer je alat za izradu Qt aplikacija, dostupan u sklopu Qt Creator-a, integriranerazvojne okoline. Prednost ovog alata je jednostavno dizajniranje grafickih sucelja. QtDesigner je graficki alat, objekti se mogu instancirati i povezivati povuci i ispusti metodom(engl. drag and drop). Glavni i osnovni blokovi izgradnje aplikacije su Qt Widgeti. Radnapovrsina alata podijeljena na pet cjelina:

• glavni radni prozor s radnom reprezentacijom prozora koji izradujemo

• popis dostupnih widgeta

• prikaz odnosa medu widgetima (hijerarhija) te svojstva

• veze medu objektima.

Izradene forme i prozori pomocu Qt Designera jednostavno se integriraju s kodom teih je moguce mijenjati dinamicki koristeci kod.

1.4 Qt QuickQt Quick alternativa je koristenju Qt Widgets-a. Ovaj modul prilagoden je za razvoj QML(Qt Modelling Language) aplikacija koje se koriste na uredajima s ekranima osjetljivimana dodir [7]. Kao sto je spomenuto Qt Quick-om se izraduju QML aplikacije, medutimmodul sadrzi i C++ API (Application programming interface) za prosirenje aplikacije C++

kodom.Sastavne jedinice, iz kojih se gradi sucelje, u Qt Quick-u poznate su pod nazivom QML

types. Dok je dostupno nekoliko osnovnih QML type, moguce je uvesti tipove iz drugihbiblioteka ili izraditi vlastite tipove.

Prednosti Qt Quicka su sto omogucuje u potpunosti prilagodljiv izgled te olaksava iz-radu i koristenje animacija i tranzicija. Vizualne efekte moguce je ostvariti koristeci speci-jalizirane komponente za cesticne i sjencane efekte.

POGLAVLJE 1. QT 5 12

QMLQML (Qt Modelling Language) je deklarativni programski jezik. Koristen je za opis ko-risnickog sucelja na dvije razine:

• opisuje izgled korisnickog sucelja

• opisuje ponasanje korisnickog sucelja.

Sintaksa QML-a vrlo je slicna JSON (JavaScript Object Notion) sintaksi, stovise QMLpodrzava JavaScript izraze u kodu ili uvoz vanjskih JavaScript biblioteka.

Isjecak koda 1.4: Isjecak QML koda1 i m p o r t QtQuick 2 . 1 22 i m p o r t QtQuick . Window 2 . 1 234 Window {

5 v i s i b l e : t r u e6 wid th : 3007 h e i g h t : 3008 t i t l e : qsTr ( ” H e l l o World ” )9 R e c t a n g l e {

10 wid th : 300 ; h e i g h t : 30011 c o l o r : ” g r e e n ”12 R e c t a n g l e {13 wid th : 300 ; h e i g h t : 30014 c o l o r : ” b l u e ”15 r a d i u s : 0 . 5∗ wid th16 }

17 }

18 }

Vizualni rezultat QML koda prikazan na slici 1.2.

Slika 1.2: Vizualni rezultat QML koda

POGLAVLJE 1. QT 5 13

Modul koji pruza oboje, QML jezik i infrastrukturu, je Qt QML. Unatoc tome, QtQuick pruza sirok spektar vizualnih i interaktivnih komponenti te sustav za animacije. QtQuick je alat kojim se omogucava koristenje QML-a, medutim Qt Quick nije jedini takav.Postoje i drugi sustavi koji omogucavaju razvijanje grafickih sucelja u QML-u. Primjertakvih alata su Sailfish Silica, BlackBerry Cascade i QBS.

1.5 Infrastruktura za programiranje 2D igaraQt je biblioteka koja je popularnost stekla podrskom za izradu grafickih sucelja. Unatoctome, danas se sve vise razvija te nastoji pruziti sto bolju podrsku i za izradu 2D, ali i 3D,video igara. Osnovne stavke Qt-a za izradu video igara su klasa QGraphicsView te arhi-tektura grafickog pogleda, podrska za detekciju kolizija te QSettings klasa za definiranjepostavki aplikacije.

Uobicajena grafika igre sastoji se od tri osnovna dijela:

• instanca klase QGraphicsView, zvana view ili pogled

• instanca klase QGraphicsScene, zvana scene ili scena

• vise instanci klase QGraphicsItem, zvane items ili graficki objekti.

Odnos medu tim objektima predstavljen je slikom 1.3.Graficki objekti predstavljaju osnovne jedinice kojima se gradi scena (i pogled). Objekte

dodajemo na scenu, a potom pogled odreduje koji dio scene se prikazuje. Pogled moze pri-kazati cijelu scenu, njen dio ili se kretati te prikazivati cijelu scenu dio po dio.

Graficki objektiKao sto je vec spomenuto, graficki objekt je osnovna jedinica koja gradi scenu. QGraphicsItemsluzi kao bazna klasa za sve graficke elemente na sceni, bilo posrednim ili neposrednimnasljedivanjem, kao sto je prikazano u slici 1.4. Objekti mogu prikazivati osnovne oblike,slozenije oblike, tekst, slike, a mogu ostati i prazni. Objekti se mogu medusobno povezivativezom roditeljstva, te mogu sacinjavati slicnu strukturu kao QObject objekti.

Qt pruza mogucnost implementiranja vlastite QGraphicsItem klase. Vlastita imple-mentacija sastoji se od 3 kljucna koraka:

• nova klasa mora nasljedivati QGraphicsItem

• implementacija ciste virtualne metode boundingRect(), koja vraca pravokutnuaproksimaciju prostora koji zauzima objekt

POGLAVLJE 1. QT 5 14

Slika 1.3: Odnos pogleda, scene i grafickih objekata

• implementacija ciste virtualne metode paint(), koja implementira iscrtavanje oblika.

Kao alternativu stvaranju vlastite implementacije, Qt nudi nekoliko standardnih objekatakako bi olaksao i ubrzao razvoj programa. Standardni objekti se mogu modificirati teprilagodavati potrebama programera. U nastavku slijedi popis osnovnih oblika prema lite-raturi [1].

• QGraphicsLineItem - iscrtavanje jednostavne linije

• QGraphicsRectItem - iscrtavanje pravokutnika

• QGraphicsEllipseItem - iscrtavanje elipse

• QGraphicsPolygonItem - iscrtavanje poligona

• QGraphicsSimpleTextItem - iscrtavanje jednostavnog teksta

• QGraphicsTextItem - iscrtavanje tekstova slozenije strukture

• QGraphicsPixmapItem - iscrtavanje razlicitih slika.

POGLAVLJE 1. QT 5 15

Slika 1.4: Nasljedivanje klase QGraphicsItem

Svaki objekt uz standardna obiljezja sadrzi i granicni pravokutnik (bounding rect) uodnosu na kojeg se postavlja pozicija.

Definicija 1.5.1 (Granicni pravokutnik). Granicni pravokutnik objekta O, je najmanji pra-vokutnik takav da se objekt O u potpunosti nalazi unutar pravokutnika.

Slika 1.5: Granicni pravokutnici grafickih objekata

Ponasanje objekata moguce je modificirati koristeci zastavice zvaneQGraphicsItem::GraphicsItemFlag. Po kreiranju objekata, sve su zastavice onemogucene.Neke od zastavica prikazane su u tablici 1.1.

Objekti se mogu prilagodavati potrebama metodama kao sto su: setEnabled(),setFocus(), setGraphicsEffect(), setOpacity() te setPos(). Ovim metodama se

POGLAVLJE 1. QT 5 16

ItemIsMovableObjekt podrzava interaktivno pomicanje koristeciracunalni mis.

ItemIsSelectable Objekt podrzava odabiranje.ItemIsFocusable Objekt podrzava fokusiranje koristeci tipkovnicu.

ItemClipsToShapeObjekt reagira samo na dogadaje unutar oblikaiscrtavanja, a ne ne objekte izvan oblika, unutargranicnog pravokutnika.

ItemClipsChildrenToShapeObjekt ogranicava iscrtavanje svih potomaka naprostor svog oblika.

ItemIgnoresTransformations Objekt zanemaruje sve nasljedene transformacije.ItemIgnoresParentOpacity Objekt zanemaruje neprozirnost roditelja.

ItemDoesntPropagateOpacityToChildren

Objekt ne prosljeduje neprozirnost na objektekojima je roditelj.

ItemStacksBehindParent Objekt se postavlja iza roditelja po Z-redosljedu.ItemHasNoContents Objekt ne iscrtava nista.

ItemSendsGeometryChangesPostavljanjem ove zastavice, metoda itemChange()obavjestava o geometrijskim promjenama objekta.

Tablica 1.1: QGraphicsItem zastavice

redom odreduje reagira li objekt na dogadaje, je li objekt fokusiran, graficki efekti, nepro-zirnost te pozicija. Uz naveden postoji jos niz metoda kojima se objekti mogu modificirati[20].

Za upravljanje roditeljskim vezama izmedu objekata, QGraphicsItem sadrzi sljedecemetode: setParentItem(QGraphicsItem *parent) - postavlja novi objekt kao rodi-teljski, parentItem() - dohvaca roditeljski objekt, childItems() - vraca listu obje-kata koji su potomci odabranog objekta, setFiltersChildEvents(bool enabled) -odreduje hoce li ili ne svi dogadaju usmjereni djeci ovog objekta ubuduce biti proslijedeniobjektu roditelju.

Pretvorba QGraphicsItem objekata

Funkcija koja nije metoda clanica klase QGraphicsItem, ali je usko vezana uz nju, jeTypeT qgraphicsitem cast(QGraphicsItem *item). Ako je moguce, funkcija prim-ljeni objekt item (engl. cast) pretvara u objekt tipa TypeT te vraca takav objekt. Ukolikopretvorba nije moguca, funkcija vraca nullptr. Kako bi se omogucilo koristenje navedenefunkcije na objektima prilagodenih klasa potrebno je reimplementirati metode type().Svi standardni objekti su povezani s jedinstvenom vrijednoscu, koja se dohvaca metodomtype(), dok je novoimplementiranim objektima pridana vrijednost UserType(65536).

POGLAVLJE 1. QT 5 17

Zato kako bi se naslijedene klase mogle razlikovati, potrebno je reimplementirati nave-denu metodu kako bi i ona vracala jedinstvenu vrijednost na nacin prikazan u primjeru1.5.

Isjecak koda 1.5: Reimplementacija funkcije type()1 c l a s s CustomItem : p u b l i c QGraph ics I t em2 {

3 p u b l i c :4 enum { Type = UserType + 1 } ;5 i n t t y p e ( ) c o n s t o v e r r i d e6 {

7 r e t u r n Type ;8 }

9 } ;

ScenaNakon sto je svladano kreiranje samih objekata, potrebno ih je dodati na scenu. Baznaklasa svih scena je QGraphicsScene koja nasljeduje Q Object. Dodavanje objekata nascenu izvodi se unutar metoda klasa koje nasljeduju QGraphicsScene na dva nacina.

• metodom addItem() dodaju se postojeci objekti

• metodama addEllipse(), addLine(), addPath(), addPixmap(), addPolygon(),addRect() i addText() se stvara novi, odgovarajuci objekt, dodaje se na scenu temetoda vraca pokazivac na novostvoreni objekt.

Na navedene nacine pridaje se vlasnistvo nad objektom konkretnoj sceni. U svakom tre-nutku objekt moze pripadati samo jednoj sceni pa ako se vlasnistvo objekta pokusa predatidrugoj sceni, veza objekta i prve scene se brise te objekt ostaje u vlasnistvu samo novescene.

Scena je izgradena iz tri sloja.

• ItemLayer

• BackgorundLayer

• ForegroundLayer

Kada QGraphicsScene iscrtava sadrzaj, iscrtava slojeve odredenim redoslijedom. Prvose iscrtava BackgorundLayer pozivom virtualne metode drawBackground(), potomItemLayer pozivom drawItems() te u konacnici ForegroundLayer pozivom metodedrawForeground().

POGLAVLJE 1. QT 5 18

Pozicioniranje komponenti na sceni

Kako je scena odgovorna za objekte koje posjeduje, u odnosu na nju odreduje se i pozi-cija objekata. U slucajevima kada graficki objekti imaju uredenu vezu roditelj-potomak

Slika 1.6: Koordinate grafickih objekata na sceni

s drugim objektom poziciju se racuna u odnosu na objekt roditelj. Slikom 1.6 vizualnoje prikazano kako se racuna pozicija grafickih objekata u odnosu na scenu ili na objektroditelj.

Prednost QGraphicsScene je sposobnost da brzo i efikasno odreduje pozicije eleme-nata. Za upravljanje lokacijama komponenata, QGraphicsScene koristi indeksirajuci al-goritam (Binary Space Partitioning tree - BSP) binarnog particioniranja prostora. BSP jemetoda kojom se prostor rekurzivno dijeli na dva konveksna podprostora koristeci hiper-ravnine te tvori binarno stablo [22], kao na slici 1.7. BSP algoritam je primjenjiv na velikimscenama s mnogo staticnih objekata.

Metoda bspDepthTree() vraca dubinu BSP stabla. Dubina BSP stabla utjece na per-formanse iscrtavanja scene te brzine pozicioniranja elemenata [20]. Optimalna velicinaBSP stabla je kada svaki segment ima izmedu 0 i 10 elemenata. Alternativa koristenju BSPindeksiranja je koristenje takozvanog NoIndex indeksiranja, objekti nisu indeksirani vecse linearno pretrazuju. Ovakva metoda pogodna je za scene s mnogo dinamickih elemenatakoji se cesto brisu i dodaju, jer je slozenost tih operacija konstantna.

Metoda items(), koja vraca elemente na temelju njihove pozicije, ima nekoliko pre-opterecenja pa tako moze vratiti listu objekata na sceni, objekata koji su unutar ili se pre-sijecaju s odredenim pravokutnikom ili objekata na odredenoj poziciji. Lista je sortiranaprema Z-redoslijedu.

POGLAVLJE 1. QT 5 19

Slika 1.7: Stablo binarnog prostornog particioniranja

PogledS kreiranom scenom te grafickim objektima na njoj, preostalo je jos samo iscrtavanje iprikazivanje zeljenog dijela scene. Za taj zadatak odgovorna je klasa QGraphicsViewkoja nasljeduje QAbstractScrollArea. Prvi korak pri iscrtavanju scene je pridruzivanjescene pogledu. Pridruzivanje je moguce na dva nacina, saljuci adresu scene kao argumentkonstruktoru pogleda, ili koristeci metodu setScene(). Drugi korak je pozivanje metoderender() nad instancom QGraphicsView klase.

Ukoliko nije drugacije odredeno, pri prvoj vizualizaciji pogleda, automatski je detekti-rano podrucje scene koje se iscrtava koristeci metoduQGraphicsScene:itemsBoundingRect(). Time se iscrtava granicni pravokutnik kojisadrzi sve graficke komponente scene. Za odredivanje prilagodenog podrucja koje se iscr-tava, postoji metoda setSceneRect().

Interakcije misa i tipkovnice s elementima na ekranu prvi obraduje pogled koji ihprevada u scenske dogadaje (QGraphicsSceneEvents) te ih prosljeduje vizualiziranojsceni, a scena ih prosljeduje samom elementu koji ih obraduje. Interaktivnost pogleda semoze programabilno onemoguciti ili omoguciti koristeci metodu setInteractive(boolenabled).

POGLAVLJE 1. QT 5 20

Optimizacija iscrtavanja

Pazljivi citac zapitati ce se sto se dogada s objektima koji nisu unutar pogleda, a na sceni su.Trose li oni resurse graficke procesorske jedinice? Ovo pitanje je standardno pitanje kojese rjesava takozvanim view frustum culling mehanizmom, mehanizmom koji detektira kojiobjekti nisu vidljivi te ih ne iscrtava. Navedeni mehanizam nije potrebno implementiratijer Qt optimizira iscrtavanje samo potrebnih elemenata [1].

Za napredno podesavanje performansi, QGraphicsView, pruza metodesetOptimizationFlag() i setOptimizationFlags, kojima se mogu omoguciti sljedecemogucnosti.

• QGraphicsView::DontSavePainterState - Postavljanjem ove zastavice,QGraphicsView ne vraca spremljena stanja QPainter objekta. Omogucavanje zas-tavice je korisno kada graficki objekti vec sami vracaju spremljeno stanje QPainterobjekta.

• QGraphicsView::DontAdjustForAntialiasing - Postavljanjem ove zastavice,QGraphicsView ne povecava vidljiva podrucja, objekata koji iscrtavaju zagladenelinije (engl. antialiasing), za 2 pixela u svakom smjeru, cime se smanjuje podrucjekoje zahtjeva iscrtavanje.

Transformacije

QGraphicsView podrzava afine transformacije. Transformacije se mogu graditi pomocumatricnog zapisa koristeci metodu setTransform() ili koristeci metode rotate(),scale(), translate() ili shear(), ucinak je prikazan na slici 1.8. Za vrijeme transfor-macija, QGraphicsView, odrzava centar pogleda fiksnim, zbog cega translacije nemajuvizualni ucinak [20].

Alternativa koristenju QGraphicsViewmetoda za transformacije je koristenje instanceklase QTransform, koja specificira transformacije 2D koordinatnog sustava. QTransformpruza mogucnost rotiranja, translacije, skaliranja, projekcije te smicanja. Transformacijese mogu zadati i matricno te se mogu pridruzivati grafickim objektima koristeci metodusetTransform().

Koordinatni sustavJedan od osnovnih elemenata potrebnih za programiranje 2D grafike jest razumijevanjekoordinatnog sustava alata koji se koristi. U sklopu Qt-eve podrske za iscrtavanje gra-fike bitno je istaknuti tri zasebna, ali povezana koordinatna sustava. Koordinatni sustavpogleda, sustav scene te sustav svakog pojedinog grafickog elementa.

POGLAVLJE 1. QT 5 21

Slika 1.8: Transformacije pogleda

Koordinatni sustavi sastoje se od dvije koordinatne osi, x i y. X koordinata raste odizvorista na desno, dok y koordinata raste od izvorista na dole, kao sto je i uobicajeno upodrucju racunalne grafike, slika 1.9.

Slika 1.9: Koordinatni sustav u racunalnoj grafici

POGLAVLJE 1. QT 5 22

KolizijeTema detektiranja kolizija slozena je tema vrijedna proucavanja, a primjenu je medu osta-lom nasla i u programiranju video igara. Qt nudi podrsku za osnovno detektiranja kolizijagrafickih objekata na sceni. Ovisno o potrebi, QGraphicsItem pruza dvije metode zadetekciju kolizija.

Prva metoda daje odgovor na pitanje dogada li se kolizija grafickog objekta s nekimkonkretnim drugim grafickim objektom. Poziv ove metode,

objectA.collidesWithItem(objectB, ItemSelectionMode);

rezultira true ili false bool varijablom. Druga metoda odgovara na pitanje s kojim sveobjektima konkretni objekt dolazi u koliziju. Poziv ove metode,

objectA.collidingItems(ItemSelectionMode);

rezultira listom objekata tipa *QGraphicsItem.Obje metode primaju opcionalan argument koji odreduje kako je definirana kolizija dva

objekta. Postoje cetiri moguca izbora.

Slika 1.10: Objekti u koliziji uz ContainsItemShape uvjet

Qt::ContainsItemShape: Kolizija je detektirana samo ako se objekti, s kojima seprovjerava kolizija, u potpunosti nalaze unutar podrucja objekta nad kojim je pozvana me-toda.

Slika 1.11: Objekti u koliziji uz IntersectsItemShape uvjet

POGLAVLJE 1. QT 5 23

Slika 1.12: Objekti u koliziji uz ContainsItemBoundingRect uvjet

Qt::IntersectsItemShape: Kolizija je detektirana ako se objekti, s kojima se koli-zija detektira, barem presijecaju s podrucjem objekta nad kojim je pozvana metoda.Qt::ContainsItemBoundingRect: Kolizija je detektirana ako se granicni pravokut-

nici, objekata s kojima se provjerava kolizija, u potpunosti nalaze unutar granicnog pravo-kutnika objekta nad kojim je pozvana metoda.

Slika 1.13: Objekti u koliziji uz IntersectsItemBoundingRect uvjet

Qt::IntersectsItemBoundingRect: Kolizija je detektirana ako se granicni pra-vokutnik, objekata s kojima se provjerava kolizija, presijeca s granicnim pravokutnikomobjekta nad kojim je pozvana metoda.

Iako Qt nudi navedene metode za detektiranje kolizije, ne pruza mogucnost dohvacanjatocke kolizije.

QSettingsPosljednja od opisanih funkcionalnosti koje Qt sadrzi, a korisne su za razvoj video igara,su postavke. Qt pruza vrlo jednostavno sucelje za trajno spremanje postavki aplikacije uobliku instance klase QSettings. Razlicite igre cesto imaju potrebu za realizacijom pos-tavki unutar kojih korisnik moze gasiti i paliti melodiju ili zvucne efekte, birati rezolucijuekrana, mijenjati kontrole kojima se junak krece ili nesto slicno.

Klasa QSettings pruza trajno spremanje uredenih parova kljuceva i vrijednosti.Kljucevi su kljucne rijeci pod kojima se sprema ime neke opcije, dok su vrijednosti stanja

POGLAVLJE 1. QT 5 24

u kojima se to opcija moze zateci. Ukoliko je potrebno odrediti uredeni par koji predstav-lja opciju gasenja i paljenja zvuka unutar igre, kljucna rijec bi mogla biti ”Zvuk”, dok bivrijednosti bile ”Upaljeno” i ”Ugaseno”.

Isjecak koda 1.6: Spremanje stavke postavke1 Q S e t t i n g s s e t t i n g s ;2 s e t t i n g s . s e t V a l u e ( ” Sound ” , ”On” ) ;

Isjecak koda 1.7: Dohvacanje stavke postavke1 Q S e t t i n g s s e t t i n g s ;2 Q S t r i n g sound = s e t t i n g s . v a l u e ( ” Sound ” , ” ” ) . t o S t r i n g ( ) ;

Kao vrijednosti, metoda setValue(), prima QString i QVariant. QVariant je klasakoja u nacelu sluzi kao nositelj podataka sirokog spektra tipova [5]. Moze pohranjivatipodatke osnovnih tipova kao sto su int, bool, char i float te slozenijih tipova kao stosu QString, QList i QUrl. Takoder QVariant moze simulirati unije za vecinu koristenihtipova podataka u Qt-u, a cesto se koristi u svrhu serijalizacije podataka te za rad s bazamapodataka unutar Qt-a.

Dohvacanje svih vrijednosti provodi se metodom allKeys(), koja vraca listu objekatatipa QString.

Fizika svijetaJedna od kljucnih stavki kod izgradnje video igara jest fizika svijeta u kojem je igrasmjestena. Dok u igrama poput vrlo poznatog Minesweepera, svijet, a sa samim time ifizika svijeta, zapravo ne postoji, u igrama kao sto su Super Mario [26], Pocket Tanks[25] ili Angry Birds [24] fizika odreduje sam tok igre. Gravitacija koja djeluje na grafickeobjekte, sila udarca, cvrstoca i elasticnost tijela, te putanja lansiranog objekta rezultati suzakona fizike koji vladaju stvorenim svijetom unutar igre.

Kao sto je vec napomenuto Qt je platforma za razvoj grafickih aplikacija i iako pruzamnostvo klasa i metoda s kojima je razvoj igara olaksan, ne pruza sustav za implementira-nje fizike svijeta unutar video igre.

Poglavlje 2

Oblikovni obrasci

Oblikovni obrazac naziv je za prijedlog rjesenja siroj grupi problema koji se cesto javljajupri razvoju programskih rjesenja. Oblikovni obrazac sacinjava njegovo ime, rjesenje kojeje dokumentirano u opcenitom obliku, te nije vezano uz specificnosti jednog problema iliprogramskog jezika, te opis (grupe) problema na koji obrazac pruza rjesenje. Obrasci secesto prikazuju grafickim prikazima (UML dijagramom).

2.1 Osnovna podjela oblikovnih obrazacaPrema literaturi [3] oblikovni obrasci se najcesce svrstavaju u jednu od tri grupe:

• obrasci stvaranja

• strukturni obrasci

• obrasci ponasanja.

Obrasci stvaranjaObrasci stvaranja (engl. Creation patterns) bazirani su na instanciranjima objekata. Pri-pomazu ostvarenju neovisnosti sustava od nacina na koji su objekti kreirani, sastavljeni ilireprezentirani. Neki od poznatijih oblikovnih obrazaca koji spadaju u ovu kategoriju su:Singleton, Prototype, Object Pool, Factory Method, Builder i Abstract Factory.

Strukturni obrasciStrukturni obrasci (engl. Structural patterns) bave se odnosom izmedu klasa. Naglasak jena nacinu na koji su klase i objekti komponirani u vece strukture. U nastavku su navedeni

25

POGLAVLJE 2. OBLIKOVNI OBRASCI 26

poznatiji primjerci obrazaca koji spadaju u ovu kategoriju: Flyweight, Composite, Bridge,Adapter, Decorator, Facade, Proxy, Private Class Data.

Obrasci ponasanjaObrasci ponasanja (engl. Behavioral patterns) usredotoceni su na komunikaciju izmeduklasa. Bave se algoritmima i dodjelom odgovornosti medu klasama. State, Visitor, Com-mand, Observer, Mediator, Strategy, Template method, Chain of responsability, Interpreter,Iterator i Memento poznatiji su predstavnici kategorije obrazaca ponasanja.

2.2 Oblikovni obrasci u razvoju programskih igaraKao i u mnogim drugim granama, u podrucju razvoja video igara cesto se javljaju slicniproblemi, stoga se koristeci oblikovne obrasce traze univerzalna rjesenja koja ce biti pri-mjenjiva u razlicitim okolnostima. Tematiku oblikovnih obrazaca u programiranju videoigara razraduje Nystrom u [2], a na njegovom se popisu pronasao i dio ovdje obradenihoblikovnih obrazaca. Slijedi detaljni prikaz obrazaca game loop, state i observer, a potomkratki prikaz problema koje rjesavaju obrasci flyweight i composite.

Game LoopOsnovni i neizostavni oblikovni obrazac kad se govori o video igrama je Game loop obra-zac. Game loop ili glavna petlja igre omogucuje protok vremena u igri, interaktivnost idinamicnost igara.

Jednostavno receno, glavna petlja igre zapravo je beskonacna petlja u kojoj se obradujeunos korisnika, promjene svih elemenata scene te se tada obradeni elementi iscrtavaju naekran.

Osnovna implementacije petlje igre sastoji se od obrade unosa podataka, azuriranja igrete iscrtavanja na scenu, prikazana isjeckom 2.1.

Isjecak koda 2.1: Osnovni algoritam igrace petlje1 w h i l e ( t r u e ) {2 p r o c e s s I n p u t ( ) ;3 u p d a t e ( ) ;4 r e d n e r ( ) ;5 }

Problem takvog algoritma je sto trajanje jednog prolaza kroz petlju ne mora trajati jednakokao trajanje nekog drugog, pa zbog toga dolazi do vremenski neravnomjernog iscrtavanjate onog sto nazivamo trzanje i zastoja u igrici.

POGLAVLJE 2. OBLIKOVNI OBRASCI 27

Kako bi se to ispravilo uvodi se vremenski brojac kojim se vrijeme izvodenja jednogprolaza kroz petlju standardizira. Na kraj petlje postavlja se vremenski brojac koji ceka daprode vrijeme koje treba imati svaki prolaz. Algoritam je prikazan slikom 2.1.

Slika 2.1: Sturktura glavne igrace petlje

Navedeni pristup je dobar kada je potrebno usporiti vrijeme izvodenja jednog prolazakroz petlju, medutim ukoliko je vrijeme potrebno za obradu podata i azuriranje duze no stoje prvotno odredeno za svaki prolaz potreban je drugaciji pristup.

Kako bi se dogadaji u igri dogadali konstantnom brzinom, zelimo da se stanja eleme-nata igre azuriraju konstantnom brzinom, neovisno o tome iscrtavaju li se odmah ili ne.Kako bi nadoknadili stvarno vrijeme koje je bilo potrebno za obradu podataka u proslomprolazu kroz petlju, u sljedecem prolazu kroz petlju ponavlja se azuriranje podataka s fik-snim vremenskim razmakom, koji je prijevremeno odreden kao vremenski korak u igri.Algoritam je prikazan slikom 2.2.

Game loop u Qt5

U pravilu Qt skriva implementaciju glavne petlje aplikacije. Nakon instanciranja objektaklase QApplication, nad njime se poziva metoda exec() kojom zapocinje glavna petljadogadaja aplikacije koja obraduje unos podataka.

Isjecak koda 2.2: Pokretanje glavne petlje aplikacije1 i n t main ( i t n argc , c h a r a rgv ∗ [ ] )2 {

3 Q A p p l i c a t i o n app ( argc , a rgv ) ;4 r e t u r n app . exec ( ) ;5 }

POGLAVLJE 2. OBLIKOVNI OBRASCI 28

Slika 2.2: Igraca petlja s vremenskim brojacem u update() metodi

Naravno, moguce je pristupiti izradi aplikacije na drugi nacin te implementirati svojuglavnu petlju aplikacije, odnosno video igre. Korisni alat u tom trenutku je QTimer, klasakoja pruza sucelje za brojace vremena.

StateJos jedan od osnovnih oblikovnih obrazaca koji se koriste u razvoju video igara je Stateobrazac. Poanta ovog obrasca je optimiziranje koda kojim je implementiran objekt kojiima razlicita stanja te se u tim stanjima drugacije ponasa.

State obrazac podrazumijeva stvaranje apstraktne klase koju nasljeduju klase koje pred-stavljaju pojedino stanje u kojem se objekt moze zateci. Tokom igre kako objekt mijenjastanje, tako se mijenja i instancirana klasa koja ga predstavlja te implementira kako se tajobjekt ponasa u pojedinmom stanju. Ovaj obrazac pomaze u restrukturiranju program-skog koda koji sadrzi metode s mnogo grananja kako bi pratile ponasanje stanja objekta scitljivijim i skalabilnijim kodom u skladu s objektno orijentiranom paradigmom.

Dijagram 2.3 prikazuje mogucu upotrebu State obrasca. Player je objekt koji se mozezateci u dva stanja, trcecem ili hodajucem. Klase koje implementiraju ta dva stanja razli-kuju se po implementaciji metode kretanja, koja pokrece odgovarajucu animaciju hodanjaili trcanja.

State u Qt5

Obrazac State usko je vezan uz konacne automate. State obrazac u kratkim crtama mozese opisati nabrajajuci stanja u kojima se tijelo moze naci te kako prelazi iz jednog stanja u

POGLAVLJE 2. OBLIKOVNI OBRASCI 29

Slika 2.3: Dijagram State obrasca

drugo, te skicirati, kao na skici 2.5. Ovako prezentiran state obrazac podsjeca na konacne

Slika 2.4: Skica stanja i prijelaza

automate. Slijedi formalna definicija konacnih automata [10].

Definicija 2.2.1 (Konacni automat). Konacni automat nad abecedom Σ je idealizirani (ma-tematicki) strojM B (Q,Σ, δ, q0, F), koji uz Σ sadrzi i:

• konacan skup Q cije elemente nazivamo stanja

• istaknuti element q0 ∈ Q koji nazivamo pocetno stanje

• podskup F ⊆ Q cije elemente nazivamo zavrsna stanja,

• funkcija prijelaza δ : Q × Σ −→ Q

POGLAVLJE 2. OBLIKOVNI OBRASCI 30

U kontekstu ranijeg primjera 2.3, konacan automat se sastoji od: Σ - abeceda nad kojimautomat radi su pritisnute tipke na tipkovnici, Q - stanje hodanja i trcanja, δ - funkcijaprijelaza odredena trenutnim stanjem i pritisnutom tipkom te rezultira novim stanjem, q0

- pocetno stanje je hodanje. Navedeni primjer je jednostavno osmisliti te skicirati, kao naslici 2.5, a za implementaciju Qt sadrzi The State Machine Framework. The State MachineFramework pruza niz klasa za izrade i izvrsavanje grafova kojima se predstavljaju konacniautomati.

ObserverObrazac Observer svoju popularnost potvrduje cinjenicom da u sklopu jave postojijava.util.Observer i java.util.Observable klase. Takoder, observer je implicitnoimplementiran u samom jeziku JavaScript putem sustava dogadaja (engl. events).

Observer obrazac primjenjiv je u situacijama gdje se javlja veza jedan naprema mnogomedu objektima, te je o promjeni jednog objekta potrebno obavijestiti vise drugih objekata.U nastavku slijedi implementacija ovog obrasca.

Isjecak koda 2.3: Observer obrazac - Observer1 c l a s s O b s e r v e r2 {

3 p u b l i c :4 v i r t u a l ˜ O b s e r v e r ( ) { }

5 v i r t u a l vo id o n N o t i f y ( c o n s t E n t i t y& e n t i t y , Event e v e n t ) = 0 ;6 }

Observer, u odsjecku koda 2.3, je apstraktna klasa koju nasljeduju one klase kojima jepotrebna informacija o nekom drugom objektu.

Isjecak koda 2.4: Observer obrazac - Subject1 c l a s s S u b j e c t2 {

3 p r i v a t e :4 O b s e r v e r s ∗ mObservers [MAX OBSERVERS ] ;5 i n t mNumObservers ;6 p r o t e c t e d :7 n o t i f y ( c o n s t E n t i t y& e n t i t y , Event e v e n t ) ;8 p u b l i c :9 vo id addObserve ( O b s e r v e r ∗ o b s e r v e r ) ;

10 vo id removeObserver ( O b s e r v e r ∗ o b s e r v e r ) ;11 }

POGLAVLJE 2. OBLIKOVNI OBRASCI 31

Subject, u odsjecku koda 2.4, je objekt interesa, objekt o cijim promjenama mnogo drugihobjekata ovisi. Bitno je metode kojima se dodaju i uklanjaju instance observer-a ostavitijavno dostupnim, kako bi vanjska okolina mogla odrediti koji ce objekti biti obavijesten opromjenama, a koji ne.

Slika 2.5: Skica observers

Kako Nystrom navodi u [2], observer je koristan pri realizaciji, u video igrama cestog,sustava postignuca (Achievements system). Sustav postignuca nagraduje junaka igre zarazne dogadaje unutar igre, zbog toga se koristi observer obrazac. Razni objekti implemen-tiraju apstraktnu klasu observer te obavjestavaju sustav postignuca, subject, o specificnomdogadaju.

Observer u Qt5

Kao i u razvoju igara, ovaj se obrazac implicitno koristi i u samoj Qt5 biblioteci i to nadva nacina. QEvent klasa i sve njene podklase implementiraju observer obrazac na vrloniskoj razini. Takoder, cijeli mehanizam signala i utora implementira obrazac na nestovisoj razini, te pruza jednostavno sucelje za koristenje observer obrasca.

FlyweightKod video igara s bogatom grafikom i sirokim podrucjem kojim se korisnik moze kretatiunutar igre, javlja se problem velikog broja grafickih objekata za koje je potrebno do-voljno memorije, a potom i osigurati mogucnost prolaska podataka sa sredisnje jedinicena graficku jedinicu. Jedan od obrazaca kojima se pristupa tom problemu je Flyweight.Ideja iza Flyweight obrasca je podjela podataka o nekom objektu na dva dijela, podaci o

POGLAVLJE 2. OBLIKOVNI OBRASCI 32

instanci, te podaci koji su zajednicki svim instancama te klase. Tada, ako postoji vise obje-kata sa zajednickim drugim dijelom, ti se podatci ne dupliciraju te se tako stedi na prostorui vremenu.

Slika 2.6: Dijagram Flyweight obrasca

Slika 2.6 prikazuje dijagram flyweight obrasca. FlyweightFactory je klasa zaduzena zaupravljanje Flyweight objektima. Svi podatci koji nisu djeljivi izmedu objekata, uklonjenisu iz popisa atributa klase, te se direktno prosljeduju metodi klase ConcreteFlyweight kojojsu potrebni. FlyweightFactory koristi privremenu memoriju (engl. cache) te koristi stareinstance klase Flyweight [21].

CompositeMoguci slucaj kod video igara je postojanje skupa grafickih objekata, razlicitih slozenostii uloga, koji su povezani u hijerarhijsku strukturu. Ako platforma, na kojoj se video igrarazvija, nema vec implementiranu podrsku, za ovakav slucaj cesto je koristen compositeobrazac. Composite obrazac omogucuje da se neka grupa objekata tretira na isti nacin,ali istovremeno je uredena hijerarhija izmedu svih clanova obrasca. Dijagram oblikovnogobrasca prikazan je slikom 2.7.

Component je klasa koja predstavlja sucelje za sve objekte. Leaf predstavlja jednos-tavne objekte koji nemaju djece, dok je Composite komponenta s djecom. Composite sadrzireference na djecu, koja nasljeduju Component klasu, dakle djeca su klase Leaf ili Com-posite [19].

POGLAVLJE 2. OBLIKOVNI OBRASCI 33

Slika 2.7: Dijagram Composite obrasca

Na primjeru video igre, Composite je primjenjiv u igri koja sadrzi glavni objekt kojimse upravlja te pomocnim objektima koji prate glavni objekt prilikom kretanja. Odnosi meduobjektima mogu se graditi hijerarhijski kao na slici 2.8. Main Composite objekt je kojimkorisnik upravlja te taj objekt sadrzi referencu na objekte Composite A i Composite B, onise mapom krecu tako da ostanu jednako udaljeni od Main Composite objekta. CompositeA sadrzi referencu na Leaf C, te se odnose na isti nacin. Analogno se ponasaju CompositeB i Leaf D.

Slika 2.8: Graficki prikaz odnosa objekata u igri

Poglavlje 3

Implementacija video igre

U sklopu razrade teme ovog rada napravljena je 2D video igra koristeci Qt 5.13.1. bibli-oteku te Qt Creator 4.10. IDE. Igra pod nazivom The Camel Run, 2D je platformer, teje izradena po uzoru na igru Super Mario. The Camel Run igra zamisljena je kao igra semnogo kratkih levela, a za potrebe ovog rada, dizajnirana su prva dva levela.

Koristeni su Qt5 moduli: core, gui, widgets te multimedia, takoder je koristen c++11standard.

3.1 Pregled igreThe camel run je racunalna igra. Protagonist igre jest umorna deva koja se krece krozpustinju ispunjenu preprekama kao sto su kaktusi, skorpion te pjescane rupe, kako bi doslado oaze gdje se moze odmoriti.

Upute o koristenjuKorisnik pomice glavnog junaka igre tipkama lijevo, desno te skace razmaknicom (space-bar). Cilj igre je izbjegavati kaktuse i skorpione, preskakati rupe u platformi te doci docilja.

Arhitektura igreIgra se sastoji od cetiri glavna ekrana:

• glavni izbornik

• postavke

34

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 35

• najbolji rezultati

• igraci ekran.

Izmjene ekrana, funkcionalnosti i tok igre prikazan je dijagramom 3.1.

Slika 3.1: Dijagram toka aplikacije

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 36

ResursiZa potrebe izrade igre preuzeto je nekoliko javno dostupnih resursa dok je dio resursaizraden. Sljedeci resursi preuzeti su sa stranice koja nudi mnostvo resursa za izradu 2Dvideo igara [27].

Slika 3.2: Pozadina i pustinjski objekti

Model skorpiona preuzet je sa [28].

Slika 3.3: Model skorpiona

Deva je preuzeta sa sljedeceg izvora [29].

Slika 3.4: Model deve

Koristeni font preuzet je sa [30].Ostatak resursa je izraden.

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 37

Slika 3.5: Uzorak koristenog fonta

Slika 3.6: Izradeni resursi

3.2 Struktura aplikacijeIgra se sastoji od cetrnaest klasa, cija je medusobna zavisnost prikazana dijagramom 3.7.

Slika 3.7: Class dijagram

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 38

GameScene sadrzi prozirne QGraphicsRectItem-e koji potom drze pokazivace nainstance klasa Coin, Scorpio, Cactus i Floor, dok GameManager drzi po jedan poka-zivac na svaku od klasa MenuScene, SettingsScene, HighscoreScene, WinningScene,LosingScene te GameScene.

Qt podrska za resurse

Uz navedene klase, aplikacija sadrzi jednu resource.qrc datoteku.Kako bi aplikacija imala pristup resursima, qt nudi mehanizam neovisan o platformi

koji sprema odabrane resurse u binarnom zapisu unutar same aplikacije. Za koristenjesustava za resurse potrebno je izraditi datoteku s nastavkom .qrc (Qt Resource Collection).

Svi potrebni resursi, u koje mogu spadati: slike, zvukovi, fontovi ili ikone, spremaju seu tu datoteku. U kodu aplikacije, resurse pohranjene na naveden nacin moguce je dohvatitipomocu njima pridruzenog puta. Ovako spremljeni resursi bit ce dostupni i u izvrsnimdatotekama aplikacije.

3.3 Funkcionalnosti igre

GameManager klasaGameManager klasa nasljeduje QMainWindow klasu te predstavlja glavni prozor aplikacije.Ona je odgovorna za izmjenu glavnih ekrana te iscrtavanje scena. Klasa sadrzi kljucnu rijecQ OBJECT te koristi signale i utore za provodenje igre.

Isjecak koda 3.1: Bitne stavke datoteke gamemanager.hr1 c l a s s GameManager : p u b l i c QMainWindow {2 Q OBJECT3 p u b l i c :4 e x p l i c i t GameManager ( QWidget ∗ p a r e n t = n u l l ) ;56 p r i v a t e :7 QGraphicsView mView ;8 MenuScene ∗mMenuScene ;9 GameScene ∗mGameScene ;

10 S e t t i n g s S c e n e ∗m S e t t i n g s S c e n e ;11 H i g h s c o r e S c e n e ∗mHighscoreScene ;12 Los ingScene ∗mLosingScene ;13 WinningScene ∗mWinningScene ;14 QSound ∗mSound ;1516 vo id r e n d e r S c e n e ( QGraphicsScene ∗ ) ;1718 s i g n a l s :

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 39

19 / / SIGNALS2021 p r i v a t e s l o t s :22 / / PRIVATE SLOTS2324 p u b l i c s l o t s :25 / / PUBLIC SLOTS26 } ;

MenuScene klasaMenuScene klasa nasljeduje klasu QGraphicsScene te implementira izgled i funkcional-nosti glavnog izbornika.

Slika 3.8: Glavni izbornik aplikacije

Klasa sadrzi tri instance QPushButton widgeta uz pomoc cijih se signala clicked()komunicira s klasom GameManager i izmjenjuju scene.

HighscoreScene klasaHighscoreScene klasa nasljeduje klasu QGraphicsScene. Na sceni se ispisuju najbo-lji rezultati po levelima. Pri prvom pokretanju igre, liste najboljih rezultata su ispunjenevrijednostima ”No name” i brojem bodova 0.

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 40

Slika 3.9: Prikaz najboljih rezultata

Liste najboljih rezultata se dohvacaju i spremaju pomocu instance klase QSettings.QSettings cuva uredeni par QString-a, koji odreduje level i poziciju, te QList-u kojasadrzi nadimak te broj bodova.

Isjecak koda 3.2: Inicijalno punjenje lista najboljih rezultata1 Q S e t t i n g s s e t t i n g s ;2 QLis t<Q S t r i n g> s c o r e ( { ”No name” , ” 0 ” } ) ;3 Q S t r i n g s e t t i n g s A t t r i b u t e ;4 f o r ( i n t i = 1 ; i < 3 ; i ++){5 f o r ( i n t j = 1 ; j < 6 ; j ++){6 s e t t i n g s A t t r i b u t e = Q S t r i n g ( ” Lvl%1 %2” ) . a r g ( i ) . a r g ( j ) ;7 s e t t i n g s . s e t V a l u e ( s e t t i n g s A t t r i b u t e , QVar i an t ( s c o r e ) ) ;8 }

9 }

Resetiranjem rezultata vracaju se inicijalne vrijednosti.

SettingsScene klasaSettingsScene klasa kao i prethodne dvije klase nasljeduje klasu QGraphicsScene. Upostavkama je omoguceno paljenje i gasenje zvuka te konfiguracija tipki s kojima se ko-risnik krece u igri.

Vrijednosti o zvuku i trenutnoj konfiguraciji tipki zapamcene su koristeci instancu klaseQSettings.

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 41

Slika 3.10: Ekran postavki

Isjecak koda 3.3: Kod paljenja i gasenja zvuka12 GameManager : : GameManager ( QWidget ∗ p a r e n t ) : QMainWindow ( p a r e n t ) {3 / / kod GameManager k o n s t r u k t o r a4 c o n n e c t ( m S e t t i ng s Sc e ne −>mSoundBtn , &QPushButton : : c l i c k e d ,5 t h i s , &GameManager : : changeSoundMode ) ;6 / / kod GameManager k o n s t r u k t o r a7 }

89 vo id GameManager : : changeSoundMode ( )

10 {

11 Q S e t t i n g s s e t t i n g s ;12 Q S t r i n g soundOffOn = s e t t i n g s . v a l u e ( ” Sound ” , ” ” ) . t o S t r i n g ( ) ;1314 i f ( soundOffOn == ”On” ) {15 s e t t i n g s . s e t V a l u e ( ” Sound ” , ” Off ” ) ;16 }

17 e l s e {18 s e t t i n g s . s e t V a l u e ( ” Sound ” , ”On” ) ;19 }

20 m Se t t i n g sS c en e −> s e t S o u n d I c o n ( ) ;21 playSound ( ) ;22 }

Signal gumba na ekranu postavki povezan je putem mehanizma signala i utora s meto-dom klase GameManager, changeSoundMode().

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 42

GameScene klasaCentralna scena igre The Camel Run je klasa GameScene koja takoder nasljeduje klasuQGraphicsScene.

Slika 3.11: Startna pozicija igre

Glavni elementi GameScene su instanca klase Player te pravokutni prozirni grafickiobjekti koji su u roditeljskoj vezi s objektima klasa Cactus, Scorpio, Coins, Floor iTree.

Player klasa

Player nasljeduje QGraphicsPixmapItem te sadrzi privatne varijable koje cuvaju po-datke o stanju zivotnih bodova deve, smjeru u kojem se krece te o kolicini skupljenihnovcica. Kretanje i animacija skakanja deve provode se u klasi GameManager. Animacijaskakanje deve implementirana je koristeci QPropertyAnimation. U definiciji klase de-finirani su Q PROPERTY, jumpFactor te QPropertyAnimation, jumpAnimation. Unastavku slijedi implementacija animacije skakanja.

Definicija svojstva nalazi se u zaglavlju klase, istu klasu potrebno je oznaciti Q OBJECTmakro-om.

Isjecak koda 3.4: Definicija Q PROPERTY1 Q PROPERTY( q r e a l j u m p F a c t o r READ j u m p F a c t o r2 WRITE s e t J u m p F a c t o r NOTIFY jumpFac torChanged )

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 43

QPropertyAnimation klasa animira Q PROPERTY objekte. Potrebno je specificiratiime svojstva koje se animira te modificirati zeljene vrijednosti kako bi se animacija odvilana zeljeni nacin. U navedenom primjeru postavljene su pocetna i krajnja vrijednost svoj-stva, zeljena vrijednost u odredenom vremenskom trenutku, vremensko trajanje animacijete funkcija prema kojoj se izracunavaju vrijednosti, setEasingCurve(). Qt nudi vise od40 definiranih tipova QEasingCurve, a moguce je definirati i vlastitu funkciju.

Isjecak koda 3.5: Inicijalizacija QPropertyAnimation klase1 mJumpAnimation = new QPrope r tyAn ima t ion ( t h i s ) ;2 mJumpAnimation−> s e t T a r g e t O b j e c t ( t h i s ) ;3 mJumpAnimation−>s e t P r o p e r t y N a m e ( ” j u m p F a c t o r ” ) ;4 mJumpAnimation−> s e t S t a r t V a l u e ( 0 ) ;5 mJumpAnimation−>se tKeyValueAt ( 0 . 5 , 1 ) ;6 mJumpAnimation−>se tEndVa lue ( 0 ) ;7 mJumpAnimation−> s e t D u r a t i o n ( 8 0 0 ) ;8 mJumpAnimation−> s e t E a s i n g C u r v e ( QEasingCurve : : OutInQuad ) ;

Preostaje jos samo uskladiti promjenu y koordinate objekta koji se animira sa svoj-stvom.

Isjecak koda 3.6: Izracunavanje y koordinate i animacija skakanja1 vo id GameScene : : jump ( )2 {

3 i f ( Q A b s t r a c t A n i m a t i o n : : S topped == mJumpAnimation−> s t a t e ( ) ) {

4 mJumpAnimation−> s t a r t ( ) ;5 }

6 }

78 q r e a l GameScene : : j u m p F a c t o r ( ) c o n s t9 {

10 r e t u r n mJumpFactor ;11 }

1213 vo id GameScene : : s e t J u m p F a c t o r ( c o n s t q r e a l &j u m p F a c t o r )14 {

15 i f ( mJumpFactor == j u m p F a c t o r ) {16 r e t u r n ;17 }

18 mJumpFactor = j u m p F a c t o r ;19 emi t jumpFac torChanged ( mJumpFactor ) ;2021 q r e a l groundY = mGroundLevel −22 mPlayer−>bound ingRec t ( ) . h e i g h t ( ) / 2 ;23 q r e a l y = groundY −

24 mJumpAnimation−> c u r r e n t V a l u e ( ) . t o R e a l ( ) ∗ mJumpHeight ;

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 44

2526 mPlayer−>se tY ( y ) ;27 }

Cactus klasa

Cactus je jos jedan od grafickih objekata koji grade GameScene. Omogucena su tri levelakaktusa koji se razlikuju velicinom i stetom koju nanose devi. Level se odreduje prilikomkreiranja instance klase.

Isjecak koda 3.7: Konstruktor klase Cactus1 Ca c t us : : C ac t u s ( QGraph ics I t em ∗ p a r e n t , i n t l e v e l ) :2 QGraphicsPixmapI tem ( p a r e n t ) , mDamage ( 1 )3 {

4 Q S t r i n g pixmapPath ;5 s w i t c h ( l e v e l ) {6 c a s e 1 : {7 pixmapPath = ” : / c a c t u s L v l 1 . png ” ;8 mDamage = 1 ;9 b r e a k ;

10 }

11 c a s e 2 : {12 pixmapPath = ” : / c a c t u s L v 2 . png ” ;13 mDamage = 1 ;14 b r e a k ;15 }

16 c a s e 3 : {17 pixmapPath = ” : / c a c t u s L v 3 . png ” ;18 mDamage = 2 ;19 b r e a k ;20 }

21 }

22 QPixmap pixmap ( p ixmapPath ) ;23 se tP ixmap ( pixmap ) ;24 s e t O f f s e t (−pixmap . wid th ( ) / 2 , −pixmap . h e i g h t ( ) / 2 ) ;25 }

U ovisnosti o levelu kaktusa iscrtava se pripadajuca pixmapa. Kaktusi nanose stetu devi utrenutku dodira, koji se detektira navedenim metodama Qt biblioteke za detekciju kolizija.Ukoliko deva naskoci na kaktus, aktivira se animacija odskoka s tog kaktusa. Animacijaodskoka je napravljena analogno animaciji za obican skok.

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 45

Scorpio klasa

Scorpio klasa dinamicki je neprijatelj koji se krece unutar svog fiksnog podrucja te na-nosi stetu devi u trenutku dodira. Scorpio takoder nasljeduje QGraphicsPixmapItemklasu. U trenutku stvaranja skorpiona generira se instanca klase QTimer, na ciji se signalQTimer::timeout() skorpioni krecu za odredeni korak.

Floor klasa

Pod po kojem se deva krece konstruiran je od mnogo instanci klase Floor. KoristeciFloor klasu, napravljene su zapreke koje je potrebno preskociti. U trenutku kada devapada s platforme, pokrece se metoda sinking() koja koristeci transformacije, konkretnorotacije, simulira upadanje deve u rupu u podu.

Slika 3.12: Postepena rotacije deve

Coin klasa

Coin klasa nasljeduje QGraphicsEllipseItem. Novcic je iscrtan programabilno, ko-risteci klasicne metode klase QGraphicsItem.

Isjecak koda 3.8: Izrada novcica1 Coin : : Coin ( QGraph ics I t em ∗ p a r e n t ) :2 Q G r a p h i c s E l l i p s e I t e m ( p a r e n t ) ,3 mExplos ion ( f a l s e )4 {

5 s e t P e n ( QPen ( QColor ( 2 1 8 , 165 , 3 2 ) , 2 ) ) ;6 s e t B r u s h ( QColor ( 2 5 5 , 223 , 0 ) ) ;7 s e t R e c t ( −12 , −12 , 24 , 2 4 ) ;8 }

U trenutku dodira deve s instancom klase Coin istovremeno se desavaju dva kljucnadogadaja:

• animacija eksplozije novcica

• azuriranje brojaca novcica u gornjem lijevom kutu.

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 46

Animacija eksplozije novcica sastoji se od dvije instance QPropertyAnimation, jednaje odgovorna za promjenu velicine novcica, dok je druga odgovorna za postepeno nestaja-nje novcica.

Isjecak koda 3.9: Animacija novcica1 vo id Coin : : e x p l o d e ( )2 {

3 i f ( mExplos ion ) {4 r e t u r n ;5 }

67 mExplos ion = t r u e ;8 Q P a r a l l e l A n i m a t i o n G r o u p ∗ group = new Q P a r a l l e l A n i m a t i o n G r o u p ( t h i s ) ;9 QPrope r tyAn ima t ion ∗ s c a l e A n i m a t i o n =

10 new QPrope r tyAn ima t ion ( t h i s , ” r e c t ” ) ;11 s c a l e A n i m a t i o n −> s e t D u r a t i o n ( 7 0 0 ) ;12 QRectF r = r e c t ( ) ;13 s c a l e A n i m a t i o n −> s e t S t a r t V a l u e ( r ) ;14 s c a l e A n i m a t i o n −>se tEndVa lue (15 QRectF ( r . t o p L e f t ( ) − r . b o t t o m R i g h t ( ) , r . s i z e ( ) ∗ 2 ) ) ;16 s c a l e A n i m a t i o n −> s e t E a s i n g C u r v e ( QEasingCurve : : OutQuar t ) ;17 group−>addAnimat ion ( s c a l e A n i m a t i o n ) ;1819 QPrope r tyAn ima t ion ∗ f a d e A n i m a t i o n =

20 new QPrope r tyAn ima t ion ( t h i s , ” o p a c i t y ” ) ;21 f adeAnima t ion −> s e t D u r a t i o n ( 7 0 0 ) ;22 f adeAnima t ion −> s e t S t a r t V a l u e ( 1 ) ;23 f adeAnima t ion −>se tEndVa lue ( 0 ) ;24 f adeAnima t ion −> s e t E a s i n g C u r v e ( QEasingCurve : : OutQuar t ) ;25 group−>addAnimat ion ( f a d e A n i m a t i o n ) ;2627 c o n n e c t ( group , &Q P a r a l l e l A n i m a t i o n G r o u p : : f i n i s h e d ,28 t h i s , &Coin : : d e l e t e L a t e r ) ;29 group−> s t a r t ( ) ;30 }

Brojac novcica azurira se koristeci mehanizam signala i utora. Nakon sto dolazi dokolizije s novcicem, emitiran je signal da je novcic skupljen te se poziva metoda-utor kojaobraduje taj dogadaj. Na takav nacin obraduje se i promjena stanja zivotnih bodova deve.

Isjecak koda 3.10: Povezivanje signala i utora1 c o n n e c t ( mGameScene , &GameScene : : hea l thBarChanged ,2 mGameScene , &GameScene : : u p d a t e H e a l t h B a r ) ;3 c o n n e c t ( mGameScene , &GameScene : : c o i n G a t h e r e d ,4 mGameScene , &GameScene : : u p d a t e C o i n C o u n t e r ) ;

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 47

Tree klasa

Tree nasljeduje QGraphicsPixmapItem. Instanca ove klase nagovijesta kraj levela tepredstavlja oazu.

Slika 3.13: Zavrsetak levela

U trenutku kada deva prode kroz instancu klase Tree, pokrece se nova scena, WinningScene.

Slika 3.14: Scena uslijed uspjesno predenog levela

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 48

Nakon unosa imena te pritiska gumba za potvrdivanje, zapocinje ili sljedeci level ili jeigra zavrsena te je korisnik vracen na glavni izbornik. U slucaju da je korisnik izgubio igrute nije presao level iscrtava se ekran sa slike 3.15.

Slika 3.15: Scena uslijed gubljenja zivota

Tada je nakon pritiska bilo koje tipke tipkovnice korisnik preusmjeren na glavni izbor-nik. Postupak preusmjeravanja na glavni izbornik implementiran je u 3 koraka, prikazan uisjeccima koda 3.11,3.12 i 3.13 :

• slanje signala

• obrada dogadaja u utoru

• povezivanje signala i utora.

Isjecak koda 3.11: Slanje signala pritiskom na tipku1 vo id Los ingScene : : k e y P r e s s E v e n t ( QKeyEvent ∗ e v e n t )2 {

3 emi t backToMenu ( ) ;4 }

Isjecak koda 3.12: Implementacija utora1 vo id GameManager : : s t a r t M e n u ( )2 {

3 r e n d e r S c e n e ( mMenuScene ) ;4 }

POGLAVLJE 3. IMPLEMENTACIJA VIDEO IGRE 49

Isjecak koda 3.13: Povezivanje signala i utora u konstruktoru klase GameManager1 c o n n e c t ( mLosingScene , &Los ingScene : : backToMenu ,2 t h i s , &GameManager : : s t a r t M e n u ) ;

BackgroundItem klasa

Instancama BackgroundItem klase, dopunjuje se scena. To su graficki objekti koji nemajufunkcionalnu ulogu, vec estetsku. Stvaraju ugodaj, odnosno suptilno usmjeravaju korisnikaprema cilju.

Generiranje levela

Leveli se razlikuju po broju i razmjestaju novcica, neprijatelji i zapreka. Novcici se svakiput generiraju na novim, nasumicnim mjestima, ali unutar dosega skoka deve. Rupe ukoje deva moze upasti su fiksne te se na odredenom levelu uvijek javljaju na istim mjes-tima. Skorpioni i kaktusi se generiraju polu-nasumicno. Kako je pod kojim se deva krecerascjepkan rupama, generiranje skorpiona i kaktusa donekle je predodredeno rasporedomplatforma koje su nastale. Ovisno o levelu instancira se odredeni broj skorpion po plat-formi s nasumicnim polozajem unutar platforme. Na isti nacin se i odredeni broj kaktusainstancira po platformi te se nasumicno pozicionira, no takoder u ovisnosti o levelu stvarase vise kaktusa vecih levela.

Poglavlje 4

Zakljucak

U ovom radu ukratko je opisana Qt5 biblioteka i njena podrska za razvoj video igara.Navedeni su i objasnjeni najcesce koristeni oblikovni obrasci u programiranju igara, tenjihova poveznica s Qt5 bibliotekom. U svrhu prezentacije funkcionalnosti koje Qt5 nudi,izradena je i video igra The Camel Run. Igra je izradena u C++ programskom jeziku, te suu radu predstavljene funkcionalnosti i prikaz nekih od implementiranih mogucnosti igre.

Unatoc svojoj usmjerenosti ka razvoju grafickih sucelja te cross-platform aplikacija,Qt se pokazao kao zadovoljavajuci alat za izradu jednostavnih 2D video igara. Pruzajucisustav za graficko iscrtavanje, osnove detekcija kolizija, te postavke, uz Qt je vrlo jednos-tavno implementirati 2D osnovnu video igru. Medutim za izradu slozenije igre, kao sto suplatformeri, gdje je potrebno uspostaviti gravitaciju, cvrstocu tijela i mnoge druge aspekteumjetno stvorenog svijeta, mogucnosti Qt-a su ogranicene. Dugo vrijeme razvoja funkci-onalnosti koje su uklopljene unutar drugih alata, jedan je od glavnih nedostataka Qt-a upogledu izrade slozenijih video igara.

50

Bibliografija

[1] W. Wysota and L. Haas, Game Programming Using Qt. Packt Publishing Ltd., 2016.

[2] R. Nystrom, Game Programming Patterns. Genever Benning, 2014.

[3] E. Gamma, R. Helm, R. Johnson, and J. Vlissides, Elements of Reusable Object-Oriented Software. Addison Wesley, 2002.

[4] J. Blanchette and M. Summerfield, C++ GUI Programming with Qt 4. Prentice Hall,2008.

[5] G. Lazar and R. Penea, Mastering Qt5. Packt Publishing Ltd., 2016.

[6] M. Krajewski, High Performance Programing With Qt5. Packt Publishing Ltd., 2019.

[7] L. Eng, Hands-On GUI Programming with C++ and Qt5. Packt Publishing Ltd.,2018.

[8] “Qt Contributors’ Summit 2018 wrap-up.” https://www.qt.io/blog/2018/06/13/qt-contributors-summit-2018-wrap, preuzeto: prosinac, 2019.

[9] “What’s new in Qt 5.” https://doc.qt.io/qt-5/qt5-intro.html, preuzeto:sijecanj, 2020.

[10] V. Cacic, “Interpretacija programa — predavanja.” https://drive.google.com/file/d/1Kk9zmnHkKGqBWGmWh5B-UAz oF7Ha529/view, preuzeto: sijecanj,2020.

[11] “Qt Based Games.” https://wiki.qt.io/Qt Based Games, preuzeto: sijecanj,2020.

[12] C. Cattiaux and K. Szkudlapski, “Visual C++ RTTI Inspection .” https://blog.quarkslab.com/visual-c-rtti-inspection.html, preuzeto: veljaca, 2020.

51

POGLAVLJE 4. ZAKLJUCAK 52

[13] V. Yanev, “Video Game Demographics – Who Plays Games in 2020.” https://techjury.net/stats-about/video-game-demographics#gref, preuzeto:veljaca, 2020.

[14] “Video Game Industry Overview.” https://www.gamingscan.com/gaming-statistics/, preuzeto: sijecanj 2020.

[15] “How Qt Signals and Slots Work.” https://woboq.com/blog/how-qt-signals-slots-work.html, preuzeto: veljaca, 2020.

[16] R. Lerdof, K. Tatroe, and P. MacIntyre, “Programing PHP.” https://docstore.mik.ua/orelly/webprog/php/ch06 05.htm, pruzeto: veljaca, 2020.

[17] “Video games market.” https://www.vanillaplus.com/2018/07/05/40093-video-games-market-worth-music-movies-combined-arent-csps-launc

hing-games-services/, preuzeto: sijecanj, 2020.

[18] A. Shrestha, “Creating C++17 enabled Qt projects.” https://amirkoblog.wordpress.com/2018/08/14/creating-c17-enabled-qt-projects/, preuzeto:prosinac, 2019.

[19] M. Jurak, “Principi objektnog programiranja i oblikovni obrasci.” https://web.math.pmf.unizg.hr/nastava/opepp/Slides/Predavanja/html-noslides/sl

ides-6-1.html, preuzeto, veljaca, 2020.

[20] “Qt 5.14.” https://doc.qt.io/qt-5/, preuzeto: sijecanj, 2020.

[21] “Flyweight Design Pattern .” https://sourcemaking.com/design patterns/flyweight, preuzeto: veljaca, 2020.

[22] “”Introduction to BSP”.” https://web.cs.wpi.edu/˜matt/courses/cs563/talks/bsp/document.html, preuzeto: veljaca, 2020.

[23] M. Haney, “”Design Patterns in Game Programming”.” https://www.gamasutra.com/blogs/MichaelHaney/20110920/90250/Design Patterns in Game Pro

gramming.php, preuzeto: prosinac, 2019.

[24] “Angry Birds.” https://www.angrybirds.com/, preuzeto:prosinac, 2019.

[25] “Pocket Tanks.” http://www.blitwise.com/ptanks.html, preuzeto: prosinac,2019.

[26] “Super Mario.” https://supermariobros.io/, prosinac, 2019.

[27] “Free desert platformer tileset.” https://www.gameart2d.com/free-desert-platformer-tileset.html, preuzeto: rujan, 2019.

[28] “Scorpion cartoon in shades of rust and sepia.” https://en.wikipedia.org/wiki/File:Scorpion cartoon in shades of rust and sepia.svg, preuzeto:rujan, 2019.

[29] “Cute camel.” https://favpng.com/png view/cute-camel-bactrian-camel-cartoon-clip-art-png/TauxCi99, preuzeto: rujan, 2019.

[30] “Font asset.” https://www.1001freefonts.com/., preuzeto: rujan, 2019.

Sazetak

Kroz ovaj diplomski rad predstavljena je Qt5 biblioteka, osnovni principi i mehanizmikoje implementira, te njena podrska za razvoj video igara. Objasnjen je pojam oblikovnihobrazaca, te njihova primjena u programiranju igara. Najcesce koristeni oblikovni obrasciu video igrama su detaljno objasnjeni te je prikazana poveznica s Qt5 bibliotekom. Kaodemonstracija mogucnosti Qt5 biblioteke u razvoju video igara, izradena je 2D igra kojaje predstavljena u sklopu diplomskog rada. Navedene su prednosti i mane koristenja Qt5biblioteke u svrhu izrade video igre.

Kljucne rijeci: Qt5, video igre, oblikovni obrasci

Summary

This master thesis presents the Qt5 library, the basic principles and mechanisms it im-plements, and its support for video game development. The concept and application ofprogramming design patterns in game programming are explained. The most commonlyused patterns in video games are explained in detail and are presented with connections tothe Qt5 library. As a demonstration of the capabilities of the Qt5 library in video gamedevelopment, a 2D game was created and presented as part of the thesis. In the end, themaster thesis presents a discussion about the advantages and disadvantages of using theQt5 to create a video game.

Key words: Qt5, video games, design patterns

Zivotopis

Sara Puzar, rodena je 15. kolovoza 1995. godine u Puli.Skolovanje zapocinje 2002. godine u Osnovnoj skoli VeliVrh te zavrsava 2010. kada upisuje prirodoslovno-matematickismjer u Gimnaziji Pula. 2014. godine zavrsava srednjoskolskoobrazovanje te upisuje nastavnicki smjer sveucilisnog studijamatematike na Prirodoslovno-matematickom fakultetu u Za-grebu.

Preddiplomski studij zavrsava 2017. godine uz priznanjeza izvrsnost Matematickog odsjeka na PMF-u kada dobiva ititulu sveucilisne prvostupnice edukacije matematike. Iste go-

dine, 2017., upisuje diplomski sveucilisni studij racunarstva i matematike za cije vrijemesudjeluje u studentskim praksama u firmama Mireo i Syntio.