javascript - Phaser - Sprite 被放置在下面而不是另一个 Sprite 之上？

Question

我正在用 Phaser 制作游戏，根据我的理解， Sprite 的 z-Index 取决于它们被预加载和添加到游戏世界的顺序。

我有这 3 个 Sprite ，分别是 table 、杯子和球。

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

如何确保球始终显示在杯子的顶部(从自上而下的二维视角)。

game.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() 将 Cup 带到“前面”(堆栈顶部): http://phaser.io/docs/2.3.0/Phaser.Component.BringToTop.html