如何正确更改 sprite 上的 z-index？

Question

我有 google 它，我知道添加 z-index 的正确方法是按创建顺序，但我有不同的情况。

我正在创建纸牌游戏，我想在点击时移动纸牌，然后该纸牌应该在最上面，这是不可能的，所以我通过以下方式解决了问题。

在单击卡片时调用的函数中，我正在销毁该卡片并创建完全相同的新卡片，因为它是最后创建的。

还有其他方法可以解决这个问题吗？

谢谢

Answer 1

在卡片发布时，您可以使用 BringToTop（另请参阅 moveDown、moveUp 和 sendToBack 可能对您有用的方法）

类似于：

game.world.bringToTop(activeCard);

在这一行之后，activeCard 应该位于所有其他精灵或组之上。

Answer 2

如果objects/sprites不在同一组game.world.bringToTop(target)将不起作用。一个更可靠的解决方案是按照您希望对象分层的顺序将对象添加到组中，如下所示：

// Groups for drawing layers
var back_layer = game.add.group();
var mid_layer = game.add.group();
var front_layer = game.add.group();
// It doesn't matter what order you add things to these groups, the draw order will be back, mid, front (unless you change it...)
back_layer.create(0, 0, "bg");
front_layer.create(0, 0, "front");
mid_layer.create(300, 200, "object1");
mid_layer.create(500, 400, "object2");

这里解释 - www.html5gamedevs.com post

就我个人而言，我使用了这两种解决方案，随着项目开始扩展，其中一种被证明更加可行

希望这对您有所帮助

Answer 3

您可以使用这些测试订购；

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
game.global = {};
function preload () {
 
}
 
function create () {

    game.physics.startSystem(Phaser.Physics.ARCADE);  
    game.stage.backgroundColor = '#01555f';
  
    this.gfx = game.add.graphics(0, 0);
    this.gfx.visible = false;
    this.gfx.beginFill(0x02C487, 1);  
    this.gfx.drawRect(100, 100, 250, 1);  
    this.barSprite = game.add.sprite(100, 500, this.gfx.generateTexture());    
    this.barSprite.anchor.y = 1;
    game.add.tween(this.barSprite).to({ height: 400 }, 1000, Phaser.Easing.Default, true, 0);
     
    var bubbleGfx = game.add.graphics(0, 0);
    bubbleGfx.lineStyle(2 * 1, 0x000000, 1);
    bubbleGfx.visible = true;
    bubbleGfx.beginFill(0xffffff, 1);
    bubbleGfx.drawRoundedRect(300, 150, 200, 100, 8); 
     
    this.gfx2 = game.add.graphics(0, 0);
    this.gfx2.visible = false;
    this.gfx2.beginFill(0x02C111, 1);  
    this.gfx2.drawRect(150, 100, 250, 1);  
    this.barSprite2 = game.add.sprite(400, 500, this.gfx2.generateTexture());   
    this.barSprite2.anchor.y = 1; 
    game.add.tween(this.barSprite2).to({ height: 400 }, 1000, Phaser.Easing.Default, true, 0);
} 
function update () {
 
}

如何正确更改 sprite 上的 z-index？

How to change z-index on sprite properly?

phaser-framework