Any fix for the Tilemap seams ?

Discussion and feedback on Construct 2

Post » Sun Apr 27, 2014 6:51 pm

@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 :?:
B
49
S
15
G
6
Posts: 536
Reputation: 7,199

Post » Sun Apr 27, 2014 9:00 pm

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?
ImageImage
B
71
S
22
G
7
Posts: 827
Reputation: 10,177

Post » Sun Apr 27, 2014 9:18 pm

@vtrix could you post normal and adjusted tileset images for comparison?
ImageImageImageImage
B
158
S
67
G
43
Posts: 2,603
Reputation: 36,003

Post » Sun Apr 27, 2014 9:27 pm

@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) ?
B
49
S
15
G
6
Posts: 536
Reputation: 7,199

Post » Sun Apr 27, 2014 9:49 pm

@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
ImageImageImageImage
B
158
S
67
G
43
Posts: 2,603
Reputation: 36,003

Post » Sun Apr 27, 2014 10:12 pm

@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 :) That is why I opened this thread in first place, I preferred to use TileMap, but the seams were a nuisance ;)

I've read Ashley's blog post as soon as the TileMaps were implemented in C2 8-)
B
49
S
15
G
6
Posts: 536
Reputation: 7,199

Post » Sun Apr 27, 2014 10:37 pm

@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.
ImageImage
B
71
S
22
G
7
Posts: 827
Reputation: 10,177

Post » Mon Apr 28, 2014 12:02 am

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)

Image

too better show the 16pixel grid and placement
Image


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

Image

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

Image

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
ImageImage
B
71
S
22
G
7
Posts: 827
Reputation: 10,177

Post » Mon Apr 28, 2014 6:28 pm

@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 ?
B
49
S
15
G
6
Posts: 536
Reputation: 7,199

Post » Mon Apr 28, 2014 7:33 pm

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.
Scirra Founder
B
403
S
238
G
89
Posts: 24,653
Reputation: 196,143

PreviousNext

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 1 guest