Stap 1: het prepareren van de kamer
Construct 2 start automatisch met een layout van 640x480 als je het programma opent (en kiest voor New). Voor Pong hebben we paddles/batjes nodig, dus die maken we als eerste. Ga met de muiscursor naar de layout en dubbelklik middenin het scherm.
Uit de beschikbare onderdelen kies je voor Sprite en klik je op het scherm om de positie van onderdelen te bepalen. Je ziet een vierkantje midden in de grafische bewerker en tekent hierin het batje. De benodigde tool (het vierkantje) staat links in de balk van de editor (ofwel het scherm Edit Image), boven het verfemmertje.
Sleep in het vierkant een rechthoekige vorm en je hebt je batje. Wat nog rest is het uitknippen, dat je doet door bovenin het scherm de knop voor uitsnijden (cropping) aan te klikken. Nu heb je een rechthoek/vierkant en klik je het kruisje rechts bovenin om de Editor te sluiten. Het batje heet nu nog Sprite, maar klik het aan in de objectenbalk (rechts) om de naam te veranderen in Speler 1. Sleep het object naar de grens van de layout, die in Construct 2 met een stippellijn wordt aangegeven. Vanuit de layout kan je overigens ook objecten vergroten/verkleinen.
Herhaal de bovenstaande stap voor het maken van Speler 2 (noem de rechthoek Speler 2). Het is mogelijk om het batje te kopiëren, maar dat doen we niet omdat de twee spelers verschillend moeten blijven. We willen niet dat ze beide bewegen bij bepaalde toetsen. Dat gebeurt wél als je één batje maakt en deze kopieert.
Op naar het balletje, dat we blauw gaan maken. Dubbelklik weer op de layout, kies Sprite en klik op de layout. We selecteren in de kleurkaart blauw en tekenen in het vierkant een kleiner vierkantje. Klik op de knop voor uitsnijden en op het kruisje om terug te gaan naar de layout. Een tip bij het maken van vormen: houd Shift ingedrukt om een symmetrische vorm aan te houden.
Stap 2: batjes in beweging brengen
Om beweging in een spel te brengen moet er een besturingselement worden toegevoegd aan de layout. Dat doe je ook door op een lege plek in het scherm te dubbelklikken. In plaats van een Sprite voeg je nu simpelweg Keyboard toe, dat je treft onder Input. Nu is het spel klaar om te worden bestuurd en kan je in je Event Sheet, de plek waar je alle gameafspraken maakt, besturing koppelen aan onderdelen. Vergeet je het toetsenbord toe te voegen, dan verschijnen besturingsopties niet in de Event Sheet.
Na het toevoegen van het toetsenbord klik je op het tabblad Event Sheet. Klik hier op Add Event, we gaan de batjes koppelen aan toetsen. Een nieuw scherm opent, waar je klikt op Keyboard, om per batje twee toetsen in te stellen (omhoog, beneden). We gaan nu uit het menu kiezen voor Key is down, wat zoveel betekent als ‘indien deze toets wordt ingedrukt’. Een nieuw menu verschijnt, waar je de toets kan kiezen. Ik kies nu voor W, zodat speler 1 met W beweegt. Dan volgt de actie, die bepaalt wat speler 1 gaat doen als de toets W is ingedrukt. Naar boven! We kiezen na Add action dus Speler 1 en scrollen in het volgende menu naar Size & position en kiezen Move to angle. Ik wil dat speler 1 naar boven gaat, dus kies ik om te testen 90 graden in het volgende menu, wat werkt! Het batje gaat echter naar beneden. Pas je het aan met een minteken ervoor dan gaat het object de andere kant op (met andere woorden: pas de waarde aan met -90 en het batje werkt).
Het aantal beeldpuntjes dat Speler 1 beweegt, bepaal je met de waarde Distance. Test vooral even met welke afstand je het liefste beweegt, want dit heeft effect op de snelheid van het batje. Nu we de beweging naar boven hebben geregeld, drukken we op F5 en opent de browser met het spel. Inderdaad beweegt nu het linkerbatje naar boven. We herhalen de bovenstaande stap (in Event Sheet kies je Add Event, Keyboard, Key is Down), maar vullen nu S in. Ook kiezen we Add action, en Move to Angle, maar dan het aantal graden zonder minteken. Met een distance van 5 beweegt speler 1 realistisch.
Voor speler 2 herhaal je eenvoudigweg de bovenstaande stappen, maar kies je de pijltjestoetsen links en rechts om het batje mee te bewegen. Zo kunnen 2 spelers op 1 toetsenbord tegen elkaar spelen.
Stap 3: het balletje en de ketsbewegingen
Klik je op het balletje, dan verschijnen links in het scherm de eigenschappen en gedragingen van de bal. Die zijn nu leeg, maar we voegen een Behavior, ofwel gedrag toe om de bal te bewegen. Klik links in het menu Properties op Behaviors, een blauwe link. Een nieuw menu opent, waarvandaan we op het plusje klikken om gedrag aan de bal te koppelen. Onder Movements kiezen we voor Bullet om de bal lekker hard een kant uit te knallen.Selecteer Bullet en klik op Add. Met het kruisje sluit je het menu.
Allemaal leuk en aardig, maar waar gaat de kogel naar toe? Testen we de layout met F5 dan zie je heel even een kogel naar rechts schieten en weg is ie. Daarom gaan we in de Event Sheet bepalen hoe de bal zich gedraagt. Ik wil dat het balletje aan het begin van de game stilstaat, dus voeg ik een algemene regel toe: klik op Add event en dan System.
Systeemregels bepalen hoe een layout of kamer begint. Ik kies voor Add Event, System en On Start of Layout. Dit betekent ‘aan het begin van het spel wil ik dat’... de bal stilstaat in dit geval. Druk ik nu op Add action en dan op de sprite voor de bal, dan verschijnen opties onder het gedrag Bullet. Kies voor Set Speed en dan voor 0. Een System Event bepaalt in Construct 2 veelal hoe onderdelen in de kamer zich bij aanvang van een level gedragen. Vooral het deel 'On start of layout' is belangrijk, omdat het een startsein is voor je spel.
Nu wil ik dat bij het indrukken van de spatiebalk de bal wegschiet in de richting van één van de spelers. Dat werkt gemakkelijk: voeg een Event toe en kies voor keyboard, dan On key pre ed. De toets in kwestie is de spatiebalk. We kiezen niet voor Key is down, omdat de actie voor dit geval eenmalig is. We willen dat de kogel wegvliegt totdat één van de spelers verliest.
Het event leest dus nu: Keyboard, On Space Pre ed. We willen dat de bal weer snelheid heeft (die we eerder hadden verlaagd tot 0) dus voegen we een actie toe (Add action) aan de bal. Kies bij het menu Add Action voor Set Bullet Speed en zet de waarde omhoog.
Check of je Event Sheet overeenkomt met de onderstaande afbeelding en test het met F5. Check ook in de layout of de waarde onder het bullet gedrag bij de bal (links in de layout, bij Properties) op Set Angle: yes staat. Dit zorgt ervoor dat jij bepaalt welke richting de bal opgaat.
Stap 4: het gedrag van de bal en de grenzen van het scherm
Test je nu het spel, dan zie je dat de bal gewoon door de batjes heen glijdt, wat logisch is. We hebben immers nog geen afspraken voor botsingen ingevoerd. Dat gaan we nu doen en het is erg gemakkelijk in Construct 2, omdat er al een stuiterfunctie bij het gedrag van de kogel (ofwel ‘behavior’ van de bal) zit.
Klik je op het tabblad Layout dan zie je links een overzicht van het gedrag van de objecten. Klik je op de bal dan verschijnen opties onder het menu Behaviors. Tik hier het pijltje aan bij Bounce off solids en kies voor Yes. Nu stuitert de bal terug indien het op objecten met de waarde Solid botst. Je raadt vast wat we nu met de batjes gaan doen: we gaan ze keihard (solid) maken. Ook dat is simpel.
Klik op Speler 1 en dan op Behaviors links in het scherm. Voeg met het plusje het gedrag Solid toe. Volg de stap voor Speler 2 en de batjes zijn gereed om de bal terug te ketsen. Ook wil ik dat de bal ketst op de muren boven en onderin, maar die ‘muren’ zijn er nog niet. We maken drie nieuwe objecten aan om Construct 2 te laten weten wat er gebeurt als de bal langs een batje gaat of tegen randen knalt. Maak een object dat je ‘stuitermuur’ noemt en leg het net boven en onder de layout (in het blauwe deel, dat onzichtbaar is in het spel). Maak dan nog twee balken, rood en groen, die de punten gaan tellen. Plaats ze naast het linker- en rechterbatje en je layout ziet er als volgt uit:
Stap 5: botsingen, een score toevoegen en het spel winnen
Het balletje vliegt inmiddels tu en de batjes, maar niet erg realistisch . Daarom voegen we iets toe aan de manier van stuiteren, met een formule uit Construct 2. Voor de duidelijkheid: formules hoef je niet te gebruiken, maar ze zijn handig wanneer je een bestaande actie wilt verbeteren. Ik wil bijvoorbeeld een betere stuiterbeweging in het spel brengen.
Net als in stap 3 (bij de snelheid van de kogel), pa en we nu het stuitergedrag aan. We doen dat met een nieuw Event in de Event Sheet. Klik op Add Event en selecteer het balletje. We kiezen dan onder het menu Collisions (botsingen) 'On collision with another object'. Dit betekent zoveel als 'wat gebeurt met het balletje wanneer het botst met.' Klik je op die functie dan mag je het object kiezen om mee te botsen.
Uiteraard botst het balletje met batje 1 en 2 (speler 1 en speler 2) en daarom gaan we voor beide batjes een nieuwe ‘stuiterregel’ instellen. We gaan de actie 'Set Bullet Angle' toevoegen om de kaatsbeweging soepeler te maken en wel met de formule random(30,-30). Experimenteer met hoeken als je een beweging wilt beïnvloeden. Dankzij deze formule kaatst de bal terug in wi elende richtingen!
Tenslotte de score, die we met een algemene spelregel (global variable) invoegen en met tekstobjecten. Ga naar de Event Sheet en gebruik een rechtermuisklik op een leeg schermdeel (bijvoorbeeld onder de laatste regel). Klik op Add Global Variable, noem de variabele Speler1 (met waarde Number) en herhaal de stap met Speler2.
Nu laten we het balletje botsen met de balken achter batje 1 en batje 2, zodat de variabelen punten tellen. In de Event sheet kies je Add Event, balletje als beginpunt en dan On colli ion with, om muren als ‘botspunten’ in te stellen. Groen, de ruimte achter batje 1 is een punt voor speler 2, rood andersom. Punten worden nu geteld maar moeten nog op het scherm komen.
Maak twee tekstobjecten aan (dubbelklik in de layout, kies voor Text). De inhoud maakt niet uit, maar plaats ze boven batje 1 en batje 2. Om een score dynamisch te maken moeten we een System event aanmaken. Klik op Add event, dan op System en kies Every tick. Voeg de actie ‘Set text to’ toe en selecteer het eerste gemaakte tekstobject. In het volgende scherm (parameters) vul je gewoon Speler1 in. Herhaal de stap zodat je twee van deze System Events hebt. Het resultaat: de tekst boven de batjes bevat altijd (Every tick) de actuele score.
En verder? Volg je de stappen dan heb je een werkende versie van Pong, doch zonder winnende partij! In de afbeelding hierboven vind je een hint. Kan jij met de eerste stappen het einde van het spel ‘programmeren’?
Merijn de Boer is recensent, maar nu even niet. Hij heeft twee maanden vrij genomen om een boek te schrijven over gamedesign. Met de input van een aantal ontwikkelaars en eigen ervaring gaat hij op zoek naar antwoorden op de volgende vragen: hoe maak je een game zoals Angry Birds of Doodle Jump? Kan je het alleen?