Breakout, breek de stenen!

In Breakout bestuur je een peddel (plankje). Het is jouw taak om met een bal alle stenen te vernietigen. Zodra de bal botst met een steen zal de steen breken en verdwijnen. Je verdient punten voor elke steen die je raakt. Maar pas op, zodra de bal uit het scherm verdwijnt verlies je een leven! Met de peddel probeer je de bal dus in het spel te houden. Je gaat door naar een volgend level wanneer alle stenen zijn vernietigd.

Breakout bestaat sinds 1976 en is geïnspireerd op het nog oudere Pong. Tegenwoordig zijn er vele varianten en is het vooral op mobiele telefoons een spelletje om eventjes de tijd mee te doden. Wist je trouwens dat de oprichters van Apple, Steve Jobs en Steve Wozniak, betrokken waren bij de eerste versie?

Leerdoelen: wat kun je na deze oefening?

In deze oefening ga je de besturing van de peddel (plankje) programmeren en ga je zelf stenen toevoegen aan de levels. Je kunt uitleggen wat een Collision-event is en hoe je dit gebruikt in Game Maker. Voor de botsingen kun je straks slim gebruik maken van overerving. Je leert ook de snelheid van een object aan te passen door een variabele te gebruiken. Hierbij gebruiken we ook een functie. Je kunt in eigen woorden uitleggen wat zo'n functie doet. Je kunt straks ook vertellen wat het verschil is tussen een object en een instantie van een object. Tot slot gebruik je een globale variabele. Je kunt straks dan ook het verschil uitleggen tussen een gewone variabele en een globale variabele.

Eerste versie testen

Download het zip-bestand (breakout.zip) met daarin alle bestanden die je nodig hebt om Breakout te maken. Hierin vind je de sprites, geluidjes, achtergronden en Game Maker bestanden.

Klik op de plusjes (+) die voor de mappen staan om alle sprites, objecten, rooms en dergelijke te zien.

Open nu de eerste versie van het spelletje (breakout1.gmk). Er zijn al een aantal zaken voor je gemaakt, zodat je straks snel een speelbaar spelletje hebt. In het stuk hieronder wordt uitgelegd wat er tot nu werkt en hoe dit is gedaan.

Het titelscherm

Het titelscherm is al helemaal af. Zie afbeelding 1 hieronder. Het scherm bestaat uit muur-objecten, een titel-object (obj_title) en een speciale peddel (obj_paddle_title).

Het titelscherm van BreakoutAfbeelding 1. Het titelscherm van Breakout

Het Create-event van een object wordt uitgevoerd zodra er een instantie van het object wordt aangemaakt. Dit gebeurt onder andere als het level wordt gestart.

De peddel beweegt van links naar rechts en botst met de muren. In de afbeelding hieronder (afbeelding 2) zie je hoe dat is geprogrammeerd. Op het Create-event wordt eenmalig een richting gekozen: links of rechts met een snelheid (speed) van 6.

De peddel in het titelscherm beweegt automatisch!Afbeelding 2. De peddel in het titelscherm beweegt automatisch!

Als er een botsing plaatsvindt met obj_wall_vertical (een verticaal muurdeel) gaat het plankje de andere kant op. Zie afbeelding 3. Zo'n botsing heet in Game Maker een Collision.

Een botsing programmerenAfbeelding 3. Een botsing programmeren

De bal werkt al!

De bal is al bijna af. Op dit moment valt er niets meer aan te doen. Straks ga je echter stenen in de kamer zetten en dan moeten we obj_bal een beetje uitbreiden. De botsing met obj_paddle, zoals je in afbeelding 4 ziet, is het meest ingewikkeld. Je hoeft niet precies te begrijpen hoe dat werkt. Kijk er gewoon eens naar!

De botsing met obj_paddle is het lastigst!Afbeelding 4. De botsing met obj_paddle is het lastigst!

De belangrijkste dingen zijn nu verteld. Het wordt tijd je zelf gaat beginnen!

Zelf bouwen

Sla nu eerst het spel op. Ga naar File » Save As en sla het bestand om onder de naam mijn_breakout.gmk.

De peddel en de besturing maken

De peddel bestaat al. Dit is namelijk obj_paddle. Open het object (dubbelklikken) en volg de stappen hieronder om de besturing te maken.

  1. action_move1Voeg een Keyboard Left-event toe. Voeg vervolgens een Move Fixed-actie toe (tab: move). Kies als direction het pijltje naar links en typ by speed 8. Het venster ziet er nu zo uit.
  2. action_move1Voeg een Keyboard Right-event toe. Voeg vervolgens een Move Fixed-actie toe (tab: move). Kies als direction het pijltje naar rechts en typ by speed 8. Het venster ziet er nu zo uit.
  3. action_move1Voeg een Keyboard, No key-event. Voeg vervolgens een Move Fixed-actie toe (tab: move). Kies als direction het middelste vierkantje en laat speed op 0 staan. Nu stoppen we met lopen wanneer we geen toets indrukken. Het venster ziet er nu zo uit.
  4. Zie je dat obj_wall geen sprite heeft? Dit object is namelijk een parent-object van alle andere muren. Dit object wordt gebruikt om botsingen te detecteren.
    action_move1Voeg een Collision-event toe met obj_wall. Voeg vervolgens een Move Fixed-actie toe (tab: move). Kies als direction het middelste vierkantje en laat speed op 0 staan. Nu stoppen we met lopen wanneer we tegen de muur aankomen. Het venster ziet er nu zo uit.

Je kunt de peddel nu besturen. Start het spel met een druk op de groene pijl en probeer het balletje in het spel te houden.

De stenen maken en toevoegen

Je gaat nu 2 sprites en 3 objecten maken. Deze staan hieronder in het lijstje:

Volg onderstaande stappen om de sprites en objecten te maken.

  1. Maak een nieuwe sprite met de naam spr_block_blue. Laad hierin de afbeelding block_blue.png. Laat alle instellingen zoals ze zijn. Het venster ziet er nu zo uit.
  2. Maak een nieuwe sprite met de naam spr_block_red. Laad hierin de afbeelding block_red.png. Laat alle instellingen zoals ze zijn. Het venster ziet er nu zo uit.
  3. Een kind erft eigenschappen van zijn ouder. Zo is het ook bij programmeren. In Game Maker worden de Events, Actions en Variabelen van een ouder geërfd door de kinderen.
    Maak een nieuw object met de naam obj_block. Selecteer no sprite en zet een vinkje bij Solid. Dit object dient straks als parent (ouder). Het venster ziet er nu zo uit.
  4. Maak een nieuw object met de naam obj_block_blue. Selecteer sprite spr_block_blue, zet een vinkje bij Solid en zet Parent op obj_block. Nu is dit object een kind van obj_block. Het venster ziet er nu zo uit.
  5. Het vinkje bij Solid maakt straks de botsing tussen de bal en het blok mogelijk.
    Maak een nieuw object met de naam obj_block_red. Selecteer sprite spr_block_red, zet een vinkje bij Solid en zet Parent op obj_block. Nu is dit object een kind van obj_block. Het venster ziet er nu zo uit.

De stenen zijn nu gemaakt. Plaats een aantal stenen in level1 en level2. Zie afbeelding 14. Start vervolgens het spel om even te testen. Alvast een waarschuwing: je kunt de stenen nog niet breken!

Stenen plaatsen in de roomAfbeelding 14. Stenen plaatsen in de room

Is het bovenstaande niet gelukt? Geen zorgen. Open dan breakout2.gmk om verder te gaan.

Botsing tussen bal en steen programmeren

Alle objecten en sprites zijn inmiddels gemaakt. We gaan er nu voor zorgen dat de bal botst met de stenen. Open obj_ball (dubbelklikken) en volg de onderstaande stappen.

  1. action_bounceVoeg een Collision-event toe met obj_block. Voeg vervolgens een Bounce-actie toe (tab: move). Laat alle instellingen zoals ze zijn en klik op OK. De bal kaatst nu door als hij botst. Het venster ziet er nu zo uit.
  2. Er zijn altijd twee objecten bij een botsing betrokken. In dit geval is de "ander" (other) de steen. We programmeren namelijk bij obj_ball (self).
    action_destroyVoeg hieronder een Destroy Instance-actie toe (tab: main1). Zet applies to op other. Bij een botsing verdwijnt de steen nu. Het venster ziet er nu zo uit.
  3. action_scoreVoeg hieronder een Set Score-actie toe (tab: score). Typ bij value 10 en zet het vinkje aan bij relative. Elke keer wanneer we botsen krijgen we 10 punten. Het venster ziet er nu zo uit.
  4. max() is een functie. Deze functie geeft de grootste van twee waarden terug. Bijvoorbeeld: max(3,4) geeft het getal 4 terug.
    action_variableVoeg hieronder een Set Variable-actie toe (tab: control). Bij variable typ je speed en bij value typ je max(6,speed-0.3). Op deze manier verlagen we de snelheid van de bal, maar de minimum snelheid is 6. Het venster ziet er nu zo uit.
  5. action_soundVoeg hieronder een Play Sound-actie (tab: main1) toe. Selecteer bij sound snd_block. Nu wordt er een geluidje afgespeeld als we botsen. Het venster ziet er nu zo uit.
  6. action_ifnumberVoeg hieronder een Test Instance Count-actie toe (tab: control). Selecteer bij object obj_block. Laat de overige instellingen met rust. We controleren hier of er nog blokken in de kamer zijn. Het venster ziet er nu zo uit.
  7. action_beginVoeg hieronder een Start Block-actie toe (tab: control). Het venster ziet er nu zo uit.
  8. Een globale variabele is in elk object aan te passen. Het hoort dan ook niet bij een object, maar bij het spel in het algemeen. speed is een voorbeeld van een normale variabele. Het hoort bij een object.
    action_variableVoeg hieronder een Set Variable-actie toe (tab: control). Bij variable typ je global.level en bij value typ je 1. Zet een vinkje bij relative. We hogen de globale variabele met 1 op. Het venster ziet er nu zo uit.
  9. action_roomnextVoeg hieronder een Next Room-actie toe (tab: main1). Kies bij Transition voor Push from right. Het venster ziet er nu zo uit.
  10. action_endVoeg hieronder een End Block-actie toe (tab: control). Het venster ziet er nu zo uit.

Het resultaat van al deze stappen staat hieronder nog eens in afbeelding 24. Start nu het spel en kijk of alles werkt!

De botsing tussen bal en steenAfbeelding 24. De botsing tussen bal en steen

Is er iets niet helemaal gelukt? Open dan breakout_final.gmk voor de volledige versie.

Samenvatting

Gefeliciteerd, je hebt Breakout gemaakt! Je hebt zelf de besturing van het plankje gemaakt. Je gebruikte hierbij een Collision-event om ervoor te zorgen dat het plankje niet door de muur kon.

Daarna begon het echte werk: de collision tussen de bal en de stenen. Vind je het niet raar dat de stenen verdwijnen, terwijl je alleen een botsing hebt ingesteld met obj_block? En dus niet met obj_block_blue en obj_block_red? Hier heb je dus overerving voor gebruikt! In afbeelding 25 hieronder is dat nog wat duidelijker gemaakt.

Overerving in een overzichtjeAfbeelding 25. Overerving in een overzichtje

In het spel botst met de bal bijvoorbeeld met obj_block_red. Omdat er een Collision-event is van de ouder (obj_block) met de bal, botst automatisch ook het kind met de bal. Je zou op deze manier tientallen kinderen kunnen maken (groen, geel, etcetera) zonder dat je extra hoeft te programmeren.

Ook heb je een functie gebruikt, namelijk de max()-functie. Deze functie geeft van verschillende waarden de hoogste terug. Op deze manier kon de snelheid (variabele speed) van de bal nooit onder de 6 komen.

In afbeelding 26 wordt het verschil tussen een object en instantie duidelijker gemaakt. Kort gezegd: van instanties kunnen er meerdere zijn (bijvoorbeeld allemaal blauwe stenen), maar er is er maar één obj_block_blue. Er staan dus geen objecten in een kamer, maar instanties van objecten.

De botsing tussen bal en steenAfbeelding 26. De botsing tussen bal en steen

Tot slot heb je de globale variabele level gebruikt. Dit is een variabele die in het spel te benaderen is. Je kunt deze variabele overal aanpassen en de waarde ervan opvragen. Een gewone variabele, zoals de speed van een object is alleen door dat object zelf te benaderen.

Extra's

Een spel is nooit helemaal af en zeker dit spelletje niet. Je kunt het nog op vele manieren aanpassen en uitbreiden:

Je hebt vast zelf nog veel betere ideeën. Probeer er iets leuks van te maken! Vind je het nog wat te moeilijk? Dan kun je natuurlijk ook meerdere levels maken. Kopiëer dan level2 en pas het nieuwe level aan. Dat werkt het makkelijkst. Zie afbeelding 27.

Een level kopieren met Duplicate (rechtermuisknop!)Afbeelding 27. Een level kopieren met Duplicate (rechtermuisknop!)

De sprite van een steen een andere kleur geven

Eerst kopiëer je de spr_block_red met je rechtermuisknop. Zie afbeelding 28.

Een sprite kopieren met Duplicate (rechtermuisknop!)Afbeelding 28. Een sprite kopieren met Duplicate (rechtermuisknop!)

Vervolgens bewerk je de nieuwe sprite door op Edit Sprite te klikken. Zie afbeelding 29.

Klik op Edit SpriteAfbeelding 29. Klik op Edit Sprite

Probeer gerust één van de andere opties. Game Maker biedt aardig wat mogelijkheden om plaatjes te bewerken!

Daarna ga je in het nieuwe venster naar Images en dan Colorize. Zie afbeelding 30.

Klik op ColorizeAfbeelding 30. Klik op Colorize

Door vervolgens de balk te verslepen, verandert de kleur! Klik op OK en daarna op het groene vinkje om de sprite af te sluiten.

Klik op Kies een kleur en druk op OKAfbeelding 31. Klik op Kies een kleur en druk op OK

Nu moeten we ook een nieuwe object maken. Ook hier kopiëren (dupliceren) we een bestaand object. Namelijk obj_block_red. Zie afbeelding 32.

Een object dupliceren!Afbeelding 32. Een object dupliceren!

Bij dit nieuwe object selecteren we de nieuwe sprite en dan we zijn klaar! Zie afbeelding 32. Zie je trouwens dat Solid aan staat? Dat moet ook, anders werkt de botsing met de bal niet.

De sprite instellen bij het nieuwe objectAfbeelding 33. De sprite instellen bij het nieuwe object

"Netjes programmeren" noem je dat!

Tot slot is het nog wel een goed idee om nieuwe sprite en het nieuwe object duidelijke namen te geven. Dus in dit geval: spr_block_green en obj_block_green.