Legacy GM [SOLVED]Gapes between 32x32 tiles when running the game while they are perfectly placed in32x32 grid

jobjorgos

Member

As you can see the image left looks good, but the image right has a line where you can see the background of the room through the wooden floor sprites which I out of course not want.


the sprites fit perfectly since they are 32x32 and tiled with a 32x32 grid, it should acctually not happen to see the background (which is set to black color).

When looking at it
in the room editior the wooden floor looks all good, but when running the game and espially when I move with my player, a strange line of pixels disappear between every horizontal row where wooden 32x32 floor sprites are placed.


Might it has something to do with pixelscaling?
 
Last edited:

jobjorgos

Member
Thanks for the quick reply!
I have
tried what you said but too bad it didnot fix it. :(


Changing the 'texture border width (texels):' did look even more strange when changing it from 2 (default) to 1 or 0.
When I tried to do 4 it looked exact the same as it did with 2. I tried every number above 2 untill 16 and none of them had any effect.
The background horizontal gaps between tiles keeps showing, espially when moving around in the room.

Notable is that I tested to play the game in 1024x768 screen size (the same as the rooms view size) and now it does not show strange gaps of the background between the tiles anymore, while in 1920x1080 screen it still looks buggy.

I know 1920x1080 is a 16:9 scale
while 1024x768 is a 4:3 scale.
so I though different scales may cause this problem so i changed the view size to the same 16:9 scale to a resolution of 1024x576, but too bad even in this view size the gapes were visible again.


Anyone who could help me in the right direction to look at how to disappear those gaps between tiles?
 
Last edited:
A

anomalous

Guest
How are you doing your camera/view? It has to be integer as well.
Scale/AR may cause that too as you note above.
 
J

Jabu

Guest
It looks blurry to me. Check in your global game settings, under your export (ex. Windows), under graphics, if "Interpolate colors between pixels" is activated, disable that.

It often puts those splits in between tiles because it is a built in anti-alias feature, so it is smoothing off the transparent edges. Let me know if that helps :)
 

jobjorgos

Member
Thanks for all replys
How are you doing your camera/view? It has to be integer as well.
Hmm I dont know any other ways of doing it other than this?




I dont know where or how a integer could be used here.


Check in your global game settings, under your export (ex. Windows), under graphics, if "Interpolate colors between pixels" is activated, disable that.
Awesome! That worked! Now in any resolution screen it has no gapes anymore between the tiles. But a downside of this is that the overall graphics of the game get a higher contrast or something which i dont like :( heres a example


Interpolate colors between pixels ON: nice soft looking graphics, but gapes in the woodenfloor


Interpolate colors between pixels OFF: unpreffered sharp graphics, but all gapes dissapeared



This tech blog may help you, especially if you're scaling tiles.

Edit: This utility will make fixing it easier.
Hmm very intersting, tomorrow when i have more time i gonna try that out. Hope that is the solution, otherwise I might just keep the sharp graphics i guess.
 
Last edited:

obscene

Member
While I like the sharp image better, you can easily soften the image manually by drawing the application surface a few times with slight offsets and lower alpha, or even better do an RBG-split effect.
 

jobjorgos

Member
This tech blog may help you, especially if you're scaling tiles.

Edit: This utility will make fixing it easier.
I like the look with interpolation turned on better (that's just me).

You need to make the tiles 2 pixels bigger each direction and make a 'bleed area' (i.e. copy the edges of the tiles to the bleed area). This is caused by the internal workings of your graphics card, where it tries to essentially do 'sub pixel' translations.
Sorry Ive been off for 2 days so im a bit slow with my reply. anyways cheers for helping me into the right direction. Im trying to do as you guys said, but after reading some articles im still wondering what to do.

Here's my tileset for the floor:



so... how do I add 2 pixel buffer to the horizontal and vertical direction?
I tried doing it with Tileset Champion, but the tileset becomes strange with these inputs as you can see in the image below.





Do I suppose to use 34x34 tiles in a room with 32x32 grid, or what is the technique to use?
I tried many different things without good result yet.

 

Jezla

Member
Tileset champion will generate a new tileset image, which you will have to add to your game (simply replace the image the background resource uses and adjust the tile properties to match the new image).

However, any tiles that have been previously placed in the room will need to be replaced with the new tiles, otherwise you'll have the same problem with them. New tiles should work properly.

Edit: Make sure that you enter your source tileset properties correctly into Tileset Champion. It looks like your SourceSafe has a 1 pixel horizontal and vertical offset and a 2 pixel buffer, yet in TSC, you have 0 for those properties. That could be why the output is strange.
 

jobjorgos

Member
any tiles that have been previously placed in the room will need to be replaced with the new tiles... New tiles should work properly.
So after using Tileset Champion the orginally 32x32 tiles have grown with 2 pixel buffer so the new size of the tiles becomes 34x34 i guess?
And if I replace them I keep the same 32x32 room grid so the tiles overlay each other?
 

Jezla

Member
The tiles are still 32x32. The only properties you will need to add is the separation added by Tileset Champion. As the tech blog I linked stated, the buffer added to the tiles is so that the GPU draw the correct colors whenever it attempts to draw the tiles at a different scale or orientation from the original.
 

kamiyasi

Member
You indeed need a buffer of at least 2 pixels between your tiles, and you must remember to let the colors bleed over onto the buffer area.

This can be done easily in Photoshop or comparible programs by duplicating your tileset layer, blurring it, making it opaque, and moving it behind your original layer. There are also plugins that do a better job for you.

The reason you need a buffer with bleed is because when a tile in drawn to the screen, the engine determines which pixels from the tileset get drawn. Depending on how your rendering system is set up, it may decide to use an extra half pixel on one or two sides (which gets rounded up because half pixels don't exist). You need the bleed over onto a buffer to account for this.
 

jobjorgos

Member
Excelent, the problem is solved with thanks to you guys for explaining the buffer technique!!
As you can see in the image, no gapes exists anymore!




It took a while for me to get the point of the buffer technique, because its really abstract and hard to understand.

Because of the explanation of you and the article, and with alot alot of tests to edit my tilesheet with different values such as offset and seperation, I discovered that this was the setting that worked:


Step 1:
The image below is created with Tileset Champion, adding 3px buffer to the original tilesheet.


Step 2:
Useing the following tile properties

This was by far the most difficult for me to find out.
I think I have run about 50 tests with difference tile properties values to get the exact one (3x3 offset / 6x6 sep).
 
Top