Phaser - Sprite being placed underneath instead of ontop another sprite?

Question

I am making a game with phaser and from my understanding, the z-Index of sprites depends on the order they were preloaded and added to the game world.

I have these 3 sprites called table, cup, and ball.

I am preloading and adding them to the game world in that order, so that ball is displayed above table and cup. However, ball is being displayed above table, yet underneath cup (undesired and game breaking!)

How can I make sure ball will always be displayed on top of cup (from a top-down 2d perspective).

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

    }
}

Phaser - Sprite being placed underneath instead of ontop another sprite?

Answers (1)

Related Questions