Collisions between tilemap using P2 physics and player using Arcade physics

[Durden]

Hi,

I'm using a tileset for my maps. Not all tiles fill their whole square though, like the top and bottom blocks there, for example.

The player character is a simple square guy.

Here's my problem : for example in this part of one of the map, as long as there's one tiny bit of rock in a tile, Arcade will consider the whole tile should detect collisions. Meaning the player will effectively bounce back against thin air.

To have more precise collisions, I'd like to have the character using Arcade physics as it's a simple square and I don't need anything fancy for its physics, and I'd like to use P2 to add detailed physics for collision with the "not entirely filled" map tiles.

Is that even possible ? How would you go about doing it ?

 

For now, I've made a json file with physics applied to the whole tileset (using PhysicsEditor) and imported it in the preload method of the Preload state like that :

//Preload.js

InteractiveResume.Preload.prototype = {
	
    preload: function() {

        //...

        //load Tiled map
        this.load.tilemap('grottoMap', 'assets/tilemaps/testGrotto.json', null, Phaser.Tilemap.TILED_JSON);

        //the terrain tileset and its physics
        this.load.image('mainTileset', 'assets/png/mainTileset.png');
        this.game.load.physics("mainTileset-physics", "assets/json/mainTileset-physics.json");

    }

}

I setup my game maps with an external method located in a "global namespace", the method looks like this :

//gameFunctions.js

var funcs = {

    mapSetup: function(map) {
        config.currentState.map = config.currentState.game.add.tilemap(map);

        //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset
        config.currentState.map.addTilesetImage('mainTileset', 'mainTileset', 16, 16);

        //create layers
        config.currentState.firstBackgroundLayer = config.currentState.map.createLayer('firstBackgroundLayer');
        config.currentState.secondBackgroundLayer = config.currentState.map.createLayer('secondBackgroundLayer');
        config.currentState.blockedLayer = config.currentState.map.createLayer('blockedLayer');

        //resizes the game world to match the layer dimensions
        config.currentState.firstBackgroundLayer.resizeWorld();
        config.currentState.secondBackgroundLayer.resizeWorld();
        config.currentState.blockedLayer.resizeWorld();

        //collision on blockedLayer
        config.currentState.map.setCollisionBetween(1, 100000, true, 'blockedLayer');
        config.currentState.game.physics.p2.convertTilemap(config.currentState.map, config.currentState.blockedLayer);
    }

}

(I had to define a global variable 'config.currentState' to access the 'this' keyword representing the current state outside of it, if anyone knows a better solution I'd be very thankful as its quite heavy to use)

And then in my Grotto state :

// Grotto.js

InteractiveResume.Grotto.prototype = {

    create: function() {
    	//Creating the map, player sprite and everything...

        //setup Arcade physics for the player character
        this.game.physics.arcade.enable(this.player);
    },

    update: function() {
        //collisions
        this.game.physics.arcade.collide(this.player, this.blockedLayer);

        //...
    }

}

 

 

Could anyone point me to the correct direction here ? I must admit I'm totally lost

[Gold Finch]

HI,

I have been experimenting with p2 physics.  To get accurate collisions with tiles I used PhysicsEditor to create a physics data file for all the tiles in the tileset.  I then created physics bodies for each tile and applied the corresponding tile shape data in the physics data file to add  polygons to those bodies.

Try the link below (Code can be downloaded).

https://neilbgames.itch.io/p2-physics-tilemap

[Durden]

Thanks a lot, I'll work something out from this!