How can I fill my new shapes red after using this.matter.add.fromVertices

Question

I am making a small game which cuts objects in half.

I need the new shapes created to be filled in red, however it is not working.

Lines 94-99 are where the new shape is created, and hopefully filled in red...

line 99 is where I am currently working!

I have tried to use .render.fillStyle to make the shapes red, but this is not working. Any help would be greatly appreciated!

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: false,
            }
        }
    }
    level1 = new Phaser.Game(gameConfig);
    window.focus();

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

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

    
    let path = [{x:0, y:0}, {x:level1.config.width, y:0}, {x:level1.config.width, y:50},{x: 0, y:50} ];
        this.polygon = this.matter.add.fromVertices(level1.config.width/2, 70, path, { isStatic: true });
        this.polygon.gameObject = this.add.polygon(level1.config.width/2, 70 , path, 0xff0000);
        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(pointer){
        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){ 
              body.gameObject.destroy();
              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: true });
            let topleft = this.matter.bodyBounds.getTopLeft(slicedBody); 
            slicedBody.gameObject = this.add.polygon(topleft.x, topleft.y, polyObject, 0xff0000);



            }.bind(this));
        }
    };


<!DOCTYPE html>
<html>
    <head>
        <script src = "phaser.min.js"></script>
        <script src = "polyk.js"></script>
        <script src = "level1.js"></script>
        <script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>
        <script src="http://polyk.ivank.net/polyk.js"></script>

        <style type = "text/css">
            body{
                background-image:url("gamebackground.jpg");
                height: 100%;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                padding: 0px;
                margin: 0px;
            }

    </head>
    <body>
        <div id = "thegame"></div>
        <script>
    </body>
</html>

import Phaser from 'phaser'

import { scene1 } from 'Desktop/diss/level1.js'
import { scene2 } from 'Desktop/diss/level2.js'
import { scene3 } from 'Desktop/diss/level3.js'
import { scene4 } from 'Desktop/diss/level4.js'
import { scene5 } from 'Desktop/diss/level5.js'
import { scene5 } from 'Desktop/diss/level6.js'

const gameConfig = {
  type: Phaser.AUTO,
  width: 400,
  height: 400,
  backgroundColor: '#000088',
  parent: 'phaser-example',
  scene: [scene1, scene2, scene3, scene4, scene5, scene6]
};

const game = new Phaser.Game(gameConfig)

game()

winner_joiner · Accepted Answer · 2023-06-07T03:37:51.900

You could simply add the gameObject manually, to get the topLeft corner you can use the this.matter.bodyBounds.getTopLeft(...) function (link to the documentation)

btw.: If this issue github.com/photonstorm/phaser/issues/3369 is correct, the feature .render.fillStyle sadly doesn't work with phaserjs.

Demo, add new gameObjects:

After slicing the polygon-object it will be destroyed and the parts will be created with a small timeout.

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

class GameScene extends Phaser.Scene {
    create(){
        let path = [{x:0, y:0}, {x: config.width, y:0}, {x:config.width, y:50},{x: 0, y:50} ]
        this.polygon = this.matter.add.fromVertices(config.width/2, 70, path, { isStatic: true });
        this.polygon.gameObject = this.add.polygon(config.width/2, 70 , path, 0x00ff00);
            
        // ... Remove to keep demo short Demo
         
        this.input.on("pointerdown", this.startDrawing, this);
        this.input.on("pointerup", this.stopDrawing, this);
        this.input.on("pointermove", this.keepDrawing, this);   
    }
    
    startDrawing(pointer){
        // ... Remove to keep demo short Demo
    }
    
    stopDrawing(pointer){
        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){ 
              body.gameObject.destroy();
              this.matter.world.remove(body)
        }.bind(this))
        
        // JUST for the demo to see it appear
        setTimeout( _ => {
                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: true });
                    let topleft = this.matter.bodyBounds.getTopLeft(slicedBody); 

                    slicedBody.gameObject = this.add.polygon( topleft.x, topleft.y, polyObject, 0xff0000);

                }.bind(this));
        }, 500);
    }
    
    keepDrawing(pointer){
        // ... Remove to keep demo short Demo
    }
}

var config = {
    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>
<script type="text/javascript" src="http://polyk.ivank.net/polyk.js"></script>

Thank you this has worked!!! I am now trying to change the dimensions so that it crosses the whole screen, but I can't get the polygon dimensions to match the fromVertices dimensions.. could you help me with this? — engineeringstudent1999, Jun 06 '23 at 20:56
I'm not 100% sure what you mean, but I updated the example in may answer. I use here the values from the game `config`- object, to get the size of the game. I hope this helps — winner_joiner, Jun 07 '23 at 05:42
Thank you this worked so well! I now get errors in the 'let topLeft = this.matter.add.fromVertices' line. Do I need to import a different module for this work? — engineeringstudent1999, Jun 07 '23 at 08:35
No you don't need any other module, as you can see the demo runs. But what exactly is the error you see? — winner_joiner, Jun 07 '23 at 09:23
These are my errors: TypeError: null is not an object (evaluating 'body.gameObject.destroy') and TypeError: undefined is not an object (evaluating 'this.matter.bodyBounds.getTopLeft') — engineeringstudent1999, Jun 07 '23 at 09:35
The error hast to be somewhere else. Which phaser version are you using? I recommend using v 3.6+ _(**btw.:** I copied your code and it works)_ — winner_joiner, Jun 07 '23 at 09:48
I have added both my index.js and index.html files, do I change the phaser version in one of these? — engineeringstudent1999, Jun 07 '23 at 09:58
To be on the same side replace the 5 `script` tags (in the index.html) with this code ` ` — winner_joiner, Jun 07 '23 at 10:48

How can I fill my new shapes red after using this.matter.add.fromVertices

1 Answers1