Sprite sheet example for Matter JS physics engine?

Phaser 3
1

Has anybody seen a sample of how to use spritesheets with the MatterJS physics engine? I have one for the Arcade physics engine that works fine. But when I try the same code in my new app that uses MatterJS instead, the spritesheet just drops into the game world showing all frames at once (and then falls through the floor).

PRELOAD:
this.load.spritesheet('dude', '/app/dist/dude.png', { frameWidth: 32, frameHeight: 48 });
CREATE

       player = this.matter.add.sprite(100, 450, 'dude');

        player.setBounce(0.2);
        // player.setCollideWorldBounds(true);

        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'turn',
            frames: [ { key: 'dude', frame: 4 } ],
            frameRate: 20
        });

        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
            frameRate: 10,
            repeat: -1
        });
2

Have you tried specifying the spritesheet frame to use when creating the sprite?

player = this.matter.add.sprite(100, 450, 'dude', 0); // < note the final parameter = 0, which is the frame

I would assume if you omit that last parameter it probably uses the entire spritesheet as an image.

See docs
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.Sprite.html

1 Like
3

Thanks, that worked great! Would you happen to know of another sample that uses a texture atlas instead (JSON format)?

4

You can definitely load spritesheets from a texture atlas, though I have never tried this.

Here is a working demo
http://labs.phaser.io/edit.html?src=src\textures\sprite%20sheet%20from%20atlas.js

The http://labs.phaser.io/ examples are a great source of help.

1 Like