Rectangle does not show in game word (MatterJS)

Phaser 3
1

Up until now I’ve been using spritesheets and images in my MatterJS game and all has worked well. Now I’m trying to work with and understand how shapes fit into the scheme of things.

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Rectangle.html

I am trying to add a simple rectangle that I want to be part of the game world and game physics. However, when I add the rectangle I don’t see it in my game canvas and the other game objects in the world just fall to the ground indicating that it’s not there in the physics either. I made the rectangle really big so the other objects should definitely land on it.

What am I doing wrong?

Also, the docs say that a game object can only belong to one scene. But in all the examples I have scene so far there are objects created in the ‘create’ scene that still exist in the ‘update’ scene. Can anyone unravel this for me?

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#1b1464',
    parent: 'house-div',
    physics: {
        default: 'matter'
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    "transparent": true
};

var background;
var platforms = new Array();
var ball;

var game = new Phaser.Game(config);

function create() {
    // Set world bounds for the physics engine to the screen.  This means
    //  any objects in the world can leave the screen or cause it to
    //  scroll.
    this.matter.world.setBounds(0, 0, game.config.width, game.config.height);

    background = this.add.image(512, 310, 'background');
    ball = this.matter.add.image(50, 0, 'ball');
    ball.setCircle();
    ball.setFriction(1000);
    ball.setBounce(0.1);
    ball.setVelocityX(0.000001);
    ball.setAngularVelocity(0.01);
    // Stop ball.
    ball.body.velocity.x = 0;

    // Rectangle attempt.
    var stairs = new Phaser.Geom.Rectangle('create', 0, 0, 800, 600, 0xff0000, 0.5);
    this.matter.add.rectangle(stairs);
}
2

Hello, there!
I know this is a very old post, but…
I ran into the same issue here. Did you manage to solve this problem?
In my case, the rectangle actually instantiated, but I think it was rendered behind everything else,it was rendered behind the background.

If you have found the solution,please reply !
Thanks!

3

Aha! I got my answer!
Maybe you can apply it to yours as well (if you’re still making games…)

this.matter.add.rectangle(stairs);

This line will only add a rigid body without adding any kind of color or render it in anyway. So, I found this example:
Go to Phaser 3 Examples!!

So, it turns out you can add color and set some properties to the rigid body (or in this case the game object) as simple as this:

let rect = this.add.rectangle(0,0,10,10,0xff0000,1);
this.matter.add.gameObject(rect);

The second line is written so that the game can instatiate a game object (rectangles, circles, all of those are included in Game Object).

The properties of the game object can be set by writing the first line.
Go try it yourself!

Thanks! :laughing: