Phaser Iso Plugin Collision (& jumping)

[charlie_says]

I'm just working on a quick test with @lewster32's Iso Plugin.

The issue I'm having is with jumping off a cube - if you look at this example:

http://rotates.org/phaser/iso/examples/character.htm

It's possible to do multiple jumps

I've tried to disallow jumping unless body.touching.down == true, but isn't working (it never gets set true) I'm guessing this is something to do with the arcade physics that's used, and the way I'm trying to use it, but I'm not clear how best to proceed.

 

Any ideas?

 

[douglas]

I am trying to understand with http://codepen.io/featuresmega/pen/ALKLEj

and, https://jsfiddle.net/johndo101/oa4ptb38/

Phaser Iso works on another pen i have http://codepen.io/featuresmega/pen/WGQEaw but i didn't test yet addIsoSprite

[Milton]

1 hour ago, charlie_says said:

I've tried to disallow jumping unless body.touching.down == true, but isn't working (it never gets set true) I'm guessing this is something to do with the arcade physics that's used, and the way I'm trying to use it, but I'm not clear how best to proceed.

Hope @lewster32 fixes it, because this is a bug (I think he mixes up Body1/2...)

[charlie_says]

I can't actually get any of the body.touching to become true, so I'm guessing there's an issue with the way the separateX/separateY/separate/Z functions are called.

 

Will investigate further...

[lewster32]

body.touching is only set within the collide callback - see this post for more detail: 

 

[charlie_says]

Hey @lewster32 apologies, I did read that one, body.blocked reports all false when sitting on another block (down sets to true when on the floor.)

and reading through body.js it seems that blocked would only be set true when touching bounds.

[lewster32]

Yeah it's not totally straightforward in Phaser - blocked is specifically related to hitting the world boundaries, tiles and possibly immovable objects too. It's been a while since I've tinkered with Phaser and I'm sure things have been tidied up since I ported Arcade myself, but I've tweaked my example code and this works (to a degree, the caveat is that body.touching.down still doesn't appear to be working):

var game = new Phaser.Game(800, 400, Phaser.AUTO, 'test', null, true, false);

var BasicGame = function(game) {};

BasicGame.Boot = function(game) {};

var isoGroup, player;

BasicGame.Boot.prototype = {
    preload: function() {
        game.load.image('cube', '../assets/cube.png');

        game.time.advancedTiming = true;

        // Add and enable the plug-in.
        game.plugins.add(new Phaser.Plugin.Isometric(game));

        // Start the IsoArcade physics system.
        game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE);

        // This is used to set a game canvas-based offset for the 0, 0, 0 isometric coordinate - by default
        // this point would be at screen coordinates 0, 0 (top left) which is usually undesirable.
        game.iso.anchor.setTo(0.5, 0.2);


    },
    create: function() {
        // Create a group for our tiles, so we can use Group.sort
        isoGroup = game.add.group();

        // Set the global gravity for IsoArcade.
        game.physics.isoArcade.gravity.setTo(0, 0, -500);

        // Let's make a load of cubes on a grid, but do it back-to-front so they get added out of order.
        var cube;
        for (var xx = 256; xx > 0; xx -= 80) {
            for (var yy = 256; yy > 0; yy -= 80) {
                // Create a cube using the new game.add.isoSprite factory method at the specified position.
                // The last parameter is the group you want to add it to (just like game.add.sprite)
                cube = game.add.isoSprite(xx, yy, 0, 'cube', 0, isoGroup);
                cube.anchor.set(0.5);

                // Enable the physics body on this cube.
                game.physics.isoArcade.enable(cube);

                // Collide with the world bounds so it doesn't go falling forever or fly off the screen!
                cube.body.collideWorldBounds = true;

                // Add a full bounce on the x and y axes, and a bit on the z axis. 
                cube.body.bounce.set(1, 1, 0.2);

                // Add some X and Y drag to make cubes slow down after being pushed.
                cube.body.drag.set(100, 100, 0);
            }
        }

        // Create another cube as our 'player', and set it up just like the cubes above.
        player = game.add.isoSprite(128, 128, 0, 'cube', 0, isoGroup);
        player.tint = 0x86bfda;
        player.anchor.set(0.5);

        // Can the player jump?
        player.canJump = false;

        game.physics.isoArcade.enable(player);
        player.body.collideWorldBounds = true;

        // Set up our controls.
        this.cursors = game.input.keyboard.createCursorKeys();

        this.game.input.keyboard.addKeyCapture([
            Phaser.Keyboard.LEFT,
            Phaser.Keyboard.RIGHT,
            Phaser.Keyboard.UP,
            Phaser.Keyboard.DOWN,
            Phaser.Keyboard.SPACEBAR
        ]);

        var space = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

        space.onDown.add(function() {
            // Only allow the jump if we've flagged the player as being able to jump
            if (player.canJump) {
                player.canJump = false;
                player.body.velocity.z = 300;
            }
        }, this);
    },
    update: function() {
        // Move the player at this speed.
        var speed = 100;

        if (this.cursors.up.isDown) {
            player.body.velocity.y = -speed;
        } else if (this.cursors.down.isDown) {
            player.body.velocity.y = speed;
        } else {
            player.body.velocity.y = 0;
        }

        if (this.cursors.left.isDown) {
            player.body.velocity.x = -speed;
        } else if (this.cursors.right.isDown) {
            player.body.velocity.x = speed;
        } else {
            player.body.velocity.x = 0;
        }

        // Our collision and sorting code again - this time with a callback to check
        game.physics.isoArcade.collide(isoGroup, null, function(a, b) {
            // If one of the objects colliding is the player, then allow the player to jump
            // NOTE: this does not test specifically for the player's body.touching.down and thus allows for wall-climbing and double jumps off objects
            if ((a === player || b === player)) {
                player.canJump = true;
            }
        });

        // Also check for being blocked (i.e. touching the floor)
        if (player.body.blocked.down) {
            player.canJump = true;
        }

        game.iso.topologicalSort(isoGroup);
    },
    render: function() {
        game.debug.text("Move with cursors, jump with space!", 2, 36, "#ffffff");
        game.debug.text(game.time.fps || '--', 2, 14, "#a7aebe");
    }
};

game.state.add('Boot', BasicGame.Boot);
game.state.start('Boot');

 

[charlie_says]

thanks @lewster32 - I'm still getting a slightly odd thing with the cube you jump off also does a small jump - but I can work around this.

[lewster32]

This sounds like a separation issue. I think the best thing to do is just look around at other guides for standard 2D Arcade physics as generally speaking the same rules apply.

[Milton]

Strange thing is I get player.body.touching.up == true...
Seems to me the code is also executed when just doing game.physics.isoArcade.collide(isoGroup);
even without the callback.

[lewster32]

4 minutes ago, Milton said:

Strange thing is I get player.body.touching.up == true...
Seems to me the code is also executed when just doing game.physics.isoArcade.collide(isoGroup);
even without the callback.

You're absolutely right, touching.up is true when the body is at rest on top of another. I think I've got a whoopsie in my code there, and I think it's due to my isometric z axis being 'upside down' compared to Phaser's standard y axis... if I do the following, it works as intended:

            if (!player.canJump && player.body.touching.up) {
                player.canJump = true;
            }

 

[Milton]

No need for the callback. This works fine:

space.onDown.add(function () {
  if ((player.body.velocity.z == 0) || (player.body.touching.up == true)) {
    player.body.velocity.z = 300;
  }
}, this);

 

[lewster32]

Nice work - as I said, it's been a while!