Question

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

我正在制作纸牌游戏，我想在点击时移动卡片，之后该卡片应该在顶部，这是不可能的，所以我已经按照以下方式解决了。

在卡上点击的功能中，我正在销毁该卡并创建相同的新卡，因为它是最后创建的。

还有另一种解决这种情况的方法吗？

谢谢

Answer 1

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

类似的东西：

game.world.bringToTop(activeCard);

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

Answer 2

如果对象/精灵不在同一组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？

3 个答案: