Found solution for seams

Discussion and feedback on Construct 2

Post » Sun Jan 19, 2014 3:51 pm

@Ashley

i was aware of the seaming problem when using something other then point sampling, but i dislike the jittery motion it gives,and it gives the impression of bad performance

so i went thru with linear sampling and to my suprise i had no real seaming while running previews on pc and mobile,that is until you finally export.. bad seaming..

while utterly sad and broken , i found it odd that seams only showed on export

so i searched, and its like we know a problem of float position and bleeding of the texture, to prevent that, on export there is a 1 pixel border, this fixes the textures bleeding in each other

but here's the thing, while it doesnt bleed in another texture, the 1px transparent border still bleeds into the texture, and thats the problem..

the fix: extrude 1px border from the texture outwards
this is a real approach and its also used in texturepacker

demo project with seams
https://dl.dropboxusercontent.com/u/61666915/seams/index.html

same exact project with borders extruded (in photoshop) / no seams
https://dl.dropboxusercontent.com/u/61666915/noseams/index.html

my suggestion would be, to be able to flag a sprite as tiling and then generate this textures with a 1px extrude, only question is, where the texture borders meet, do you extrude each 1px what means you need a 2px gap, but i guess thats the only way to do it.

anyway i'm happy that i can continue without seams, yey!
ImageImage
B
71
S
22
G
7
Posts: 827
Reputation: 10,177

Post » Mon Jan 20, 2014 12:27 am

Hi, I think it would be nice if you could do a small example with just few sprites and release it as Tutorial with pics + capx. This is not something I in person have immediately need, but I'm sure this would be really useful to many C2 users.
Need help? Upload .capx file with your question.
B
16
S
4
G
2
Posts: 233
Reputation: 2,560

Post » Mon Jan 20, 2014 3:18 am

Ya, making images 1 pixel wider/taller or making the coordinates overlapping is the obvious thing. The main issue is with tiledmap object for which there is no solution and thus can't be used for most projects.
B
152
S
75
G
21
Posts: 1,795
Reputation: 23,285

Post » Mon Jan 20, 2014 3:31 am

I don't get it, which one are the seams? That thing in the background?

Because you have lots of those on your sprites.
B
33
S
9
G
1
Posts: 156
Reputation: 3,044

Post » Mon Jan 20, 2014 4:25 am

When people talk about seams, they mean the lines between 2 tiles/sprites. So if you have 2 images right next to each other in the editor, when playing the game you'll see a gap between them. This is why people should not be using the Tilemap object (unless you're making a game with the "pixelart" style).
B
152
S
75
G
21
Posts: 1,795
Reputation: 23,285

Post » Mon Jan 20, 2014 5:51 am

@alspal @Ashley

"When people talk about seams, they mean the lines between 2 tiles/sprites. So if you have 2 images right next to each other in the editor, when playing the game you'll see a gap between them. This is why people should not be using the Tilemap object (unless you're making a game with the "pixelart" style). "

for me it sounds like bug that should be fixed :)
B
18
S
7
G
1
Posts: 783
Reputation: 4,247

Post » Mon Jan 20, 2014 5:58 am

the seems are the flickering black lines between the tiles,(background is showing true)

i agree this is not the best demo because some of the tiles are not oriented wright but if you compare the two demolinks, you should notice it pretty well.

@alspal

i didn't overlap or make the tiles bigger in the editor, its the same export, only on the second i made changes in the export texture-atlas (extend the last tilepixel border 1pixel where the 1px gap is on export)

this doesn't make the sprites bigger or changes the position(ingame)

i think this fix can be used for tilemaps, sprites used as tiles and tiling bg for use with letterbox scale and linear sampling


i also got a description here from texturepacker program

Border/shape padding: The space between the border of the sprite sheet and the sprites themseves. If you see artifacts from neighboring sprites in your game, you may want to increase the values here to add more of a separation between the edges/sprites.

Extrude: This repeats the pixels around the borders of sprites. This is the opposite of adding padding if you see transparent gaps around the edges of your sprites, you may wish to set this to a higher value.vtrix2014-01-20 05:59:55
ImageImage
B
71
S
22
G
7
Posts: 827
Reputation: 10,177

Post » Mon Jan 20, 2014 7:51 am

@vtrix

This works only for Tiled Background or also works for TileMap ?
B
49
S
15
G
6
Posts: 535
Reputation: 7,197

Post » Mon Jan 20, 2014 12:48 pm

@TGeorgeMihai

i just checked the tilemap export, and it works differently than sprite and tilebackground, on export it compacts all the tiles, no padding

but i think internally it works still the same and probably has the same issue, so its something ashley should look into

@alspal

i see what you mean now about tilemap, it has pretty bad seams (even on preview)

on another note, i just tested the tilebackground, and where i know in the beginning of c2 had the same seam problem, now works perfect without adjusting

letterbox scale / fullscreen high q / high dpi / linear / pixel rounding off

https://dl.dropboxusercontent.com/u/61666915/tiledbg/index.html
ImageImage
B
71
S
22
G
7
Posts: 827
Reputation: 10,177

Post » Mon Jan 20, 2014 1:20 pm

tilemap with same settings as post above

https://dl.dropboxusercontent.com/u/61666915/tilemaptest/index.html

if you scale browser up and down, you can see that the second line of tiles has bleeding of the toprow (green line), so i think tilemap should improve with padding and extrude
ImageImage
B
71
S
22
G
7
Posts: 827
Reputation: 10,177

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 7 guests