>> SDL Tutorial 3: Basic Drawing

Nalazimo se u nastavku moje SDL avanture koja za sada ide dobro. U

prethodna dva dijela smo pisali uopte o SDL-u to je dostupno unutar mog
vodia SDL programiranja na Linux-u koji je jo uvijek u svojoj azi nastanka!
tako da "e # ovaj lanak postati dijelom mog malog rada o SDL programiranju.
$io moj rad trebao bi biti okrunjen gotovom igri%om to ete na samom kraju
nae avanture zaista vidjeti ovde. &ako da slobodno mogu da ka'em da ovo to
radimo jeste kreiranje igri%e iz temelja (sktrat%ha) do samog kraja kada "emo
se pozabiviti oko dovravanja igri%e! dodavanja menija! uitavanja naih
omiljenih ontova! audio eekata! te na samom kraju testiranja kao # objave
nae gotove igri%e. Ne mogu vam kazati ta to pravimo! koju igri%u uopte
piemo! ali "u da vam ka'em da se radi o *D skrolleru. No! vratimo se natrag #
pogledajmo ta smo to imali u prethodnom serijalu nae SDL avanture.

Sl1: Izgled glavnog prozora 6404!0 pi"sela#
+ore vidimo samo prozor sa %rnom pozadinom tako da je to sve to smo dosada
uradili. ,ako budemo ili dalje kroz nau SDL avanturu susretat "emo se sa
daleko naprednijim te naizgled izuzetno komplikovanim unk%ijama koje opet
zahtjevaju osnove ne samo programiranja nego # samog programskog jezika
$--. U nastavku pogledajmo kako izgleda na izvorni kod koji stoji iza s%ene
naeg prozora kojeg vidimo gore.
#include <SDL/SDL.h>
int main(int argc, char** argv)
{
SDL_Init(SDL_INI_!"!#$%IN&)'
SDL_Sur(ace* )creen'
)creen * SDL_Set"ide+,+de(-./, .0/, 12, SDL_S3S4#567!)'
//creating main l++8
9++l running * true'
//creating 5:S regulat+r
c+n)t int 5:S * 1/'

//creating (e; )et<) +( un)igned integer varia9le)
4int12 )tart' //12 9it<) l+ng integer

;hile(running) //main game l++8 )tart) here
{
)tart * SDL_&etic=)()'
SDL_!vent event'
;hile(SDL_:+ll!vent(>event))
{
//);itch ca)e meth+d
);itch(event.t?8e)
{
ca)e SDL_@4IA
running * (al)e'
9rea=' //main game l++8 end) here
B
B
//l+ginc >> render
SDL_5li8()creen)'
//5:S regulati+n )8ace tr+ugh I( )tatement
i((C////5:S>SDL_&etic=)()D)tart)
SDL_Dela?(C////5:SD(SDL_&etic=)()D)tart))'
B
//cl+)e the SDL
SDL_@uit()'

return /'
B
Listing1: $ain%indow wit& $ain'a$eLoop
.revedeno sam u opis stavio /glavni.rozor sa glavnom+ame.etljom0.
Nema potrebe da sada idem ponovo kroz %io kod jer ako zaista itate ovo ili
programirate na osnovu ovog mog lanka onda se podrazumjeva da vam je
poznat pojam glavne petlje! da su vam poznati i! then! else! %ase! s1it%h %ase!
ili 1hile izrazi bez kojih jednostavno ne mo'ete zamisliti nijednu igri%u a
2ogami ni bilo kakav program! pa taman da on sabirao! oduzimao! djelio dva
broja. Dakle! navedene iskaze morate poznavati. U nastavku naeg serijala
upoznat emo se sa osnovnim %rtanjem unutar SDL-a! osnovnim bojama # tako
dalje. Napominjem ponovo! serijal SDL programiranja prikazan u ovom lanku
kao # svi izvorni kodovi su uglavnom kompatibilni za Ubuntu Linux te nikako
nisu prikazani za 3indo1s. Stoga ako ipak programirate na 3indo1s-u onda
vam savjetujem da posjetite sljedei link na ovoj adresi4 5o1 to set up SDL on
3indo1s under 6isual $-- *787! na linku koji vidite se zapravo nalazi video
tutorijal koji vam pokazuje kako da postavite SDL na 3indo1s unutar 6isual
$-- *787 razvojnog okru'enja. 9a preeriam Linux Ubuntu iz razloga jer
mogu jako lahko da prevedem ovaj izvorni kod samo preko terminala. .a
posjetimo se kojom komandom u terminalu prevodimo to jest kompajliramo na
izvorni kod. S obzirom da je na mali SDL program koji kreira glavni prozor
napisan u $---u! za kompajliranje istog koristimo terminal # naredbu koja
izgleda ovako4
gEE D+ te)t main.c88 DlSDL
Navedena komanda izvrava kompajliranje izvornog koda pod listingoj8. 9a
ovaj izvorni kod ne"u ponovo prevoditi jer za to nema potrebe! s obzirom da
rezultat koji na kraju dobijemo jeste glavni prozor koji se nalazi na sli%i 8. U
nastavku naeg serijala proirit emo na izvorni kod sa nizom novih linija
koda koje is%rtavaju osnovne graike oblike! kao to su trokut! kvadrat! ili niz
linija. ,ako budemo ili dalje kroz nae serijale SDL avanture! tako e se
poveavati # linije naeg izvornog koda. &renutno smo unutar treeg serijala
SDL avanture tako da u ovom treem djelu emo na%rtati mali kvadrat unutar
naeg prozora. .rvo treba da deklariramo : varijable Uint tipa. ;vo su
zapravo : integer tipa sa nedodjeljenim vrijednostima! dakle razlikuju se od
klasinog integer tipa to tada programer deklarira varijablu integer tipa sa
dodjeljenom vrijedno"u4 int F * C/< = Unsigned integer (integer sa
nedodjeljenom vrijedno"u)! njega deklariemo na ovako4 4int12 )tart<
Dakle ovo je )tart varijabla tipa integer duga >* bita. Da bismo na%rtali na
maleni kvadrat sa visinom od *7 piksela te istom du'inom *7 piksela! potrebno
je prvo pozvati SDL unk%iju koja %rta kvadrat a to je SDL_#ect rect. ;vo
rect je naziv varijable kojoj se dodjeljuju x! ? pozi%ija prikaza kvadrata kao #
visina te du'ina samog kvadrata u pikselima.
.oto se ova unk%ija pozove! onda se odre@uje x!? pozi%ija prikaza kvadrata na
zaslonu! odnosno unutar naeg prozora a to bismo obavili ovako.
rect.F * C/< AA87 piksela u gornji lijevi ugao
rect.? * C/<
,ao to vidimo! pozi%ije x! ? prikaza naeg kvadrata se storaju unutar varijable
po imenu re%t! unutar iste se unose visina kao # irina kvadrata u pikselima.
6isina # irina kvadrata iznose po *7 piksela. U nastavku deklarisanje ovih
karatkeristika naeg kvadrata izgleda ovako4
rect.; * 2/< AAirina od *7 piksela
rect.h * 2/< AAvisina od *7 piksela
,ada smo odredili x!? pozi%ije prikaza! odredili visinu # irinu! vrijeme je da
naem malom kvadratu dodamo boju. 2oja naeg kvadrata e da bude %rna. &o
radimo pozivajui unk%iju po imenu SDL_,a8#&G.Da bi ova unk%ija radila
kako treba! potrebno je da deklariemo integer sa nedodjeljenom vrijedno"u!
to jeste 4int12. No! za potrebe nae SDL unk%ije koja %rta # boji na maleni
kvadrat potrebno je da deklariemo integer c+l+r te integer c+l+r2! koji su
upravo Uint tipovi. Deklara%ije navedenih unk%ija izgledaju ovako.
4int12 c+l+r * SDL_,a8#&G()creenD>(+rmat, /F((, /F((, /F(()'
4int12 c+l+r2 * SDL_,a8#&G()creenD>(+rmat, /,/,/)'
Bont sam smanjio kako bi sve izgledalo uredno a ne da se negdje preba%a u
novi red. .rethodno smo kazali ta je to Uint! kako se on deklarie te ta
predstavlja. Upravo u ove gornje dvije linije koda se nalaze dvije varijable
%olor te %olo* koje zapravu jesu Uint tipa! to jeste dva nedeklarisana integera!
eto ako to mo'emo bolje kazati. &reba da znate da je integer zapravo brojni tip
podataka u $---u. = nekada se u kodu ovaj tip javlja u takvom obliku kao to
se javio # ovde kao Uint>*! odnosno integer sa nedodjeljenom vrijedno"u ili
vrlo jednostavno nedeklarisan integer. Unutar ove dvije linije koda se nalazi
varijabla s%reen. S ovom varijablom smo se prethodno susretali u naem
prijanjem SDL serijalu u kreiranju glavnog prozora! te smo za nju kazali kako
ona sadr'i visinu! irinu naeg prozora kao # sam SDL lag. U nastavku evo
linije koda koja to demonstrira.
SDL_Sur(ace* )creen'
)creen * SDL_Set"ide+,+de(-./, .0/, 12, SDL_S3S4#567!)'
6arijabla s%reen kao to vidite sadr'i bitne odlike naeg prozora! visinu od C:7
piksela! irinu od :D7 piksela! # lag. Eta je (lag.
Dakle unk%ijom (lag vi odre@ujete da li "e se va prozor prikazivati na
%jelom zaslonu ili "e biti proizvoljne veliine. ;vde ne"u spominjati detalje oko
SDL_5lag unk%ije jer naa igri%a ne tra'i (ull)creen m+de! pa za njom
nema potrebe. No vratimo se natrag u nae dvije linije koda. Nakon to se
pozove unk%ija SDL_,a8#&G, odmah se vri dodjela boje naeg kvadrata
te boje naeg zaslona. Fh evo vam odgovor to "e nam s%reen unk%ija unutar
nae dvije linije koda. ,ada se vratite na sliku 8 na vrhu! ono to vidite je samo
glavni prozor sa %rnom pozadinom. #majte na umu da %rtamo maleni kvadrat
koji je %rne boje! te ukoliko ga se prika'e na %rnom zaslonu on je automatski
nevidljiv jer njegove ivi%e nisu obojene. Da bi se izbjegla ta neugodnost!
varijabli s%reen su dodjeljenje > unk%ije koje irina! visina! te sama boja
zaslona! a ona je bijela. Gatim se kreira boja samog kvadrata! to je prva linija
koda! a na kvadrat "e da ima %rnu boju. 6rijednosti koje vidite u ovoj liniji
koda za kvadrat a mislim tano na ove unk%ije (/F((, /F((, /F((), ovo
su zapravo integer vrijednosti za visinu! irinu! te boju samog kvadrata.
4int12 c+l+r * SDL_,a8#&G()creenD>(+rmat, /F((, /F((, /F(()'
4int12 c+l+r2 * SDL_,a8#&G()creenD>(+rmat, /,/,/)'
.osljednje to treba da uradimo jeste da pozovemo unk%iju koja puni na mali
kvadrat bojom! te postavlja boju naeg prozora na bijelu. &o radimo
pozivanjem unk%ije SDL_5ill#ect! poto smo prethodno deklarisali boju
naeg kvadrata kao # boju naeg zaslona tako to mo koristili dva
nedeklarisana integera! sada treba da pozovemo ta dva integera u unk%iji
SDL_5ill#ect! te pustimo ju da ona odradi svoje. Navedena unk%ija koja
sadr'i nae dvije varijable c+l+r te c+l+r2 je sljedea.
SDL_5ill#ect()creen, >)creenD>cli8_rect, c+l+r)'
SDL_5ill#ect()creen, >rect, c+l+r2)'
;ve dvije linije koda ne treba neto aman objanjavati jer smo prethodno
objasnili # unk%iju s%reen! te kazali da su varijable %olor te %olor* zapravo
dvije varijable integer tipa koji nije deklariran! a ija du'ina iznosi >* bita.
;vo je izuzetno bitno za napomenut te treba da se zna da 4int to jest
nedeklarisan integer ima du'inu >* bita. ;ve linije koda "e da ispune na
maleni kvadrat %rnom bojom a postaviti boju naeg zaslona u bijelu. ,onano
mo'emo vidjeti %io izvorni kod koji izgleda ovako.
#include <SDL/SDL.h>
int main(int argc, char** argv)
{
SDL_Init(SDL_INI_!"!#$%IN&)'
SDL_Sur(ace* )creen'
)creen * SDL_Set"ide+,+de(-./, .0/, 12, SDL_S3S4#567!)'
//creating main l++8
9++l running * true'
//creating 5:S regulat+r
c+n)t int 5:S * 1/'

//creating (e; )et<) +( un)igned integer varia9le)
4int12 )tart' //12 9it<) l+ng integer

//dra;ing 8art 9egin) here
SDL_#ect rect'
rect.F * C/'
rect.? * C/'
rect.; * 2/'
rect.h * 2/'
//declaring 4n)igned integer varia9le) c+l+r > c+l+r2
4int12 c+l+r * SDL_,a8#&G()creenD>(+rmat, /F((, /F((, /F(()'
4int12 c+l+r2 * SDL_,a8#&G()creenD>(+rmat, /, /, /)'

;hile(running) //main game l++8 )tart) here
{
)tart * SDL_&etic=)()'
SDL_!vent event'
;hile(SDL_:+ll!vent(>event))
{
//);itch ca)e meth+d
);itch(event.t?8e)
{
ca)e SDL_@4IA
running * (al)e'
9rea=' //main game l++8 end) here
B
B
//l+ginc >> render
SDL_5ill#ect()creen, >)creenD>cli8_rect, c+l+r)'
SDL_5ill#!ct()creen, >rect, c+l+r2)'
SDL_5li8()creen)'
//5:S regulati+n )8ace tr+ugh I( )tatement
i((C////5:S>SDL_&etic=)()D)tart)
SDL_Dela?(C////5:SD(SDL_&etic=)()D)tart))'
B
//cl+)e the SDL
SDL_@uit()'

return /'
B
Listing(: )rtan*e "vadrata+ SDL Basic Drawing
Fvo nas! priveli smo ovo tree izdanje SDL avanture do kraja. =li ekajte nismo
jo gotovi. ;stalo nam je da prevedemo(=+m8aHliram+) na izvorni kod
kako bismo vidjeli na rezultat. Ho'da sam pretjerao to sam napisao ovako
puno teksta samo kako biste vidjeli jedan maleni kvadrat *7x*7 piksela koji ne
radi nita zanimljivo na zaslonu do stoji ukopan! isksiran. No! otom potom.
Unesimo nau komandu za kompajliranje koju smo ve" ranije susreli pa da
vidimo to nam je rezulat! te imamo li greaka (9ug+va) u naem izvornom
kodu. ,omanda za kompajliranje je sljedea.
gEE D+ te)t main.c88 DlSDL
,omandu sam objasnio ranije te nema potrebe da vie unosim ve iovako
suvian tekst. #zvravanjem ove komande preko terminala trebali bi da
dobijemo sljedei ishod.
Fh evo ga. Na sli%i koju sam sada zalijepio ponajbolje vidimo ne samo
komandu za kompajliranje! nego imamo # izvorni kod naeg programa! ali isto
tako vidimo da je na izvorni kod preveden uspjeno! to jeste da nemamo
greaka (9ag+va). .reostaje nam jo jedino da prika'em na vizuelni program
koji bi nekako izgledao ovako.
Sl(: ,izuelni izgled progra$a SDL Tutorial3+BasicDrawing
;voliko teksta! praktiki ni za ta. No nije to ba tako. ;pisao sam ovaj serijal
koji is%rtava samao maleni %rni kvadrat na zaslonu glavnog prozora. No ako
ba%ite malo pogled na sliku 8 ovoga teksta # ako pogledate sliku * koju sam
upravo zalijepio! primijetit "e te kako ovaj prozor ima # svoje ime. &o ime koje
sam postavio te koje je ovaj prozor dobio duguje SDL unk%iji koja postavlja
naziv vaeg prozora a koja ide ovako.
SDL_3,_Set7a8(I+vde naJiv vaKeg 8r+J+raL, N4LL)'
# evo nas! stigli smo na kraju naeg tre"eg SDL serijala gdje smo kreirali
najjednostavniji mogui SDL program koji %rta vrlo primitivne graike oblike!
u naem sluaju M"6D#6. &rudio sam se to sam bolje umio da vam pojasnim
neke unk%ije koje SDL koristi kao # neke %rti%e programskog jezika $--. Hoja
prava namjera je bila da vidite da je Linux Ubuntu izvrstan operativni sistem te
da se mogu programirati daleko kompleksnije stvari koristei samo terminal
kao kompajler a mo'ete vala kao # editor! re%imo Nan+. #skreno vjerujem da "e
te na kraju nae SDL avanture koju piem za sebe pa # za vas biti ohrabreni!
inspirisani! motivisani da probate neto svoje kada vidite inalni rezultat naeg
rada # truda koji "e da bude okrunjen %jelom *D igri%om. &oliko od mene za
sada! neto vie vas oekuje u sljede"em nastavku.