Update Pattern – Creating Classes That Run Actively

Introduction

A lot of times when creating plugins for RMMV, creating classes and systems usually take the form of modifications to the base code. And that’s okay, but usually to check a process running on a scene, or to have our new class actively make changes, or update itself, we have to insert our new class

Well, there is a way to do it; You can create an update method using requestAnimationFrame. A good example of this pattern can be seen in the SceneManager static class.

//SceneManager update Example

//SceneManager run method, which has this interesting requestUpdate method.
SceneManager.run = function(sceneClass) {
    try {
        this.initialize();
        this.goto(sceneClass);
        this.requestUpdate();
    } catch (e) {
        this.catchException(e);
    }
};

//requestUpdate method, which binds a new version of SceneManager's update function, and passes it to requestAnimationFrame.
SceneManager.requestUpdate = function() {
    if (!this._stopped) {
        requestAnimationFrame(this.update.bind(this));
    }
};

//The update method, which is being bound and being used, and repeated every frame.
SceneManager.update = function() {
    try {
        this.tickStart();
        this.updateMain();
        this.tickEnd();
    } catch (e) {
        this.catchException(e);
    }
};

//This is called by update, which then interesting enough calls requestUpdate  to start a feedback loop
SceneManager.updateMain = function() {

/* Lots of Code for updating things */
  
  //RequestUpdate is called again to bind our update again, and execute for another frame.
    this.requestUpdate();
};

The important thing to notice here is that requestUpdate to pass SceneManager’s update to requestAnimationFrame. In this case, requestUpdate acts as an entry point to start the update method. This is great, because we can use this in our own code to create new structures that can be used in game without using the base code. By doing this, we can make our own timers for example, or actively check if something is going on in game without making major changes to the base code.

Some important things to note is this bind method.

Bind

Binding in JavaScript basically lets you create a function with preset parameters, to be called later if you want. This can be used to create functions, that you can bind to clicking commands on a window for example; a very useful thing when you want to reuse your class methods.

/AutoRunner

function AutoRunner() {
  this._boundFunction = null; 
}

//takes a function and stores it in a variable
AutoRunner.bindFunctionToCall = function(fnc) {
  this._boundFunction = fnc;
}

//Executes the function stored in a variable
AutoRunner.executeBoundFunction = function() {
  this._boundFunction()
}

//Example of binding a function with specified parameters
function speak(text){
  console.log(text);
}

AutoRunner.bindFunctionToCall(speak.bind(this, "I'll Just say Hello at a later time"));
AutoRunner.executeBoundFunction();

If you test that, the function is called whenever we need it, instead of being called immediately; this is a cool trick to use, because it will always say the same thing, so it can be useful when we want the same result for commands for example.

Now, if we wanted to make a class that can be update itself, we need to use bind, and smart function calls, using the below pattern.
Code Pattern Example

function MyTimer() {
  this.initialize.apply(this, arguments)
}

MyTimer.prototype.initialize = function() {
  //Calls update, which will call requestUpdate later on -- entry point for our constant updates
  this.update();
}

MyTimer.prototype.update = function() {
  //Timer code to handle timers each frame
  //
  
  //calls requestUpdate -- , running our update method again, creating a feedback loop
  this.requestUpdate():
}

MyTimer.prototype.requestUpdate = function() {
  //Binds our new timer's update, allowing it's update to be called every frame with the specific parameters that we want -- in this case no parameters.
  requestAnimationFrame(this.update.bind(this));
}

Now, we have a new class, which when we create a new object, they will be updated, so long as the game is open, and running. There are a lot of other uses for this  kind of pattern, so if you can think of any, try it out. I think being able to create active systems is a good step forward; it can definitely add some interesting interactions with the game as a result.

For all those developers out there, good luck; hopefully this helped you in some way!

Note

First time doing something like this, but if there’s something that’s not understood, please tell me, and I’ll update this for clarity purposes.

Leave a Reply

Your email address will not be published.