Spritesheet display glitch with subpixel movement

[Tangaroa]

I am new to Phaser and have made two slightly different versions of the Cat Catcher demo from Travis Faas's Phaser book.

https://preview.c9users.io/srjcdt/srjc/module02/index.html
https://preview.c9users.io/srjcdt/srjc/module02/index_bak1.html

In index.html there is a visual artifact in the "catcher" (player) object in which the game displays the edge pixels from the catcher's net in front of the player. You can see it against the background hill in the upper right. It happens sometimes, but not all the time. You may have to flip back and forth a bit before you can see it.

This does not seem to happen in index_bak1.html. The only significant difference that I can see between the two games is that the movement speed was changed from an integer to a decimal number (5.5px).

Differences: (excluding comments)
https://preview.c9users.io/srjcdt/srjc/module02/diffs.txt

I upgraded locally to Phaser 2.8.5 and still see the issue.

I could probably work around this by increasing the width of the character by one and leaving a column of empty pixels between the frames, but it looks like there might be a display bug in some subsystem of Phaser.

[stupot]

Hi Tangaroa,

If an image coordinates aren't whole integer values then it can't be drawn to the screen with exact pixel mapping, the renderer may have to sample outside the source pixels which is where you sometimes see a little bit of the adjacent image ("edge pixels from the catcher's net").

If you want to keep your movement at += 5.5 then add some blank space to separate each cell of your spritesheet (look into texture atlases and the texturepacker app, this makes doing this easy).  This will also help with this problem showing during scaling.

Or change your movement +- to whole integer values so there are no 0.5's being added to the coords.

[samme]

You can use {antialias: false} in the Phaser.Game constructor and see if you prefer that.