Sprite is not rendered correctly (extra lines on the edge)

Recommended Posts

How avoiding the texture bleeding issues on WebGL.  

Tile Extruder is a node based CLI app that automatically fixes tileset images for WebGL, so they no longer have edge bleeding where the tiles join at the sides. It's easy to build into your workflow and includes sample code showing how to use the extruded tiles in Phaser 3.

tile-extruder --tileWidth 32 --tileHeight 32 --input ./tile_jungle_ground_brown.png --output ./tile_jungle_ground_brown-extruded.png

Note: you'll have to adjust your margin & spacing because of the extrusion. If you had no margin & spacing, then the new margin is 1px and the spacing is 2px.

Share this post

Link to post
Share on other sites

I'm just gonna add to all this that if you use TileSprite, it would cause this kind of issue too due to aforementioned pixel bleeding. And that's regardless of where the sprite is on the atlas, rather it depends on how the TileSprite cuts it out (as it actually creates a new texture).

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.