Weird graphic glitch using WEBGL on iPad

[BdR]

I'm working on a Phaser game which combines sprites to form bigger game objects, like blocks or snakes. This works fine, except when I try it on an iPad it displayes unwanted stripes between the sprites. See image in attachment to see what I mean.

I made a test page to isolate the problem, and I found out that it's caused by the renderer. If set to Phaser.WEBGL it causes stripes but only on the iPad. I've tried it on several different devices from friends and colleagues, and on Windows laptop, Samsung Tab 2, HTC Desire, Galaxy Note II etc. it displays correctly. When I set it to Phaser.CANVAS it also displays correctly on the iPad. Btw I've tested on a iPad2 and a iPad4 and it's the same on both. And initially in my game I had the renderer set to Phaser.AUTO but apparently on iPad that defaults to Phaser.WEBGL, that's how I first noticed the stripes.

Any ideas what causes these stripes? Or should I just set the renderer to Canvas? The example uses a sprite atlas so maybe there is some rounding-off issue going on? Or maybe an issue specific with the GPU of the iPad?

See the test page here
http://www.bdrgames.nl/testconnect/

[Tom Atom]

Hi, this is quite a common problem. In your atlas, you have one pixel free space between images. But it is not enough for tiling sprites. If you use TexturePacker, use Extrude (https://www.codeandweb.com/texturepacker/documentation) to repeat pixels at image borders. I have my own sprite packing tool, so have no experience with TP, but I use only extrude - no padding is then needed.

[BdR]

Thanks for the comment, extruding the sprites fixed my problem. So extending the graphics to outside of the sprite's border, simply copying one row and/or column of pixels. And you are right, this is a more general problem with GPU hardware and textures and/or videodrivers (so nothing to do with Phaser) because a few years ago when I was using GLBasic and OpenGL I noticed the same thin-lines-problem and other people also reported the exact same problem.

Anyway, I use Leshy SpriteSheet Tool which doesn't have an extrude option but I created a script to process the resulting .JSON based on sprite filenames to include support for extruding some sprites. For my game the sprites do not need to be extruded in all directions (up, down, left, right), but some only to the left, some up&down etc.