pingu Posted July 12, 2018 Share Posted July 12, 2018 Hi, I am trying to render a sprite in Phaser 3 and it looks like this: https://imgur.com/a/gnOSWFj There are those extra lines on the right and top edges. My original image is this: https://imgur.com/a/npd15aH As you can see there are no extra lines. What could the issue be? Thank you Link to comment Share on other sites More sharing options...
NoxBrutalis Posted July 12, 2018 Share Posted July 12, 2018 afaik, there can be many different reasons, but with just the image alone, nothing definitive can be said I think. Why not post the code? That will possibly help determine the issue. Make sure you use the code tags in the comment. Link to comment Share on other sites More sharing options...
Tom Atom Posted July 13, 2018 Share Posted July 13, 2018 Is your image part of atlas? If yes, did you add padding between sprites? Link to comment Share on other sites More sharing options...
bossikkk Posted July 13, 2018 Share Posted July 13, 2018 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 comment Share on other sites More sharing options...
Antriel Posted July 13, 2018 Share Posted July 13, 2018 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). Link to comment Share on other sites More sharing options...
pingu Posted July 20, 2018 Author Share Posted July 20, 2018 Hey guys, Thanks for the responses. I don't use any tileset or texture packing / atlas. My code is as follows: <!DOCTYPE html> <html> <head> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> </head> <body> <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; return; } </script> </body> </html> 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 comment Share on other sites More sharing options...
Tom Atom Posted July 21, 2018 Share Posted July 21, 2018 @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.) pingu, enderandpeter and NoxBrutalis 3 Link to comment Share on other sites More sharing options...
enderandpeter Posted December 28, 2019 Share Posted December 28, 2019 So weird... indeed using a 31x64 image instead of 32x64 got rid of the spooky line in my case too. Link to comment Share on other sites More sharing options...
Recommended Posts