Programiranje 2D igara u aplikaciji Construct 2

zoran_hercigonja

Zoran Hercigonja

Sažetak

Programiranje uvijek predstavlja izazov samo po sebi, no još je veći izazov udružiti znanja i vještine iz različitih područja u jedan gotov proizvod kao što je video igra. U radu učenici su isprogramirali kompleksan scenarij igre preko alata za grafičko programiranje. Spajanjem različitih znanja u samom procesu formalnog učenja kao i znanja stečenih samoreguliranim učenjem te informalnim učenjem, zajednički su izradili scenarij igre i pretvorili taj scenarij u jezik kodova to jest naredbi. Uspješno su prilagodili i preveli semantiku govornog jezika scenarija u scenarij grafičke igre. Rad izvještava o rezultatima, preprekama, izazovima s kojima su se učenici suočili te kreativnim rješenjima.

Ključne riječi: Construct 2, Igra, Grafičko programiranje, Vještina, Scenarij igre

Uvod

Construct 2 je vrlo jednostavna i ne zahtjevna komercijalna aplikacija za kreiranje i dizajniranje dvodimenzionalnih igara. Ne zahtijeva klasično kodiranje, nego kodiranj putem odabira grafičkih ikona [2] Ikone se razvrstavaju tehnikom pritisni–povuci (drag and drop). Dostupan je kao besplatna download verzija sa stranice u probnom roku korištenja od trideset dana (30). Dostupan je u više komercijalnih inačica. Ukoliko se koristi za osobnu upotrebu, cijena iznosi clip_image001129.99$ dolara. Za poslovnu upotrebu, cijena iznosi 429.99$ dolara. Naravno u cijenu su ubrojene i nadogradnje te mogućnost za distribuciju igara[2]. Kompatibilan je za rad u više operacijskih sustava: Windows, Mac OS.

Slika 1. Construct 2 glavno sučelje

Sučelje Construct 2 aplikacije, je vrlo intuitivno i jednostavno za korištenje. Sastoji se od nekoliko dijelova. S lijeve strane, nalazi se Properties sa svim podacim o pojedinom objektu ili pozadini.Podaci su vezani uz veličinu, posebne efekte, animacije i slično. Odmah do njega, clip_image002nalazi se tab za dizajniranje objekata i pozadine. Objekti se mogu vlastoručno nacrtati i dizajnirati, ali se mogu preuzeti u obliku slike. Isto vrijedi za pozadinu. Do taba za kreiranje osnovnih objekta i pozadine, nalazi se takozvani Eveent Sheet koji služi kao editor za programiranje igre. S krajnje desne strane, nalaze se slojevi za rad. Na svaki sloj, moguće je uključiti pojedinačne objekte ili stvoriti novu pozadinu.

clip_image004Slika 2. Dodavanje osnovnih animacija

Postupak programiranja započinje odabirom ključnih objekata, dizajnom isith te dodjeljivanjem pojedinačnih akcija. Isto vrijedi i za pozadinu.Svaki element igre, moguće je smjestiti na vlastiti sloj čime se olakšava rad.

Slika 3. Određivanje odvijanja akcija

Nakon dizajniranja i animiranja objekata, potrebno je u Eveent Sheet programski odrediti redoslijed odvijanja akcija. Kada je to određeno, pozivanjem naredbe Run Layouti koja se nalazi na samom vrhu sučelja aplikacije, pokreće se kreirana igra.

Radionica-grafičko programiranje igara

U radionici programiranja igara je sudjelovao kombinirani razredni odjel s učenicima 1, 2, 3, 4 razreda Druge gimnazije Varaždin, ukupno 10 učenika. Radionica je provedena u ukupno 14 sati izborne nastave informatike. Od tih 14 sati šest sati je otpalo na učenje programiranja u programskom sučelju Construct 2 zatim osmišljavanje scenarija i naposlijetku odabira osnovnih grafičkih elemenata koji su uključeni u samu igru.

Temeljni grafički oblici igre

Valja naglasiti da su osnovni objekti korišteni u igri dodatno oblikovani pomoću alata za oblikovanje slika Gimp 2.6.10. Izvorno su preuzeti s internetskih izvora, a dodatno su oblikovani za potrebe programiranja računalne igre. Dakle objekti koji su se koristili za programiranje igara su bili sljedeći, a koje su odabrali učenici su:

1. Pozadina sa uzorkom svemira:

clip_image002[4]

Osnovne postavke:

Slika pozadine je preuzeta s interneta, ali je učeničkom intervencijom i inicijativom, pretvorena u crnu pozadinu s crvenim točkicama.

U originalu točkice su bile bijele boje. Pozadina je statičkog karaktera i prekrivala je velik dio radnog prostora alata Construct 2.

Rubovi te slike pozadine su programski u svojstvima ograničeni kao rubovi unutar kojih se sadržavaju svi objekti igre. To znači se ni jedna objekt nije mogao kretati izvan slike pozadine.

2. Crveni svemirski brod kojim upravlja igrač:

clip_image002[5]

Osnovne postavke:

Brod je imao dvije funkcionalosti. Mogao se pomicati samo u dva smjera po x-osi koordinatnog sustava: dakle –x i +x os. Osim toga brod je trebao moći ispaliti dva hica prilikom svakog pritiska lijeve tipke miša.

 

3. Zelena laserska zraka, kao simbol ispaljenog projektila

 Osnovne postavke: 

clip_image002[6]U izvorniku kao projektil je bila uzeta slika metka s interneta. No učenici su zajedničkom odlukom, odlučili da to bude laserska zraka izrađena u Gimp-u.

Lasersku zraku je u scenariju igre trebalo udvostručiti što znači da prilikom lijevog klika miša, brod ispaljuje dvije paralelne laserske zrake. Zrake kao objekt ugrađen na objekt svemirskog broda, trebale su pratiti brod po osi x u oba smjera. Isto tako kada laserska zraka bude ispaljena i pogodi nepriajteljski objekt, treba nestati.

U slučaju da promaši neprijateljski objekt, zraka u sudaru s rubom pozadinske slike nestaje. Dakle trebalo je isprogramirati nekoliko efekata zrake.

4. Neprijateljski objekti

clip_image012Osnovne postavke:

Slike neprijateljskih objekata su preuzete s interneta. Učenici su sami donijeli odluku o dizajnu i broju neprijateljskih objekata.

clip_image016Funkcionalnosti neprijateljskih objekata su bile sljedeće: nasumično pojavljivanje objekata unutar rubova pozadinske slike. Objekti su se mogli kretati samo po y- osi u negativnom smjeru. Ukoliko je neki od neprijateljskog objekta bio pogođen zelenom laserskom zrakom, trebao je nestati. Dakle efekt nestajanja se trebao stvoriti u trenutku doticaja zrake s tim objektom. U trenutku kada bi objekt nestao na jednome mjstu, paralelno s tim se trebao pojaviti na drugom mjestu. Ako je nepriajteljski objekt dotaknuo rub pozadinske slike, nestao je i paralelno clip_image002[7]se stvorio na nekom drugom mjestu unutar rubova pozadinske slike.

Svaki puta kada bi laserska zraka pogodila neprijateljski objekt, osim što bi nestao, pojavila bi se simulacija eksplozije koja je postignuta podešenim svojstvom unutar Construct 2 aplikacije.

S druge strane u doticaju s igračevim svemirskim brodom, trebao je izazvati efekt nestajanja igračevog broda.

5. Oznaka kraja igre

clip_image001Osnovne postavke:

Planirano je da oznaka kraja bude samo u obliku tekstualnog prikaza „Game Over“. No učenici potaknuti retro igrama, odlučili su se za dizajn oznake kraja igre u retro stilu. Oznaka je napravljena u Gimpu.

Oznaka je trebala biti povezana s objektom broda igrača i neprijateljskog objekta. Sudarom broda igrača i neprijateljskog objekta, iskače oznaka za kraj igre i igra se zamrzne.

Scenarij igre

Dogovoreni scenarij igre, sadržavao je sljedeće postavke. Igra je trebala nalikovati igri „Chicken Invasion“ samo s drugim elemenima. Dakle moraju postojati neprijateljski objekti u obliku svemirskih brodova koji se nasumično pojavljuju unutar slike pozadine. Njihovo kretanje je ograničeno od gornjeg ruba prema dolje točnije od pozitivne y-osi prema negativnoj. Brzina gibanja je postavljena na srednju brzinu. Zatim postoji glavni objekt kojim upravlja igrač. No igračev svemirski brod kreće se samo lijevo-desno po pozitivnoj i negativnoj x-osi ne prelazeći rubobe slike pozadine. Brod mora moći ispaljivati projektile odnosno laserske zrake u neprijateljske objekte. Laserske zrake su duplicirane i istovremeno se lansiraju prilikom pritiska lijeve tipke miša. Sudarom laserske zrake i nepriajteljskog objekta, postiže se efekt nestajanja nepriajteljskog objekta i nasumične pojave istog na nekom drugom mjestu. Zraka u sudaru s brodom treba nestati. Kod sudara zrake i broda, treba se pojaviti efekt eksplozije koja s vremenom iščezava. U slučaju sudara broda igraa i neprijateljskog broda, brod igrača se pozicionira na mjestu gdje je zadešen sudarom i iskače poruka o kraju igre.

Postupak rada i poteškoće u razvijanju igre

Iako sama struktura igre ne izgelda osobito kompleksna. Bez obzira na izgled, zadavala je mnogo problema, posebice kada se radilo o uskalđivanju dva ili više objekata igre.

clip_image020 Slika 4. Prikaz programirane sturkture igre

Na samom početku, trebalo je u programski editor unijeti sve potrebne elemente i sliku pozadine razvući po cijelom ekranu. To je bio najlakši dio koji je bez problema odrađen.Drugi dio se ticao broda igrača i podrazumijevao je odabir upravljača u obliku miša i određivanje osi po kojoj će se brod gibati. Brzinu nije trebalo odrediti, jer je određena manevrom miša.

clip_image021 
Slika 5. Pozicioniranje temeljnih objekata

Početne vrijednosti je trebalo podesiti i nad laserskom zrakomi neprijateljskim brodom. Oba su usmjerena u smjeru y- osi, samo što je svki od objekata imao određeno kretanje u jednom dijelu osi y. Nakon toga, bilo je potrebno testirati brzinu gibanja objekata po y- osi. Tu se utrošilo malo više vremena zbog testiranaj i određivanja željene brzine gibanja.

clip_image022 
Slika 6. Dodavanje funkcionalnosti objektima

Drug korak je bio posebno problematičan, a ticao se usklađivanja kretanja dviju laserskih zraka. Naime problem je bio u tome što se zrake nisu istovremeno ispaljivale nakon lijevog klika miša. Događalo se to da jejedna zraka bila ispaljivana prerano, a druga prekasno. Idući problem je bio prekalpanje zraka. Učenici su dugo određivali razmak između zraka dok nisu došli do optimalne udaljenosti po x – osi od 10 piksela. Događalo se to da se pri svakom pomaku broda igrača, jedna od zraka zalijepila za drugu. Problem je bio u tome što u modu za obradu slika zrake nije bila pravilno postavljena na brod. Bilo je potrebno sidro slike zrake postaviti na vrh broda igrača.No i taj je problem efikasno riješen.

clip_image023 
Slika 7. Određivanje nasumičnog pojavljivanja neprijateljskih objekata

Ovaj dio vezan az problematiku određivanaj pojavljivanja pojedinog neprijateljskog objekta je riješen vrlo jednostavno. U Construct 2 postoji naredba random kojom se određuje nasumično pojavljivanje objekata. Uz tu naredbu, potrebno je bilo odrediti i učestalost pojavljivanja. Učestalost je postavljena na 3 iz razloga što su vrijednosti veće od 3 predstavljale poteškoću za igrača. Svaka vrijednost veća od 3 značclip_image024ila je i veći broj nepriajteljskih brodova. To je dovodilo do toga da nije bilo moguće izbjegavati te brodove i igrač je neprestano gubio igru.

Slika 8. Uređivanje odnosa objekata igre

Posljednji, a najtži dio je podrazumijevao usklađivanje radnji četiri različita tipa objekata. Najprije je trebalo odrediti akciju koja će se zbiti u slučaju sudara laserske zrake i nepriajteljskog broda. Učenicima je ovaj koncept bio dosta otežavajući pa je bilo potrebno intervenirati ponavljanjem if-else uvjetovanja, ovdje pretvorenog u naredbu collision. clip_image025Dakle kada su se dva objekta sudarila, oba su morala nestati, u suprotnom nepriajteljski brod se kretao dalje po osi y kao i laserska zraka samo u različitim smjerovima. Uz to, bilo je potrebno uključiti još jedno if-else uvjetovanje.

Slika 9. Gotova igra u Construct 2

Dakle u igrici je stvoreno ugniježđeno grananje. Grananje je glasilo: kada se objekti sudare, moraju nestati i ako se sudare, pojavljuje se efekt eksplozije. Zatim eksplozija nestaje kada igrač ponovno pritisne lijevu tipku miša. Kod ovog grananja, bilo je ptorebno ponovno raditi dijagrame tijeka na ploči. Naravno učenici 4 razreda su poučavali učenike ostalih razreda pomoću dijagrama tijeka. Njima je zbog vieš iskustva u programiranja taj koncept ugniježđenog if-else uvjetovanja bio jasan. Kada je razjašnjen taj koncept, više nije bilo problema s poslejdnjim dijelom kreiranja igre. Isti koncept samo s drugim objektima,bio je primijenjen nad brodom igrača, neprijateljskim brod i poruci o završetku igre. Dakle u ugniježđeni if su ušli sljedeći uvjeti: kada se objekti sudare, zaustavi igru; kada je igra zaustavljena, ispiši poruku o kraju igre.

Zaključak

Nakon utrošenih 14 sati rada na kreiranju računalne igre, učenici su dobili jasniju predodžbu o tome koliko je bilo koji koncept programiranja intelektualno zahtjevan te koliko procedura i apstrakcija zahtijeva, prije nego je vidljivo ostvaren kroz neki scenarij igre. Naravno učenici su upotrijebili mnogo znanja ne samo iz područja logike i programiranja, nego i iz područja grafičkog dizajna. Ovaj vid kreiranja igara, omogućio im je jedan način kreativnog izražavanja. Učenici su dobili uvid u svoje sposobnosti i propuste. Sada imaju jasniji fokus za daljnje usavršavanje i rad na sebi. Ova radionica je iziskivala dosta iscrpnog rada i izučavanja. Učenici su prošli cijeli postupak nastajanja programa. Uspješno su spojili sve bitne koncepte programiranja u jedan. Krenuvši od scenarija to jest pseudokoda programa, preko dijagrama tijeka pa sve do gotovih konstrukcija pomoću naredbi alata Construct 2. Radionica programiranja igara je imala pozitivna utjecaj na stvaranje pozitivnog stava prema radu te bila glavni izvor motivacije i nadahnuća za učenike koji su imali potrebu kreativno se izraziti u tom području.

Literatura

  1. Programiranje igara [pritupano 22.01.2017.]
  2. Construct 2 službena stranica [pristupano 22.01.2017.]
Oglasi

O autoru Pogled kroz prozor

Digitalni časopis za obrazovne stručnjake, pišu ga učitelji i nastavnici.
Ovaj unos je objavljen u Programiranje i označen sa , , , , , . Bookmarkirajte stalnu vezu.