SVEUČILIŠTE U ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA SEMINAR. Primjena tehnologije Microsoft XNA u izradi 2D igara

Similar documents
Upute za korištenje makronaredbi gml2dwg i gml2dgn

Port Community System

SIMPLE PAST TENSE (prosto prošlo vreme) Građenje prostog prošlog vremena zavisi od toga da li je glagol koji ga gradi pravilan ili nepravilan.

SAS On Demand. Video: Upute za registraciju:

Biznis scenario: sekcije pk * id_sekcije * naziv. projekti pk * id_projekta * naziv ꓳ profesor fk * id_sekcije

GUI Layout Manager-i. Bojan Tomić Branislav Vidojević

Eduroam O Eduroam servisu edu roam Uputstvo za podešavanje Eduroam konekcije NAPOMENA: Microsoft Windows XP Change advanced settings

Ulazne promenljive se nazivaju argumenti ili fiktivni parametri. Potprogram se poziva u okviru programa, kada se pri pozivu navode stvarni parametri.

1. Instalacija programske podrške

Tutorijal za Štefice za upload slika na forum.

Podešavanje za eduroam ios

IZDAVANJE SERTIFIKATA NA WINDOWS 10 PLATFORMI

Svojstva olovke x (0,0)

BENCHMARKING HOSTELA

CJENIK APLIKACIJE CERAMIC PRO PROIZVODA STAKLO PLASTIKA AUTO LAK KOŽA I TEKSTIL ALU FELGE SVJETLA

Windows Easy Transfer

KAPACITET USB GB. Laserska gravura. po jednoj strani. Digitalna štampa, pun kolor, po jednoj strani USB GB 8 GB 16 GB.

Uvod u relacione baze podataka

3D GRAFIKA I ANIMACIJA

Programiranje za internet zimski semestar 2013/2014. Java kroz primjere (skripta je u fazi izradi)

PROJEKTNI PRORAČUN 1

JEDINSTVENI PORTAL POREZNE UPRAVE. Priručnik za instalaciju Google Chrome dodatka. (Opera preglednik)

Idejno rješenje: Dubrovnik Vizualni identitet kandidature Dubrovnika za Europsku prijestolnicu kulture 2020.

- Vežba 1 (dodatan materijal) - Kreiranje Web šablona (template) pomoću softvera Adobe Photoshop CS

Da bi se napravio izvještaj u Accessu potrebno je na izborniku Create odabrati karticu naredbi Reports.

Otpremanje video snimka na YouTube

NIS PETROL. Uputstvo za deaktiviranje/aktiviranje stranice Veleprodajnog cenovnika na sajtu NIS Petrol-a

Mindomo online aplikacija za izradu umnih mapa

Nejednakosti s faktorijelima

SVEUČILIŠTE U ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA. SEMINARSKI RAD U OKVIRU PREDMETA "Računalna forenzika" 2016/2017. GIF FORMAT (.

Office 365, upute za korištenje elektroničke pošte

AMRES eduroam update, CAT alat za kreiranje instalera za korisničke uređaje. Marko Eremija Sastanak administratora, Beograd,

int[] brojilo; // polje cjelih brojeva double[] vrijednosti; // polje realnih brojeva

Slagalica init screen Prikaz atributi 1.1. Jednostavna slagalica

KONFIGURACIJA MODEMA. ZyXEL Prestige 660RU

Programiranje. Nastava: prof.dr.sc. Dražena Gašpar. Datum:

Direktan link ka kursu:

MASKE U MICROSOFT ACCESS-u

za STB GO4TV in alliance with GSS media

Uvod u MS Word. Nova znanja. Novi pojmovi

CJENOVNIK KABLOVSKA TV DIGITALNA TV INTERNET USLUGE

Sveučilište Jurja Dobrile u Puli Odjel za informacijsko-komunikacijske tehnologije

Bušilice nove generacije. ImpactDrill

Slobodni softver za digitalne arhive: EPrints u Knjižnici Filozofskog fakulteta u Zagrebu

Upotreba selektora. June 04

TRAJANJE AKCIJE ILI PRETHODNOG ISTEKA ZALIHA ZELENI ALAT

STRUKTURNO KABLIRANJE

OBJEKTNO ORIJENTISANO PROGRAMIRANJE

DETEKCIJA OBJEKTA UZ POMOĆ WEB KAMERE I OPENCV-A

Advertising on the Web

Uticaj parametara PID regulatora i vremenskog kašnjenja na odziv i amplitudno-faznu karakteristiku sistema Simulink

INSTALIRANJE SOFTVERSKOG SISTEMA SURVEY

IZRADA RAČUNALNE IGRE KORISTEĆI GAMEMAKER:STUDIO

Implementacija sparsnih matrica upotrebom listi u programskom jeziku C

UPUTE ZA INSTALACIJU PROGRAMA FINBOLT 2007 tvrtke BOLTANO d.o.o.

Mogudnosti za prilagođavanje

Trening: Obzor financijsko izvještavanje i osnovne ugovorne obveze

Naredba je uputa računalu za obavljanje određene operacije.

ENR 1.4 OPIS I KLASIFIKACIJA VAZDUŠNOG PROSTORA U KOME SE PRUŽAJU ATS USLUGE ENR 1.4 ATS AIRSPACE CLASSIFICATION AND DESCRIPTION

ECONOMIC EVALUATION OF TOBACCO VARIETIES OF TOBACCO TYPE PRILEP EKONOMSKO OCJENIVANJE SORTE DUHANA TIPA PRILEP

MINISTRY OF THE SEA, TRANSPORT AND INFRASTRUCTURE

STRUČNA PRAKSA B-PRO TEMA 13

Sadržaj. Tekst Fontovi Boje Pozadine Grafika Animacija Pravopis Savjeti za izlaganje prezentacije

Primjer 3 Prikaz i interpretacija rezultata

Pravljenje Screenshota. 1. Korak

PROCEDURALNO GENERIRANJE 3D SVIJETA U UNITY3D

STABLA ODLUČIVANJA. Jelena Jovanovic. Web:

UNIVERZITET U BEOGRADU RUDARSKO GEOLOŠKI FAKULTET DEPARTMAN ZA HIDROGEOLOGIJU ZBORNIK RADOVA. ZLATIBOR maj godine

WELLNESS & SPA YOUR SERENITY IS OUR PRIORITY. VAŠ MIR JE NAŠ PRIORITET!

Klasterizacija. NIKOLA MILIKIĆ URL:

RAZVOJ IPHONE APLIKACIJA POMOĆU PROGRAMSKOG JEZIKA SWIFT

CRNA GORA

Struktura indeksa: B-stablo. ls/swd/btree/btree.html

Struktura i organizacija baza podataka

Izrada 3D računalne igre

- Vežba 3 - UVOD U FLASH ANIMACIJA FRAME-BY-FRAME SHAPE TWEEN MOTION TWEEN

TRENING I RAZVOJ VEŽBE 4 JELENA ANĐELKOVIĆ LABROVIĆ

Iskustva video konferencija u školskim projektima

Korak X1 X2 X3 F O U R T W START {0,1}

PROCEDURALNO GENERIRANJE GRAFIČKIH OBJEKATA

Pokretanje (startovanje) programa Microsoft Word

PLAN RADA. 1. Počnimo sa primerom! 2. Kako i zašto? 3. Pejzaž višestruke upotrebe softvera 4. Frameworks 5. Proizvodne linije softvera 6.

Statistička analiza algoritama za dinamičko upravljanje spremnikom

PE FORMAT (.EXE,.DLL)

3. Obavljanje ulazno-izlaznih operacija, prekidni rad

Kooperativna meteorološka stanica za cestovni promet

OBLIKOVANJE WEB STRANICA Praktikum (laboratorijske vježbe) Haidi Božiković

11 Analiza i dizajn informacionih sistema

INTEGRACIJA DODATNIH MOGUĆNOSTI U PROGRAMSKI SUSTAV MARKER

KRATKI PRIRUČNIK IZRADA MENTALNIH MAPA U PROGRAMU MS VISIO Bosiljka Jurjević

Unity : Osnovni koncepti i razvoj 3D igre

RANI BOOKING TURSKA LJETO 2017

SAŽETAK. Ključne riječi: Animacija, After Effects, pokretna grafika, video

KRATKI PRIRUČNIK IZRADA MENTALNIH MAPA U PROGRAMU MS VISIO Bosiljka Jurjević

Primjeri pitanja iz 1. ili 2. skupine (za 2 ili 4 boda po pitanju) -

RJEŠAVANJE BUGARSKOG SOLITERA

Priprema podataka. NIKOLA MILIKIĆ URL:

VIŠEKORISNIČKA IGRA POGAĐANJA ZA OPERACIJSKI SUSTAV ANDROID

SVEUČILIŠTE U ZAGREBU FAKULTET PROMETNIH ZNANOSTI

KABUPLAST, AGROPLAST, AGROSIL 2500

Transcription:

SVEUČILIŠTE U ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA SEMINAR Primjena tehnologije Microsoft XNA u izradi 2D igara Voditelj: Zagreb, travanj, 2011.

Sadržaj 1. Uvod...1 2. Osnove rada u XNA tehnologiji...2 2.1 Uvod u XNA okruženje...2 2.2 Kreiranje projekta i osnovna struktura...2 2.3 Izrada prvog programa - Hello World!...4 3. Objekti i logika...6 3.1 Sprite: uvod u pojam i primjenu...6 3.2 Objekti i logika u igri...7 4. Teksture i transformacije...10 4.1 Radni prozor i orijentacija...10 4.2 Rad s teksturama...11 4.3 Transformacije...12 4.4 Animacija...14 5. Detekcije kolizije...15 5.1 Uvod u detekciju kolizije...15 5.2 Pravokutna i kružna detekcija kolizije...15 6. Čestični sustavi...17 6.1 Teorija čestičnih sustava...17 6.2 Primjena čestičnih sustava...18 7. Zaključak...21 8. Literatura...22 9. Sažetak...23

1. Uvod Svijet računalnih igara neopisivo je napredovao od svojih početaka. Godišnje se proda stotine milijuna igrica, zarada na kupovinu i pretplatu na igre mjeri se u milijardama kuna. Računalna industrija je jedna od najbrže razvijanih industrija, uz svakodnevne inovacije i ideje za budućnost. Proces razvoja računalnih igara zahtjevao je razvoj boljih arhitektura procesora, grafičkih kartica i sklopovske opreme, kako bi se omogućili novi sadržaji, bolje slike, nove dimenzije...nove virtualne stvarnosti. Ljudi su najbolji u trošenju najrjeđeg resursa vremena, a najviše uživaju u opuštanju i zabavi. Računalne igre postaju najbolji i najzastupljeniji sadržaj za zabavu, porastom korisnika donose profit koji potiče daljnji razvoj tehnologije. Unatoč tome, izrada igara zahtijeva razvoj računalne grafike, koju ne smijemo potcijeniti podređivanjem igrama. Računalna grafika je svuda oko nas, dok smo oko računala. Ovaj tekst, sve ikone i programi, svi podaci koje možemo vidjeti rezultati su razvoja grafike. Ona ima mnoge primjene u simulacijama, modeliranju sadržaja, zabavi, medicini, prometu, orijentiranju, bazama podataka... Igre su samo dio korištenja ljepote računalne grafike. U ovom seminaru obradit će se osnovni koncepti potrebni za izradu 2D računalne igre pomoću XNA tehnologije. Kroz poglavlja se izlažu principi i tehnike za programiranje računalne igre: postupno se prelazi iz osnova rada u XNA, upoznavanja s metodama i strukturama, u složene sustave primjenjivane pri izradama 2D igara. Uz izradu seminara, priložen je originalan kôd 2D igre Neverending Pew Pew, koju je implementirao autor. Djelovi koda iz igre priloženi su uz objašnjenja principa i tehnika, no postoje i pojednostavljeni primjeri koda izmišljeni za potrebe seminara. Slika 1.1 Izgled igre Neverending Pew Pew

2. Osnove rada u XNA tehnologiji 2.1 Uvod u XNA okruženje Microsoft XNA je skup alata nastao 2004., a objavljen je 2006. godine u Kaliforniji, SAD. Temelji se na Microsoftovom vremenskom okruženju, a služi za olakšavanje razvoja računalnih igara bez ponavljanja koda i jednostavno upravljanje resursima za bolju kvalitetu grafičkog i zvučnog sadržaja igre. Cilj XNA tehnologije je ujedinjavanje različitih aspekata stvaranja računalnih igara za Microsoft platforme u jedinstven sistem. Naziv XNA izvorno dolazi od Xbox New Architecture development Nova Xbox razvojna arhitektura, no nakon izlaska Xbox platforme 2005., autori su odlučili objaviti je pod imenom XNA nije akronim ( XNA is Not an Acronym ), ime za kojeg XNA jest akronim. U ovom seminaru koristit ću se najnovijim integriranim razvojnim okruženjem za izradu igara i aplikacija pomoću XNA tehnologije: XNA Game Studio 4. Game Studio sadrži opsežan skup predimplementiranih klasa i mehanizama predviđenih za izradu igara kako bi olakšao pisanje te minimizirao korisnikovu implementaciju istih. XNA okruženje (Framework) obuhvaća niske razine tehnoloških detalja u kodiranju igre poput kompatibilnosti koda za Xbox i druge platforme, omogućavajući programerima da se fokusiraju na sadržaj i doživljaj igranja. Integrirano je sa dodatnim alatima za stvaranje sadržaja, poput XACT - platforma za kreiranje audio sadržaja, te pruža podržku za 2D i 3D grafiku te omogućuje korištenje Xbox 360 kontrolera. 2.2 Kreiranje projekta i osnovna struktura Kako bismo stvorili novi projekt u kojem ćemo izraditi igru, nakon pokretanja programa Visual Studio odaberemo Projekt tipa ima predodređenu konstrukciju predviđenu za izradu igre ili grafičke aplikacije sa logičkom izmjenom parametara. U svojoj osnovi sastoji se od dvije klase: i, te referenci na biblioteke i direktorij sadržaja koji je inicijalno prazan, a služi za pohranu tekstura, modela, efekta te zvukova korištenih u projektu. se pokreće pozivom stvorene.exe datoteke, sastoji se isključivo od konstruktora za klasu te pokretanja iste. klasa ima vlastite definicije varijabli koje se mogu inicijalizirati u konstruktoru, no ne moraju, jer klasa može u bilo kojem djelu vlastite strukture koristiti tek tada instancirane varijable. Kôd klase nakon uključivanja korištenih knjižnica (libraryja), koje sadrže predefinirane strukture i klase, izgleda ovako: namespace WindowsGame1 public class Game1 : Microsoft.Xna.Framework.Game GraphicsDeviceManager graphics; SpriteBatch spritebatch;

public Game1() graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; protected override void Initialize() base.initialize(); protected override void LoadContent() spritebatch = new SpriteBatch(GraphicsDevice); protected override void UnloadContent() protected override void Update(GameTime gametime) if (Keyboard.GetState().IsKeyDown(Keys.Escape)) this.exit(); base.update(gametime); protected override void Draw(GameTime gametime) base.draw(gametime); je ključna riječ za međusobno povezivanje klasa i njihovih sadržaja bez dodatnog uključivanja zaglavlja ili datoteka kodova. Sve klase koje su povezane istim mogu se instancirati i koristiti međusobno. Kao što vidimo, klasa nasljeđuje sva svojstva predefinirane klase Microsoft.Xna.Framework.Game, te u svojim metodama koristi njezine. Pogledajmo osnovne djelove. Na početku imamo definicije dvaju klasa: klasa omogućava komunikaciju s grafičkom karticom, promjenu načina prikaza igre, rezolucije i složenijih parametara poput dubine crtanja 2D sadržaja, te klase koja omogućuje crtanje 2D sadržaja na ekran sa zajedničkim svojstvima. Slijedi konstruktor za klasu u kojem se poziva konstruktor i referencira se direktorij za pohranu materijalnog sadržaja igre. U nastavku imamo 5 metoda potrebnih za ciklički program kao što je računalna igra. Kada pokrećete neku prosječnu igru, ona počne s naslovnim ekranom, pa na izborniku imate ponuđen nastavak igre, počinjanje nove, promjene opcija i slično. Već za prikaz i funkcionalnost navedenog potrebno je inicijalizirati varijable poput širine ekrana, izgleda pozadine i podizbornika, pozadinske animacije i sličnog na početnu vrijednost to čini metoda metoda učitava sve teksture, zvukove, fontove i efekte korištene u tom procesu, a ovisno o implementaciji može učitati i sadržaj za igraći dio Trenutno se u našoj metodi samo instancira novi SpriteBatch. Recimo da izaberete pokretanje ranije započete igre. Mjesto, status i razvoj igre u trenutku u kojem ste spremili igru se treba učitati, a sadržaj s izbornika se može odbaciti kako bi se rasteretio grafički uređaj sustava, te se to čini metodom, no za pravilnu upotrebu te metode potrebno je dublje znanje i dodatne klase koje nećemo ovdje spominjati. Sama igra po završetku poziva metodu.

Ostaju nam dvije najbitnije metode koje skoro rade sav posao same. Metode i su sinkronizirane s otkucajem sata procesora i po postavkama XNA okruženja obje se pokušavaju pozvati 60 puta u sekundi. Ako se metoda, koja je bitnija, ne uspije izvršavati zbog zastoja u cjevovodu XNA sučelja, preskakat će se pozivi metode kako bi se mogao izvršavati pravilnom frekvencijom. Broj poziva po sekundi se može modificirati po želji, no 60 je sasvim dovoljno za običnu 2D arkadnu igricu kakvu radimo u seminaru. metoda služi za obradu sve logike i promjenu vrijednosti svih varijabli ovisno o implementiranim pasivnim događajima u igri ili radnjama izazvanim kretanjem te djelovanjem igrača. Naša metoda sadrži samo mogući izlaz pritiskom tipke te poziv koji ažurira sve promjene u logici svih ostalih komponenti igre, kojih trenutno nema. XNA Game Studio ima već implemetirane klase za obradu unosa sa strane korisnika, učitavanje stanja tipki na tipkovnici, stanja gumba na mišu te relativnog pomaka miša. Njihova upotreba je jednostavna i intuitivna, te se lako postiže funkcionalnost zadavanja naredbi i promjena varijabli pomoću tipkovnice i miša. Prvi red u metodi očitava trenutno stanje tipki na tipkovnici i u slučaju pritisnute tipke Escape poziva metodu za izlazak iz igre. metoda služi za crtanje svih modela, tekstura, te efekata u 2D ili 3D prostoru. Također sadrži poziv za metode svih komponenti igre, kako bi i one iscrtale vlastiti sadržaj. XNA okruženje sadrži korisnu klasu skupljač smeća, koja je odgovorna za brisanje svog sadržaja koji je dereferenciran, točnije: nema varijabli koje pokazuju na njega. Skupljač smeća se automatski poziva na kraju svakog poziva metode i briše sve nepotrebne podatke. Da skupljač ne postoji, radna memorija bi se kod pokretanja većih projekata sa složenim sadržajem brzo napunila i igra bi se zablokirala. Još jedna od pozadinskih stvari koje su implementirane kako korisnici ne bi brinuli o efikasnisti i zauzeću memorije. Nažalost, to ne sprječava početnike u XNA da napišu loše kodove koji uzaludno realociraju mnogo memorije. 2.3 Izrada prvog programa Hello World! Nakon uvoda u osnovnu strukturu klase, možemo napraviti svoj prvi program u Game projektu. Kada bismo radili Hello World program u projektu tipa Console Application konzolna aplikacija, dovoljno bi bilo nakon glavnog početka programa ( () ) napisati narebu za ispis teksta na konzolu na mjestu kursora: I tekst bi se ispisao na ekran. No u Game tipu projekta to nije tako jednostavno. Za ispis teksta na ekran, potreban nam je font kojim će tekst biti ispisan, a to radimo klikom na i izborom tipa, te unosom imena fonta preko kojeg ćemo ga učitavati iz sadržaja u varijablu: nazovimo ga. Potrebno je definirati varijablu tipa prije konstruktora Game klase unosom : Nakon toga, trebamo u sadržaj (Content) učitati stvoreni font, to činimo u metodi:

Recimo da želimo napisati Hello World bijelom bojom na crnom ekranu, točno na sredini ekrana. Prvo, trebamo postaviti ekran na crnu boju. To činimo u metodi pozivom Slijedeće, trebamo znati veličinu teksta i koordinate sredine ekrana. No, prije toga, pohranimo tekst Hello World u varijablu tipa string. Srećom, XNA pohranjuje veličinu ekrana u varijablu Window.ClientBounds. Instancirajmo varijablu tipa Vector2 u metodi ispod prethodne linije. Vector2 je varijabla vektorskog tipa koja sadrži 2 realna broja čija se vrijednost postavlja i dohvaća s imevektora.x i imevektora.y. Postavimo varijablu na vrijednost polovice veličine ekrana: Klasa prikladno sadrži metodu koja računa veličinu teksta, spremimo ju u novu varijablu tipa vektor2: Ako je lokacija za crtanje teksta sredina ekrana, ona je jednaka Preostaje nam samo ispisati tekst na ekranu. Nažalost, u Game projektu se ništa ne ispisuje, već je sve bazirano na crtanju. Kako bi nešto nacrtali na ekranu, moramo omogućiti SpriteBatchu da crta. To se postiže s metodama: Između njihovog poziva crtamo naš tekst na ekran sijedećom naredbom: Pogledajmo parametre prethodne naredbe. Ona crta zadanim na zadanoj na ekranu, određene, gdje smo iskoristili predefiniranu bijelu boju. Uz promjenu parametra Size u xaml kodu za na 70 zbog bolje vidljivosti, pokretanjem napisanog projekta dobivamo slijedeći prikaz: Slika 2.1 Izvršavanja Hello World programa Kao što smo vidjeli, za jednostavan ispis teksta na ekran potrebno je dodavanje par varijabli, fonta kao dodatka sadržaju i shvaćanje par novih koncepata, da ne spominjem poznavanje parametara metoda i struktura. Implementacijom funkcionalnog Hello World programa završavaju osnove rada u XNA.

3. Objekti i logika 3.1 Sprite : uvod u pojam i primjenu Računalna igra Neverending Pew Pew koja je napravljena za ovaj seminar prikazujući primjenu računalne tehnologije XNA u 2D grafici, temelji se na objektno orijentiranom programiranju u programskom jeziku C#, jednostavnoj logici međupovezanosti objekata, te prikazivanju sadržaja na temelju sprite sistema. Za potrebe daljnjeg objašnjenja primjenjenih sistema i logike, upoznajmo se detaljnije s definicijom pojma sprite. U računalnoj grafici, pojam sprite odnosi se na dvodimenzinalnu sliku ili animaciju koja je integrirana u veću scenu, iako se termin često krivo i ograničeno interpretira kao isključivo 2D grafika niske rezolucije, referirajući na drugi pojam umjetnost slikovnih elemenata (pixel art). Pojam je inicijalno korišten za opis grafičkih objekata koji su zasebno memorijski tretirani kao vizualni prikaz slike na ekranu, no upotreba se proširila na definiranje različitih načina preklapanja u prikazu grafičkih sadržaja. Izvorno, spriteovi su bili metoda integriranja nepovezanih slika kako bi sastavili dio slike na ekranu računala, poput stvaranja animiranog lika koji se može micati po ekranu bez promjene podataka koji definiraju sadržaj cjelokupne pozadine ekrana. Takvi spriteovi mogu biti implementirani u računalnim komponentama poput DMA impoziranjem vizualnih izvora (slika) ili programski posebnim metodama izrade prikaza. (prevođenja određenog prikaza slike u piksele na ekranu). Kako je tehnologija 3D računalne grafike izrazito napredovala kroz vrijeme, korištenje termina prikaz spriteovima u tom području znači opisivanje tehnike stapanja slika u cjelinu sadržaja trodimenzionalnih scena. Naziv Sprite potječe od engleske riječi za vilenjaka, smislio ga je krajem 1980-ih godina jedan od inženjera iz tvrtke Texas Instruments, koji su radili na kreiranju prvog procesora (Visual Display Processor) koji je omogućavao vizualni prikaz slika. Unatoč apsolutnoj nepovezanosti pojma vilenjak i primjene Sprite-a u računalnoj grafici, pojam je postao toliko poznat i čest da jednostavno referira na navedenu primjenu. Tijekom sedamdesetih godina 20. stoljeća, tvrtka Signetics je razvila prve video/grafičke procesore sposobne za generiranje separirajućeg prikaza slika. Videoračunalni sustav Atari, izveden i objavljen 1977. godine bio je sposoban za prikaz i micanje čak pet grafičkih objekata neovisno o pozadini. Paralelni razvoj računalnih igara pratio je mogućnosti računalnih komponenata. Nakon razvoja tehnologije kojom je omogućeno da centralna računalna jedinica (CPU) vanjskim čipovima daje instrukcije za dohvaćanje slika i integriranje na glavni ekran korištenjem kanala direktnog memorijskog pristupa (DMA), svojstva grafičkih prikaza sustava, poput brzine izvođenja, znatno su se poboljšala jer procesor više nije bio zauzet premještanjem podataka i mogao je izvršavati logički kôd za promjenu pozicije, boje tekstura, itd. Za ostatak razvoja računalne grafike do današnje kvalitete zaslužna je evolucija u izvedbi računalnih arhitektura i grafičkih kartica. U računalnim igrama, spriteovi se najčešće koriste za prikaz likova drugih pomičnih objekata. U općenitoj primjeni, spriteovi se koriste za prikaz strelice miša na ekranu,

pisanje ovih slova, ikone u programima ili na pozadini i mnoge druge suptilne svrhe koje svakodnevno prihvaćamo kao prikaz normalnog rada računala. Za korištenje spriteova izvan njihovog opsega, oni mogu biti skalirani ili kombinirani s drugima ili vlastitim kopijama, čime se postižu efekti čestičnih sustava, koji će biti obrađeni u 6. poglavlju. 3.2 Objekti i logika u igri U izradi svake igre, programeru mora biti poznat cilj igre, kao i tok događaja, kako bi mogao apstraktne pojmove i njihova svojstva implementirati u objekte koji će, kao jednostavne i smislene cjeline, simulirati zadano ponašanje i svojstva. U ovoj igri, naša logika počinje od, i to bi mogao biti prvi za implemetaciju. Igrač treba vidjeti neku prezentaciju sebe na ekranu (budući da je igra dvodimenzinonalna), poput teksture posebnog svemirskog broda, kako bi znali gdje se nalazi, kuda ide i što je u njegovoj neposrednoj okolini. Također, trebat ćemo implementirati kretanje i druge radnje koje bi igrač trebao kontrolirati kako bi ispunio cilj. Cilj igre je ostati živ što dulje izbjegavajući asteroide i neprijatelje, kao i njihove projektile ispaljene prema nama, naravno, uz mogućnost uništavanja neprijatelja i udaljavanja asteroida prije ostvarivanja prijetnje za igračev život. Odjednom, pojavili su se novi objekti:. Svi će imati zasebnu klasu koja će upravljati njihovim svojstvima, no pogledajmo prije toga što im je svima zajedničko: svi se moraju crtati na različitim pozicijama na ekranu te nezavisno ponašati, točnije: imati vlastitu teksturu za prikaz, varijable i metode za osnovno ponašanje, crtanje i promjenu položaja. Zaključak je da početno kodiranje mora biti usmjereno prema apstraktnom objektu, klasi, koja će sadržavati osnovna svojstva i biti korištena kao roditeljska klasa svih objekata prikazivanih na ekranu kroz igru, rezultirajući jednostavnošću i smanjenjem količine te ponavljanja koda. Osnovni izgled klase : class Sprite // varijable za prikaz na ekranu public Texture2D Texture; private Color tintcolor = Color.White; // varijable za animaciju protected List<Rectangle> frames = new List<Rectangle>(); private int framewidth = 0; private int frameheight = 0; private int currentframe; private float frametime = 0.1f; private float timeforcurrentframe = 0.0f; // varijable za transformacije protected Vector2 location = Vector2.Zero; protected Vector2 velocity = Vector2.Zero; protected float rotation = 0.0f; public float scale = 1.0f; // varijable za detekciju kolizije public int CollisionRadius = 0; public int BoundingXPadding = 0; public int BoundingYPadding = 0; // konstruktor public Sprite( Vector2 location,texture2d texture,rectangle initialframe,vector2 velocity)(...)

// ostale metode public bool IsBoxColliding(Rectangle OtherBox)(...) public bool IsCircleColliding(Vector2 othercenter, float otherradius)(...) public void AddFrame(Rectangle framerectangle)(...) public virtual void Update(GameTime gametime) float elapsed = (float)gametime.elapsedgametime.totalseconds; timeforcurrentframe += elapsed; if (timeforcurrentframe >= FrameTime) currentframe = (currentframe + 1) % (frames.count); timeforcurrentframe = 0.0f; location += (velocity * elapsed); public virtual void Draw(SpriteBatch spritebatch) // crtaj (sa Teksture, centar na ekranu, pravokutnik sa Teksture, sa rotacijom, // sa centrom rotacije u, skaliraj, sa dodatnim efektom, sa prostornom dubinom) spritebatch.draw(texture, Center, Source,tintColor,rotation, new Vector2(frameWidth / 2, frameheight / 2, scale, SpriteEffects.None, 0.0f); Objašnjenje koda: Klasa sadrži 4 podskupine varijabli podijeljene po svrsi: varijable za prikaz na ekranu, animaciju, transformacije i detekciju kolizije. Sadrži konstruktor koji prima 4 parametra za početnu definiciju svake instance klase: lokaciju, brzinu, teksturu na kojoj se nalazi slika i pravokutnik početnog okvira, kao dio teksture koji obuhvaća prikaz slike za taj. Slijede 2 metode: i koje služe za detekciju kolizije (kolizija je objašnjena u 6. poglavlju). Metoda u listu dodaje okvire kao niz slika koje će se prikazivati i izmjenjivati u određenom vremenskom razmaku. Moguće ostvarenje animacije pružaju varijable za animaciju i kôd u metodi, osim zadnjeg reda koji ažurira položaj Kao što vidimo u istoj metodi, XNA razvojno okruženje pruža korisnicima manipulaciju varijablama na temelju proteklog vremena odbrojavanog u različitim jedinicama, te se navedena svojstva koriste u proteklim sekundama ili milisekundama za npr. animaciju - izmjenu slika, odbrojavanje životnog vijeka čestica, sve translacije po ekranu i druge svrhe. Preostaje nam metoda koja uz sve prethodno izračunate parametre crta trenutni okvir za prikaz na trenutnoj lokaciji na ekranu, uz rotaciju i skaliranje po potrebi. Sada kad imamo implementiranu klasu, možemo se posvetiti specifičnim objektima. No, nakon kratkog razmatranja, zaključujemo da bi bilo dobro slijedeće napraviti klasu Projektili ( ), koja će upravljati ispaljenim projektilima sa strane igrača i neprijatelja. Navedeno radimo iz slijedećeg razloga: igrač i neprijatelji kao klase će sadržati vlastite, nezavisne instance klase, kako bi se omogućilo razlikovanje izvora projektila za pravilnu interakciju pri detekciji kolizije projektila i drugog objekta. Ukratko, nakon izgradnje Projektila, implementiramo klase Igrača i Neprijatelja, te dodamo korištenje Projektila u njih. Proširimo klasu na klasu za implementaciju čestičnih sustava.

Dodamo klasu Asteroidi i interakciju svih dosadašnjih klasa objedinimo u klasi Detekcija Kolizije ( ) koja određenim algoritmima detektira kolizije objekata, te reakcije prosljeđuje klasi Eksplozije ( ) koja je odgovorna za popratne vizualne efekte. Preostaju nam opcionalne klase za pozadinski ugođaj, bez kojeg bi se igra doimala pomalo ispraznom i linearno dosadnom. Spomenute klase su: Zvjezdano Polje ( ) za nasumične pozadinske piksele koji predstavljaju zvijezde u daljini, te klasa Upravljanje Zvukom ( ) čije se metode koriste u klasama Igrač, Neprijatelj, Detekcija Kolizije te Eksplozija, kako bi pustila prigodne zvukove tako da igrači igre steknu doživljaj napetosti i osjete povratnu vezu između njihovih akcija i igre. Nakon dovršetka svih pomoćnih klasa, razmatramo kako u igri prikazivati različite djelove igre, koji će različito izgledati i koristiti pomoćne klase na različite načine. Enumeracija (enum) je posebna vrsta podataka u kojoj ne postoje tipovi varijabli ili strukture, samo proizvoljna nabrojana imena, poput imena varijabli. Varijabla enumeracijskog tipa se može postaviti isključivo na jednu od nabrojenih imena u presjeku vremenskog trenutka. Primjenom Enumeracije odvajamo stadije igre u sljedeće cjeline: Naslovni ekran, Tijekom igre, Igrač mrtav, Igra gotova, Igra pauzirana. Pomoću naredbe višestrukog grananja u i metodi glavne klase, možemo iskodirati potrebe za prikaz i razvoj događaja u pojedinim stadijima igre. Izvorni kôd slijedi: enum GameStates TitleScreen, Playing, PlayerDead, GameOver, Paused ; Konačno, preostaje nam dodavanje posljednje metode u glavnu klasu, koja će se pozvati kada igra završi, tj. kad igrač izgubi sve živote. Ta metoda će resetirati stanje igre na Naslovni ekran, čime se ciklus igranja ponovno omogućuje. Time zatvaramo krug i popunjavamo zadnja mjesta u logici igre.

4. Teksture i transformacije U ovom poglavlju obradit ću osnove rada s prozorom izvršavanja projekta, dodavanje, učitavanje, osnovno i napredno korištenje tekstura, osnove transformacije tekstura, te kratke, ali korisne funkcije i algoritme za implemetaciju fizike, interpolacije i animacije. 4.1 Radni prozor i orijentacija Pri samom stvaranju projekta tipa veličina izvršnog prozora se postavlja na 800x600 piksela. Tu veličinu možemo modificirati po volji i u bilo kojem trenutku, iako bi bilo mudro činiti to u metodi i ne mijenjati tijekom izvođenja ukoliko su mnoge veličine i pozicije postavljene na konkretne brojeve neovisno o veličine prozora. Širinu i visinu prozora postavljamo slijedećim kodom: graphics.preferredbackbufferwidth = 1280; graphics.preferredbackbufferheight = 800; graphics.applychanges(); Kôd postavlja širinu na 1280, a visinu prozora na 800 piksela, te se u toj rezoluciji izvršava projekt ovog seminara. Primjetimo da je grafički uređaj, tj. varijablu graphics koja je instanca klase, potrebno ažurirati metodom kako bi ona primjenila promjene varijabli. Prozor možemo tretirati kao koordinatni sustav s točkom (0,0) u gornjem lijevom kutu, te duljinama poluosi X i Y koje odgovaraju veličini prozora. Unatoč tome što je naš prikaz ograničen na dio 1. kvadranta limitiranog koordinatnog sustava zrcaljenjog preko x osi, XNA će crtati i teksture na negativnim te lokacijama izvan granica ekrana. Budući da to nema nikakve praktične primjene, samo popratni efekt nepotrebnog usporavanja izvršavanja programa, bilo bi dobro imati metodu poput iz klase, koja provjerava nalazi li se zadana tekstura na ekranu; ako ne, nema potrebe za njenim crtanjem. (0,0) (PreferredBackBufferWidth,0) PrefferedBackBufferWidth PrefferedBackBufferHeight - širina prozora - visina prozora (0, PreferredBackBufferHeight) Slika 4.1 Prozor: koordinacija Slika 4.1 prikazuje koordinate rubnih točaka i orijentaciju veličina. Za kraj osnova radnog prozora, prikažimo kako se može mijenjati boja pozadine korištenjem neke od 142 predefiniranih boja ili instanciranjem vlastite na slijedeći način: Color imeboje = new Color(r, g, b, a);

Prethodni red stvara strukturu tipa boja, koja sadrži 4 vrijednosti u rasponu cijelih brojeva od 0 do 255 ili u rasponu realnih brojeva od 0 do 1 za količine crvene, zelene, plave boje te transparentnosti, tim redoslijedom. Raspon se automatski postavlja ovisno o poslanim vrijednostima te se skalira ovisno o tipu. Boju ekrana primijenimo na početku metode u klasi, kako bi se sve što crtamo poslije promjene boje pozadine i dalje vidjelo na ekranu. Pri stvaranju projekta, XNA postavlja boju zaslona na svijetlo-plavu, definiranu kao CornFlowerBlue. Izmjenom tog parametra primjenjujemo željenu boju na cijeli prozor. Kôd glasi: GraphicsDevice.Clear(Color.Black); Programski kôd poručuje grafičkom uređaju da sve piksele koje crta u prozoru,koji je prikaz izvršavanja projekta, postavi na zadanu boju. 4.2 Rad s teksturama XNA okruženje nema podršku za stvaranje tekstura, tako da sve teksture koje želimo prikazati tijekom igre, moramo dodati u sadržaj projekta. XNA se tijekom izvođenja ograničava na pristup datotekama koje su prethodno dodane u sadržaj. Datoteke dodajemo na slijedeći način: te klikom na željenu datoteku dodajemo ju sadržaju projekta. Sada možemo učitati teksturu iz sadržaja, no prije toga stvorimo varijablu tipa iznad konstruktora klase. Kao što je spomenuto u poglavlju 2., metoda poziva se samo jednom tijekom izvođenja i optimalno služi za učitavanje sadržaja, pa učitajmo teksturu tamo. Tekstura se učitava na slijedeći način: Texture2D mojatekstura;... public Game1();... protected override void LoadContent() spritebatch = new SpriteBatch(GraphicsDevice); mojatekstura = Content.Load<Texture2D>("imeDatotekeUSadrzaju"); Prikažimo učitanu teksturu kao pozadinu cijelog radnog prozora. U XNA okruženju sve crtamo na ekran, a sve 2D objekte crtamo u metodi funkcijom. Funkcija ima 7 predefiniranih oblika, ovisno o količini parametara te složenosti samog crtanja. Iskoristimo najjednostavniji oblik: spritebatch.draw(mojatekstura, GraphicsDevice.Viewport.Bounds, Color.White); Parametri ove funckije su tekstura koju želimo prikazati, pravokutnik u kojem crtamo teksturu, te boja propusnosti teksture, u našem slučaju je to bijela, potpuno transparentna boja, tako da prikaz teksture odgovara pravom izgledu učitane datoteke. Klasa omogućava pristup prikladnoj varijabli koja sadrži pravokutnik veličine izvršnog zaslona, tako da bez stvaranja novih pravokutnika možemo crtati teksturu preko cijelog ekrana. XNA skalira širinu i visinu učitane slike kako bi odgovarala veličini zadanog pravokutnik u naredbi Rezultat izvršenja možemo vidjeti na slici 4.2.

Sada primjenimo složeniju verziju naredbe. Parametri i poziv glase: spritebatch.draw(mojatekstura, centarnaekranu, dioteksture, bojapropusnosti, kut, centarrotacije, SkalaXY, SpriteEffects.None, dubinasloja); Slika 4.2 Jednostavan Slika 4.3 Složen Prikazana naredba crta pravokutnik iz datoteke, centriranu na poziciji. Tekstura je zarotirana udesno za, izražen u radijanima, s obzirom na, kojeg postavljamo na polovicu veličine pravokutnika ako želimo da se rotira oko vlastitog centra. SkalaXY skalira širinu i visinu teksture, bojapropusnosti se koristi kao i bijela boja iz jednostavnog primjera, je enum podatak koji sadrži preslikavanje po x ili y osi te prazan efekt. je parametar dubine crtanja teksture realnog raspona od 0 do 1. Ako se dubina postavi na 0, tekstura se crta na najgornjem, a za dubinu 1 na najdonjem sloju. Rezultat crtanja složenog poziva se vidi na slici 4.3. Parametri su slijedeći: dioteksture je 200x300 piksela sa sredine slikovne datoteke sa slike 4.2, rotacija je 2 radijana, skaliranje je 0.8 po obje osi, te je pozadina boje CornFlowerBlue. 4.3 Transformacije U prošlom poglavlju smo imali prilike vidjeti transformiranje tekstura u smislu pomaka (lokacije crtanja), rotiranja i skaliranja. Sada pogledajmo primjenu na logičke varijable. Metoda u klasi poziva se, kao i ostale, 60 puta u sekundi. Igrač se ovisno o pritisku kontroli na tipkovnici, kreće u željenom smjeru konstantnom brzinom. XNA okruženje ima načine za kontrolu toka vremena, čime se postiže pomicanje slike igrača za određen broj u određenom vremenu. Slijedeći kôd u metodi povećava varijablu za 17 po protekloj sekundi vremena: public virtual void Update(GameTime gametime) float elapsed = (float)gametime.elapsedgametime.totalseconds; value += (17 * elapsed); Ako se umjesto stavi varijabla koja određuje lokaciju igrača, a umjesto broja 17 brzina određena kontrolama, dobije se kretanje slike igrača kroz vrijeme.

XNA okruženje u svojim predefiniranim klasama sadrži klase, u kojima su definirane osnovne i napredne matematičke funkcije, konstante poput Pi, te druge korisne funkcije. Među njima se nalaze i funkcije i koje su korištene u projektu. Funkcija vraća varijablu ograničenu na raspon vrijednosti od do Varijable i mogu biti samo realnog tipa. Primjena te funkcije je česta kod rotacije, jer kut u radijanima ne mora biti izvan raspona od 0 do 2*Pi kako bi se svi kutevi mogli prikazati. Jedna od primjena u projektu, ograničavanje kretanja igrača kako bi on u potpunosti u svakom trenutku bio na ekranu, prikazana je u slijedećem kodu: igrac.pozicija.x = MathHelper.Clamp(igrac.pozicija.X, 0, ekran.sirina - igrac.sirina); igrac.pozicija.y = MathHelper.Clamp(igrac.pozicija.Y, 0, ekran.visina - igrac.visina); Vrijednosti su određene veličinom slike igrača, budući da je pozicija referentna na gornji lijevi kut slike igrača. Funkcija vraća varijablu koja iznosi Kao u funkciji, varijable mogu biti samo realnog tipa. Funkcija se koristi za linearnu interpolaciju neke vrijednosti, poput položaja, rotacije, sjaja ili transparentnosti, te se za parametar obično šalje vremenski promijenjiva varijabla. Primjeri u projektu su interpolacija položaja neprijatelja između zadanih točaka njihove putanje, te interpolacija boja i transparentnosti čestica u eksploziji neprijatelja ili igrača. Vektori, kao strukture koje sadrže 2 realna broja, su bitan dio sastava projekta kao 2D računalne igre. Budući da se u dvodimenzionalnom prostoru sve referira pomoću X i Y koordinata, primjena strukture je neizostavna. Fizika implementirana u projektu svodi se na igranje s vektorima. Vidjeli smo primjer za pomak: brzina x vrijeme, bez akceleracije. Ovdje ćemo navesti bolji, složeniji primjer, poput međusobnog odbijanja asteroida. Proučimo sudar 2 asteroida: oba imaju trenutnu poziciju i trenutnu brzinu (v1 i v2). Uz primjenu količine gibanja, dobije se rezultantna brzina vrez= (v1+v2)/2, i to je 1. korak na slici 4.4. Od početnih brzina se oduzme vrez te se dobiveni vektor vrez1 i vrez2 reflektiraju od odgovarajućih normala -> korak 2. Normale n1 i n2 dobiju se razlikom koordinata centara a2-a1 odnosno a1-a2, to je korak 3. Korak 4 -> nove brzine asteroida su jednake v1'= vrez1+vrez, odnosno v2+=vrez2+vrez. vrez n1 v1' v1 vrez1 v2 vrez2 n2 v2' Slika 4.4 - Sudar asteroida

Pri implementaciji koda za odbijanje asteroida korištene su vektorske funkcije i. Funkcija skalira vektor na vektor jedinične duljine. Prije normaliziranja moramo provjeriti da vektor ne iznosi (0,0) jer od nul-vektora ne postoji jedinični. Nomalizacija vektora se koristi i pri ograničavanju brzine igrača te brzine čestica u eksploziji na slijedeći način: if (brzina > maxbrzina) brzina.normalize(); brzina *= maxbrzina; Funkcija djeluje kao zrcaljenje vektora oko osi, s promjenom orijentacije. 4.4 Animacija Animacija se ostvaruje brzom izmjenom slika kako bi se postigla iluzije pokreta, promjene oblika ili promjene osvjetljenja i boje. U projektu igre, sve osim pozadinske slike je animirano. Za iluziju pokreta u kodu dovoljno je da se vrijednost položaja, skale, rotacije, transparentnosti ili boje promijeni u jednom pozivu metode, i metoda će nacrtati 60 različitih varijacija iste slike u sekundi. Na primjer, čestice se gibaju uz promjenu boja, te zbog tromosti vida mi doživljavamo te promjene kao konstantne naš mozak stvara iluziju animacije. No kako bismo postigli animaciju u smislu promjene samog izgleda slike, a ne parametara njenog prikazivanja? Za prikaz takve animacije trebamo imati više slika istog objekta, poput slika asteroida. Na izvornoj teksturi nalaze se sve korištene slike igrača, neprijatelja i projektila. Kako bismo postigli iluziju rotacije asteroida oko svoje osi, trebamo pohraniti sve djelove teksture koje prikazuju asteroid u niz slika koje ćemo prikazivati pravilnim izmjenjujućim redoslijedom. Slijedi kôd koji izmjenjuje sliku asteroida koja će se prikazati u slijedećem pozivu metode: public virtual void Update(GameTime gametime) float elapsed = (float)gametime.elapsedgametime.totalseconds; timeforcurrentframe += elapsed; if (timeforcurrentframe >= FrameTime) currentframe = (currentframe + 1) % (frames.count); timeforcurrentframe = 0.0f; Uz pretpostavku pravilnog učitavanja slika s izvorne teksture, slike su slijedno pohranjene u listi. Varijabla sadrži vrijeme u sekundama kroz koje želimo prikazivati jedan okvir iz niza. odbrojava vrijeme koje je prošlo od početka prikazivanja trenutačnog okvira, te se resetira pri smanjenju na nulu, uz promjenu okvia na slijedeći u nizu.

5. Detekcija kolizije 5.1 Uvod u detekciju kolizije Termin odnosi se na računalni problem detekcije presjecanja dvaju ili više objekata. Primjenjuje se u robotici, fizičkim simulacijama i računalnim igrama. Uz predviđanje trenutka sudara, algoritmi mogu odrediti i set točaka sudara ili volumen presjeka nakon isteka odreženog vremena. Algoritmi detekcije kolizije moraju omogućavati daljnja predviđanja nakon detekcije inicijalnih sudara. Rješavanje takvih problema zahtjeva opsežno znanje linearne i matrične algebre. Dok robotika i fizičke simulacije imaju stroge zahtjeve za točnost algoritama, primjena u računalnim igrama ima mnogo niže standarde. Igre trebaju simulirati sudare u prirodi s prihvatljivom točnošću koja ne mora biti precizna, ali mora biti efikasna i brza, kako ne bi došlo do usporavanja igre i smanjenja kvalitete doživljaja. Najbrži algoritmi za detekciju kolizije u dvodimenzionalnom prostoru su oni koji sve objekte za provjeru kolizije tretiraju kao zasebni geometrijski lik. 5.2 Pravokutna i kružna detekcija kolizije Da, spomenuti algoritmi najčešće koriste ta dva geometrijska lika za detekciju kolizije. Pogledajmo kako su ostvareni. Pravokutna detekcija kolizije Za primjenu ovog algoritma, svi objekti trebaju imati pravokutnik koji aproksimira njihov izgled i poziciju na ekranu. Objekti se mogu aproksimirati pravokutnikom svoje veličine, umanjenom na granicama za neki sigurnosni sloj u kojem se neće detektirati kolizija. Što je sigurnosni sloj veći, veća je i greška, ako je objekt nepravilan. Slika 6.1 prikazuje objekt povezan s pravokutnikom i malim sigurnosnim slojem. Slika 5.1 - Prikaz objekta i povezanih pravokutnika Algoritam presjeka dva pravokutnika ispituje imaju li zajedničku točku. Za ispitivanje kolizije više pravokutnika, uspoređuju se dva po dva. Kôd za takvu detekciju korišten u izrađenoj igri: public bool IsBoxColliding(Rectangle OtherBox) return BoundingBoxRect.Intersects(OtherBox);

Algoritam koristi predefiniranu XNA metodu koja provjerava jesu li koordinate vrhova jednog pravokutnika unutar drugog, ako je bar jedan vrh unutra, oni se sijeku. Na slici 6.2 vidimo presjek dvaju pravokutnika kada im se djelovi bez sigurnosnih slojeva ne sijeku i kad se detektira kolizija. Kružna detekcija kolizije Slika 5.2 Detekcija kolizije pravokutnicima Detekcija kolizije objekata koji su aproksimirani krugom je puno jednostavnija od gornje, svodi se na jedno oduzimanje. Svaki objekt ima definiranu sredinu kruga i radijus kolizije. Kôd slijedi: public bool IsCircleColliding(Vector2 othercenter, float otherradius) if (Vector2.Distance(Center, othercenter) < (CollisionRadius + otherradius)) return true; return false; Metoda prima parametre radijusa i centra kruga drugog objekta, a poziva se iz prvog objekta. Uspoređuje udaljenosti centara krugova s ukupnim radijusom kolizije. Ako je udaljenost manja od sume radijusa, krugovi se sijeku. Na slici 6.3 vidimo dva kruga koji su dovoljno daleko i dva koji se sijeku. Slika 5.3 - Detekcija kolizije krugovima Algoritam za detekciju pomoću krugova redom se koristi u klasi za detekciju između parova objekata:. S obzirom na detektirane kolizije, poduzimaju se određene radnje: neprijatelj se uništi, projektij nestane, nastane eksplozija, asteroid nestane ili se odbije. Obrađeni algoritmi dovoljni su za spomenutu prihvatljivu točnost, i dovoljno jednostavni da ne usporavaju izvršenje koda. Za složenije primjere objekata i algoritama, trebali bi se dublje upustiti u linearnu algebru i logiku uključivanja.

6. Čestični sustavi 6.1 Teorija čestičnih sustava U računalnoj grafici, termin čestični sustav (particle system) odnosi se na tehniku prikazivanja dinamičnih fenomena koji se teško reproduciraju standardnim tehnikama prikazivanja 2D i 3D objekata. Čestični sustavi se mogu primjeniti na simulaciju vatre, eksplozija, dima, animaciju površine (ili unutrašnjosti) vode, struje, padajućeg lišća, oblaka, magle, snijega, meteora, kose, krzna ili dlakave površine, trave te ostalih apstraktnih vizualnih efekata poput osvjetljenja i magije. U praksi češća je upotreba 3D čestičnih sustava, u skladu s razvojem mogućnosti industrije računalnih igara, no mnogi ljudi podcijenjuju kvalitetu, ljepotu i jednostavnost implementacije i upotrebe 2D sustava. Osnova rada mnogih čestičnih sustava je emiter. Emiter je najčešće 3D objekt koji se ponaša kao izvor za lokaciju čestica, te sadrži parametre ponašanja čestica poput količine stvaranja čestica u vremenu, vektor brzine i smjera, životni vijek čestice, boje i mnoge druge. Poligoni od kojih je sastavljen emiter se postave kao vektori normale na smjer kretanja stvorenih čestica, kako bi se postigao željeni oblik sustava čestica poput lokaliziranog plamena ili oblaka. Programeri čestičnih sustava navedenim parametrima pridjeljuju realne vrijednosti koje su u rasponu od centrirane određene vrijednosti kako bi se postigao efekt nasumičnosti i realnosti. Kao primjer, prosječni životni vijek neke čestice može biti 2 sekunde, ali se u praksi izabire 2 sekunde +- 20% te vrijednosti, kako se sustav ne bi ponašao monotono i uniformno. Izvedba standardnih čestičnih sustava dijeli se na metodu za ažuriranje i promjenu parametara (simulacija), te metodu za prikaz čestica na ekranu. Tijekom poziva simulacijske metode za ažuriranje varijabli čestičnog sustava, čestice se stvaraju na temelju određene količine i intervala, inicijaliziraju na postavljene i nasumične vrijednosti, na sve postojeće čestice se primjeni promjena lokacije, boje, intenziteta osvjetljenja i ostalih parametara, te se konačno sve čestice kojima je istekao životni vijek uklanjaju iz liste postojećih. Promjena pozicije, kao osnovnog parametra, može biti jednostavna translacija, no napredni sustavi imaju mogućnosti kretanja u određenim matematičkim putanjama, krivuljama te prostornim objektima, uz izražen utjecaj vanjskih sila (gravitacija, frikcija, vjetar), te čestične interakcije sa drugim česticama i okolinom (fuzija, odbijanje, raspršenje) koje se zbog složenosti implementacije i usporavanja izvršavanja programa rijetko primjenjuju u simulacijama. Nasumičnost parametara prikaza (veličine, rotacije, skaliranja) te ponašanja čestica (boje) omogućava simulaciju istih ponašanja neponovljivog izgleda, čak i korištenjem samo jednog modela čestice. Nakon promjene opisnih varijabli svih čestica, one se prikazuju na ekranu. Čestica može biti prikazana četverokutnom teksturom, točnije: djelom teksture okrenutom prema kameri, obojanim pikselom (najjednostavniji i najbrži način prikaza, najmanje kvalitete), metakuglama ili drugim 3D objektima. U slučaju prikaza čestica 3D objektima veliku ulogu u kvaliteti i brzini prikaza ima količina poligona kojima se prikazuje jedna čestica, transparentnost pojedinih djelova te drugi površinski i efekti materijala čestice povezani s okolišem i osvjetljenjem.

Termin čestični sustavi često asocira isključivo na animirani aspekt primjene, no oni mogu biti animirani i statični, točnije: putanja i promjena čestice kroz životni vijek može biti prikazana kadar po kadar animacije ili odjednom. Kao primjer dinamične animacije čestica imamo snijeg, vatra, oblaci, a primjer statike je kosa, (dlaka, krzno), trava i slično. Varijable statičnih sustava se mogu mijenjati po istim (implementiranim) zakonima fizike i matematike. U primjeni statičnih sustava efektivnost utjecaja varijabli se lokalizira, te se primjenjuje krivulja utjecaja na model čestice ili čitavog sustava: na primjer, vrh vlasi trave će se više saviti na vjetru od sredine ili korijena. Također postoje dodatne varijable koje preciznije simuliraju prethodno navedeno ponašanje, njima se postižu naprednija fizička svojstva poput ukočenosti, čvrstoće, inertnosti, rasporeda mase. 6.2 Primjena čestičnih sustava U seminarskom radu postoje 4 klase koje implementiraju ponašanje čestičnih sustava: i. Sva tri slučaja koriste animiranu primjenu čestičnih sustava, no u različite svrhe: pozadinski efekt, interakcija s okolinom, te efekt koji se aktivira posebnim događajem. Zvjezdano polje ( ) prvi je implementirani čestični sustav, te služi samo za uljepšavanje i razbijanje monotonosti pozadine. Možda se u razvoju igre dodaju svojstva koja bi odražavala tempo i trenutnu težinu igre poput agresivnijih boja ili većih brzina čestica za više razine. U klasi, u metodi, pozivaju se pomoćne metode za crtanje u svim ostalim klasama. Zvjezdano polje se crta prvo po redu, (naravno, nakon pozadine) iz jednostavnog razloga. U ovom projektu upotrijebljen je jednostavan princip crtanja što se crta poslije, prikazuje se preko svega što se nacrtalo prije. Budući da je Zvjezdano polje zasad samo ambijentalno, logično je prvo njega nacrtati. Primjetimo da sam mogao koristiti prikladnost koju omogućava buffer depth opcija naredbe za crtanje i klase SpriteBatch koja bi omogućila sistematizitani slojeviti prikaz i redoslijed crtanja sadržaja klasa u igri, no nekad je jednostavnije samo nacrtati stvari željenim redoslijedom, iako to nije nimalo profesionalno, te zahtijeva više kodiranja pri mijenjanju odluka o crtanju segmenata igre. U osnovne varijable klase za obradu ponašanja čestičnog sustava pripada neizostavna lista osnovne Sprite klase, opisane ranije. Ostale varijable mogu se sažeti na veličinu površine na kojoj će biti crtane naše čestice - zvijezde, broj i veličina zvijezda, dio teksture koji će ih predstavljati, usmjerenje i brzina, te raspon boja koje one mogu poprimiti. U konstruktoru zadanom broju zvjezda nasumično dodjelimo brzinu unutar razumnog raspona, položaj unutar dane površine, boju iz skupa dopuštenih boja, te su nam potrebne još samo metode za ažuriranje položaja i crtanje. Klasa Sprite ima predefiniranu metodu za crtanje, te sve što trebamo je pozvati tu metodu za sve zvijezde u Zvjezdanom polju. Što se tiče Update() metode, opet sam išao jednostavnijom metodom čim zvijezda bude locirana van ekrana (zadane površine), neka njena pozicija bude nasumično izabrana lokacija unutar ekrana, što u praksi ima efekt novostvorene zvijezde. Cijela klasa ima efekt stalnog pokreta, nasumičnosti i živosti, te je ugođaj u igri bogatiji od čiste statične slike pozadine. Asteroidi ( ) čine drugi čestični sustav, i kao dio svemirskog okoliša, postoji interakcija između njih i okoline, točnije: igrača i neprijatelja. Uz neizostavnu listu

Sprite klase koja predstavlja naš skup asteroida, kao i metode za postavljanje nasumičnog položaja i ažuriranje varijabli, klasa Asteroidi sadrži metodu za fizičku simulaciju odbijanja između svih postojećih asteroida, oslanjajući se na detekciju kolizije i primjenu vektorskih funkcija u XNA okruženju. Klasa Zvjezdano polje je omogućavala slobodno pomicanje čestica po ekranu, dok asteroidi mogu sudarati međusobno i s igračem te neprijateljima, što uzrokuje njihovo uništenje, a realizirano je također laički, premještanjem lokacije pojedinog asteroida van ekrana, što je dovoljno za efekt nestajanja samog asteroida. Update() metoda, uz ažuriranje lokacije asteroida na ekranu, koristi metode za nasumično postavljanje lokacije i brzine asteroida koji su izašli iz ekrana, similirajući prolaz novih asteroida. Ova klasa koristi animaciju same slike asteroida, prikazujući niz okvira različito nacrtanih asteroida u petlji te tako simulirajući prostornu rotaciju. Prikaz se ostvaruje 2D teksturom, te čestice nemaju određeni životni vijek, kao ni u prethodnoj klasi, već je njihovo stvaranje i brisanje određeno njihovom lokacijom. Klasa Projektili ( funkcionira na istom principu kao prethodni čestični sustav, uz par izuzetaka: projektili se stvaraju na centru Spriteova koji su ih ispalili, kreću se istom brzinom u smjeru rotacije svog izvora, kolizijom sa Asteroidom, igračem ili neprijateljem nestaju, (igračevi i neprijateljski projektili reagiraju samo na onog drugog i asteroid), za razliku od asteroida, projektili se ne odbijaju i ne animiraju listom slika. Eksplozije ( ) je zadnji i najzahtjevniji čestični sustav. Umjesto liste sprite klasa, koristi klasu koja proširuje klasu varijablama za praćenje životnog vijeka čestice, postotka trajanja, akceleraciju i maksimalnu brzinu, početnu boju, završnu, te listu prijelaznih boja i varijable koje omogućuju interpolaciju između svih zadanih boja za česticu za vrijeme njenog trajanja. klasa u () metodi ima klasični algoritam za odbrojavanje koji ažurira vrijednost dosadašnjeg trajanja čestice, te s obzirom na postavljenu vremensku duljinu trajanja obojenošću istom bojom ažurira i veličinu koja ide po svim bojama i interpolira vrijednost s kojom se čestica na kraju crta. Najbitnija varijabla čestice je koja nam na pitanje je li čestica još uvijek aktivna odgovara sa Da ili Ne. Ako nije, ne moramo ju više crtati u () metodi, niti ažurirati boje ili položaj u (), tada se čestica tretira kao da više ne postoji i uklanja se iz liste svih čestica u klasi. Efekt ovog čestičnog sustava koristi se u par slučaja: pri sudaru asteroida sa neprijateljem ili igračem, te za njihov međusobni sudar. Prvi navedeni slučaj stvara jednu, a drugi dvije eksplozije. Eksplozija je definirana kao događaj na određenoj lokaciji s kauzalnom brzinom sudarenih objekata na temelju čega se česticama dodjeljuje početna pozicija te moment inercije. Klasa ima metodu () koja se koristi za instanciranje čestica za prikaz pojedine eksplozije. U sebi sadrži isti kôd za inicijalizaciju čestica kao piksela, te čestica kao parcijalno transparentnih tekstura za dojam raspada masivnijeg objekta. Svaka čestica se tretira kao instanca, tj. klase: vrijednosti se ažuriraju i crta se dok postoji, ako postane neaktivna, briše se iz liste. Budući da se za novonastale eksplozije čestice samo dodaju na kraj liste, ovo omogućava tek memorijski ograničen (vrlo velik) broj istovremenih simulacija eksplozija na ekranu. Prolaskom kroz sastav, primjenu i svrhu svih čestičnih sustava u ovom programskom projektu vidjeli smo različite načine implementacije i prikaza čestica, kompliciranost

održavanja čestičnog sustava i neke jednostavne trikove koji izvrsno rade u 2D grafici gdje je osnovno svojstvo crtanih tekstura biti ili ne biti na ekranu. Prošli smo kroz primjene detekcije kolizije, interpolacije, transformacija i manipulacija tekstura za postizanje masovnog efekta istom teksturom replicirajući je s nasumičnim varijablama, kako bi uvijek bila novog i neviđenog ponašanja, u granicama implementiranih pravila.

7. Zaključak Kroz protekla poglavlja može se steći blagi dojam složenosti izrade obične, laičke 2D računalne igre. Prikazani su vjerni modeli Sprite strukture, algoritama ažuriranja animacije, implementacije napredne kolizije i reakcije, pozadinskih i aktivnih čestičnih sustava. Opisani koncepti se koriste u složenim 2D igrama, neki i u 3D igrama, ali s puno kompliciranijim algoritmima, klasama, strukturama i desecima tisuća linija koda. Za rad u 2D grafici nije potrebno znati matematiku više od rada u koordinatnom sustavu i trigonometrije, što je velika prednost u odnosu na 3D grafiku. Znanje fizike ovisi o željenoj razini realističnosti igre. Programiranje nije preduvjet, jer postoje mnoge knjige, barem za XNA tehnologiju, koje od početka objašnjavaju rad u XNA i C# programski jezik. Nakon usvajanja osnovnog znanja poput primjene kolizije, animacije i čestičnih sustava, moguće je proizvesti mnogo različitih 2D igara, ali za potražnju na tržištu i poboljšanja izvedbe do savršenstva, znanja se moraju konstantno proširivati, a uz znanja dolaze ispirativne ideje. Uz iščekivanje budućeg razvoja računalne grafike do potpunog realiziranja prirode i ljudske mašte, završavam zaključak seminara s porukom da je grafika divno sredstvo izražavanja i stvaranja nečega što pomaže ljudima i čini ih sretnijim.

8. Literatura [1] Microsoft XNA, Wikipedia, 8. 4. 2011. http://en.wikipedia.org/wiki/microsoft_xna [2] XNA Wiki, 7. 4. 2011. http://www.xnawiki.com/index.php?title=main_page [3] Particle system (Čestični sustavi), Wikipedia, 7. 4. 2011. http://en.wikipedia.org/wiki/particle_system [4] Sprite, Wikipedia, 6. 4. 2011. http://en.wikipedia.org/wiki/sprite_%28computer_graphics%29 [5] Reed, A. - 2008. [6] Carter, C. -, 2009. [7] Miles, R. - Microsoft XNA Game Studio 4.0: Learn Programming Now!, 2011.

9. Sažetak Seminar upoznaje čitatelja sa osnovama rada u XNA tehnologiji i primjenom 2D računalne grafike i animacije. Podjeljen je u 5 glavnih cjelina, sa sljedećim sadržajem: Prva cjelina navodi kratku povijest XNA tehnologije, osnovne principe i djelove projekta za izradu igre. Detaljno se opisuju osnovne naredbe za kreiranje jednostavnih programa, implemetira se Hello World program. Druga cjelina daje uvod u primjenu svjetski korištenog termina i klase Sprite, objašnjava osnovno logičko razmišljanje pri stvaranju igre, povezanosti objekata, te ostvarenje cikličnosti igre. Treća cjelina obuhvaća rad sa teksturama, transformacije s pogledom na matematiku i fiziku, te ih objedinjuje u primjeni prikazanih principa na izradi animacije. Četvrta cjelina analizira principe detekcije kolizije objekata, pristup matematici, primjenu i moguća poboljšanja algoritama. Peta cjelina prolazi kroz teoriju, primjenu i implementaciju jednostavnih i naprednih čestičnih sustava. Analiziraju se svojstva i parametri, kao i interakciju čestica.