Issue with position graphics when scale on html5

Hi,

I was trying made a pseudo race game. But I have a problem with graphic position and size when I scale it so it can fit on browser resolution.

Scale my graphic, there is a gap between each graphic :

Not scale my graphic, no gap :

So I was draw each segment using :

sptRoad.graphics.beginFill(color, 1);
sptRoad.graphics.moveTo(x1, y1);
sptRoad.graphics.lineTo(x2, y2);
sptRoad.graphics.lineTo(x3, y3);
sptRoad.graphics.lineTo(x4, y4);		
sptRoad.graphics.endFill();

The gap problem occur when I scale sptRoad like this :

sptRoad.scaleX = aspectRatio;
sptRoad.scaleY = aspectRatio;

Is there solution for this? I want my game fit in all browser resolution.

Thanks

Can someone help me about this issue?

I would try to use http://api.openfl.org/openfl/display/Graphics.html#drawPath and see if it changes something

We’re using canvas to draw on HTML5, and there are subtle rules in how it handles anti-aliasing. Namely, edges between two shapes sometimes show the seams. The solution here might be to use BitmapData instead of Graphics, as scaling will not scale up the pixel scale being used. You might be able to do it using getPixels then manipulating them directly, or using fillRect, I’m not sure how the performance would compare, but worth trying?

There’s also a define called -Dopenfl-disable-graphics-upscaling that might help as well

I already tried drawPath and the result same.

It’s working using BitmapData, Thank you very much.

1 Like