Plugin system in WhitestormJS

Plugins & Components

WhitestormJS plugin system

The plugin system is one of the WhitestormJS super powers. It allows you to extend the engine behavior by adding classes that handle the scene. While the WhitestormJS team has already created some useful plugins, you might find that sometimes you’ll need a hand to make things even easier.

ES6 Classes and their features

WhitestormJS is completely written in ES6, which means that you can take advantage of these amazing language features, like ES6 classes.

If you know other object oriented languages then you know then what a class is. ES6 classes are very similar; they come from the idea of writing reusable components, and thus are very useful in developing modular systems for any framework or JavaScript library. They have wide support in browsers today. Plus, you can always use Babel for compiling your project, which will then be replaced with prototypes.

An ES6 class is basically a function, which has two main components. The class expression and class declarations. The class expression is and class declarations are just different ways to declare a class

Extending classes

Let’s take an example from MDN:

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

ES6 classes take a simple idea, if it sounds like a duck and looks like a duck, then it’s a duck. Above you see two classes, Lion and Cat. The class Lion takes Cat’s ability to have a name property by calling super and it overwrites the default behavior for the speak function with its own changed one. We use this feature as a base of our plugin system.

One class extends another. It is useful for creating components with numerous functions using several lines of code.

Writing a WhitestormJS plugin

So, how does WhitestormJS use these features?

WHS.Shape & WHS.Light

Most of components in WhitestormJS extend 2 super classes called “WHS.Shape” and “WHS.Light”. Both of them are pretty similar and have similar functions, but are implemented with code optimized for their own needs. There is also another super class called “WHS.World”, but we don’t count it as a class meant for extending in a simple plugin. You can still use any class in the engine, but we’ll focus on those two for now.

First lines

Let’s make our car component:

WHS.Car extends the WHS.Shape super class, so after you call new WHS.Car() it will return all WHS.Shape’s methods such as build() or addTo().

• build( …tags ) — will use this.mesh parameter for applying position and rotaton to it. (…tags) — here you can specify “wait” tag if it uses large object loaded to physijs. It will wait until Physijs object will fire “ready” event.
• addTo( parent, …tags ) — it will add your this.mesh to WHS.World passed in parent parameter.
• setPosition( x, y, z ) — same as this.mesh.position.set( x, y, z ). But will overwrite physics position.
• setRotation( x, y, z ) — same as this.mesh.rotation.set( x, y, z ). But will overwrite physics rotation.

Adding to WHS.World prototype

Polyfill:

WHS.World.prototype.Car = function( params ) {
   let object = new WHS.Car( params );
   object.addTo( this );
   return object;
}

Now your class can be accessed from WHS.World class. If you have an instance of WHS.World called “GAME”, you can just write GAME.Car( params ) to make a car and add it to GAME.

This is simple, but the idea is powerful: by creating plugins you can extend the default behavior for WhitestormJS objects. If you missed our last article you can learn even more about WhitestormJS. We will be writing more about how to use all of the WhitestormJS super powers.