1. Sokoban, de magazijnmeester

Het spel Sokoban speelt zich af in een magazijn. Als speler moet je proberen kratten op de juiste plek te zetten. Deze kratten hebben geen handvatten, dus je kunt ze alleen maar duwen. Je bent net sterk genoeg om één krat te verplaatsen. Zodra er twee kratten in je duwrichting staan, lukt het dus niet meer om ze te verplaatsen. En hier begint dus het puzzelen. Hoe krijg ik alle kratten op de juiste plek?

Het spel is in 1981 bedacht door Hiroyuki Imabayashi en in 1982 voor het eerst uitgebracht. Er zijn in de loop der jaren heel wat versies en varianten gemaakt. Zie Wikipedia voor meer informatie. In dit hoofdstuk leer je hoe je het spelletje zelf maakt met Game Maker!

2. Leerdoelen: wat kun je na deze oefening?

Met het maken van dit eerste spel leer je werken met deze website, de oefenbestanden en Game Maker. Als het spelletje af is, heb je een aantal dingen geleerd. Dit zijn de leerdoelen. Voor elk spel op de website zijn er leerdoelen.

De website

Je kunt bestanden downloaden van deze website. Deze bestanden kun je gebruiken in Game Maker. Je leert ook wat een zip-bestand is en hoe je zo'n bestand kunt uitpakken.

Game Maker

Allereerst leer je Game Maker installeren en opstarten. Daarna kun je de oefenbestanden openen in Game Maker.

Je kunt zelf sprites en objecten toevoegen en bewerken. Je begrijpt dat een sprite kan bestaan uit meerdere plaatjes, zogenoemde subimages. Hier kun je handig gebruik van maken. Ook kun je een kamer (room) indelen door er objecten in te plaatsen. Verder leer je hoe je een personage kunt besturen en wat een grid is. Je kunt straks ook uitleggen wat een event is en wat een actie is. Tot slot maak je kennis met het begrip variabele. Je kunt een variabele gebruiken om mee te tellen.

3. Eerste versie testen

Voordat we de eerste versie kunnen testen, moeten we eerst Game Maker installeren. Heb je Game Maker 8 al op je computer staan? Dan mag je deze stap overslaan.

Game Maker 8 downloaden en installeren

Klik op deze link om Game Maker 8 te downloaden. De browser (bijvoorbeeld Internet Explorer) vraagt nu of je het bestand wilt opslaan of uitvoeren. Klik op uitvoeren en wacht totdat je het onderstaande venster te zien krijgt. Zie afbeelding 1.

Game Maker installeren.Afbeelding 1. Game Maker installeren.

Klik op next, nog een keer next, selecteer dat je akkoord gaat met de licentie en klik weer op next, kies een map waar je Game Maker wilt installeren (standaardinstelling is goed) en klik nog een keer op next. De map bestaat waarschijnlijk niet en daarom moet je op Ja klikken als daarom wordt gevraagd. Zie afbeelding 2. Klik vervolgens op Start. Game Maker 8 wordt nu geinstalleerd.

Ja, de map moet worden aangemaakt.Afbeelding 2. Ja, de map moet worden aangemaakt.

Als de installatie is voltooid zie je het venster zoals in afbeelding 3. Klik op Exit en Game Maker wordt automatisch opgestart.

De installatie is voltooid!Afbeelding 3. De installatie is voltooid!

Game Maker opstarten

Stond Game Maker 8 al op je computer? Dan start je het programma nu zelf op. Wanneer je Game Maker net hebt ingestalleerd gebeurt dit automatisch.

Als je meedoet met de Creative Game Challenge krijg je gratis de Pro Edition!

Omdat je de gratis versie van Game Maker gebruikt, krijg je eerst onderstaande afbeelding te zien (afbeelding 4). Klik op Continue Using the Lite Edition om door te gaan.

Klik op Continue Using the Lite EditionAfbeelding 4. Klik op Continue Using the Lite Edition

Er wordt nu soms nog gevraagd of je Game Maker wilt gebruiken in de Geavanceerde Modus. Als dat gevraagd wordt, klik je op Yes. Je hebt nu Game Maker 8 opgestart en ziet een groot grijs scherm met links mapjes en bovenin een balk met icoontjes. Zie afbeelding 5.

Het beginscherm van Game MakerAfbeelding 5. Het beginscherm van Game Maker

Oefenbestanden downloaden en gebruiken

Je gaat nu de oefenbestanden downloaden en de eerste versie van Sokoban openen. Het zou veel te veel werk zijn om het spel helemaal zelf te maken. Vandaar dat je gaat werken met een versie van het spel dat al bijna af is!

Download het zip-bestand sokoban.zip. Kies voor Opslaan en niet voor Uitvoeren. In dit zip-bestand staan alle bestanden die je nodig hebt om Sokoban te maken. Je vindt er alle sprites, geluiden, achtergronden en Game Maker bestanden.

Het zip-bestand moet nu eerst worden uitgepakt. Ga naar de map waar je het zojuist gedownloade bestand hebt opgeslagen. Klik vervolgens met je rechtermuisknop op het zip-bestand en kies Alles uitpakken. Zie afbeelding 6.

De oefenbestanden voor Sokoban uitpakkenAfbeelding 6. De oefenbestanden voor Sokoban uitpakken

In het venster dat nu verschijnt laat je alles staan zoals het staat en klik je op Uitpakken. De bestanden worden uitgepakt en zodra dit gebeurt is, heb je een map met de volgende mappen en bestanden:

Open nu het bestand sokoban1.gmk in Game Maker door erop te dubbelklikken. Het scherm ziet er nu uit zoals op de afbeelding hieronder (afbeelding 7).

Versie 1 van Sokoban ingeladen. Klik op de groene pijl om te spelen!Afbeelding 7. Versie 1 van Sokoban ingeladen. Klik op de groene pijl om te spelen!

Start vervolgens het spel door op de groene pijl te drukken. Het resultaat zie je in de afbeelding hieronder (afbeelding 8).

Het titelscherm van Sokoban. Zet ook je speakers aan!Afbeelding 8. Het titelscherm van Sokoban. Zet ook je speakers aan!

Nu gebeurt er nog niet echt veel. Dat komt omdat er nog helemaal geen bestuurbaar personage in het spel zit! Die ga je straks namelijk zelf maken. Klik op het kruisje of druk op de ESCAPE toets om terug te keren naar het grijze scherm van Game Maker. Je hebt nu weer hetzelfde scherm voor je als in afbeelding 7.

Door op de plusjes (+) te klikken aan de linkerkant van de mapjes (Zie afbeelding 9) krijg je de inhoud van de mapjes te zien.

Elke keer als je een spel laadt in Game Maker, moet je de mapjes uitklappen!Afbeelding 9. Elke keer als je een spel laadt in Game Maker, moet je de mapjes uitklappen!

Het resultaat zie je hieronder in afbeelding 10. Er zijn een aantal Sprites (plaatjes), Sounds (geluiden), Objects en Rooms (kamers of levels). Ook is er een Font (lettertype). Voorlopig hoef je je nog niet druk te maken om al deze zaken. Laat ze maar gewoon staan zoals ze er staan. In het volgende hoofdstuk gaan we zelf dingetjes toevoegen.

De mappen zijn nu uitgeklapt.Afbeelding 10. De mappen zijn nu uitgeklapt.

4. Zelf bouwen

Het uitbreiden van Sokoban komt neer op het aanmaken van sprites, objecten en rooms. In de afbeelding hieronder (afbeelding 11) wordt uitgelegd wat de verschillende iconen in Game Maker betekenen.

De belangrijkste icoontjes van Game Maker worden hier uitgelegd!Afbeelding 11. De belangrijkste icoontjes van Game Maker worden hier uitgelegd!

Vanaf hier gaan we stap voor stap het spel afmaken. Heb je al het bovenstaande goed begrepen?

We gaan nu ons eerst ons spel onder een andere naam opslaan. Dat kan helaas niet met één van de icoontjes. Ga naar File » Save As en sla het bestand om onder de naam mijn_sokoban.gmk. Gelukt? Dan is het nu tijd om écht te beginnen!

Sprite en Object maken

  1. Deze sprite bestaat uit 4 afbeeldingen. Vandaar _strip4 in de naam van het bestand.
    Maak een nieuwe sprite met de naam spr_me. Laad hierin de afbeelding me_strip4.png. Haal het vinkje weg bij Precise collision checking. Klik vervolgens op Modify Mask en zet Bounding Box op Full image Het venster ziet er nu zo uit.
  2. Open het al bestaande Object obj_me door erop te dubbelklikken. Selecteer sprite spr_me. Het venster ziet er nu zo uit.

Je hebt nu een sprite gemaakt en gekoppeld aan het object. Voordat je verder gaat kijken we even we naar afbeelding 14 hieronder.

Het Object-venster. Hier kun Events en Actions toevoegen aan het object.Afbeelding 14. Het Object-venster. Hier kun Events en Actions toevoegen aan het object.

Met de knop Add Event voeg je een gebeurtenis toe. Daarna kies je aan de rechterkant acties die moeten plaatsvinden op die gebeurtenis. Deze acties kun je slepen en vervolgens loslaten in het actie-gedeelte. Helemaal aan de rechterkant zie je bovendien 7 tabbladen (tabs). Er zijn heel wat acties te kiezen! Het klinkt wellicht allemaal nog een beetje raar, maar in de stappen hieronder ga je op deze manier het hoofdpersonage laten lopen!

Gebeurtenissen en acties instellen om te lopen

  1. action_ifgridVoeg een Keyboard Left-event toe. Voeg vervolgens een Check Grid-actie toe(tab: control). Bij snap hor typ je 32 en bij snap ver typ je 32. Het venster ziet er nu zo uit.
  2. action_beginVoeg hieronder een Start Block-actie toe (tab: control). Het venster ziet er nu zo uit.
  3. Subimage 3 is eigenlijk plaatje 4. Game Maker telt namelijk vanaf 0. Dus 0, 1, 2, 3.
    action_spriteVoeg hieronder een Change Sprite-actie toe (tab: main1). Kies als sprite spr_me, typ by subimage 3 en zet speed op 0. De juiste subimage wordt op deze manier gekozen. Het venster ziet er nu zo uit.
  4. action_move1Voeg hieronder een Move Fixed-actie toe (tab: move). Kies als direction het pijltje naar links en typ by speed 4. Het venster ziet er nu zo uit.
  5. action_variableVoeg hieronder een Set Variable-actie toe (tab: control). Bij Applies to selecteer je Object obj_gameinfo. Bij variable typ je moves en bij value typ je 1. Je zet een vinkje bij relative. Op deze manier kunnen we het aantal stappen tellen. Het venster ziet er nu zo uit.
  6. action_endVoeg hieronder een End Block-actie toe (tab: control). Het venster ziet er nu zo uit.

Het hoofdpersonage naar links laten lopen.Afbeelding 20. Het hoofdpersonage naar links laten lopen.

Het resultaat van de stappen hierboven is dat we naar links kunnen lopen. Voor elke stap die we doen wordt de variabele moves 1 opgehoogd. Op dezelfde manier ga je nu zelf stappen 1 tot en met 6 herhalen om ons hoofdpersonage naar rechts, boven en beneden te laten lopen.

Voor stap 3, waar je de juiste sprite moet instellen, geldt nu wel een ander subimage! Zie afbeelding 21 hieronder. Let er ook goed op dat je het pijltje in stap 4 veranderd.

Gebruik de juiste subimage voor de juiste looprichting.Afbeelding 21. Gebruik de juiste subimage voor de juiste looprichting.

Als je alle richtingen hebt ingesteld ziet het Object-venster er nu uit zoals in afbeelding 22.

Alle richtingen zijn nu ingesteld. Elke keer met (bijna) dezelfde acties.Afbeelding 22. Alle richtingen zijn nu ingesteld. Elke keer met (bijna) dezelfde acties.

Het Object in een Room zetten

Elke room bestaat uit hokjes. Vaak zijn de hokjes 16 of 32 pixels breed en hoog. We zeggen dan dat we een grid van 16x16 of 32x32 gebruiken.

Voordat we het spelletje kunnen testen, moeten we eerst ons hoofdpersonage in een kamer zetten. Aan de linkerkant, in de mapjes, zie je onder Rooms level1 staan. Dubbelklik daarop om de kamer te bewerken. Zie afbeelding 23.

De kamer bewerkenAfbeelding 23. De kamer bewerken

Klik nu met je linkermuisknop ergens in een zwart hokje binnen de muren. Je plaatst dan de hoofdpersoon in het level. Klik vervolgens op het groene vinkje om de kamer op te slaan en af te sluiten.

Testen of we kunnen lopen

Zie je tijdens het spelen ook dat de "Moves" worden geteld?

Dan is het nu tijd om te testen! Sla het spel op en klik daarna op de groene pijl om te starten. Controleer of je in alle richtingen kunt bewegen. Je zult zien dat er nog een aantal dingen niet goed gaan. We kunnen namelijk niet stoppen en we lopen overal doorheen! Dat lossen we uiteraard in de volgende stappen op!

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

Het spel afmaken

We gaan weer verder met ons hoofdpersonage. Open nu obj_me om hem aan te passen en volg onderstaande stappen.

  1. action_ifgridVoeg een Keyboard, No key-event toe. Voeg vervolgens een Check Grid-actie toe(tab: control). Bij snap hor typ je 32 en bij snap ver typ je 32. Het venster ziet er nu zo uit.
  2. action_move1Voeg hieronder 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.
  3. Let op: we maken hier dus een nieuwe gebeurtenis aan.
    action_spriteVoeg een Create-event toe. Voeg vervolgens een Change Sprite-actie toe (tab: main1). Kies als sprite spr_me, typ by subimage 0 en zet speed op 0. Op deze manier kiezen we een begin-sprite. Het venster ziet er nu zo uit.
  4. action_move1Voeg een Collision-event toe met obj_brick. 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 een muur botsen. Het venster ziet er nu zo uit.
  5. action_variableVoeg hieronder een Set Variable-actie toe (tab: control). Bij Applies to selecteer je Object obj_gameinfo. Bij variable typ je moves en bij value typ je -1. Je zet een vinkje bij relative. Op deze manier loopt het aantal stappen niet op wanneer we botsen met een muur. Het venster ziet er nu zo uit.

Het spel is nu klaar! Tenminste, alles werkt. Er moeten natuurlijk nog wel wat levels gemaakt worden. Test nu het eerste level door het spel op te slaan en te spelen.

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

Eigen levels maken

Het originele Sokoban spel bestond uit 20 levels. Latere versies hadden er nog veel meer. Probeer nu zelf eens een aantal levels te maken! Dit gaat het snelst en gemakkelijkst door met je rechtermuisknop op bijvoorbeeld level2 te klikken (Zie afbeelding 29). Vervolgens kies je voor Duplicate. De kamer wordt dan gekopiëerd. Met je rechtermuisknop kun je ook de naam van de kamer veranderen (Rename). Zorg ervoor dat title de eerste kamer in het lijstje is en end de laatste. Je kunt de kamers overigens van volgorde veranderen door ze te verslepen.

Meer kamers maken door een bestaande kamer te kopiëeren.Afbeelding 29. Meer kamers maken door een bestaande kamer te kopiëeren.

Benieuwd hoe dat werkt met obj_fill? Je kunt het object natuurlijk even openen om te kijken!

Als je nieuwe levels maakt is het handig om te weten dat je obj_fill maar één keer in de kamer hoeft neer te zetten. De "achtergrond" binnen de muren wordt dan automatisch ingekleurd. Zie afbeelding 30

obj_fill hoeft maar 1 keer in de kamer te worden gezet. Maar wel binnen de muren!Afbeelding 30. obj_fill hoeft maar 1 keer in de kamer te worden gezet. Maar wel binnen de muren!

5. Samenvatting

Het eerste spelletje is gemaakt. Gefeliciteerd! Je kunt nu Game Maker installeren en opstarten. Daarnaast heb je geleerd hoe je een zip-bestand uitpakt en de oefenbestanden gebruikt.

Je hebt vervolgens in een aantal stappen een object laten bewegen over een grid. Door de juiste subimage in te stellen veranderde de sprite in het juiste plaatje. Je hebt dit geprogrammeerd door events (gebeurtenissen) en bijbehorende actions in te stellen. Ook heb je de variabele moves gebruikt om het aantal stappen te tellen.

Tot slot ben je bezig geweest om zelf levels (rooms) te maken. Je kunt in een kamer objecten plaatsen met je linkermuisknop. Met de rechtermuisknop verwijder je objecten uit de kamer.

6. Extra's

In Game Maker kun je gemakkelijk de sprites bewerken. Je kunt zelf iets tekenen, maar je kunt bijvoorbeeld ook de kleuren van de huidige sprites aanpassen. Om jezelf een beetje bekend te maken met deze mogelijkheden kun je proberen spr_fill, spr_spot_free en spr_spot_taken te bewerken. Hieronder is voorgedaan hoe je spr_fill aanpast.

Dubbelklik aan de linkerkant op spr_fill om de sprite te openen. Klik vervolgens op Edit Sprite (Zie afbeelding 31).

Klik op Edit SpriteAfbeelding 31. Klik op Edit Sprite

In het nieuwe venster dubbelklik je op de huidige afbeelding. Zie afbeelding 32.

Dubbelklik om verder te gaanAfbeelding 32. Dubbelklik om verder te gaan

Vervolgens krijg je een tekenomgeving waarin je de sprite kunt bewerken. Gebruik bijvoorbeeld het emmertje om de kleur te veranderen. Zie afbeelding 33.

Gebruik het emmertje om de kleur van spr_fill te veranderen.Afbeelding 33. Gebruik het emmertje om de kleur van spr_fill te veranderen.

De andere sprites in het spel kun je op eenzelfde manier aanpassen. Probeer hier zelf mee te spelen. Oefening baart kunst!