神刀安全网

Plugin system in WhitestormJS

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 this amazing language features. Like ES6 classes.

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

An ES6 class is bassically 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 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 uses this 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 implemented with the code optimized for their needs. There are also another super class called “WHS.World”, but we don’t count him as a class possible for extending to make a simple plugin. You can still use any class in the Engine, but we’ll focus on those two by now.

First lines

Let’s make our car component :

WHS.Carextends WHS.Shape super class, so after you will 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 will own WHS.World object 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 lastarticle you can learn even more about WhitestormJS. We will be writing more about how to use all of the WhitestormJS super powers.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Plugin system in WhitestormJS

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮