Restart scene 6x times with matter.js provoke bug

hi,

I discovered a bug in my game. This minimal jsfiddle reproduces my bug : when i restart my scene around 6X times my ball in my scene go out of my world. What i’m doing wrong ?

Could you help me please, because it’ the last bug and i could publish my game :wink:

https://jsfiddle.net/espace3d/e7xdtv4m/74/

var f = {}
var o = {}
f.init_test = (g) => {
    cat0 = g.matter.world.nextCategory();
    f.create_terrain = (g) => {
        o.limit_ball_left = g.matter.add.image(0, 320, "limit_v", null, {
            restitution: 0,
            isStatic: true
        }).setVisible(true).setCollisionCategory(cat0)
        o.limit_ball_left.name = 'left'
        o.limit_ball_right = g.matter.add.image(300, 320, "limit_v", null, {
            restitution: 0,
            isStatic: true
        }).setVisible(true).setCollisionCategory(cat0)
        o.limit_ball_right.name = 'right'

    }
    f.create_terrain(g)
    o.ball = g.matter.add.image(160, 50, 'ball').setVelocity(10).setBounce(1)
    window.setInterval(function () {
        g.scene.stop('test')
        g.scene.start('test')
    }, 2000);
}

//init_main = () => {
const my_game = {
    init: () => {
        var boot = new Phaser.Class({
            Extends: Phaser.Scene,
            initialize: function boot() {
                Phaser.Scene.call(this, {
                    key: 'boot'
                });
            },
            preload: function () {
                this.load.image("ball", "https://i.postimg.cc/rFFByHRS/ball.png");
                this.load.image("limit_v", "https://i.postimg.cc/JnFkyv4G/limit-v.png");
            },

            create: function () {
                this.scene.launch('test')
            },
        });
        var test = new Phaser.Class({
            Extends: Phaser.Scene,
            initialize: function main() {
                Phaser.Scene.call(this, {
                    key: 'test'
                });
            },
            create: function () {
                f.init_test(this)
            },
            update: function () {},
        });
        var config = {
            type: Phaser.WEBGL,
            width: 320,
            height: 640,
            backgroundColor: '#000000',
            parent: 'phaser-game',
            physics: {
                default: 'matter',
                matter: {
                    debug: false,
                    gravity: {
                        y: 0,
                        x: 0,
                    }
                },
            },
            callbacks: {
                postBoot: function (game) {
                    game.canvas.style.width = '100%';
                    game.canvas.style.height = '100%';
                }
            },
            scene: [boot, test]
        }
        var game = new Phaser.Game(config);
    },
}
my_game.init()

nobody ?

I think it is because you run out of collision categories. The categories are not reset when a scene is restarted. If you print

g.matter.world.nextCategory();

You will see that it starts returning strange numbers after a few restarts. To fix it you will have to reset the categories, I do not remember how I solved it in 3.16 (that you are using), but in later Phaser releases you can use

g.matter.world.resetCollisionIDs();

Running it on scene start, before nextCategory(), should work fine.

edit
https://jsfiddle.net/m563g29y/ phaser 3.22 and using resetCollisionIDs() to fix the issue.

3 Likes

Cool thanks. For my personal information, how did you discover that ? By reading the docs ?

Not sure! Possibly it was mentioned in a tutorial I followed when learning matter/phaser. I do recall having a similar issue as you, going back and forth between levels would eventually make collisions stop working. Narrowed it down to the nextCategory call and then possibly found the info on the limits of categories in the matterjs docs.

Anyhow, highly recommend you use 3.22 when using Matter in Phaser as that release had a ton of improvements to Matter specifically.