CH. 02 Game Loop [JS Game Dev Tutorial]

Game Loops

Intro to game loops

Pre-Note: this is not the only way to do this; this is just my way. There are probably better or worse ways of doing this so don't be too confident with this approach!

A game loop is just an infinite loop that, conventionally, calls three functions at a certain time.

A side note, it is ideal to program loops using concurrency (threads, mutexes, future/promise), but since JS has been synchronous for a long time, it will work smoothly even without it. I recommend using Google Chrome for best results (use developer tools > more tools > performance monitor and ... more tools > Rendering for a deeper look), Firefox if Chrome isn't an option. Others I can't guarantee smooth performance.

getInput: gets the input from any peripherals that send an event to the program. Examples are mouse, keyboards, printers, scanners, game controllers, joysticks, microphones, drawing tablets, etc.

Things you may find in this method are: keymanagers and event queues. Keymanagers tell the program if a key has been pressed and which one, then the update function will determine what to do with that information. Event queues are not really used anymore, as the OS and many game engines and game engine library creators (such as SDL and FreeGLUT) handle this very well. They just push an event to a queue and pop from the queue and manage what has been popped. More on event queues with visuals.

update: updates everything that has to be updated (player, enemies, clocks, events, menus). Here is where all the math and logic is done.

As you can probably tell, the input also gets handled here because an input can change the way things are updated.

render: handles all the drawing. I have seen some people use rendering and updating in one function; the problem with that is that it won't do precise rendering.

Rendering should be done after all the components have been updated. Rendering is, after all, a visual of the update; we dont want to draw before the update is complete or else inaccurate placements would occur.

NOTE: I call render when we want to draw the entire scene, draw is for drawing individual scene objects.
```
// It would look something as follows
/*
    Since JS is synchronous, it will 
    NOT look like this in this course
*/
while(gameIsRunning){
    getInput();
    updateLogic();
    render();
}
                            
```
Time

This is an advanced topic and we will not be using it throughout this course! Feel free to skip it! I just put it here ~~to make this chapter longer~~ for people that plan on taking game programming seriously; a little something of "what to expect."

As mentioned above, game loops should run at a certain time; this is where the term frame capping comes from.

Time is fixed, a second for me will be a second for you, no matter what (forget time perception here).

CPU clock cycles, on the other hand, vary. A 500MHz CPU will run slower than an 8GHz CPU, no doubt about it; therefore a game that is not frame capped will run a lot faster in the 8GHz machine.

In order to prevent this, we use time as a factor to update our game (it is known as delta time).

Since we will not be using this method, I will not go too in depth into it but basically: we get the system time when the start of the loop was called (usually in ms or ns), delta time is incremented by the loop start minus the last time the loop started divided by target frames in ms or ns, the last time is now set to the time this current loop started, check if delta time meets your criteria, update the game logic, reset delta time, put the thread to sleep, render, and continue after X time (usually in less than or equal to 1 second).

There is more math to this such as Pixel-Per-Meter (great for physics simulations), or how many pixels is X TIME in respect to delta time, but I will not be showing that.
Demo

In the old days, we used setInterval for game loops, which isn't bad (I started off with it), but you will still have to consider time, as mentioned above, since setInterval doesn't consider appropriate animation times.

There now exists requestAnimationFrame wich will try to animate at 60FPS and does a good job at it. Sometimes you will still have to consider frame capping, but not about 80% of the time (real time [multiplayer] games would be recommended to frame cap). For more on this, read this article. I recommend learning frame capping if you want to take game programming seriously.

At first, our canvas drawings were static. Just set an x and y and that is it! Now how can we animate them? RPG games aren't exactly static...

By incrementing and decrementing every time the loop is ready!!

Play with the values below. Game objects will be the next chapter so dont worry about this syntax! Better to look at the JS tab for the loop code.

Challenges:

-Make the object move backwards

-Make it show only a border on the player (refer to previous chapter)

-Constraint its movement to inside the canvas only (you will need to use x, y , width, and height values for this).

-Make it bounce if it hits the border (same as above; mix the constraint and backwards movement)

-Make it move in a circle or ellipse (trigonometry; you might need to add a variable or 2 to the object)

-Make two squares show up on screen and update (you WILL need to do edits in the JS tab).
```
player = {
    x: 0,  // x coordinate
    y: 0,  // y coordinate
    width: 16,  // in pixels
    height: 16, // in pixels
    
    speedX: 0, // increment pixel per update on X
    speedY: 0, // increment pixel per update on Y
    
    color: [120, 56, 204], // RGB color
    
    update: function(){
        // Update math
        // X and Y position are now influenced by speed's value
        this.x += this.speedX;
        this.y += this.speedY;
    },
    // Careful if changing this
    draw: function(){
        ctx.fillStyle = "rgb(" + this.color + ")";
        ctx.fillRect(this.x, this.y, this.width, this.height)
    }
}
                            
```
This was more of an explanation than a hands-on show-how, but looking at the JS tab should be a whole lot easier to decipher now.

This may also be the last time I add a run code section in order for you to type everything out from scratch; plus things will get extremely lengthy from now on, so it wouldn't be very efficient. This helps in the learning process as well!

If you made a new square from scratch (SPOILER retyping the object but with a different variable name), you see that is a hassle... what if we want hundreds of objects! Not fun to type and type the same thing over again!

In the next chapter we will make this easier with objects and classes, plus introduce the initialization of objects. See you soon!

CH. 02 Game Loop

Game Loops

Intro to game loops

Time

Demo

CH 02 Game Loop [JS Game Dev Tutorial]