strokeRoundedRect() draws wrong lines on mobile

[fekoch]

Version

• Phaser Version: 3.50 Beta Build 11

• Operating system: Android 9

• Browser: Firefox 83.1.0 (Mobile)

Description

When you call the strokeRoundedRect()-Method in the smartphone-browser with a line-thickness >2, the beginnings of the arcs in the corners draw lines to (0,0):

Example Test Code

The code is an adapted version of the example from phaser.io: https://phaser.io/examples/v3/view/game-objects/graphics/stroke-rounded-rectangle

var config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

var graphics;

function create ()
{
    graphics = this.add.graphics();

    graphics.lineStyle(1, 0xff00ff, 1);

    graphics.strokeRoundedRect(32, 32, 300, 200);

    graphics.lineStyle(6, 0xffff00, 1);

    graphics.strokeRoundedRect(360, 240, 400, 300, { tl: 64, tr: 22, bl: 12, br: 0 });
}

Additional Information

[photonstorm]

@fkoch-tgm does it do it for a filled rounded rectangle as well?

[fekoch]

@photonstorm I haven't tested it yet

[FloodGames]

I have seen this behaviour. Thanks for reporting!

[h2ooooooo]

@photonstorm Yeah I can confirm that the same happens with a rounded rectangle even after adding fill to it.

The issue seems to happen in the arc method, and only when Phaser is running in WEBGL mode. (Phaser.CANVAS works fine, even in Firefox 89 on Android 11).

The most simple solution at the moment seems to be what @fkoch-tgm suggested, and just go with a lineStyle thickness of 2 or less. Can probably hack multiple 2-px rounded rectangles on top of eachother with varying sizes to get a thicker line, even though it's a crappy solution.

This is happening with the newest version of Phaser (3.55.2).

For reference this works, but is a horrible solution:

let lineThickness = 10;
let height = 100;
let width = 100;
let radius = 10;

// First draw with thickness 1, then draw on top with thickness 2 for more smooth corners
for (let lineStyleThickness = 1; lineStyleThickness < 2; lineStyleThickness++) {
	for (let i = lineThickness; i >= 0; i -= lineStyleThickness) {
		if (i < lineStyleThickness) {
			continue;
		}

		let i2 = i * 2;

		let gfx = scene.make.graphics()
			.lineStyle(lineStyleThickness, 0xffffff, 1)
			.strokeRoundedRect(i, i, width - i2, height - i2, radius)

		this.add(gfx);
	}
}

[sreadixl]

I am seeing this issue was well, but currently only on older Android devices and on Kindle devices. Android device is a Samsung Galaxy S6 running Android 5, and the Kindle device is a Kindle 7 running FireOS 7. Happens only with lineStyle graphics (and maybe also when using Ropes, but haven't been able to confirm it yet).

This seems like it's probably related to #3955. I tried using the "working combination" solution (#3955 (comment)) but it doesn't seem to solve it.

[sreadixl]

Someone posted some code to fix the rounded rect issue in #3955 and it works for me - the only issue is that it doesn't create the exact same rect size as the functions in Phaser (which is probably easily fixable, I just haven't tried doing it yet): #3955 (comment)

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

I've tested this on various old Samsung devices, on old versions of Android, and the fix works fine.

I'm using 3.55.2 and experiencing the same, I read the 3.50 changelog and it should be fixed in this version. May I know which one I need to use?

Thanks

[photonstorm]

I'm using 3.55.2 and experiencing the same, I read the 3.50 changelog and it should be fixed in this version. May I know which one I need to use?

It's the 3.60 version it is fixed in.