How do I have a completely solid edge on artwork tiles?

0 favourites
  • 5 posts
From the Asset Store
On the Edge is a puzzle game where you have 40 levels to have fun with.
  • I am in the process of building and placing the background tiles for my current game project. But the edges of the tiles are fuzzy for no apparent reason in the game engine and it causes visible seams.

    I am taking care to save each piece to precise sizes so there are absolutely no transparencies on the edges of the tiles (png's). I even check the artwork once created, so there is no"fuzziness". When placed in the game engine, the edges become blurred by about 1 pixel.

    Is this an aliasing issue? Something I can turn off when dealing with solid, un-moving assets on background layers? Or am I just going to have to "chalk" all the edges of my tiles with extra bits?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • when you say "background tile" do you mean tiling backgrounds? or are you loading them as sprites? can you upload the PNG file you're using, or give a link to it via dropbox or even email it to me at and I can look at it for you?

    I can use background tiles without any issue. What are you editing the original source image(s) in?

  • Thanks 80bit, I've sent you en email with one of the pngs I've used. I am not actually tiling the files, as a script. I am placing them by hand to create the level, so I guess that counts as sprites.

    I use Illustrator to create the asset to a certain size, making sure it is exactly even as pixels (no decimals). I then export to web through Illustrator at 150% for extra fidelity, in case I need to size things differently in-engine. Even when shrunk down to 100%, the fuzziness on the edges of the pngs remain.

  • are you 'cropping' the images in construct? that will add a 1px border around the edge. Also if you are sizing your image up or down in construct there will definitely be a change in the edge as it is basically resampling the image so the edges will get blurred / distorted from your original image. make sure the image you export from illustrator is the size you're going to use in your game. if you need things to butt up next to eachother, make sure the images are the set size before you bring them in.

  • Thanks for the hasty reply. I've tried placing a few of the asset tiles in at their normal size, without re-sizing in the game engine and the issue is still there. I'm just not sure how to handle it.

    I've looked for other examples of the issue in some of the samples that come with construct. The space blaster's background panels have the issue, and they seem to solve it by overlapping the artwork by a couple pixels. The ghost shooter's tiled panels DON'T seem to have the issue for whatever reason.

    I admit I don't have much experience working the engine, I'm the art dude and working in Construct is not my area of expertise. I'm also a bit (lot) anal about pixel perfection in my work normally. If there is a simple option to turn off aliasing or whatever for certain layers, that fixes this issue, great. If not, I'd just like to know what I'm dealing with so I can compensate my work to accommodate the engine.

    It wouldn't even be such an issue, if the slight fuzziness of the edges didn't cause nasty visible seams during gameplay, especially while moving.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)