Tilemaps collisions are buggy with matter.js

anthonydibi · August 11, 2022, 2:51pm

As you can see in that video I am having really weird behavior when I use tilemaps in matter.js, for example when the ball bounces off of the platform initially it should bounce directly upward since the platform is completely flat but it bounces to the left, and when the character moves they keep “bouncing” off of the tiles even though they are on the ground. As you can see I tried to chamfer the player so prevent getting caught on the tiles but it didn’t really help. I noticed that in the matterjs examples they use really big tiles to prevent this behavior but that won’t work with my game, is there any way to fix this?

dercetech · October 27, 2022, 5:15am

Hi @anthonydibi ,

Have you solved the issue?

If not, I’ll tidy up my solution to share it (I faced the same and reproduced it in a breakout sandbox: video).

It all boils down to the ball hitting tile corners. I’ve tried all sorts of tweaks like fiddling with pre&post-collision data like normal, home-made expected trajectory computing, etc.

Appart from interfering with Matter’s internals and fixing some of the behaviors, that wasn’t the right path.

The best way I found was to iterate over the static tiles from Tiled (marked with a specific collision property) and create islands (groups of contiguous tiles). Doing so requires listing vertices to create the shape’s envelope.

My solution isn’t perfect (yet?) as I still have to deal with specific cases like these:

my Tiled level is closed by a full border of tiles, I need the script the “close” the shape by adding a perpendicular vertex to avoid infinite looping.

My Solution however already deals with situations like:

my Tiled tileset has some specific tile properties (snow, metal, sand, mud) to affect collision sounds, restitution (bounce), friction & co. and I need a way to “enrich” the resulting tiles.

Let me know if you wish to see that code with a quick walkthrough and I’ll gladly prepare that.

dercetech · October 27, 2022, 12:00pm

Hi again,

I cleaned up the code and got my sandbox uploaded.

See the problem, same as yours - then the solution (islanding). Works perfectly here, I think it’ll help with your issue:

You can test it online (use left/right keys to switch between problem & solution):
https://www.dercetech.com/test/phaser-matter-sandbox/v2.0.0/?level=0

The islanding script to import in your project:

github.com

Dercetech/phaser-matter-tile-corners/blob/main/src/utils/matter-tilemaps.utils.ts

/**
 * @author       Jérémie Mercier <jem@dercetech.com>
 * @copyright    2022 Dercetech SRL (https://www.dercetech.com).
 * @license      {@link https://opensource.org/licenses/MIT|MIT License}
 */

export class TileIsland extends Phaser.GameObjects.GameObject {
  /** This is the properties map as recovered from a source tile. Careful here, we're using the COLLISION_CATEGORY to group tiles. If two different tileset tiles share the same COLLISION_CATEGORY but have other custom properties, then the result isn't merged (yet)*/
  properties: Record<string, any>;

  constructor(scene: Phaser.Scene) {
    super(scene, "TileIsland");
  }
}

/** Custom tile properties to define in the tileset. */
export enum TILEMAP_PROPERTIES {
  /** Phaser collision parsing property - used to have default square bodies on each tile marked with this property (boolean set to 'true') */
  COLLISION_DEFAULT = "collides",

This file has been truncated. show original

And the usage example:

github.com

Dercetech/phaser-matter-tile-corners/blob/main/src/scenes/sandbox/sandbox.scene.ts#L102


      
          
          
  // Title
            this.add.bitmapText(CONSOLE.CONSOLE_X - 2, 4, AtariFont.key, this.levelData.title, 8).setTint(0xbfca87);
          
          
  // Watches
            this.logVelocity();
            this.logPaddle();
            this.logCollidesWith();
          }
          
          
protected createLevel() {
            const map = this.add.tilemap(this.levelData.tilemapUrl);
            const tileset = map.addTilesetImage(KEYS.TILESET, SPRITES.TILES, 16, 16, 0, 0);
            var tilemapLayer = map.createLayer(0, tileset);
          
          
  // First we create tiles that have the "collides" boolean property set to "true" in the tileset
            // Rem: let's also create custom shapes based on the "collision group" property (ie. this is the result of creating custom tiled bodies)
            this.createTilesFromPhaserParsing(tilemapLayer);
          
          
  // Then we looks for islands and create large polygons to avoid corners / verts across long flat surfaces that otherwise cause bad bounces
            this.createTileIslandsUsingDercetechParser(tilemapLayer);

Let me know what you think!

Topic		Replies	Views
Player not colliding with tilemap matter.js Phaser 3	4	1121	September 17, 2019
MatterJS sprite clips Tiled tilemaps under certain conditions Phaser 3	0	642	April 10, 2020
Matter Physics: Sprite with custom hitbox shape gets stuck on the tilemap layer. Phaser 3	0	188	October 24, 2023
Using matter js event listeners after world destroyed Phaser 3	0	808	August 31, 2019
Matter-js pysics and events without collisions Phaser 3	2	1416	November 30, 2019

Tilemaps collisions are buggy with matter.js

Related topics