Any fix for the Tilemap seams ?

vtrix

Would work for this ?

Window Size: 720x720

Fullscreen in browser: Scale outer

Grid size: 72x72 (this is the measurement I use, 1 unit/square)

Ashley

Also if TileMap is not possible, is indicated to do the following:

Since I use 9-Patches, I can only use their actual size, can't use scale (unlike Sprites that support a higher/bigger resolution)... Is a good idea to increase my Grid size to 96x96 and the Window Size to 960x960 ?

tgeorgemihai , i cant do much with an image, i was refering to just the tilemap setup you currently have in a capx (no game-events needed) , so i can try some tests with the export. (but i see its not the normal seams, so i guess your using c2 tilemap and not sprites, so adjusting exported images wont work)

You must be sure to use integrer value scalling. This is a common problem with pixel games. Unfortunally there is no miracle to fix this.

vtrix

Thanks for your help, but I will continue to use 9-Patch (for fill) and Sprites (for corners) after all ... Works well on different resolutions ... it sucks that the TileMap Plugin is kind of useless It would helped me a lot.

Rushino

That is the point ... If I use Integrer Scaling I can say goodby to multiple resolutions

I was asking if there is a workaround for this.

vtrix

Thanks for your help, but I will continue to use 9-Patch (for fill) and Sprites (for corners) after all ... Works well on different resolutions ... it sucks that the TileMap Plugin is kind of useless It would helped me a lot.

Rushino

That is the point ... If I use Integrer Scaling I can say goodby to multiple resolutions

I was asking if there is a workaround for this.

There are tricks.. like adding padding to your tiles.. but i think this is more a nightmare if you ask me. I don't have the problem in my game because it won't end up as mobile game. Do you have plan to be on mobile ? if no then you might consider making it crop (option in your project) and position your HUD manually using Left, Right, etc.. viewport. This way you enable multi-resolution.

Rushino vtrix

Yes, I plan to release it on mobiles So I will continue to use 9-Patchs (for fill) and Sprites (for corners).

Is it a good idea to increase Window Size from 720x720 to 960x960 and my Grid Size from 72x72 to 96x96 in order to get 9-Patchs more detailed on resolutions like 1080p

finaly found a solution, sprite as tiles 16*16 tilemap, created in tiled, imported in construct, and adjusted the exported tileset

scaling is fullscreen inner, sampling linear, pixelrounding off

(if you zoom in very close, you will see some fine lines, but this is actually because of the graphics themself, >very small and also is exact the same on preview)

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

what do you think? clean enough?

vtrix could you post normal and adjusted tileset images for comparison?

vtrix

Looks and moves great on my Lumia 925 and Android tablet, zero seams

Not that I complain, but shouldn't it be more resource hungry since there are over 1000 instances of the same object (different frames) ?

tgeorgemihai Tilemap works a bit different from Sprite or TiledBG, so basically this is only one objects

You can read more about how Tilemap works here https://www.scirra.com/blog/ashley/3/tech-blog-tilemap-tidbits

shinkan

Sorry, my bad, I've read wrong "sprite as tiles 16*16 tilemap" ... I thought vtrix used actual Sprites as TileMap Thanks

And yes I know how Tiles work

I've read Ashley's blog post as soon as the TileMaps were implemented in C2

tgeorgemihai , your actually right, its sprites, 2600 50*50 (there's a row to many, you can clearly see how small one tile is pretty amazing it runs silky smooth on my nexus7, but because of everything is in arrays, you could optimize the count..., i dont know if i have to be sad or glad, because ive been telling this since the post where i claim to found a fix for seams. I just went testing the actual tilemap object, i thought i could potentially work like its now, but i see there are seams even on clustered objects.

so yes for fixing seams, (only for sprite tiles)

(this is from my first test, so i dont know yet what can be modified and what not)

original map i imported in c2

i added 1pixel padding around clusters (so they don't touch there borders and also not touch other clusters)

too better show the 16pixel grid and placement

import > this is in import sprite strip

notice that i only use 7*16 tiles, instead of, 8*16 tiles that would fit a 128 texture, this is because the automatic texturepacker adds a 1px transparent border around the tiles, if you use 8 it will scramble you imageclusters in different textures

(note, in this example i could have filled the 7th row with something)

after export (this is the actual map i used in tiled, again not yet totally sure if i could also use the originial

modified texture, i start at the top dragged the pixels from just above the 1px gap on top of the transparent area (you can drag a whole row over it) then did the same from left to right, (you wont notice this as instead of a transparent line it will be the same color pixel that gets blurred in)

this can be done pretty fast, the outside borders (off the full texture) i just filled in with the grass color

replace the original exported with the modified, result

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

so yes, its not the perfect workflow, but i hope this helps, and i hope there's a better workflow in the future

vtrix

Your solution only works with 16x16px Sprites ? Can't use bigger ones like 32px or 64px ? How did you fill the Layout ? Do you have a function or something like that ?

Long story short -> Editing the exported image doesn't work with TileMap object

Maybe Ashley can clarify why your demo with 2500 instances of the same sprite runs smooth even on mobile devices. If the performance difference is negligible, I would prefer to use sprites as tiles since they support higher quality instead of TileMap and 9-Patch

Any thoughts ?

You need letterbox integer scale, point sampling and pixel rounding for perfect seamless rendering.

The Tilemap object can be hundreds of times more efficient than having grids of sprites. See this blog post on some inner workings of tilemaps.