ID.nl logo
Maak zelf een internetgame
© CIDimport
Huis

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.

▼ Volgende artikel
Waar voor je geld: vijf 55-inch televisies geschikt voor kabel-tv
© ID.nl
Huis

Waar voor je geld: vijf 55-inch televisies geschikt voor kabel-tv

In de rubriek Waar voor je geld gaan we een aantal keer per week op zoek naar de beste producten waar je niet de hoofdprijs voor betaalt. Dit keer kijken we naar 55-inch televisies die voorzien zijn van een CI+-sleuf voor kabel-tv. We vonden 5 modellen voor minder dan 600 euro.

Wanneer je tv afneemt van een kabelexploitant zoals Ziggo of Caiway, kun je de ingebouwde gids van je (smart)tv gebruiken. Het werkt vaak ook bij Digitenne en CanalDigitaal. Om gecodeerde kanalen te kunnen kijken heb je echter wel een CI+-module nodig. Die krjig je van je tv-provider en plaats je in de speciale sleuf achter in de televisie.

Niet alle televisies hebben zo'n sleuf, maar wij hebben vijf betaalbare tv's gevonden die er wel eentje hebben. Deze televisies zijn dus geschikt voor tv-kijken via de kabel, bij Ziggo en Caiway. Uiteraard kun je door middel van een apart aan te sluiten kastje ook televisie kijken van providers die IPTV (televisie via de internetverbinding) aanbieden, zoals Odido of KPN.

TCL P6K

Deze TCL 55‑inch (2025) levert een prettige kijkervaring met zijn Google TV‑platform en zorgvuldige smart‑functies zoals AirPlay, HbbTV en spelmodi. Je plaatst eenvoudig je CI+‑module voor tv vanuit de DVB‑tuner. Hij toont de programma’s via een overzichtelijke EPG over acht dagen, inclusief automatische volumeregeling. De tv is voorzien van drie HDMI‑ingangen (HDMI 2.1), HDMI‑ARC en een strak metalen design. Dankzij 4K‑resolutie en HDR‑support (HDR10, HLG) zie je scherpe kleuren. Een moderne keuze met slimme tv‑features in huis.

Geschikte tv-signalen: DVB‑C, DVB‑S2, DVB‑T2
Besturingssysteem: Google TV

Hisense 55U6NQ

De Hisense U6NQ is een 55‑inch mini‑LED smart‑tv (model 2024), uitgerust met het VIDAA U7‑besturingssysteem. In de tunerset vind je alle gangbare signalen: DVB‑T2, DVB‑C en satelliet DVB‑S2. Zo gebruik je met een CI+‑module je zenders moeiteloos. De EPG verschijnt overzichtelijk op het scherm en de beeldkwaliteit is helder dankzij 4K‑resolutie, HDR10+, Dolby Vision en een krachtige processor. Daarnaast ondersteunt hij Bluetooth, Wi‑Fi en biedt hij een moderne kijkervaring zonder poespas: gewoon goed en gebruiksvriendelijk.

Geschikte tv-signalen: DVB‑T/T2, DVB‑C, DVB‑S/S2
Besturingssysteem: VIDAA U7

Samsung U7070F

De Samsung 55 U7070F is een 55‑inch Crystal UHD‑smart‑tv uit 2025, herkenbaar aan zijn strakke, frameloze ontwerp. Je kunt ervoor kiezen zenders te ontvangen via een klassieke coax‑kabel (analoog) of moderne digitale tuners (DVB‑T2, DVB‑C, DVB‑S2). Hij draait op Tizen, waardoor apps eenvoudig toegankelijk zijn, en bevatten functies zoals AirPlay 2, smart home‑integratie en een ingebouwde webbrowser. alles wat je verwacht.

Geschikte tv-signalen: DVB‑T/T2, DVB‑C, DVB‑S/S2
Besturingssysteem: Tizen OS

Philips 55PUS7800 

Deze Philips‑tv (2025-model) combineert een QLED‑scherm met 4K‑Ultra HD in een 55‑inch formaat. Je kunt simpelweg je CI+‑module inbrengen dankzij de ingebouwde Common Interface. Hij ondersteunt alle standaard digitale formaten: DVB‑T2, DVB‑C en satelliet via DVB‑S2. Hij toont programma’s via een elektronische gids (EPG) in beeld. Het scherm is solide met direct‑LED‑backlight, QLED‑kleuren en een Smart TV‑omgeving. Door de verlichting en discrete bediening houdt hij het helder en functioneel, zonder gedoe.

Geschikte tv-signalen
: DVB‑T/T2, DVB‑C, DVB‑S/S2
Besturingssysteem: Titan OS

LG 55NANO81T6A

Deze LG Nanocell van 55‑inch - een tv uitgebracht in 2024) - draait op webOS 24 en ondersteunt alle gangbare digitale tuners, plus een CI‑slot voor CI+‑modules. De programmagids verschijnt netjes in beeld, waardoor je snel kunt zien wat er komt. Het scherm geeft heldere beelden weer met pure kleuren dankzij Nanocell‑technologie en ondersteunt HDR10 en HLG. Hij is eenvoudig in gebruik met drie HDMI‑poorten, eARC‑geluidsuitvoer en Bluetooth. De tv roept geen overweldigende marketing op, maar levert wel degelijk beeld én gebruiksgemak.

Geschikte tv-signalen
: DVB‑T2, DVB‑C, DVB‑S2
Besturingssysteem: webOS 24

▼ Volgende artikel
Waarom de 112NL-app onmisbaar is in noodsituaties
© Andrey Popov
Huis

Waarom de 112NL-app onmisbaar is in noodsituaties

De dood van de 17-jarige Lisa uit Abcoude heeft in heel Nederland veel losgemaakt. Tienduizenden mensen installeerden in korte tijd de 112NL-app, de officiële noodhulp-app van politie, brandweer, ambulance en marechaussee. Wat is dit precies voor app, hoe werkt hij en waarom is het verstandig om hem zelf te installeren?

In het kort
  • De 112NL-app is de officiële noodhulp-app van de overheid
  • Bij een oproep worden automatisch je locatie en gegevens meegestuurd
  • Als praten niet kan, schakel je over naar chat met de meldkamer
  • Installatie is gratis en binnen enkele minuten geregeld
  • Inmiddels gebruiken ruim 450.000 Nederlanders de app

De 112NL-app is ontwikkeld om burgers sneller en effectiever in contact te brengen met de meldkamer. Waar een gewone oproep via het alarmnummer afhankelijk is van wat iemand in paniek kan vertellen, stuurt de app automatisch belangrijke gegevens mee. Denk aan je naam, telefoonnummer, taalvoorkeur en vooral je locatie. Ook kun je aangeven of je slechthorend bent of moeite hebt met spreken. Dat helpt centralisten direct te begrijpen wat er speelt en welke hulp het meest passend is.

©ER | ID.nl

Hoe werkt het in de praktijk?

Wie via de app een noodoproep doet, belt in feite gewoon 112. Het verschil zit 'm in de achtergrond. De meldkamer ontvangt automatisch de opgeslagen gegevens, waardoor er geen tijd verloren gaat met uitleggen waar je bent of wat je beperkingen zijn. Als praten onmogelijk of onveilig is, kan de centralist het gesprek omzetten naar chat. Zo kun je toch cruciale informatie doorgeven zonder een woord te zeggen. Deze optie is niet alleen handig bij gehoor- of spraakproblemen, maar ook in situaties waarin stilte geboden is, zoals bij een inbraak.

©ER | ID.nl

Eenvoudig te installeren

De app is gratis beschikbaar voor iOS en Android. Na installatie voer je je persoonlijke gegevens in en geef je toestemming voor het delen van je locatie. Dat klinkt technisch, maar in de praktijk is het in een paar tellen geregeld. Vanaf dat moment ben je voorbereid: met één druk op de knop staan je gegevens klaar en weet de meldkamer direct wie je bent en wáár je bent.

Waarom is dit nuttig?

De enorme stijging in downloads toont aan dat veel Nederlanders de behoefte voelen om beter voorbereid te zijn op noodsituaties. De app verkleint de kans dat kostbare tijd verloren gaat en kan in extreme gevallen het verschil maken tussen leven en dood. Het is hoe dan ook een praktische manier om jezelf en je omgeving net wat veiliger te maken.