精灵后面产生的粒子

Question

我刚开始使用 Phaser。

我在屏幕中间有一个简单的精灵，每当我点击精灵时，我都会在点击的 x,y 坐标处发射一个粒子。

我的问题是粒子是在精灵后面生成的。我试过将 sprite 上的 z 设置为 1，将发射器设置为 1000，但没有成功。

我错过了什么？

var emitter = game.add.emitter(game.world.centerX, game.world.centeryY);
emitter.makeParticles('phaser');

var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
sprite.scale.setTo(2, 2);

sprite.inputEnabled = true;
sprite.events.onInputDown.add(function(sender, pointer){
    emitter.emitX = pointer.x;
    emitter.emitY = pointer.y;
    emitter.emitParticle();
}, this);

http://phaser.io/sandbox/cxBVeHrx

编辑

我的实际代码是基于Phaser-ES6-Boilerplate的。尽管 BdRs 答案解决了沙箱代码中的问题，但我无法在我的真实代码中使用它。

我都上传了the code and a running example。希望有人能告诉我哪里搞砸了...

Answer 1

单独的 Phaser 项目没有 z 顺序，它仅取决于您创建并将它们添加到 game 的顺序。每个新的精灵或发射器或组等都将显示在所有先前添加的项目之上。

因此，只需将您的代码更改为类似这样的代码即可。

// first the sprite
var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
sprite.scale.setTo(2, 2);

// then the particles in front of sprite
var emitter = game.add.emitter(game.world.centerX, game.world.centeryY);
emitter.makeParticles('phaser');

// then maybe text in front of particles and sprite
var mytest = game.add.bitmapText(10, 20, 'myfont', 'Level 1', 16);
// etc.

顺便说一句，精灵确实有一个 .z 值，但只有当它是 Phaser.Group 的一部分时才使用，然后它将用作显示 z 顺序，但仅在该组精灵中使用。

Answer 2

默认情况下，phaser 不会对添加到任何组的对象进行排序，它只会按照添加的顺序呈现它们。在您的情况下，您可以在添加精灵后将发射器添加到组中（本例中的组是 'game' 对象）。

当然，必须按绘制顺序添加对象并不理想，如果需要动态排序，也不可能。

另一种方法是，您可以使用 'sort' 函数对组内的对象进行排序，在该函数中，您可以为其指定要排序的参数名称，并在需要时进行排序（在某些情况下，在更新回调中）。

不过，对每一帧进行排序可能会影响性能，尤其是当您有很多对象时。另一种方法是添加组，按绘制顺序对这些组进行排序（将它们想象成图层），然后以任意顺序将对象添加到这些组中。您也可以对任何需要在其内部进行排序的组进行排序。这样，您可以选择（例如）不需要排序的背景层，但添加到该层的所有内容都将位于其他层之后。

Answer 3

每个人都给出了很好的答案，但您错过了每个 GameObject 都有一个 depth 属性，它完全符合 z-index 的目的。这样你就不需要依赖对象的创建顺序了。

还有一个官方 example.

希望对您有所帮助。

精灵后面产生的粒子

Particles generated behind sprite

phaser-framework