用EC5/EC6自定义class的区别及用法 -- Phaser3网页游戏框架-优快云博客

本文介绍如何在Phaser游戏开发中创建自定义Sprite类，通过两个实例展示了如何扩展Phaser内置的Sprite类，实现角色旋转和速度控制。代码示例包括Brain和Bunny两个自定义类的实现，以及游戏场景的设置。

custom class

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)); }