How do I remove collision detection from a static image when using Matter.js?

Phaser 3
1

Below is my code for my first Phaser 3 test of the game I’m building. I am on the wrong side of two problems. A solution for either one of them would fix my situation.

CASE 1 - Image intended as background image collides with other objects

Using the Circular Body sample I added my desired background image to the canvas. I then used setStatic(true) to keep it out of the physics related to dynamic objects. Unfortunately, when the ball sprite drops, it rolls into my background image and stops moving.

How can I remove my background image from the collision detection code in matter-js?

CASE 2 - Make canvas transparent so background image set to host DIV shows through.

I tried every solution I found during a long series of web searches. Nothing worked. The canvas paints itself with a dark blue background and occludes everything behind it. I tried many different settings in my config: “transparent: true”, "render.transparent, etc. The canvas always hides the background and I’m wondering now if this has something to do with using matter-js instead of arcade physics.

How can I make the canvas background transparent?

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 ball;

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('background', '/app/dist/tsll-house-cropped-1024w-by-610h.png');
    this.load.image('ball', '/app/dist/wizball.png');
    this.load.image('platform', '/app/dist/platform.png');
}

function create ()
{
    background = this.matter.add.image(512, 310, 'background');
    background.setStatic(true);
    
    ball = this.matter.add.image(50, 0, 'ball');

    ball.setCircle();
    ball.setFriction(0.005);
    ball.setBounce(0.6);
    ball.setVelocityX(1);
    ball.setAngularVelocity(0.15);
    
    ground = this.matter.add.image(400, 400, 'platform');

    ground.setStatic(true);
    ground.setScale(2, 0.5);
    ground.setAngle(10);
    ground.setFriction(0.005);
}

function update ()
{
    if (ball.y > 600)
    {
        ball.setPosition(50, 0);
        ball.setVelocity(0, 0);
    }
}
2

Do you need to do any collision detection on the background? If not, can you add it as just a standard image, as opposed to adding it to matterjs.

background = this.add.image(512, 310, 'background');
1 Like