Download vooraf eerst even de nieuwste versie van Construct 2 via deze link.

Eerder las je op gamer.nl al hoe je Pong maakte in ongeveer 15 minuten. We maken ook nu onze eigen onderdelen en hierdoor gaat het spel er snel nogal Thomas Was Alone-achtig uitzien. Helemaal geen probleem natuurlijk, want heb je door hoe het werkt, dan kun je je eigen graphics over het blokje dat we hier als speler gebruiken leggen. In dit deel lees je over de eerste stappen voor het maken van een endless runner à la Canabalt of Jetpack Joyride, te beginnen bij de speler en het platform.

Blokje als speler: wat is een player box?

Het is bij platformspellen en autorunners handig om eerst een ontwerp te maken met slechts een blokje, want hierdoor hoef je acties maar aan één object te koppelen (in plaats van het rennen koppelen aan een rennend object, springen aan een springend object etc.). We spreken hier over een ‘player box’, ofwel een vierkantje dat springt, rent en alle benodigde gedragingen bevat. Later plak je bijvoorbeeld bij registratie van een druk op de spatiebalk een animatie of plaatje over het blokje en koppel je waar nodig andere plaatjes en animaties aan acties. Is het spel compleet, dan maak je het blokje onzichtbaar, hoewel het nog wel alle acties en eigenschappen van een speler bevat. Om je wat meer te verklappen over de eigenschappen van een endless runner, zijn hier alvast wat tips:

 -   De speler beweegt niet echt, omdat het level als een kogel op de speler afschiet, wat de suggestie van beweging geeft;
 -   Alle objecten in het spel hebben het gedrag van een kogel, behalve de speler;
 -   Slechts één knop is vereist, deze is om te springen;

  •  

Voorbeeld bij de software

Construct 2 heeft een sjabloon van een autorunner voor je klaar staan, maar het valt op dat bij dit voorbeeld code wordt gebruikt. Er is bovendien weinig uitleg over het gebruik van de code en daarom versimpelen we het voorbeeld. We verbeteren het sjabloon zelfs, want in ons voorbeeld is de sprong incrementeel, wat betekent dat je hoger springt als je de spatiebalk ingedrukt houdt (of je vinger langer op het scherm houdt bij een aanraakscherm). Benieuwd? Construct 2 geïnstalleerd? Laten we snel beginnen!

Stap 1: het prepareren van de kamer (of layout)

We houden het simpel en maken een layout van 640x480, door te klikken op File, New en dan New empty project. Construct 2 opent een standaard scherm, met één layout en één event sheet. Wat opvalt is de standaardgrootte die Construct 2 kiest, want die lijkt 640x480, maar dit betreft de venstergrootte (niet de layoutgrootte). We willen een spel met de resolutie van 640x480 en klik je in de layout dan zie je dat deze op 1280x1024 staat. Klik op Layout Size in de eigenschappen links en pas de maten aan naar 640x480.

We maken eerst de speler en een platform in de grafische editor van Construct 2. Ga naar de layout met de muiscursor en dubbelklik in het midden van het scherm. Kies Sprite uit de opties (dubbelklik het of klik een keer gevolgd door Insert) en klik met het kruisje op het scherm. Teken een rechthoek in het midden van het vierkantje (selecteer eerst het rectangle-gereedschap uit de gereedschapsbalk links) en teken een rechthoek in een gewenste kleur. Klik op Crop transparent edges (bovenin) om de rechthoek bij te snijden en sluit het venster. Je speler is klaar.

Wat nu nog mist is een platform, dat we op dezelfde manier maken als bij de speler. Ga naar de layout met de muiscursor en dubbelklik in het midden van het scherm. Kies Sprite uit de opties (dubbelklik deze of selecteer het en klik op Insert). Klik op een gewenste plek in de layout. Teken een liggende rechthoek in het midden van het vierkantje (met het rectangle-gereedschap geselecteerd in de werkbalk) en teken het platform in een gewenste kleur. Om het later goed te laten werken, passen we de grootte van het platform aan in de grafische bewerker bovenin het scherm. Naast de knop Crop transparent edges zit de knop Resize. Klik hierop en voer 1280 bij breedte en 250 bij hoogte in. We kiezen voor een waarde die twee keer zo breed is als de layout, omdat op deze manier de platformen bij beweging tijd hebben om buiten het scherm aan elkaar te klikken. Hier komen we in stap 2 op terug. Plaats het platform onder de speler, zodat je meteen een idee van een speelscherm hebt (zie de laatste afbeelding bij dit artikel).

Het zal opvallen dat de twee sprites die je toevoegde Sprite 1 en Sprite 2 heten. Voor de duidelijkheid passen we deze namen aan door op ze te klikken in de Object bar rechtsonder in het scherm. Klik één keer om te selecteren en daarna nog een keer om de titel te veranderen. Je kunt ook een sprite aanklikken en de naam veranderen in het eigenschappenscherm links. Noem nu de speler-sprite “Speler” en de platform-sprite “Platform”.

Toevoegen van gedrag

De speler moet kunnen springen, een gedrag dat al in Construct 2 zit ingebakken. Klik op de speler in de layout en klik daarna op de blauwe Behaviors-link aan de linkerkant van het scherm (onder de eigenschappen van het object). Klik op het plusteken en kies het gedrag Platform uit de lijst. Dubbelklik deze of selecteer het en klik Add. Aangezien we alleen de springfunctie gebruiken, passen we de waarden van het platformgedrag aan, ook in de eigenschappen van de speler-sprite - aan de linkerkant van het scherm. Klik het dropdownmenu bij Default Controls en zet de waarde op No. Nu kiezen we zelf welke van de ingebakken richtingen (links, rechts, omhoog) we gebruiken.

Nu het platform, dat drie gedragingen meekrijgt: Solid (vast, zodat de speler er niet doorheen valt), Bullet (het platform vliegt als een kogel het scherm in) en Pin (meerdere platforms worden hiermee aan elkaar gevlochten).

Klik op het platform in de layout, dan op de blauwe Behaviors-link aan de linkerkant van het scherm (onder de eigenschappen van het object). Klik op het plusteken en selecteer het Solid-gedrag. Dubbelklik het of klik het één keer gevolgd door Add. Doordat het platform nu solide is en nog niet wegschiet hebben we de mogelijkheid om te testen of de speler kan springen. Later voegen we de andere behaviors toe.

Besturing toevoegen

Zonder invoerapparaat geen beweging, dus we voegen een keyboard toe aan het hele project. Dubbelklik de layout en selecteer Keyboard door het te dubbelklikken (een melding op het scherm laat zien dat het is toegevoegd). Laten we meteen de speler voorzien van een springfunctie in de event sheet. Open het tabblad door op Event sheet 1 te klikken, voeg dan een event toe met Add event. We koppelen de spatiebalk aan een sprong door in het volgende menu een regel vanuit het ‘object’ van het keyboard te maken. Dubbelklik dus Keyboard in het onderstaande scherm:

De opties voor toetsen verschijnen en we kiezen voor On key pressed. Dubbelklik deze voorwaarde en klik in het volgende scherm op de knop . Een nieuw scherm opent waar je op de spatiebalk drukt om de toets te activeren. De voorwaarde, ofwel het event, leest nu: “Keyboard, On Space pressed.” Tijd om de actie toe te voegen, die de speler z’n enige beweging geeft: de sprong. Klik op Add action achter het bovengenoemde event en dubbelklik de sprite van de speler in het scherm dat opent. Omdat de speler het platformgedrag heeft, staan er nogal wat opties met het oog op platformgames in het nieuwe scherm. We kiezen voor Simulate control gevolgd door Jump in het menu voor parameters. De speler kan nu springen.

Testen en het spel verbeteren

Druk op F5 of klik op Run layout en de speler springt bij het drukken op de spatiebalk. De sprong is echter niet realistisch, omdat het een vaste hoogte betreft. Spelers willen uitdaging en een eerlijk spel, wat met een simpele extra regel is op te lossen. Allereerst gaan we terug naar het event Keyboard, On Space pressed en voegen we een actie toe. Klik dus op Add action en dubbelklik de speler. We gaan de zwaartekracht aanpassen terwijl je op de spatiebalk drukt. Zoek bij de acties onder de speler naar de functie Set gravity, dubbelklik deze en vul 1500 in. Dit is de standaardwaarde bij een sprong (gekoppeld aan het platformgedrag) en de sprong is vrij hoog bij deze waarde.

Nu voegen we een event toe dat registreert of de spatiebalk is losgelaten en vervolgens verhogen we de zwaartekracht als dit het geval is. De uitkomst is als je erover nadenkt logisch: een ingedrukte spatiebalk levert (tijdelijk) een zwaartekracht van 1500, is er geen toets ingedrukt dan stijgt de kracht naar 3000. Het gevolg is een sprong in twee stappen. Klik op Add event en dubbelklik Keyboard. Kies nu voor On key released en selecteer daarna de spatiebalk. Het event leest Keyboard, On Space released. Voeg bij dit event een actie toe en kies de speler als beginobject. Selecteer in het volgende scherm weer Set gravity, dubbelklik deze functie en vul 3000 in. Uiteindelijk heb je twee events en drie acties, wat er zo uitziet:

Test je nu het spel (F5), dan maak je een kleine sprong door de spatiebalk kort in te drukken en een grote sprong door de spatiebalk langer in te drukken. Een mooi begin van een vrij geavanceerde endless runner! Als afsluiter noemen we nog even twee spellen waarbij je deze verschillen goed ziet: Banana Kong heeft geen incrementele sprongen, Run Sheldon wél. De spellen zijn gratis te downloaden en illustreren ongeveer wat je kan maken na deze les, die de komende weken in drie delen verschijnt. Heb je tot nu toe vragen of opmerkingen, laat het ons dan weten in de reacties. Tot volgende week!

Volgende week: stap 2 - oneindige platformen en valkuilen maken