Pixel distortion / shifting issue

Phaser 3
1

Hi,

I have run into an issue where pixels appear to be distorted / get slightly shifted when interacting with other game objects. Here is an example of what’s happening:

pixel_bending

Immediately when the game begins we can see that the red health bar above the player square (a sprite) is slightly distorted. The health bar is composed of two Rectangle game objects - the red health meter and a black stroke for an outline. Right when the game starts, the health bar is distorted.

The translucent black square with white outline is an Inventory window. This is just a Container with a Rectangle background which has the translucent black background and white stroke outline.

As shown in the example, when you click and drag the Inventory window, the health bars of both Player and Skeleton distort.

When we kill the skeleton and open up it’s corpse Inventory window we can see that there is a Bandaids (sprite) item and then further clicking/dragging the Inventory windows and Bandaids item you can see that the game objects slightly shift. In addition, the Bandaids sprite appears to “compress” as we see the word, “bandaids” get distorted. Again, this is just a sprite, not a Text object. It’s also not just dragging objects. When we hide/show an Inventory window, the shift/distortion still happens.

We can also see the bottom Hot Bar slightly shift (white outline). Basically, all of my game objects shift in some way.

I think I’ve narrowed it down to an issue with the game config, specifically, roundPixels and pixelArt both being set to true. If either one is set to true, the problem is still there, however, if I set both to false, then the problem does not appear. Of course, if both properties are set to false then I lose the crisp look of the strokes and sprites (in this case the text).

Has anyone encountered this problem? I’m guessing this is normal behavior, but why would this be happening and how might I be able to prevent it while still enabling pixelArt / roundPixels? My Sprite squares are whole pixels (except the text I guess?) and it’s happening to the Rectangle game objects as well. Not sure if it matters, but I use whole integers everywhere. It’s possible I’ve missed some number that needs to be Math.floor’ed, but I’m not even sure if that’s something affecting my problem.

Any help is much appreciated, thanks!

2

pixelArt: true includes roundPixels: true.

You can stroke a single Rectangle with setStrokeStyle(…).

It’s odd that the shapes not being moved seem to be affected. You could try not using Math.floor and see if anything changes.

3

Thanks for the recommendations.

I have tried removing the floor() functions, but still getting the shifting pixels on everything ;/

4

Is this Phaser v3.70.0? Are you scaling the game canvas at all?

5

This is v3.70.0. And no, I’m not scaling the canvas or anywhere/anything else.

6

I’ve just tried with v3.60.0 and the problem does not show up. I know the internals of roundPixels was changed in 3.70.0. Should I be creating an issue on github about this?

7

I guess so. Make a minimum test case if you can. :slight_smile:

8

Okay, I think I’ve been able to determine where the problem takes place, but I’m not sure why. Here’s an example to play with:

If you drag the large green rectangles out of the way and click/drag on the broken sprite box you should be able to experience the rendering shift.

The problem does not occur if you comment out line 177: this.draggable_sprite.setDepth(2); However, when the depth of the sprite box is not increased then you won’t be able to drag it across the large green rectangles.

Maybe there’s another way to accomplish what I want (think dragging game object items between inventory windows)… like maybe inventory.disableInteractive() in order to still be able to drag an item across open windows.

However, is it expected behavior to see a shift in the rendering (for all scenes) when using setDepth(), especially since it does not appear to happen in v3.60.0?

9

I am pretty sure this is the same issue I am having with 3.70 that does not happen on 3.60. When I move the camera, any sprites placed on the screen wobble a bit and actually slightly distort when I look at them zoomed up. The sprites are stationary game objects.

10

I just finally fixed this in 3.70 by setting roundPixels to false on the camera. I had it set to false in the game config but that had no impact. This worked for me:
this.cameras.main.roundPixels=false

11

startFollow() also sets roundPixels.

12

Well, good thing I put it right after the startFollow() then. Strange that this was no issue in 3.60 and I had roundPixels and pixelArt both set to true in game config…

Now I set it in cameras.main.roundPixels=false for 3.70 and all is well.

13

Thanks for the info and suggestion @UncleChris. This worked for my case as well - setting roundPixels to false on my HUD Scene camera.

Maybe roundPixels gets modified when setDepth() is called?