8.0 WORKSHOP 3 In deze workshop ga je in een aantal stappen een simpel doch compleet werkend spel maken. Dat wil zeggen, een spel met onder andere: Een startscherm met start-controller Een info-scherm De levels voorzien van een spel-controller Een eindscherm voorzien van een eind-controller Een scorelijst En verder nog enkele spel-elementen die het spel nog spannender, fraaier en leuker maken.
En natuurlijk is het ook nu de bedoeling dat je de voorbeelden stap-voor-stap meedoet. Let daarbij weer op het
teken.
Test het spel bij iedere stap die je doet
!
Ga niet verder voordat de gemaakte stap naar behoren werkt
workshop 3
!
35
8.0
36
workshop 3
8.0 EEN COMPLEET SPEL Voor deze workshop kun je gebruik maken van de levels die je al in de eerste twee workshops hebt gemaakt. Deze kunnen worden uitgebreid en aangepast.
Het Startscherm Een beetje leuk spel heeft natuurlijk een startscherm. Daarop in ieder geval: • De naam van het spel • De naam van de maker • Onder welke knop informatie over het spel is te vinden • Hoe het spel gestart kan worden • Hoe eventueel geluid uit gezet kan worden.
Maak of zoek een geschikt achtergrondje dat bij je spel past. Zet in een daartoe geschikt programma de nodige tekst toe. Voeg het als Background toe aan GameMaker. In plaats van een kleurtje kies je nu voor Background. Zoek in het onderste vakje de gewenste achtergrond. Zorg dat de achtergrond zichtbaar is. Het vakje Foreground niet aanvinken, ander kan je geen sprites bijvoegen. Dat wil zeggen, het kan wel, maar je ziet niets.
Links: Een achtergrondje gemaakt in bijvoorbeeld Paint.
Rechts: De achtergrond een beetje opgeleukt met al of niet bewegende sprites
workshop 3
37
8.0 De Start-controller Controllers zijn de belangrijkste onderdelen in het spel. In workshop 1 heb je al zo n controller gezien die bijhield hoeveel klavertjes er nog in het spel waren. Maar ook het aantal levens, het bijhouden van de score, enzovoort kunnen we kwijt in zo n controller. Voor zo n controller mag je een object gebruiken die gekoppeld is aan een sprite of gebruik maken van een spriteloos object. In workshop 1 is er gebruik gemaakt van een spriteloos object. Voeg drie control-objecten toe aan je spel. Al of niet gekoppeld aan een sprite. In de workshops maak ik gebruik van spriteloze control-objecten.
De controllers mogen niet zichtbaar zijn en niet solid . Je wilt er immers geen last van hebben in het spel. Zet de controller ergens in het veld van de start-room.
Eigenschappen van de start-controller Open het eigenschapsvenster als dat nog niet open is. Als het spel wordt gestart moet: • De score op 0 staan • Het aantal levens op 3 • Een melodietje klinken
Verder voegen we aan deze controller nog wat letters toe, die zijn natuurlijk vrij te kiezen. Je kunt iedere willekeurige toets nemen, inclusief de spatiebalk. Het moet voor de gebruiker van je spel echter wel duidelijk zijn welke toetsen gebruikt worden. Een M om een irritant muziekje uit te zetten
38
workshop 3
8.0 Een S om het eerste level te starten (naar Next Room dus)
En tot slot de functie-toets F 1 om informatie over het spel te lezen
LET OP ! Om de game-info te schrijven klik je op het info-teken op de menubalk, je komt dan in een eenvoudige tekst-editor. Schrijf daar de nodige informatie. Wat er zoal in een info moet staan:
Test dit alles. Als alles goed werkt kunnen we verder met de spel-controller.
workshop 3
39
8.0 De Spel-controller De spel-controller houdt onder andere de scores en het aantal levens bij. Dan moeten we natuurlijk wel iets hebben om bij te houden. In de start-controller hebben we al ingesteld dat aan het begin van het spel de score 0 is en het aantal levens 3. Beide niet relatief.
We gaan punten scoren. Neem daarvoor het level dat je al in workshop 1 hebt gemaakt. Daar heb je ingesteld dat als je hoofdrolspelertje in aanraking komt met een pak-item, in dit voorbeeld Birdy en een klavertje, er een geluidje moet worden afgespeeld en het gepakte item moet verdwijnen. We voegen nu toe dat de score met +1 (of meer) wordt opgehoogd. In dit geval Relatief omdat de behaalde punten bij elkaar moeten worden opgeteld.
Evenzo kunnen we ook dood gaan als we met een spook in aanraking komen. Ook dat heb je in workshop 1 gezien. Nu gaat het echter een leven kosten. We zijn begonnen met drie levens. Zoals gezegd moet er daar een van af gaan als me met een spook in botsing komen. We verminderen het aantal levens met 1. Set -1. En dan moet het level opnieuw beginnen.
Dan nu wel de spel-controller Om te beginnen een N -key om ons naar het volgende (Next) level te helpen. Dat is vooral voor ons zelf makkelijk. Zo kun je met testen vliegensvlug naar het gewenste level en hoef je niet eerst alle voorafgaande levels te spelen. Evenzo een P -key (Previous) om ons naar een vorig level te helpen.
40
workshop 3
8.0 De R -key om het level te herstarten. Makkelijk voor ons zelf met testen, maar die moet ook aan de speler bekend zijn. De speler kan vast komen te zitten door eigen schuld. Dan moet hij wel opnieuw kunnen beginnen. Dat kost dan wel een leven. spel-controller
Als er geen levens meer zijn, moet er een score tabel getoond worden en moet het spel eindigen of opnieuw beginnen. Zet de spel-controller ergens in het speelveld. In ieder speelveld.
Het weergeven van de score en het aantal levens We gaan onder het speelveld de score en het aantal levens met behulp van plaatjes weergegeven.
Ik heb hiervoor een toepasselijke sprite gezocht en deze geschaald (kleiner gemaakt) in de sprite editor. Om te beginnen geven we in de start-controller aan dat we het aantal levens als plaatje willen zien en waar we het willen hebben.
Als het niet past onder je speelveld voeg dan 64 pixels toe. Deze komen onderaan. Bovenaan kun je niet toevoegen. (we hebben er nu 32 nodig, maar later nog eens 32.) Als je met je muis over het speelveld gaat zie je onder het speelveld de coördinaten weergegeven. Dat zijn altijd de coördinaten van de linker bovenhoek van een vierkantje. workshop 3
41
8.0 Terug naar de spel-controller
Tekst wordt in GameMaker als het ware op het scherm getekend. Vandaar het event Draw . Je kunt als je dat wilt een font aan het spel toevoegen. Standaard wordt het font Times gebruikt.
De afstand is relatief ten opzichte van de controller.
LET OP ! We willen dat het aantal levens is te zien. Daar zijn we immers mee bezig. Dan moet nu de spel-controller wel Visible zijn. Het blauwe bolletje zal worden overschreven door de nieuwe situatie.
Hier wordt bepaald waar en hoe de score in het speelveld geplaatst moet worden. Tussen de quotes staat een stukje tekst. In dit geval Score . Er zou ook bijvoorbeeld punten kunnen staan. Daarachter wordt de score geplakt. De plaats is relatief ten opzichte van de spel-controller. room_width-100 wil zeggen dat de score 100 pixels vanaf de rechterkant wordt weergegeven. Zie afbeelding onder.
42
workshop 3
8.0 Tot slot moeten we nog aangeven met welk plaatje we het aantal levens willen weergeven. Deze plaatsing is niet relatief. Deze is dus gesteld vanaf de linkerbovenhoek van het speelveld. De hartjes moeten achter het woord Levens komen. Dus neem ik de afstand vanaf de linkerkant 64 pixels. Als het niet goed is stel ik dat gewoon bij.
Dan nu ook nog even terug naar de controller die het aantal klavertjes in het speelveld bij houdt. We voegen hier aan toe dat als je alle klavertjes hebt gepakt en naar het volgende level gaat je ook een extra leven krijgt.
klaver-control
workshop 3
Eventueel kun je ook nog een bepaalde hoeveelheid bonuspunten geven.
43
8.0 De Health Bar Nu we het toch over het weergeven van levens hebben gehad kunnen we ook eens aan een health bar denken. Dat is een vakje waarin aangegeven staat hoeveel gezondheid je poppetje nog heeft. Je kunt je zo voorstellen dat je niet altijd meteen dood hoeft te gaan als je in aanraking komt met een vijand. Je kunt bijvoorbeeld ook in aanraking komen met objecten waardoor je niet meteen een leven verliest maar een percentage van je gezondheid. Denk bijvoorbeeld aan het eten van iets verkeerds of de steek van een insect. Natuurlijk moeten er dan ook objecten zijn waarmee de gezondheid weer toeneemt. Om zo n health bar te realiseren moet je een aantal dingen goed overdenken:
•
In aanraking met welk object wordt een bepaald percentage gezondheid verloren, en hoeveel dan.
• •
In aanraking met welk object wordt weer aan gezondheid gewonnen, en hoeveel dan.
•
Waar moet de health bar in het speelveld worden getekend.
Alleen een health bar of in combinatie met levens. Dat wil zeggen als de gezondheid 0 is, is het spel dan afgelopen of is er slechts een leven verloren, begint het level dan opnieuw en wordt de gezondheid weer op 100% gezet
Denk hier eens over na en zoek de benodigde sprites bij elkaar. Maak een level. Hiernaast zie je een deel van een level waar heel veel blikjes bier en hamburgers te vinden zijn. Als Birdy een biertje neemt laat hij een boer en verliest 10% van zijn gezondheid. Als hij een hamburger eet krijgt hij dat percentage aan gezondheid er weer bij.
44
workshop 3
8.0 Om te beginnen moet we de health bar in de start -controller initialiseren. Dat wil zeggen dat we daar een health bar creëren die bij aanvang van het spel op 100 % staat.
start-controller
De Health Bar tekenen Het tekenen van de bar doen we bij de spel-controller. We hadden de room al met 64 pixels verlengd om onder andere het aantal levens weer te geven. We hebben nu ook ruimte voor de bar. Eerst tekenen we het woordje Health op het veld. LET OP! Nogmaals even iets over de coördinaten in het speelveld. Links zie je de plaatsing van de spel-controller. In dit voorbeeld is de room 576 pixels hoog. Het raster is 32x32 pixels. Al je met de muis over het veld gaat zie je de coördinaten onder in het scherm.
Maar let op, het zijn altijd de coördinaten van de linker bovenhoek van zo n raster vierkantje. Het woordje Lives was relatief ten opzichte van de spelcontroller geplaatst. (8,4) Het woordje Health willen we daar netjes boven hebben. Dus ook 8 pixels vanaf de kant. Maar nu in het rastervierkantje erboven. Naar boven is negatief, zoals eerder gemeld, dus -32. En dus ook relatief.
workshop 3
45
8.0 Dan nu de bar zelf tekenen. Dat doen we eveneens in de spel-controller bij het Draw-Event. En ook hier wordt weer om precieze plaatsing en grootte gevraagd. De grootte wordt bepaald door van de linker bovenhoek en van de rechter onderhoek de coördinaten op te geven. Voor de plaatsing vanaf de linkerkant neem ik hier 64 omdat de levenshartjes ook op die afstand worden getekend. Verder kun je nog wat kleuren opgeven.
Let op, de afstanden hier niet relatief. Je ziet dat in dit voorbeeld de bar 160 pixels breed is en 18 pixels hoog.
(x1 , y1)
De gegeven afmetingen en plaatsingen zijn slechts een voorbeeld. Je kunt deze elementen op iedere gewenste plaats in het speelveld zetten. Bovenaan, linkerzijde of rechterzijde. Als je maar goed door hebt hoe het werkt met de speelveld coördinaten.
(x2 , y2)
OK, de health bar staat er. Nu m oet er natuurlijk ook wel wat m ee gebeuren. Op pagina 41 heb je in de spel-controller instellingen gedaan voor het geval er geen levens meer waren. Doe dit soort instellingen ook voor het geval er geen health meer is. In dit voorbeeld: - een geluidje - een leven minder - herstarten van het level - de health bar weer op 100 %
46
workshop 3
8.0 Gezondheid eraf en erbij Eerder heb je een voorbeeld gezien dat het voor Birdy heel ongezond is om een blikje bier te nemen. Maar gelukkig komt hij door het eten van een lekkere vette hamburger weer een beetje bij. Instellingen bij de eigenschappen van Birdy. Ik neem aan dat deze instellingen nu wel duidelijk zijn en geen toelichting meer behoeven. Natuurlijk mag je ook zelf bepaalde instellingen bedenken.
Als het goed is heb je al nagedacht (vorige opdracht) hoe je dit zelf in je spel gaat inbouwen. Voeg deze elementen dus nu aan je spel toe en test goed of alles goed werkt en inderdaad doet wat jij wilt dat het doet.
De eind-controller Deze controller zorgt voor een keurige afwikkeling van het spel als het is uitgespeeld. Create: Zet het alarm met nr 0 op stap 1
Dat geeft het programma even de tijd om voorbereidingen te treffen voor de afwikkelingen. Een stap is 1/30 van een seconde. Kies bij Event nu alarm o en doe de gewenste instellingen.
Het afgeven van een boodschap (Display a message) komt zo dadelijk aan de orde. workshop 3
47
8.0 In principe heb je nu een compleet werkend spel met een kop, een middenstuk en een staart. We kunnen echter nog behoorlijk wat speelse, dynamische of spannende elementen aan het spel toevoegen.
Depth en Parent (Diepte en ouderschap) Parent Je kunt een object een parent geven. Dat wil zeggen dat het object automatisch dan alle eigenschappen erft van zijn parent. Die eigenschappen hoef je dan niet meer in te stellen. Daarnaast kan het object ook nog eigenschappen van zichzelf hebben. Links zie je dat het rode tegeltje dezelfde eigenschappen erft van het tegel-object dat ik eerder heb gebruikt.
Depth Spoken zijn nu eenmaal spoken en kunnen derhalve door allerlei muren en voorwerpen zweven. In dit voorbeeld wil ik de spoken achter de rode tegeltjes laten zweven en voor de overige objecten. Dat geeft een speels ruimtelijk effect in je spel. Dit kunnen we bewerkstelligen door het instellen van een bepaalde diepte. Standaard staat de diepte van een object op 0. Wanneer objecten dezelfde diepte hebben worden ze getekend in volgorde waarin ze zijn gemaakt.
Als we een diepte instellen wordt het object met de grootste (positieve) waarde als eerste getekend en ligt dus onderop. In dit voorbeeld geef ik het rode tegeltje een negatieve waarde en komt dus bovenop. Ja, ik weet het, klinkt niet logisch, maar zo werkt het nu eenmaal in het programma. Neem per diepte-stap meteen een grote waarde, bijvoorbeeld 50 of 100. De waarde -100 had hier hetzelfde effect gegeven. Met een grote waarde kun je er namelijk ook nog tussenschuiven voor een nog ruimtelijker effect.
48
workshop 3
8.0 Message box Een messagebox is niets anders dan een mededelingenvenster dat je (als ontwerper) op ieder gewenst moment in het spel kunt laten verschijnen. Bijvoorbeeld als er een verhaallijn in het spel zit aan het begin van ieder level om je verhaal te vertellen. Of als mededeling: Gefeliciteerd, je hebt het spel uitgespeeld . Of misschien als je dood gaat: Dombo, je hebt niet goed uitgekeken . Enfin, laat je fantasie maar werken.
Ook hier kiezen we voor een spriteloos object en zetten we een alarm zoals we eerder hebben gedaan. Onder tabblad main2 vinden we de actie Display a message . Je kunt de boodschap zolang maken als je wilt, het venster past zich automatisch aan, maar het mag niet groter zijn dan het speelveld.
Voorzie je levels ook van een of meerdere messageboxen.
workshop 3
49
8.0 Bij bepaalde gebeurtenissen wisselen van sprites of instanties van objecten laten verschijnen. Je kunt je spel nog verrassender maken door onverwachte dingen te laten gebeuren. Je pakt bijvoorbeeld een item en er verschijn ergens een vijand, of het item veranderd in een vijand, of je laat per ongeluk een vijand vrij. Ook hier geldt weer dat je fantasie de enige beperking is. Kijk eens naar het volgende voorbeeld-level waarin heel veel gebeurtenissen plaatsvinden
•
Als Birdy tegen zo n glazen pot loopt breekt de pot en komt het beestje vrij. Deze verdwijnen niet meer van het veld.
•
Als Birdy door zo n beestje wordt gestoken verliest hij een percentage van zijn leven, met het drankje wordt de gezondheid weer aangevuld.
•
Je ziet dat er een afgesloten deel in het veld is. Als Birdy de sleutel pakt, worden de sloten geopend en worden er wat bonuslevens neergezet.
•
50
Tot slot, als alle smilies zijn gepakt veranderd het rode tegeltje in de linker bovenhoek in een exit-poortje en komen er nog wat flesjes medicijn voor het geval dat nodig is.
workshop 3
8.0 Natuurlijk komen de beestjes niet uit de pot en gaan de sloten niet zomaar open. Er wordt gewoon van plaatje gewisseld. Als Birdy in aanraking komt met de glazen pot, verdwijnt de pot en wordt er op locatie (32,32) een beestje gecreëerd.
Vooraf moeten we wel bij de eigenschappen van het beestje instellen dat het bij verschijnen alle kanten op mag zweven. Dezelfde instellingen als het tegen de onzichtbare randtegel komt.
Als Birdy in aanraking komt met het beestje dan: Wordt de gezondheid met 5% verminderd en springt het beestje meteen ergens naar een omgeving met een afstand van vier rastervierkantjes. Als je dat niet zou doen dan kan het beestje Birdy blijven steken totdat het dood gaat. En dat is wel erg wreed. Als Birdy van het drankje drinkt komt er weer wat gezondheid bij. Hoe dat moet weet je inmiddels wel.
workshop 3
51
8.0 Als Birdy de sleutel pakt dan: moet het plaatje van een dicht slot vervangen worden door een plaatje van een open slot en op diverse plaatsen wordt een instantie van het hart-object gecreëerd. Met het pakken van het hart krijgt Birdy een extra leven.
Dan moet er nog een smile-controller komen. Die kijkt of alle smilies gepakt zijn, er ergens een uitgang wordt gecreëerd waardoor Birdy naar het volgende level kan. Het rode tegeltje wordt verwisseld met een exit-poortje en er worden enkele flesjes medicijn gecreëerd.
Tot slot moet er nog een gebeurtenis plaats vinden als Birdy in aanraking komt met het exitpoortje. Dan mag hij door naar het volgende level. Deze instellingen moeten nu echt wel bekend zijn.
Zoek wat sprites bij elkaar en maak zelf ook een level waar sprites worden verwissel of instanties van objecten worden gecreëerd.
52
workshop 3
8.0 Surprise !
Je kunt ook het programma random instanties laten creëren.
Zet bijvoorbeeld vraagtekens in je speelveld, als je speelpoppetje in aanraking komt kiest de computer een willekeurige instantie van een object en wordt neergezet op een door de maker te bepalen plaats. Dat kan een item zijn waarmee een extra leven wordt verkregen of juist een extra vijand in het veld wordt gebracht. Eigenschappen van zo n vraagteken. Vul vier objecten in waar de computer uit kan kiezen en bepaal de plaats waar het object moet komen. Zo kun je verschillende vraagtekenobjecten maken. Al of niet voorzien van dezelfde sprite. Je kunt immers een sprite aan verschillende objecten koppelen. Dat geeft toch weer heel veel extra mogelijkheden aan een spel.
In de volgende workshop gaan we Birdy onder andere leren schieten en bommen leren plaatsen.
workshop 3
53
8.0
54
workshop 3
