Found solution for seams

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 <img src="smileys/smiley17.gif" border="0" align="middle">, 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!

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.

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.

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

Because you have lots of those on your sprites.

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

— 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 :)

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.

—

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.

vtrix

This works only for Tiled Background or also works for TileMap ?

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

—

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

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

This does not fix seaming in all situations. It can help reduce seaming but adding a 1px border does not solve it. Say two objects are adjacent and you scroll half way between two pixels (so .5 of the way between them). The first object fills its edge at 50% opacity, which is the correct result with linear sampling. Then the second object also fills the gap at 50% opacity. However drawing something with 50% opacity over something else with 50% opacity does not result in 100% opacity, it results in 75% opacity. With certain low-contrast images this can be enough to fool you in to thinking it's solved, but in many cases the 25% opacity difference along the seams is still enough to show visible seams. As ever the only good solution for all circumstances is pixel rounding and letterbox integer scale.

hmm, i was hoping you would at least look further into the issue then just stating, use letterbox integer and pixel rounding, if adjustments in the texture generation can improve or remove seaming, its worth checking out imho.

letterbox integer scale is much harder to get right on multiple devices, its way less dynamic, point scaling results in jittery motion, so anyone who wants to do smooth scrolling or upscaling gets a less then optimal result, so its not good in all circumstances.

there are two options to remove seaming, padding is for texturebleeding,extruding is for the opacity problem (gaps)

have you checked the texture options of texturpacker? If it wouldn't have any effect, the options wouldn't exist

some reference links:

http://talkbinary.com/cocos2d-2/how-to-fix-strange-lines-in-cocos2d-by-using-extrude-in-zwoptex/

http://www.matim-dev.com/texture-packer---get-rid-of-sprite-artefacts.html

http://forum.starling-framework.org/topic/tile-anti-alias-pixels

I currently have thoses kind of problem with my game and to be honest i am quite frustrated. (Not fault of Construct 2)

I have a fully pixelated game and even if letterbox integer scale seem the best solution (as told by Ashley) this is not a good option at all. This will end up unprofessional. Why? because i can simply not go fullscreen without seeing tons of black area (because it didn't go really fullscreen but instead made the windows size fullscreen)! so what the point to go fullscreen then? most desktop game require a fullscreen mode.

So i started to look for another solution... I avoided seams by having an option to scale up the game at 2x when i reach 1920x1080p in screen size. I use the crop mode. Work good except that you must position everything when you reach the 2x upscaling mode. There another problem.. when you upscale 2x (to avoid seams) you ends up with 2x less place on the current screen size. This can have problems with interface which take a specific minimum size. In the end.. you end up with big layout.. that can reach 1920x1080 in screensize and then reducing the performance.

I think the problem lie in the fact that Construct 2 or Node-WebKit doesn't have the option to enable you to change the system resolution to fit the screensize. Such option would be very useful. I don't think it is normal that i have to make a third party app (kind of launcher) to do that job.

I am a bit out of options... anyone ?

I became momentarily excited about the tile map object. Then I spent the whole of last weekend trying to get it to work in my game in a way that kept seams from flickering and spoiling the effect. It turns out I've found it impossible - it could be an artifact of my old computer system and its ATI Radeon graphics card, but my system is not that unusual. Anyhow, the only way to make the appearance of seams unlikely (and not impossible!) is to set the game settings to 'visually dissatisfying in every other area' - so I gave up. I look forward to this feature being tweaked so that it can be properly used in the future...

— & vtrix, I feel your pain.

Seams exist yes.. but why we don't see any in most pixel commercial games ? Does they use the same techniques ? I analysed the situation and i just figured out that we are laking a real fullscreen solution.

I think that until Node-WebKit decide to implement such feature (which may be never done...) we won't have a real fullscreen option. I am not talking about resizing the windows frame.. but a real fullscreen option that change the system resolution then when you leave the game the last resolution get back. I found a solution... but its 500$ a commercial licence (not very good for starters indies..) so i decided to code one from scratch in C#. I will see then how it go. The idea is to use crop and then since we can change the windows size anytime make an app that start the game based on selected resolution and resize that windows while applying the resolution.