Problem with Phaser 4 rectangles.

Phaser 3
1

So yeah I updated my project from Phaser 3 to 4 because of the preFX problem on mobile and I’ve stumbled on yet another problem.

If I create a rectangle and set its origin to (1, 0), it turns into a rectangle… yes from square to rectangle.

It was working well in Phaser 3 and I don’t know what to do. Please help…

2

Can you post a simple example of this issue for me? I haven’t seen something like this in Phaser 4.

3

No problem

this.testSqr = this.add.rectangle(300, 300, 100, 100, 0x0, 0)
this.testSqr.setStrokeStyle(5, 0xff0000)
this.testSqr.setOrigin(1, 0)

Just found out it the problem only exists for stroke-styling

4

Also just found out now that making the rectangle rounded by calling rect.setRounded(radius) fixes this problem.

Also I created a rectangular polygon and set the origin to (1, 0) and it also turned into a triangle.

this.poly = this.add.polygon(300, 300, [0, 0, 100, 0, 100, 100, 0, 100], 0x0, 0).setOrigin(1, 0).setStrokeStyle(5, 0x0)

5

Can you send your game config?

6

// main.js code

import { Game } from “phaser”
import TestScene from “./test.js”

class BoardGame extends Game {

constructor() {

super({

canvas: document.querySelector(“#game-canvas”),

type: WEBGL,

width: 1200,

height: 675,

transparent:true,

scale: {

mode: Scale.FIT,

autoCenter: Scale.CENTER_BOTH

},

scene: [TestScene]

})

}

}

new BoardGame

// test.js code

import { Scene } from “phaser”

export default TestScene extends Scene {
constructor() {super(“scene”)}

create() {
    this.testSqr = this.add.rectangle(300, 300, 100, 100, 0x0, 0)
    this.testSqr.setStrokeStyle(5, 0xff0000)
    this.testSqr.setOrigin(1, 0)
}

}

7

Thanks, it looks like that is a bug, perhaps related to this:

This will draw a square though:

const graphics = this.add.graphics();

graphics.lineStyle(5, 0xff0000, 1);
graphics.strokeRect(200, 300, 100, 100);

This also fixes it, but may not work for you:

this.testSqr.setOrigin(0.5);