Phaser — спрайт помещается под другим спрайтом, а не поверх него?

Я делаю игру с фазером, и, насколько я понимаю, z-индекс спрайтов зависит от порядка их предварительной загрузки и добавления в игровой мир.

У меня есть эти 3 спрайта, называемые столом, чашкой и мячом.

Я предварительно загружаю и добавляю их в игровой мир в таком порядке, чтобы мяч отображался над столом и чашкой. Однако мяч отображается над столом, но под чашкой (нежелательно и мешает игре!)

Как я могу убедиться, что мяч всегда будет отображаться поверх чашки (с двухмерной точки зрения сверху вниз).

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;
        }

    }
}

person JohnWick    schedule 01.02.2015    source источник
comment
Я пытался изменить порядок предварительной загрузки спрайтов, порядок добавления спрайтов в игровой мир и даже пытался вызвать метод BringToTop() моего спрайта с мячом, но ничего не сработало. Я не могу заставить спрайт мяча отображаться поверх любого из спрайтов в группе чашек. :(   -  person JohnWick    schedule 01.02.2015
comment
порядок z спрайта определяет порядок, в котором они отображаются, если вы хотите перемещать шарик вверх и вниз по экрану, вам нужно изменить свойство y.   -  person what is sleep    schedule 06.02.2015


Ответы (1)


Я думаю, что вы ищете .BringToTop(), чтобы вывести Кубок на «передний план» (верхнюю часть стека): http://phaser.io/docs/2.3.0/Phaser.Component.BringToTop.html

person Sean Colombo    schedule 15.06.2015