Jump to content

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.

Link to post
Share on other sites

Hey guys,

Thanks for the responses. I don't use any tileset or texture packing / atlas. My code is as follows:

<!DOCTYPE html>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>

    var screenWidth = 450;
    var screenHeight = 800;
    var config = {
        type: Phaser.AUTO,
        width: screenWidth,
        height: screenHeight,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { x: 0, y: 0 }
        scene: {
            preload: preload,
            create: create,
            // update: update
        backgroundColor: 0xF4F1EC

    function preload ()
        this.load.image('sprite', 'sprite.png');

    function create ()
        var turn;
        turn = this.physics.add.sprite(screenWidth / 2, screenHeight / 2, 'sprite').setTint(0x00000);
        turn.setScale(screenHeight / turn.height * 0.406, screenHeight / turn.height * 0.406);
        turn.depth = 1;



My sprite is attached to this reply. I am clueless why this would happen with a simple image. I checked the image and made sure those bleeding artifacts don't actually exist.



Link to post
Share on other sites

@pingu found the problem... it is related to Phaser texture creating. See method createTextureFromSource() (https://github.com/photonstorm/phaser/blob/master/src/renderer/webgl/WebGLRenderer.js#L1144)

It sets wrap mode to CLAMP_TO_EDGE by default, which would be OK and no bleeding would be shown. But... if texture dimensions are power of two (which is your case), then it changes wrap mode to REPEAT. You can encounter imprecisions in GPU calculations, so your texture is drawn and small part is repeated - it is that bleeding. Your current sprite scale is 0.406, if you set it to 0.5, then calculations are little different and bleeding is not shown. If you animated scale, then bleeding would probably blink - sometimes shown, sometimes not.

So, solutions are:
 - add extra padding around your shape as @bossikkk suggested. If you want to preserve texture size 512x512, then draw your shape 510x510 and leave 1px empty on all sides,
 - simply change dimensions of your texture to not be power of 2 - like add 1 empty line and column to make it 513x513 texture (this is OK for development, but I do not like this solution - not sure, but I have somewhere back in my mind, that some GPUs are adding extra space for non POT textures to force them to nearest POT - in your case it would be 1024x1024 with lot of memory eaten.)


Link to post
Share on other sites
  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...