Jump to content

What to do about edges between tiles?


Recommended Posts

I'm building a grid of 64x96 sprites, laying them out at x * 64, y * 96, such that they should theoretically be seamless.

However, some artifacts are appearing in the seams between sprites (image attached).

My best plan to resolve that at the moment is laying sprites out at x * (63), y * (95). Does anyone know if there's another, accepted approach to this problem? I'm sure I'm not the first person to run into it.

 

seams.png

Link to post
Share on other sites

That was it - I'm rendering this from a single BaseTexture, which is required by the ParticleContainer. The sprites that tend to have seams are those with textures that border differently-colored textures. I think the textures are being anti-aliased somehow and some of the border pixels from neighboring textures are bleeding in.

I've started framing the textures with a 1-pixel padding; other suggestions welcome.

Link to post
Share on other sites
  • 11 months later...

Is this really the suggested fix for this issue? It seems such an obvious problem when tiling sprites. How do you all fix this in the graphics workflow so its more automatic if anything? I am using Aseprite which does have an "extrude" function to do this on individual frames of an animation but its mainly plain tileset sheets that require this extruded padding so it seems the artist would then have to draw the tiles as individual frames which is generally not how they work from what I have seen (except when making seamless patterns). Any hints is welcome. :)

Link to post
Share on other sites

It seems such an obvious problem when tiling sprites

welcome to OpenGL. 

Well, there's a solution - special shader that clamps coords according to the frame, but i dont have it for ParticleContainer. To think about it, i dont have it currently for anything, the only easy-available solution is in "@pixi/tilemap". For everything else you have to write shader from scratch , because currently im too busy with other things ;)

Link to post
Share on other sites

Ok, yes I seem to recall struggling with this in Phaser as well. Oh well. I guess I need to create some sort of script that takes a spritesheet PNG and adds those pixels around each tile expanding the image as well as I prefer to work on a full sheet of images instead of individual frames. Although I guess this depends a bit on the next version of Aseprite which should support tilemaps as well. Will be interesting to see how they go about defining which tiles are part of the sets you draw with and if they assume individual tiles selection from a sheet somehow.

EDIT: I just made a conversion script in nodejs that makes this image with padded tiles in their right border colours so it wasnt that hard to add to the workflow. :) - Give me a word if anyone needs it too.

Edited by johncl
Link to post
Share on other sites

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.

Guest
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.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...