Pixel space between sprites during movement

[synesthesia]

I constructed speech bubbles out of two images, the bubble itself and the tail. With these images, I place the four corners and the tail as images and the borders and inner space as tile sprites. I recognized that, when moving around, there are spaces between the speech bubble sprites appearing, see this image:

Also, the edges of the bubble are not consistently smoothed. It seems like the images are repeated and I have a little blur for the first half and then none for the second.

I have initialized the rendering like so to avoid any anti-aliasing / smoothing:

this.game.renderer.renderSession.roundPixels = true;
Phaser.Canvas.setImageRenderingCrisp(this.game.canvas);
Phaser.Canvas.setSmoothingEnabled(this.game.canvas, false);
PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;

But the sprite gap looks more like a frame buffer synchronization issue? Any pointers?

Thanks
synesthesia

 

[Tom Atom]

If using WebGL, your problem may be similar to this:

 If using only canvas, check if your speech bubble's position (all parts) are at rounded coordinates. Use Math.floor to round it down. Coordinates with fractional part can cause it.

 One solution is to prerender whole bubble into texture and then use it - discussion here may be source of inspiration: