Inleiding

Een gameloop is het hart van een game. Hier wordt bepaald met welke frames per seconde (FPS) de game moet gaan draaien. Heel concreet gezien is een gameloop een functie die achter elkaar wordt uitgevoerd en definieert wat er op de huidige frame moet gebeuren. Ik gebruik de metafoor van een menselijk hart, omdat een hart van een mens ook continuiteit heeft en zorgt voor de klokfunctie van het menselijke apparaat.

Een gameloop gaat dus over timing: hoeveel tijd heeft een frame om uit te voeren en getekend te worden? Binnen een gameloop worden meestal de functie update en draw uitgevoerd.

update() is de functie die alle bewegende delen van de entiteiten ververst draw() is de functie die alle onderdelen/entiteiten op het scherm gaat tekenen

De update en draw kan natuurlijk ook delegeren naar game-objecten, zoals hieronder in pseudocode wordt beschreven. Let op, dit is dus voorbeeldcode die je niet hoeft over te nemen. De update en draw zouden bijvoorbeeld onderdeel kunnen zijn van een Game-class.

update() {
   player.update();
   enemy.update();
   mushroom.update();
}

draw() {
	player.draw();
  enemy.draw();
  mushroom.draw();
}

Wat is een entiteit? Een entiteit is een algemeen woord voor bijvoorbeeld een game-element, zoals een Player of een Enemy of een Mushroom.

setInterval

De meest simpele gameloop kan je maken met setInterval().

De functie setInterval accepteert twee parameters:

• Een arrow-function of anonimous-function die uitvoert wat er binnen een frame gebeurt.
• Een interval (getal) uitgedrukt in milliseconden.

Onderstaande voorbeeld schetst hoe je setInterval kan inzetten voor de aanmaak van een gameloop. Een seconde is 1000 milliseconden, dus als we second delen door fps, dan krijg je ongeveer 16.66666666 milliseconden per herhaling. Vervolgens wordt er een console.log uitgevoerd om het concept van de gameloop aan te tonen. Hij werkt!

const fps = 60;
const second = 1000;
const interval = second / fps;

setInterval(() => {
    console.log("render frame!");
}, interval);

https://www.w3schools.com/jsref/met_win_setinterval.asp

Echter, deze manier met setInterval wordt voor games afgeraden, omdat het kan zorgen voor lag/latency. Als de frame niet kan worden getekend binnen de bij setInterval gestelde tijd, dan ontstaat er vertraging die de vloeiende doorstroom zal belemmeren binnen de animatie van de game. Hij zal dan stotteren en het geheel zal niet de gewenste gebruikerservaring hebben.

Maar gelukkig is er requestAnimationFrame to-the-resque!