1. Microsoft® Small Basic
Igraj svoju igru
Razvoj računalnih igara u SmallBasicu

2. Što je Small Basic?
Program je skup uputa, tj. naredbi, a koje računalo može razumjeti. Za pisanje računalnih naredbi koristi se programski jezik. Npr. SmallBasic.
Small Basic je programski jezik...
…koji računalno programiranje čini iznimno dostupnim, jednostavnim i zabavnim!

3. Small Basic  programski jezik za početnike
Zašto Small Basic?
Small Basic  programski jezik za početnike
U početku postojalo je samo nekoliko programskih jezika i bilo ih je lako naučiti. Ti su jezici, međutim, postajali sve složeniji, a primjer su C#, C++, Java, Delphi…
Small Basic uklanja prepreku složenosti i otvara vrata svim početnicima u svijetu programiranja!
Ta je složenost počela obeshrabrivati one koji su željeli naučiti programirati računala.

4. Okruženje programa Small Basic
Razvojno okruženje Small Basic-a?
Okruženje programa Small Basic
Small Basic pruža iznimno jednostavno, ali napredno razvojno okruženje opremljeno značajkama poput trenutačne pomoći u kontekstu.
1. Programi na jeziku Small Basic pišu se u uređivaču. 2 3
2. Različite naredbe pokreću se klikanjem na gumbe na alatnoj traci. 1
Upoznajmo se s različitim elementima okruženja u kojemu se pišu i izvode programi napisani na jeziku Small Basic.
Istodobno možete otvoriti više prozora uređivača i raditi u njima.
Prozor uređivača koji sadrži program na kojem trenutačno radite naziva se aktivni uređivač.
Dosljedniju uvlaku programskog koda možete postići tako da ga istaknete, kliknete desnom tipkom miša, a zatim kliknete Oblikuj program.
3. Tijekom pisanja koda informacije o naredbama možete pronaći u prozoru pomoći.

5. IntelliSense  za lakši rad
Jeste li primijetili da se tijekom upisivanja teksta pojavio popis stavki s objašnjenjima?
Te su stavke dijelovi popisa „IntelliSense“, a možete ih koristiti za brže pisanje programa.
Popis IntelliSense sadrži naredbe koje možete upisati. Kroz popis se možete kretati pritišćući tipke sa strelicama GORE i DOLJE na tipkovnici, a istaknutu naredbu možete umetnuti u kôd tako da pritisnete tipku ENTER.

6. Uvod u grafički prozor
Osim tekstualnog prozora koji se koristi za osnove programiranja, SmallBasic nudi i grafički prozor za rad s grafikom.
Otkriti ćemo neke zanimljive grafičke mogućnosti koje nudi Small Basic.
Rad započinjete u grafičkom prozoru koji možete prikazati pomoću objekta GraphicsWindow.

7. Svojstva grafičkog prozora
Osnovni pojmovi grafičkog prozora
Svojstva grafičkog prozora
Pomoću operacije Show objekta GraphicsWindow možete prikazati grafički prozor i u njemu crtati oblike u bojama.
rezultat
0,0
Širina: 350
Možete odrediti i svojstva grafičkog prozora, kao što su njegov naslov, visina, širina i boja pozadine.
Visina: 300
Grafički prozor možete prikazati upisivanjem naredbe GraphicsWindow.Show() u prozor uređivača.
Isto tako, grafički prozor možete sakriti pomoću naredbe GraphicsWindow.Hide() .
Izgled i dojam grafičkog prozora možete i promijeniti određivanjem niza svojstava. Naslov, primjerice, možete postaviti pomoću svojstva Title objekta TextWindow. Isto tako, možete promijeniti visinu, širinu i boju pozadine grafičkog prozora određivanjem svojstava Height, Width i BackgroundColor.
Prilikom pokretanja programa u nastavku primijetit ćete da se umjesto crnog prozora s tekstom prikazuje grafički prozor.
Kôd:
GraphicsWindow.Show()
GraphicsWindow.Title = „Grafički prozor“
GraphicsWindow.Height = 300
GraphicsWindow.Width = 350
GraphicsWindow.BackgroundColor = „Cyan“
350,300
Pogledajmo kako se koriste različita svojstva objekta GraphicsWindow u programu…

8. Svojstva grafičkog prozora
Oblike koje stvorite možete dodatno poboljšati određivanjem određenih svojstava objekta GraphicsWindow. Ta svojstva obuhvaćaju sljedeće:
PenColor–određivanjem tog svojstva možete nacrtati oblike s obrubima bilo koje odabrane boje.
PenWidth–određivanjem tog svojstva možete nacrtati oblike s obrubima bilo koje odabrane debljine.
BrushColor–određivanjem tog svojstva možete popuniti nacrtane oblike bilo kojom odabranom bojom.
Neka svojstva i operacije objekta GraphicsWindow možete koristiti isključivo za prikaz oblika, ali možete koristiti druga svojstva (kao što su MouseX i MouseY) za rad s mišem i izvođenje radnji pomoću tipkovnice u svom programu. Kasnije ćete u drugim lekcijama saznati više o tim svojstvima, kao i o događajima i interaktivnosti u programskom jeziku Small Basic.
Kôd:
GraphicsWindow.PenColor = „Purple“
GraphicsWindow.PenWidth = 3
GraphicsWindow.BrushColor = „Green“
x = GraphicsWindow.MouseX
y = GraphicsWindow.MouseY
MouseX–određivanjem tog svojstva možete pronaći vodoravni položaj miša.
MouseY–određivanjem tog svojstva možete pronaći okomiti položaj miša.

9. Operacije u grafičkom prozoru
Pomoću operacija i njihovih svojstava možete stvoriti oblike u bojama.
Na ovom su popisu prikazane neke operacije koje možete koristiti za objekt GraphicsWindow:
DrawRectangle
DrawEllipse
DrawLine
FillRectangle
GetRandomColor
SetPixel
ShowMessage
DrawResizedImage

10. Korištenje boja u grafičkom prozoru
Boje u grafičkom prozoru
Korištenje boja u grafičkom prozoru
U grafičkom prozoru pomoću cijelog niza boja možete stvarati živopisne oblike. Pogledajmo nekoliko boja koje podržava Small Basic.
Možete odabrati i boju u cijelom nizu drugih boja koje obuhvaćaju ružičastu, narančastu, žutu, ljubičastu, smeđu, bijelu i sivu.
Možete odabrati između velikog broja boja koje podržava Small Basic. Na ovom su slajdu boje kategorizirane prema osnovnoj boji. U kodu boju možete navesti po njezinom nazivu ili šifri, odnosno heksadekadskom (baza 12) broju.

11. Upoznavanje s grafičkim prozorom
Rad sa slikama u grafičkom prozoru
Upoznavanje s grafičkim prozorom
Slike možete prikazati pomoću operacija DrawImage i DrawResizedImage objekta GraphicsWindow. Pogledajmo primjer…
Za operaciju DrawImage navodi se samo naziv datoteke slike i mjesto na zaslonu na kojem želite da se slika prikaže.
Za operacije DrawImage i DrawResizedImage potrebno je navesti ne samo naziv datoteke slike koju želite prikazati, već i njezin put. Ako je datoteka spremljena na vašem računalu, možete navesti lokalni put. Ako je datoteka spremljena na web- mjestu ili mrežnom poslužitelju, možete navesti URL ili apsolutni put Slike u ovom primjeru dobivate s programom Small Basic i spremljene su na vašem računalu.
Morate navesti i mjesto na kojem će se na zaslonu prikazati slika ili slika s promijenjenom veličinom, a to napravite tako da navedete koordinate x i y gornjeg lijevog kuta slike. Samo za operaciju DrawResizedImage navodite željenu veličinu slike i to unošenjem nove širine i visine slike.
Da biste pokrenuli program i prikazali slike, kliknite Pokreni na alatnoj traci ili pritisnite F5 na tipkovnici.
Pomoću operacije SetPixel možete i nacrtati piksel u grafičkom prozoru na mjestu koje odredite tako da unesete njegove koordinate x i y.
Kôd:
GraphicsWindow.Title = „Grafički prozor“
GraphicsWindow.Width = 800
GraphicsWindow.Height = 600
slika1 = „C:\Small Basic\Sunset.jpg“
GraphicsWindow.DrawImage(slika1, 0, 0)
slika2 = „C:\Small Basic\Winter.jpg“
GraphicsWindow.DrawResizedImage(slika2, 100, 100, 200, 200)
Za operaciju DrawResizedImage navodi se naziv datoteke, mjesto na zaslonu te nova veličina slike.

12. Izgled programa kada se izvrši
Vježba 1
Postavi grafički prozor na širinu i visinu od 600 piksela (600 x 600).
Nacrtaj pravokutnik na poziciji [0,0] koji je širine 100 i visine 150.
Nacrtaj krug na poziciji [200,200] širine i visine 200.
Prije crtanja zadaj boju pozadine pravokutnika na crvenu, a kruga na plavu.
Izgled programa kada se izvrši

13. Programski kod programa
Vježba 1
Postavi grafički prozor na širinu i visinu od 600 piksela (600 x 600).
Nacrtaj pravokutnik na poziciji [0,0] koji je širine 100 i visine 150.
Nacrtaj krug na poziciji [200,200] širine i visine 200.
Prije crtanja zadaj boju pozadine pravokutnika na crvenu, a kruga na plavu.
Programski kod programa

14. Upoznavanje s oblicima
kako se stvaraju oblici pomoću objekta Shapes
kako se koriste različite operacije objekta Shapes
kako se animiraju oblici na zaslonu

15. Uvod u objekt Shapes
Dosad ste naučili kako u programu Small Basic crtati uzorke pomoću objekata GraphicsWindow i Turtle.
U ovoj se lekciji daje uvod u objekt Shapes koji nudi Small Basic! Pomoću tog objekta možete crtati, zakretati i animirati oblike u grafičkom prozoru.
Oblike možete obojiti pomoću određenih svojstava objekta GraphicsWindow.

16. Operacije na objektu Shapes
Pomoću određenih operacija objekta Shapes oblicima koje stvorite možete dati živahan izgled i dojam. Te operacije obuhvaćaju sljedeće:
AddImage
AddRectangle
HideShape
ShowShape
SetOpacity
GetOpacity
Move
Animate
Zoom

17. Operacije na objektu Shapes
Pogledajmo primjer u kojem su prikazane te operacije…
r = Shapes.AddRectangle(400,300)
Shapes.Move(r, 100, 50)
For i=1 To 10
Shapes.ShowShape(r)
Program.Delay(1000)
Shapes.HideShape(r)
Shapes.SetOpacity(r, i * 10)
Program.Delay(800)
EndFor
rezultat
U ovom smo primjeru koristili operacije ShowShape, HideShape, i SetOpacity objekta Shapes da bi se izvršio cijeli niz akcija na pravokutniku.
Kao što se vidi iz ovog primjera, oblik možete umetnuti u grafički prozor pomoću objekta Shapes. Pravokutnik možete umetnuti pomoću operacije AddRectangle. Zatim možete izvršiti akcije na pravokutniku pomoću različitih operacija objekta Shapes. Na primjer, pravokutnik možete prikazati i sakriti pomoću operacija ShowShape i HideShape, a razinu neprozirnosti pravokutnika možete promijeniti pomoću operacije SetOpacity.
Da biste provjerili rezultat programa, kliknite Pokreni na alatnoj traci ili pritisnite F5 na tipkovnici. Oblik pravokutnika trebao bi se pojaviti u grafičkom prozoru, a zatim nestati nakon jedne sekunde. Kad se pravokutnik ponovno prikaže, bit će prozirniji. Taj se proces nastavlja dok pravokutnik ne postane potpuno proziran.
Kôd:
pravokutnik = Shapes.AddRectangle(400, 300)
Shapes.Move(pravokutnik, 100, 50)
For i = 1 To 10
Shapes.ShowShape(pravokutnik)
Program.Delay(1000)
Shapes.HideShape(pravokutnik)
Shapes.SetOpacity(pravokutnik, i * 10)
Program.Delay(800)
EndFor

18. Operacije na objektu Shapes
AddRectangle –pomoću te operacije
dodaje se oblik pravokutnika koji će se pojaviti u grafičkom prozoru.
Move–pomoću te operacije možete premjestiti oblik na drugo mjesto u grafičkom prozoru. Morate odrediti naziv oblika te koordinate x i y novog mjesta.
Animate–pomoću ove operacije animira se oblik dok se pomiče na drugu poziciju. Morate odrediti naziv oblika, koordinate x i y nove pozicije te trajanje animacije.
Kôd:
pravokutnik = Shapes.AddRectangle(150, 100)
Shapes.Move(pravokutnik, 125, 125)
Shapes.Animate(pravokutnik, 30 * I, 150, 5000)
Shapes.Zoom(pravokutnik, 2, 2)
Zoom–pomoću ove operacije povećavaju se ili smanjuju oblici na određenu veličinu. Morate odrediti naziv oblika i razinu povećavanja ili smanjivanja od 0,1 do 20.

19. Vježba 2
Pomoću objekta Shapes dodajte različite vrste oblika u svoj program.
Zatim možete izvršiti različite operacije na objektu Shapes, kao što je premještanje oblika, postavljanje njegove neprozirnosti ili dodavanje efekta zumiranja. Pogledajmo primjer…
Kliknite na alatnoj traci.
U grafičkom prozoru možete stvarati oblike pomoću objekta Shapes. U ovom primjeru:
Pomoću svojstava PenWidth, PenColor, i BrushColor objekta GraphicsWindow postavite boju i širinu olovke kojom crtate obris oblika i boju kista kojom bojite unutrašnjost oblika.
Da biste nacrtali dva pravokutnika iste veličine koristite operaciju AddRectangle objekta Shapes te kao parametre navodite širinu i visinu parametra.
Da biste odredili mjesto pravokutnika u grafičkom prozoru, koristite operaciju Move i navedite koordinate x i y mjesta na koje želite premjestiti pravokutnik.
Da biste postavili razinu neprozirnosti pravokutnika, koristite operaciju SetOpacity te kao parametre navedite naziv oblika i njegovu razinu neprozirnosti.
Da biste povećali ili smanjili prikaz pravokutnika, koristite operaciju Zoom te navedite naziv pravokutnika i razinu približavanja na osi x i y.
Da biste provjerili rezultat programa, kliknite Pokreni na alatnoj traci ili pritisnite F5 na tipkovnici. Obratite pozornost na razliku između dva pravokutnika nakon korištenja operacija objekta Shapes na jednom od pravokutnika.
Kôd:
GraphicsWindow.Title = „Upoznavanje s oblicima“
GraphicsWindow.Height = 350
GraphicsWindow.Width = 450
GraphicsWindow.PenWidth = 2
GraphicsWindow.PenColor = „Black“
GraphicsWindow.BrushColor = „Purple“
pravokutnik1 = Shapes.AddRectangle(100, 100)
Shapes.Move(pravokutnik1, 50, 80)
pravokutnik2 = Shapes.AddRectangle(100, 100)
Shapes.Move(pravokutnik2, 300, 80)
For i = 1 To 4
Program.Delay(1000)
Shapes.Zoom(pravokutnik1, i * 0,4, i * 0,4)
Shapes.SetOpacity(pravokutnik1, i * 5)
EndFor

20. Zabava uz oblike
Pomoću uvjeta i petlji osim crtanja oblika različitih stilova i veličina možete stvarati i oblike jedinstvenog dizajna.
Na primjer, pomoću petlje For možete izraditi više pravokutnika slučajno odabranih boja…
rezultat
U ovom primjeru pomoću petlje For stvarate više pravokutnika koji su poredani uzlaznim redoslijedom po veličini. Isto tako pomoću operacije GetRandomColor objekta GraphicsWindow koristite slučajne boje pravokutnika.
Da biste pokrenuli program, kliknite Pokreni na alatnoj traci ili pritisnite F5 na tipkovnici. Nakon pokretanja programa prikazuje se živopisni prikaz pravokutnika.
Kôd:
GraphicsWindow.Title = „Upoznavanje s oblicima“
GraphicsWindow.Height = 500
GraphicsWindow.Width = 700
For i = 0 To 20
GraphicsWindow.PenWidth = 0.5
GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
pravokutnik1 = Shapes.AddRectangle(i * 20, i * 10)
Shapes.Move(pravokutnik1, i * 10, i * 10)
EndFor

21. DINAMIČKA GRAFIKA - pokreti
Kao i kod filma, potrebno je prikazivati određeni broj slika u sekundi radi doživljaja animacije
FPS = broj sličica u sekundi (frames per second)
Približno se određuje njih 20 do 50 (više je "bolje")
Igre sadrže pozadinu i objekte
objekti su sličice koji se pomiču po pozadini
Potrebno je unutar svakog prikaza ažurirati nova stanja, tj. izvršiti promjene, pomake objekata i slično…

22. Petlja igre i struktura
Kod razvoja igre potrebno je definirati neprekidnu petlju te u svakoj sekvenci vršiti promjene FAZE u razvoju:
1. Inicijalizacija
Postavljaju se početne vrijednosti u igri
Postavljanje procedura na događaje
2. postavljanje petlje igre
3. Postavljanje procedura upravljanja igrom
4. Ažuriranje igre – pomaci objekata i logika
5. Određivanje kolizije – sudara objekata
Link na opis razvoja igre:

23. POSTUPAK IZRADE IGRE U SmallBasic-u
Vježba 3 – Moja prva igra
POSTUPAK IZRADE IGRE U SmallBasic-u
Link na opis razvoja igre:

24. Hvala na pažnji! Pitanja?