扩展 Phaser.js 类

Question

我正在使用 Phaser 框架，我想创建新的 class 来保存 Phaser 中 sprite class 的所有属性，所以我尝试这样做

var mario = function(){

    Phaser.Sprite.call(this); // inherit from sprite
};

但是出现错误"Uncaught TypeError: undefined is not a function"

然后我尝试了

var mario = function(){

   this.anything = "";

};

mario.prototype = new Phaser.Sprite();

好的，它可以工作，但它调用了移相器构造函数，我不想创建精灵，直到我这样做 var heroObj = new mario();

我该怎么办？

Answer 1

这样试试。我添加了一个命名空间以避免全局变量。

var YourGameNSpace = YourGameNSpace || {};

YourGameNSpace.Mario = function (game) {
    'use strict';

    Phaser.Sprite.call(this, game);
};

// add a new object Phaser.Sprite as prototype of Mario 
YourGameNSpace.Mario.prototype = Object.create(Phaser.Sprite.prototype);
// specify the constructor
YourGameNSpace.Mario.constructor = YourGameNSpace.Mario;

//add new method
YourGameNSpace.Mario.prototype.init = function () {
    'use strict';
    ...
};

在你可以实例化它之后：

var mario = new YourGameNSpace.Mario(game);

Answer 2

现在使用 ES6 更容易，例如：

export default class CustomSprite extends Phaser.Sprite {
    constructor(game){
        super(game, 0, 0);
        this.addChild(game.add.sprite(0, 0, 'someSprite'));
        game.stage.addChild(this);
    }
    update() {
        //move/rotate sprite
    }
}

然后您可以像这样导入和使用它：

this.customSprite = new CustomSprite(this.game);
this.customSprite.x = 400;
this.customSprite.y = 100;

这是让您入门的样板文件：https://github.com/belohlavek/phaser-es6-boilerplate/

Answer 3

我写了一小部分 JS 实用程序，包括继承（甚至可能是抽象的）类:

var Unit = squishy.extendClass(Phaser.Sprite, 
function (game, x, y, sprite, ...) {
    // ctor

    // Call the the base (Sprite) ctor
    this._super(game, x, y, sprite);

    // ...
},{
    // methods
    update: function() {
        // ...
    }
});

如果您有兴趣，you can see the result of applying it to Phaser's "Sprite Demo 2" in this fiddle。

扩展 Phaser.js 类

extending Phaser.js classes

javascript

oop

phaser-framework