ES6 Phaser subclass and inheritance

[Nayedjel]

Hi everyone, I just started learning Phaser 3 and I must say it is really great so far. I've been delving into the lab examples and the JSDoc to find what I need but now I'm stuck. I come from a React background and I am not sure how to use inheritance and subclassing to fit my needs because I don't really understand how Phaser is built.

I want to inherit from GameObject and use some mixins components like Transform, looking at Phaser's sources here is what it does for a Sprite for example :

var Sprite = new Class({

    Extends: GameObject,

    Mixins: [
        Components.Alpha,
        Components.BlendMode,
        Components.Transform,
        ...
    ],

    initialize: function Sprite (...) {
        ...
    }
});

My question is, how would you write a class in ES6 which inherit from GameObject and subclass a set of mixins then use it in a scene ? Is ES6 even the "correct" way to extend Phaser components ?

Thanks in advance for your help

Cheers,

Nayedjel

[samme]

Usually you can just pick the relevant class (e.g., Phaser.GameObjects.Sprite) and extend it in the usual manner.

There's no need to compose components yourself unless you really need a component set different from any of the existing classes.

[samme]

const Class = require('../../utils/Class');
const GameObject = require('../GameObject');

class Sprite extends GameObject {
  constructor(scene, x, y, texture, frame) {
    super(scene, x, y, texture, frame);
    // ...
  }
}

Class.mixin(Sprite, [
  Components.Alpha, // ...
]);

 

[samme]

http://labs.phaser.io/edit.html?src=src\plugins\custom game object.js