How to draw a polygon with Phaser 3?

user_11672868 0
Viewed 2076

I'm trying to draw a simple polygon shape using Phaser 3 framework. The problem is: the polygon doesnt show up.

var config = {
        type:Phaser.AUTO,
        width:800,
        height:600,
        scene: {
            preload: preload,
            create: create,
        }
    };

    var game = new Phaser.Game(config);

    var poly;
    var graphics;

    function preload() {}

    function create() {

        poly = new Phaser.Geom.Polygon();
        poly.setTo([ new Phaser.Geom.Point(200, 100), new Phaser.Geom.Point(350, 100), new Phaser.Geom.Point(375, 200), new Phaser.Geom.Point(150, 200) ]);


        graphics = this.add.graphics(0, 0);
        graphics.fillPoints(poly.points, true);
    }

The error i got is: "Phaser.Polygon is not a constructor", but i saw that code on a tutorial about Phaser.

EDIT: I changed the code as suggested by PhotonStorm, now i dont get errors but the polygon still doesnt appear.

EDIT2: solved by calling lineStyle and fillStyle on graphics object.

graphics = this.add.graphics(0, 0);

graphics.lineStyle(5, 0xFF00FF, 1.0);
graphics.fillStyle(0xFFFFFF, 1.0);
graphics.fillPoints(poly.points, true);
phaser-framework javascript
1 Answers

It's Phaser.Geom.Polygon.

Here is the docs page for it.

A basic example:

    var polygon = new Phaser.Geom.Polygon([
        400, 100,
        200, 278,
        340, 430,
        650, 80
    ]);
user_17378230
Related