Unable to see a matter physics circle in phaser3

Phaser 3
1

Hello !

I am new to Phaser and matter physics. I played around a little with Matter.js before starting with matter physics in phaser 3 as suggested in the below article

I created a simple map using Tiled and I want a circle (or ball ?) to drop into the screen and land on a collision surface. Unfortunately, I am unable to see the circle when I load my game in the browser.

By the way, how to set color to a factory object of matter physics ?

Here is my code of mainscene, I am not sure exactly where I should add the matter physics factory object.

export default class MainScene extends Phaser.Scene {

preload() {

    this.load.tilemapTiledJSON("map", "assets/tilemaps/PhysicsLevel1.json");

    this.load.image(

      "tiles",

      "assets/tilesets/Overworld.png"

    );



    this.matter.add.circle(25, 0, 50, {label:"ball", angle: 0, position: {x: 10, y: 0}, density: 10});

  }

  create() {

    const map = this.make.tilemap({ key: "map" });

    const tileset = map.addTilesetImage("Overworld", "tiles");

    const behindLayer = map.createStaticLayer("WallLayer", tileset, 0, 0)

    const doorLayer = map.createStaticLayer("DoorLayer", tileset, 0, 0)

    doorLayer.setCollisionByProperty({ collides: true });

    behindLayer.setCollisionByProperty({ collides: true });

    this.matter.world.convertTilemapLayer(doorLayer);

    this.matter.world.convertTilemapLayer(behindLayer);

    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

    //this.matter.add.circle(25, 0, 50, {label:"ball", angle: 0, position: {x: 10, y: 0}});

  }

  update(time, delta) {

  }

}

Here is the index.js

import MainScene from “./main-scene.js”;

const config = {

type: Phaser.AUTO,

width: 800,

height: 600,

backgroundColor: "#000c1f",

parent: "game-container",

pixelArt: true,

scene: MainScene,

physics: {

  default: "matter",

  matter: {

    // This is the default value

    gravity: { y: 200 },



    // You can also pass in Matter.Engine config properties:

    //  http://brm.io/matter-js/docs/classes/Engine.html#properties

    enableSleep: true

  }

}

};

const game = new Phaser.Game(config);

I am a beginner, any help will be appreciated.
I am able to see the map I created in the game window but not the circle.

2

this.matter.add.circle only adds a physics body to the world but not any display element

You can turn on debug to see it in the world while testing by adding this to your config:

const config = {
    // ...
    physics: {
        default: 'matter',
        matter: {
            gravity: { y: 200 },
            debug: true
        }
    }
}
1 Like
3

Okay, so how do I actually make it appear in the screen without needing to use debug ?

4

You can do something like this to add a circle gameobject and then attach a Matter body to it:

const circle = this.add.circle(400, 200, 100, 0xffffff)
const body = this.matter.add.circle(400, 200, 100)
this.matter.add.gameObject(circle, body)

As an aside, gravity of y: 200 is probably going to be too much in the matterjs engine and result in some odd behavior :joy: it should default to 1 if you don’t set anything

3 Likes
5

Should that be in the preload() ? It came and disappeared in a second.

6

It should be in create instead of preload

In my tests having the gravity high like 200 did result in it appearing and then disappearing.

You can try to make gravity 0 and it should just float where you put it