Maak zelf een internetgame
Wie geweldige ideeën heeft voor prachtige games maar niet kan programmeren, vindt in Construct 2 het ideale ontwikkelhulpje.
Wie geweldige ideeën heeft voor prachtige games maar niet kan programmeren, vindt in Construct 2 het ideale ontwikkelhulpje.
©CIDimport
Spellen maken was altijd specialistenwerk totdat de eerste programma’s verschenen die het schrijven van code overnamen en de gebruiker zijn visie lieten realiseren via invulschermen, sjablonen, voorgebakken figuren, enzovoort. Inmiddels spelen we steeds vaker online en dus moest er wel software komen voor het maken van internetgames.
Construct 2 is zo’n programma. Het maakt games voor onder andere de html5-standaard zodat ze in elke moderne browser te spelen zijn en… er is nog een gratis versie van ook!
In deze workshop onderzoeken we de mogelijkheden van Construct 2 en maken we ons eerste (begin van een) spelletje. Overigens vereisen ook systemen als Construct 2 dat u denkt als een programmeur, dus schrik niet als er af en toe een formule voorbijkomt.
©CIDimport
1 Downloaden en installeren
Construct 2 vinden we op www.scirra.com. Daar klikken we op ‘Download the free edition’ en slaan het bestand op in een map naar keuze (construct2-r95-setup_1487437.exe, 29 MB). We openen de map in Verkenner en starten het gedownloade programma. We klikken op Uitvoeren en geven UAC-toestemming. Vervolgens klikken we op Next, I accept, Next, Next, Next (hier kunt u ook handmatig opgeven of u een 32- of 64 bit-versie van Windows hebt), zetten een vinkje bij Create, klikken nogmaals op Next en op Install.
Na het kopiëren van bestanden verschijnt een nieuw venster waarvan de inhoud afhangt van uw systeem. Construct gebruikt voor het testen van html5-games bij voorkeur Google Chrome of Mozilla Firefox als browser (maar IE 9 kan ook). Indien nodig dient u één van de twee aan te vinken – de installer zal die dan afzonderlijk downloaden en installeren. Ongeacht uw systeem staat er altijd een vinkje bij ‘Check for graphics driver update’. Dat laten we aan staan en klikken op Finish. Deze controle start nu automatisch. We klikken op Volgende. U krijgt nu te zien of uw grafische stuurprogramma up-to-date is en eventueel een link waar u een nieuwe versie kunt downloaden en installeren. Klik als alles in orde is op Voltooien en start Construct 2 via het pictogram op het Bureaublad. De eerste keer wordt gevraagd of we op updates willen controleren. We klikken op Check. Vervolgens start het programma echt. Om een indruk te krijgen van de mogelijkheden klikken we op ‘Browse all examples’ en dubbelklikken op ‘Space Blaster game.capx’.
2 Spel testen
Het voorbeeldspel (een van de vele) starten we via de Afspeelknop (>) in de titelbalk van het venster of via Home, Run Layout. Onze standaardbrowser wordt nu gestart en het spel wordt daarin geopend. Het spel start vanzelf. U kunt bewegen met de pijltoetsen en schieten met de spatiebalk. Als u een idee hebt gekregen van de mogelijkheden, sluit u de browser en klikt in Construct op het tabblad Game Event. Hier ziet u het computerprogramma dat aan dit spel ten grondslag ligt. Dit is een stuk eenvoudiger en overzichtelijker dan een traditioneel computerprogramma, maar voor mensen zonder programmeerervaring toch zeer overweldigend. We gaan daarom stap-voor-stap zelf een – veel eenvoudiger – programmaatje maken om een idee te krijgen hoe het werkt.
3 Nieuw project
We sluiten deze versie van Construct en schakelen naar de andere actieve versie. Daar klikken we op Free Bundle Download. We klikken op OK, slaan het zip-bestand op in een map naar keuze en pakken het uit. Dit bestand bevat grafische elementen voor ons te maken spel (de commerciële versie van Construct bevat heel wat meer). Vervolgens klikken we op Create New Project. De ‘Single File’-optie laten we zoals-ie is en we klikken op Create Project. Er verschijnt midden in beeld een leeg vel en de tabbladen Layout 1 en Event sheet 1. Het eerste zal ons speelveld met objecten bevatten en het tweede de gedragsregels die ze moeten gaan volgen. Het venster Properties (links) bevat eigenschappen van geselecteerde objecten. Het venster Layers (rechtsboven) toont lagen in het tabblad Layers en project-onderdelen in het tabblad Projects. Het venster Objects bevat straks de elementen van ons spel: een variant op het aloude Asteroids.
4 Achtergrond toevoegen
Merk op dat bij Properties Window Size op 640x480 staat; de grootte van ons speelveld in de browser. We klikken ergens in het witte speelveld en zien dan bij Layout Size 1280x1024 staan. Dat veranderen we in 1024x1024 (de grootte van het achtergrondplaatje dat we gaan gebruiken). We dubbelklikken in het speelveld en kunnen dan allerlei elementen toevoegen. We kiezen Tiled Background (dubbelklikken) en klikken vervolgens weer ergens in het speelveld. In het popup-venster kiezen we het pictogram Load en laden vervolgens Background1.png uit de map Sprites\Space\Backgrounds van het uitgepakte zip-bestand. We sluiten de popup en zetten bij Properties Position op 0,0 en Size op 1024x1024. Met een druk op Enter wordt dit uitgevoerd. Zoom uit met Ctrl+muiswiel om het hele speelveld te zien. De functie Tiled Background kan ook dienen voor het toevoegen van een patroon dat automatisch steeds wordt herhaald.
5 Lagen en besturing toevoegen
In venster Layers, tabblad Layers ziet u Layer 0. Da’s weinig informatief. We klikken deze aan, toetsen F2 (hernoemen) en maken er Achtergrond van. We klikken op het Slot-pictogram om de laag op slot te zetten zodat hij beveiligd is tegen wijzigingen. Vervolgens klikken we op het +-pictogram om een laag toe te voegen boven Achtergrond. Deze noemen we Spelobjecten. Vervolgens dubbelklikken we op een lege plek in het Layout-venster en kiezen als object Mouse. Dat zelfde doen we voor Keyboard. Deze objecten zijn onzichtbaar, maar zorgen ervoor dat we zichtbare objecten in het spel kunnen bedienen.
©CIDimport
6 Sprites toevoegen
De bewegende elementen van een spel die op elkaar reageren worden aangeduid met de term Sprites. Deze kunt u toevoegen zoals achtergronden, maar de volgende methode is handiger. We verkleinen Construct 2 en openen in Verkenner de map Sprites\Space van het gedownloade zip-bestand. Uit de map Player slepen we nu player0000.png naar het midden van het speelveld en laten het daar los. We dubbelklikken erop, klikken in de popup op Rotate 90 clockwise en sluiten de popup. De raket wijst nu naar rechts. Dat is nodig om straks de goede kant op te kunnen schieten. Uit de map Rockets verslepen we rocket_type_A0004.png en laten die los links naast de achtergrond van het speelveld. Op de zelfde manier plaatsen we vier verschillende rotsblokken uit de map Rocks (u mag zelf weten welke) naast het speelveld. Tot slot plaatsen we daar Exp_type_A.gif (een animatie) uit de map Explosions. We sluiten Verkenner en maximaliseren Construct. Ons project ziet er nu uit als in de afbeelding .
7 Namen geven
Bij het maken van programma’s is het geven van goede namen belangrijk. In het venster Objects hernoemen we (F2) daarom player naar Ruimteschip, rocket naar Afweerraket, de vier rotsen naar Rots1 tot en met Rots4, Exp_type_A naar Explosie en TiledBackground naar Achtergrond.
©CIDimport
8 Gedrag bepalen
Ingebakken in Construct zitten allerlei standaardgedragingen die bij bepaalde speltypen behoren zoals shooters, platformgames, enzovoort. We klikken (eenmaal) op Ruimteschip en klikken dan bij Properties op Add/Edit achter Edit Behaviors. We klikken op + om een gedraging toe te voegen en dubbelklikken op 8 Direction zodat ons schip vrij kan ronddraaien. Op de zelfde manier voegen we toe ScrollTo (zodat het schip over de achtergrond vliegt) en BoundToLayout (zodat het niet van het speelveld valt – zie de afbeelding). We sluiten het Behaviors-venster en voegen op de zelfde manier aan Afweerraket het gedrag Bullet en Destroy Ouside Layout toe zodat hij in een rechte lijn beweegt en buiten het speelveld wordt opgeheven. Dat is belangrijk omdat er anders steeds meer (onzichtbare) raketten in het spel zouden rondvliegen die allemaal geheugen opeisen.
De vier rotsen krijgen alleen het gedrag Bullet en Wrap. Die laatste zorgt dat ze – eenmaal uit beeld gevlogen – aan de andere kant weer verschijnen. Hierdoor wordt het spel automatisch steeds moeilijker.
9 De eerste regel
We gaan naar het tabblad Event Sheet 1 om onze eerste programmaregel toe te voegen. In dit venster komen de instructies die meestal de vorm hebben “Als X gebeurt, doe dan Y” maar soms ook op zichzelf staan. We klikken op Add Event en dubbelklikken op System en op Every Tick. Dit creëert een opdracht om bij elke schermverversing (standaard 60x per seconde) iets te doen. Wat dan? Dat bepalen we door op Add Action te klikken. We willen dat ons ruimteschip de muispijl volgt en daarom dubbelklikken we op Ruimteschip en op Set Angle Toward Position. Bij X vullen we in Mouse.X en bij Y Mouse.Y. Construct geeft zelf mogelijkheden voor parameters en we kunnen hier ook berekeningen toepassen zoals Mouse.X + 100. Klik op Help On Expressions als u hier meer over wilt weten. Klik op Done en start het spel. De browser wordt geopend en uw schip volgt keurig de cursor, beweegt met de pijltoetsen en u ziet van links naar rechts rotsen voorbijvliegen. Sluit de browser en sla uw project op via File, Save As Single File. Geef als naam rotsen.capx.
10 Schieten
We willen bij het indrukken van de linkermuisknop een afweerraket afvuren vanuit de neus van ons ruimteschip. We voegen daarom een nieuwe gebeurtenis toe (Add Event) met als inhoud Mouse, On Click, Left, Clicked. De hieraan gekoppelde actie (Add Action) is Ruimteschip, Spawn another object, Afweerraket. Dit alles vindt plaats op Layer nr. 1. We klikken op Done en testen ons programma.
©CIDimport
11 Hotspot aanpassen
De raket schiet vanaf het midden van ons schip. We willen dat dat vanaf de neus gebeurt. In het tabblad Layout 1 dubbelklikken we op ons schip en klikken op Set Origin… We klikken op + en zetten (muisklik) een blauwe markering vlak voor de neus van het schip. We hebben nu een tweede hotspot gemaakt (met als nummer 1, de eerste is 0). We sluiten Image Points en Edit Image en keren terug naar Event Sheet 1. Daar dubbelklikken we op Spawn… (de manier om een commando achteraf te bewerken) en veranderen Image Point van 0 naar 1.
©CIDimport
12 Rotsen maken
We zouden de rotsen in ons speelveld kunnen plaatsen en er allerlei eigenschappen aan toe kunnen wijzen, maar wij willen ze het beeld in laten vliegen. We voegen daarom als Event toe System, Every X Seconds en vullen in random(3)+3. Hiermee wordt willekeurig tussen 3 en 6 seconden iets gedaan. Wat? Dat bepalen we weer met Add Action. We voegen toe System, Create Object, Rots1. Deze komt op Layer 1 en op locatie X=-100, Y=random(1024). Dat betekent op een willekeurige plek (random) links (-100) van het speelveld. Een tweede actie bepaalt de richting waarin de rots beweegt. Add Action, Rots1, Set Angle, random(360). Op dezelfde manier voegen we de rotsen 2, 3 en 4 toe vanaf boven, rechts van en onder het speelveld. Tip: met Ctrl+linkermuisknop kunt u complete programmaonderdelen kopiëren voor hergebruik.
©CIDimport
13 Botsingen
Wat gebeurt er als we met een raket een rots raken? Dat bepalen we in het volgende Event. Add Event: Afweerraket, On Collision With Another Object, Rots1. Hier kennen we de volgende acties aan toe: Rots1, Destroy – Afweerraket, Spawn Another Object, Explosie, Layer 1 – Afweerraket, Destroy. Op dezelfde manier maken we een Event met 3 Actions voor een botsing met Rots2, -3 en -4. Als we dit testen dan blijkt de ontploffing een groot zwart vierkant te bevatten. We selecteren daarom Explosie en veranderen bij Properties het Effect in Additive. De pixels van de explosie worden daarmee bij de achtergrond opgeteld en omdat zwarte pixels waarde 0 hebben zien we ze niet meer.
14 Variabelen
In veel games spelen getallen een rol, bijvoorbeeld de score of het aantal resterende levens. Deze waarden houden we bij in zogeheten variabelen. Construct kan waarden bijhouden voor objecten (via Properties, Edit Variables – bijvoorbeeld om ons ruimteschip een aflopende hoeveelheid brandstof te geven) of voor het hele spel. Dat laatste doen we voor de score. We rechtsklikken op een lege plek in de Event Sheet en kiezen Add Global Variable. We geven de naam Score en klikken OK. Aan de acties voor het vernietigen van Rots1 voegen we toe System, Add To om zo 1 bij de score te tellen. Dat zelfde doen we met de andere rotsen waarbij we achtereenvolgens 10, 100 en 1000 scoren.
15 Score weergeven
We maken een nieuwe laag (zie stap 5) en noemen die Info. We zetten Properties, Parallax op 0,0 om te zorgen dat deze laag niet met het schip meebeweegt. Op Layout 1 voegen we nu (zie stap 4) een Text-object toe. We plaatsen dit linksboven. Bij properties kiezen we voor Color een lichte kleur zoals wit en voor Font een grotere letter, bijvoorbeeld Arial Vet 24 punts. We maken het vak hoog genoeg om het woord Text te zien en lekker breed.
In ons programma voegen we bij Every Tick (regel 2) een Action toe om de score te tonen: Text, Set Text. We vullen in “Score = ”&score. Dit toont de tekst Score = met daarachter de waarde van de variabele Score.
16 Puntjes op de i
Bij botsingen van een van de vier rotsen met ons schip moet die laatste vernietigd worden. U weet dankzij stap 12 hoe dat moet. Rotsen die niet het beeld invliegen moeten eigenlijk ook vernietigd worden, anders nemen ze steeds meer geheugen in. Dat kan door de beginhoek van random(360) aan te passen. Aan u om uit te pluizen hoe! Dat geldt ook voor het toevoegen van geluid, menu’s, enzovoort. U kunt hier ons iets meer aangeklede spel downloaden (rotsen final.capx). Dit is voorzien van aanvullend commentaar. Als u klaar bent met uw project kiest u voor File, Export To om er een html5-website (of een app in één of ander formaat) van te maken.
©CIDimport
Wedstrijd
Wilt u zelf met Scirra Construct aan de slag om iets veel beters en mooiers te maken dan ons bescheiden voorbeeld hier? Dan zijn we uiteraard razend benieuwd naar het resultaat van uw inspanningen! Daarom schrijven we een wedstrijd uit voor enthousiaste spelknutselaars, waarmee u kans maakt op topgames als Batman, Lord Of The Rings, Lego Harry Potter, F.E.A.R, Far Cry, Assassin’s Creed, Worms Crazy Golf, Darksiders, Heroes of Night, Rainbow Six.
Doet u mee? Stuur dan voor 9 oktober een mailtje naar redactie@id.nl met als onderwerp Spel. Voeghet Single File-capx-bestand van uw spel toe als bijlage engeef een korte beschrijving van hoe het spel gespeeld wordt. De redactie beoordeelt de inzendingen zowel op amusementswaarde als op het slim benutten van de mogelijkheden van Construct. Laat uw creativiteit spreken en verras ons met uw zelfgemaakte spel! De winnaars worden bekendgemaakt in Computer Idee nummer 24.
Deze workshop komt uit Computer Idee nummer 20, jaargang 2012.
