How can I add add colour to my this.matter.add.rectangle

Question

Does anybody know how to add colour to my rectangle?

I have used this.matter.add.rectangle.

I am making a game which cuts shapes in half, however I can't figure out how to keep the game physics and add colour. I can add colour when taking out .matter, but I need this for the shape to cut.

here is my code:

        let level1;
window.onload = function() {
    let gameConfig = {
        type: Phaser.AUTO,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 600,
            height: 700
        },
        scene: scene1,
        physics: {
            default: "matter",
            matter: {
                gravity: {
                    y: 0
                },
                debug: true,
            }
        }
    }
    level1 = new Phaser.Game(gameConfig);
    window.focus();

}
class scene1 extends Phaser.Scene{
    constructor(){
        super("PlayGame");
    }

    
    create(){

        this.matter.world.update30Hz();
        this.matter.world.setBounds(10, 10, level1.config.width - 20, level1.config.height - 10);
        let rect = this.add.rectangle(level1.config.width / 2, level1.config.height / 2, 600, 100, 0xff0000);
        this.matter.add.gameObject(rect);
        this.lineGraphics = this.add.graphics();
        this.input.on("pointerdown", this.startDrawing, this);
        this.input.on("pointerup", this.stopDrawing, this);
        this.input.on("pointermove", this.keepDrawing, this);
        this.isDrawing = false;
        this.add.text(13, 11, 'Level 1',{fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif'});


    }

    startDrawing(){
        this.isDrawing = true;
    }
    keepDrawing(pointer){
        if(this.isDrawing){
            this.lineGraphics.clear();
            this.lineGraphics.lineStyle(1, 0xff0000);
            this.lineGraphics.moveTo(pointer.downX, pointer.downY);
            this.lineGraphics.lineTo(pointer.x, pointer.y);
            this.lineGraphics.strokePath();
        }
    }
    stopDrawing(pointer){
        this.lineGraphics.clear();
        this.isDrawing = false;
        let bodies = this.matter.world.localWorld.bodies;
        let toBeSliced = [];
        let toBeCreated = [];
        for(let i = 0; i < bodies.length; i++){
            let vertices = bodies[i].parts[0].vertices;
            let pointsArray = [];
            vertices.forEach(function(vertex){
                pointsArray.push(vertex.x, vertex.y)
            });
            let slicedPolygons = PolyK.Slice(pointsArray, pointer.downX, pointer.downY, pointer.upX, pointer.upY);
            if(slicedPolygons.length > 1){
                toBeSliced.push(bodies[i]);
                slicedPolygons.forEach(function(points){
                    toBeCreated.push(points)

                })

            }
        }
        toBeSliced.forEach(function(body){
            this.matter.world.remove(body)
        }.bind(this))
        toBeCreated.forEach(function(points){
            let polyObject = [];
            for(let i = 0; i < points.length / 2; i ++){
                polyObject.push({
                    x: points[i * 2],
                    y: points[i * 2 + 1]
                })
            }
            let sliceCentre = Phaser.Physics.Matter.Matter.Vertices.centre(polyObject)
            let slicedBody = this.matter.add.fromVertices(sliceCentre.x, sliceCentre.y, polyObject, {
                isStatic: false
            });

            this.add.text(13, 11, 'Level 1 Complete!',{fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif'});

        }.bind(this))
    }
};

I need to fill the two new shapes in red.

score 0 · Answer 1 · answered Jun 06 '23 at 13:25

0

To fill the rectangle, you can use the fillStyle property of the rectangle's render object, like this:

rect.render.fillStyle = '#ff0000';

answered Jun 06 '23 at 13:25

Camelopardalus

499
1
4
20

this doesn't seem to work with 'let rect = this.matter.add.rectangle – engineeringstudent1999 Jun 06 '23 at 14:05
If this issue https://github.com/photonstorm/phaser/issues/3369 is correct, this feature sadly doesn't work with phaserjs. – winner_joiner Jun 06 '23 at 16:45

winner_joiner · Accepted Answer · 2023-07-05T11:43:56.383

Why not simple create a "normal" rectangle, and add that object to the physics world.

Mini Demo:

document.body.style = 'margin:0;';

class GameScene extends Phaser.Scene {
    create(){
         this.rect = this.add.rectangle(160, 15, 100, 50, 0xffffff)
         this.matter.add .gameObject(this.rect)
    }   
   
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: GameScene,
    physics: {
        default: 'matter',
        matter: {
          debug: true,
        }
    }
}; 

new Phaser.Game(config);
console.clear();

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

Extra - Info: phaser uses a subset of the matter library, atleast it says so in this issue from the maintainer github.com/photonstorm/phaser/issues/3369.

this worked thank you! do you know how I would do it for the objects created after the rectangle has been cut?I have added photos above to show what is happening now. And I have added my full code. lines 94-97 are where the new objects are made, and I need these to be filled red too, but it doesnt work by adding the object to the physics world after for these lines. — engineeringstudent1999, Jun 06 '23 at 14:37

How can I add add colour to my this.matter.add.rectangle

2 Answers2