用EC5/EC6自定義class的區別及用法 -- Phaser3網頁遊戲框架

EC6 自定義class

class Brain extends Phaser.GameObjects.Sprite {

    constructor (scene, x, y)
    {
        super(scene, x, y);

        this.setTexture('brain');
        this.setPosition(x, y);
    }

    preUpdate (time, delta)
    {
        super.preUpdate(time, delta);

        this.rotation += 0.01;
    }

}

EC5 自定義class

var Bunny = new Phaser.Class({
    Extends:Phaser.GameObjects.Sprite,
    initialize:function Bunny(scene,x,y,speed){
        Phaser.GameObjects.Sprite.call(this,scene);
        this.setTexture('bunny');
        this.setPosition(x, y);
        this.setScale(0.3);
        this.speed = speed;
        
    },
    preUpdate(time,delta){
        this.rotation += (0.01+ this.speed * 0.0001) ;
    }
});

完整代碼：

var Bunny = new Phaser.Class({
    Extends:Phaser.GameObjects.Sprite,
    initialize:function Bunny(scene,x,y,speed){
        Phaser.GameObjects.Sprite.call(this,scene);
        this.setTexture('bunny');
        this.setPosition(x, y);
        this.setScale(0.3);
        this.speed = speed;
        
    },
    preUpdate(time,delta){
        this.rotation += (0.01+ this.speed * 0.0001) ;
    }
});
var config = {
    type: Phaser.AUTO,
    width: 600,
    height: 480,
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload (){
    //http://www.ifiero.com/uploads/ifiero-logo_512x512.png
    // this.load.image('bunny', 'http://www.ifiero.com/images/ifiero-logo_512x512.png');
     this.load.setBaseURL('http://labs.phaser.io');
     this.load.image('bg', 'assets/pics/purple-dots.png');
     this.load.image('bunny', 'assets/sprites/bunny.png');
     
}

function create (){

    this.add.image(0, 0, 'bg').setOrigin(0).setScale(0.8);
    this.add.existing(new Bunny(this, 150, 150,100));
    this.add.existing(new Bunny(this, 250, 250,200));
    this.add.existing(new Bunny(this, 350, 350,300));
}

更多遊戲教學:www.iFIERO.com -- 爲遊戲開發深感自豪