These slides are depricated. Instead go to this github repository

Game Programming Patterns in JS

part of 3d tech for the web course

Aims and Objectives

Recognise Patterns

Code Them Up

Understand Their Motivations

Audience

Novice JS programmers who want to make 3d web games or similar systems

What is a Pattern?

Architectural Patterns

Software Design Pattern?

What is a Game Programming Pattern?

Some Patterns

Game Loop
Update Method
Entity
Singleton
Object Pool
Prototype
Component
Service

Types of Patterns

Structural	Arrangement or structure of the code, or the software objects
Sequence	Controlling the order of execution
Decoupling	Separation of software objects and types so they can be manipulated independantly
Optimisation	Reducing computation, speeding up execution, reducing memory use.

Game Loop

What	Runs continuously, processes user input without blocking, updates game state, and renders the game. Tracks the passage of time to control the rate of gameplay
Why	Decouple game time from user input and processor speed. Real Time systems run continuously and very quickly to create an illusion of continuous reality


var animate = function () {
    requestAnimationFrame( animate );

    processInput();
    updateEntities();
    renderScene(scene, camera);
};

Game Object

What	Many (most) of the objects in your system will have something in common which is necessary for them to participate in the simulation.
Why	Because they all are part of the same simulation you dont want to re-write the code each time.


        class GameObject {
    constructor(x, y, z){
        this.x = x;
        this.y = y;
        this.z = z;
    };
    //...
}

class Player extends GameObject { constructor(){}; }
class Enemy extends GameObject { constructor(){}; }
class Nazi extends Enemy { constructor(){}; }

Update Method

What	The game world maintains a collection of objects. Each object implements an update method that simulates one frame of the object’s behavior. Each frame, the game updates every object in the collection.
Why	Your game has a number of objects or systems that need to run simultaneously. Each object’s behavior is mostly independent of the others. The objects need to be simulated over time.


        class GameObject {
    constructor(x, y) {this.x = x; this.y=y}
    Update() {
        //...
    }
}

while (gameOn)
{
    handleInput();
    for (int i = 0; i < numEntities; i++)
    {
      entities[i]->update();
    }
    renderScene(camera, scene);
}

(pseudocode)

Object Pool

What	Efficiently use memory for a large set of very similar objects likely with a short lifetime.
Why	Reducing memory fragmentation through reusing the same object again and again.


        class Footprint {
    constructor() {this.initialise(0, 0, 0);}
    initialise(x, z, colour) {this.x = x; this.z=z; this.colour = colour;}
}

class FootprintPool {
    constructor(size) {
        this.size = size; this.new = 0;
        for (var n=0; n < this.size; n++) {
            this.poolArray.push(new Footprint(0,0,0));
        }
    };

    NewFootprint(x, y, z, c) {
        this.poolArray[new].initialise(x, z, c);
        this.new = this.new + 1;
        if (this.new>=this.size) {this.new = 0;}
    }
}

Singeton

What	Ensure a class has only one instance, and provide a global point of access to it
Why	Useful when exactly one object is needed to coordinate actions across the entire system


var Singleton = (function () {
    var instance;

    function createInstance() {
        var object = new Object("I am the instance");
        return object;
    }

    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

Prototype Spawner

class Spawner
{
    constructor(){
        this.proto = prototype;
    }

    SpawnMonster() {
        return proto.clone();
    }
    Monster proto;
};

More Patterns

Component	Separate generic functions into sub-objects and composite together
Service	Like a Game Loop, but instead of handling Entities, handles specific behaviours within components
Flyweight	Move all the common logic and shared data of a class into a single larger object. Maintain separate simpler objects only for the unique features.
Spatial Partition	Cut the space of the world into smaller parts and deal with them only when necessary
Scene Graph	Linked Structure of every Entity/Object in your world