精华 自己制作Phaser插件
发布于 3 年前 作者 channingbreeze 1404 次浏览 来自 分享

Phaser的插件机制,给我们带来了无限的想象力。 通过插件,我们可以使用box2d的物理引擎,实现更加强大的物理功能;我们可以使用虚拟摇杆,实现街机的感觉;我们可以使用spine,实现骨骼动画;等等…… Phaser的官方为我们提供了一些插件,第三方也为我们提供了很多插件,但是为什么还要学习怎么自己制作插件呢?我的原因有两个,一是有些插件提供的功能,大致符合我们的要求,小地方可能需要稍加修改;二是我们自己一些常用的功能,也希望封装成插件。如果我们能够了解插件的实现原理,无疑对于我们深入学习Phaser非常有帮助。 本文通过一个最简单的插件实例,来讲述Phaser中插件的编写方法和调用方法,通过这个例子,我们可以很清晰地了解Phaser中自制插件的使用方式。 例子的效果很简单,就是一个场景切换的渐变,场景一中有一个苹果,场景二中有一个草莓。点击场景一会切换到场景二,点击场景二会切换到场景一。而插件的作用,就是给切换过程加上逐渐的效果。如下图: 1.gif 效果是非常简单的,不过我们是用插件来实现的,下面就来看看步骤: 1、 定义一个类,继承Phaser.Plugin

Phaser.Plugin.FadePlugin = function(game, parent) {
  Phaser.Plugin.call(this, game, parent);
}

Phaser.Plugin.FadePlugin.prototype = Object.create(Phaser.Plugin.prototype);
Phaser.Plugin.FadePlugin.prototype.constructor = Phaser.Plugin.FadePlugin;

2、 定义自己的方法

Phaser.Plugin.FadePlugin.prototype.fadeAndPlay = function(style, time, nextState) {
  this.crossFadeBitmap = this.game.make.bitmapData(this.game.width, this.game.height);
  this.crossFadeBitmap.rect(0, 0, this.game.width, this.game.height, style);
  this.overlay = this.game.add.sprite(0, 0, this.crossFadeBitmap);
  this.overlay.alpha = 0;
  var fadeTween = this.game.add.tween(this.overlay);
  fadeTween.to({alpha: 1}, time * 1000);
  fadeTween.onComplete.add(function() {
    this.game.state.start(nextState);
  }, this);
  fadeTween.start();
}

3、html中引入插件的js <script src="src/plugin.js"></script> 4、调用方注册插件 game.fadePlugin = game.plugins.add(Phaser.Plugin.FadePlugin); 5、调用插件的方法 game.fadePlugin.fadeAndPlay("#000", 1, "one"); 本文案例可以在这里下载。

2 回复

请问制作插件和直接挂到game上有何区别? 如: game.prototype.fadeAndPlay = function(style, time, nextState){ … }

@aleafworld 在这个例子应该差不多,不过如果有复杂功能,封装成插件就更方便了。插件还有一些生命周期函数,参考 Plugin文档

回到顶部