相位器 - 将精灵放置在下方，而不是放置在另一个精灵的顶部

Question

我正在制作一个带有相位器的游戏，根据我的理解，精灵的z指数取决于它们预加载并添加到游戏世界中的顺序。

我有这 3 个精灵，分别称为桌子、杯子和球。

我正在按该顺序预加载并将它们添加到游戏世界中，以便球显示在桌子和杯子上方。 然而，球显示在桌子上方，但在杯子下面（不受欢迎和破坏游戏！

我怎样才能确保球始终显示在杯子顶部（从自上而下的 2D 角度）。

游戏.js

window.onload = function() {
    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
    function preload() {
        game.load.image('table', 'assets/img/table.png');
        game.load.image('cup', 'assets/img/cup.png');
        game.load.image('ball', 'assets/img/ball.png');
    }
    var table;
    var cups;
    var cup;
    var ball;
    var ballAscending = true;
    var ballThrown = false;
    function create() {
        game.physics.startSystem(Phaser.Physics.ARCADE);
        table = game.add.sprite(game.world.centerX, game.world.centerY, 'table');
        table.anchor.setTo(0.5,0.5);
        var cupW = game.cache.getImage('cup').width;
        var cupH = game.cache.getImage('cup').height;
        cups = game.add.group(game,game.world,'cups',false,true,Phaser.Physics.ARCADE);
        cup = cups.create(game.world.centerX, cupH / 2, 'cup');
        cup = cups.create(game.world.centerX - cupW, cupH / 2, 'cup');
        cup = cups.create(game.world.centerX + cupW, cupH / 2, 'cup');
        cup = cups.create(game.world.centerX - cupW / 2, cupH + (cupH / 2), 'cup');
        cup = cups.create(game.world.centerX + cupW / 2, cupH + (cupH / 2), 'cup');
        cup = cups.create(game.world.centerX, (cupH * 2) + (cupH / 2), 'cup');
        cup = cups.create(game.world.centerX, game.world.height - (cupH / 2), 'cup');
        cup = cups.create(game.world.centerX - cupW, game.world.height - (cupH / 2), 'cup');
        cup = cups.create(game.world.centerX + cupW, game.world.height - (cupH / 2), 'cup');
        cup = cups.create(game.world.centerX - cupW / 2, game.world.height - (cupH / 2) - cupH, 'cup');
        cup = cups.create(game.world.centerX + cupW / 2, game.world.height - (cupH / 2) - cupH, 'cup');
        cup = cups.create(game.world.centerX, game.world.height - (cupH / 2) - (cupH * 2), 'cup');
        ball = game.add.sprite(game.world.centerX, game.world.centerY + (cupH*6),'ball');
        ball.anchor.setTo(0.5,0.5);
        ball.inputEnabled = true;
        //ball.z = 100;
        game.physics.enable([ball, cups],Phaser.Physics.ARCADE);
        cups.forEach(function(item) {
            item.anchor.setTo(0.5);
            item.body.immovable = true;
        },this);
        ball.body.bounce.set(0.50);
        ball.body.drag.set(20);
        game.stage.backgroundColor = "#d3d3d3";
        game.input.onDown.add(onDown,this);
        game.input.onUp.add(throwBall,this);
    }
    var clickTime;
    function onDown() {
        clickTime = game.time.time;
    }
    function throwBall() {
        var delta = game.time.time - clickTime;
        game.physics.arcade.velocityFromAngle(ball.angle, delta, ball.body.velocity);
        ballThrown = true;      
    }
    var bounces = 0;
    function update() {
        if (ballThrown) {
            game.physics.arcade.collide(ball,cups,collisionHandler,collisionProcess,this);  
            if (ballAscending) {
                ball.z = ball.z + 2;
                if (ball.z > 100 - bounces * 20) {
                    ballAscending = false;
                }
            } else {
                ball.z = ball.z - 2;
                if (ball.z < 1) {
                    bounces = bounces + 1;
                    ballAscending = true;
                }
            }
            ball.scale.set((ball.z + 100) / 100);
            if (Math.abs(ball.body.velocity.x) < 1 && Math.abs(ball.body.velocity.y) < 1 && ball.scale.x == 1) {
                restart();
            }
        }
        ball.rotation = game.physics.arcade.angleToPointer(ball);
    }
    function render() {
        game.debug.spriteInfo(ball,32,32);
    }
    function restart() {
        ball.z = 100;
        bounces = 0;
        ball.position.x = game.world.centerX;
        ball.position.y = game.world.centerY + (cup.height*4);
        ball.scale.set(1);
        ballThrown = false;
    }
    function collisionHandler(ball,cup) {
        return true;
    }
    var inGoalZone = false;;
    function collisionProcess(ball,cup) {

        if (ball.z >= 40 && ball.z <= 60) {
            inGoalZone = true;
            return false;
        } else if (ball.z <= 40 && inGoalZone) {
            game.paused = true;
            return false;
        } else {
            return true;
        }
    }
}

Answer 1

我认为您要查找的是.BringToTop（） 将杯子带到"前面"（堆栈的顶部）：http://phaser.io/docs/2.3.0/Phaser.Component.BringToTop.html