0 Favourites

Tilemap feature, seam fix

  • Hey Ashley,

    I was curious if this would be possible:

    Include one more setting in the tilemap to allow a sprite block larger than the tilemaps grid (this could be user defined) Essentially the tile map would then grab whatever tile it needed plus an additional however many pixels of overlap. Or rather than automatically doing it it could be manually set do draw larger sprites than fit in the grid. The overlap would rid seams and allow pixel rounding off, linear sampling, and arbitrary rotation/scaling.

    All that is need is to be able to draw a sprite that is larger than the grid using user defined parameters. Currently I have a project demonstrating this using events to replace each tile in a tile map with a similar sprite. The problem is with this method is you end up with a tilemap that has to be replaced by a bazillion individual sprites all needing names and events to cause them to replace the tilemap.... this gets messy quick!

    I was looking at the code for the tilemap and thought I would ask before I got to invested in it.

  • +1000

  • This is similiar thread that Ashley really doesn't care about seam fix. He will force you to use letterbox integer scale.

    I was hoping we should have seam fixed for this tilemap. Keep demanding to earn popular demand.

  • This would increase the CPU overhead of drawing the tilemap by a factor of 100 or more, since it would no longer be able to draw regions of tiles in one go (see this blog post). It would likely also introduce new glitches at edges meeting transparency (where there is no tile), since the tile area rendered is too large.

    As ever the workaround is: letterbox integer scale, point sampling, pixel rounding. Seams should never show up with those settings. I've been thinking for a long time of a high-performance workaround for the seams, and I can't come up with anything so far. Meanwhile it works with the right settings. It's not that I don't care, it's a difficult technical problem.

  • ashley

    yes they will not show but...

    scml animations get destroyed since they tween sub pixel

    with point sampling the image quality degrades especially if it has thin lines and you see flicker everywhere.

    the movement becomes jerky.

    i managed to fix the seams with sprites as tiles and i am 100% happy at the moment.

    could you please answer this question for me ? it will save me a lot of trouble and time.

    i just conducted an experiment because i read somewhere that you stated that tile maps are 100 times more efficient than using sprites as tiles.

    so i left the seams aside kept my linear and pixel rounding to "off"

    deleted all sprite tiles(about 2000 objects),imported 2 tile maps one with collisions and the other one with none.

    i used the ones with collisions as a platform for my player to walk on and filed the rest of the level with the one with no collisions to keep the check count to a minimum.(about 10.000/sec). before i thought to use 2 tile maps the collisions went to 350.000 /sec and the game run at 30fps at pc.

    i saw 5 fps down in pc!! (from 60 to 53-56)

    mobile was exactly the same

    and another platform was exactly the same.

    if my tests are correct should i stop trying to make the tile map plugint to work with all the "wrong" settings since i see no performance gain whatsoever?

  • Roccinio Joannesalfa

    I've reconsidered the use of TileMaps at this point and chosen Method 2 from here . The difference in performance shouldn't be noticed on smaller games.

    If there will be a fix for the seams, I will easily make the changes and use TileMaps

  • Roccinio Joannesalfa

    I've reconsidered the use of TileMaps at this point and chosen Method 2 from here . The difference in performance shouldn't be noticed on smaller games.

    If there will be a fix for the seams, I will easily make the changes and use TileMaps

    I'm using method 2 in my project. But also have added tiled bg's.

  • One possible work around would be to shove the tilemap into a single texture.

    Course that means you couldn't change any of the tiles after.

  • TGeorgeMihai This method 2 doesn't provide benefits for memory usage, Ashley gave us an excuse to use letterbox integer scale.

    Tilemap is awesome solution for big games, but C2 renderer for tilemap is unprofessional however is not impossible to fix seam.

    Another framework for HTML5 game is called Phaser provides seamless using tilemap in fullscreen.

    It's really nice for clean and seamless.


    Tilesets are 16x16

    Ashley claimed that it doesn't use floating point scaling, nothing else anyway he won't explain more details to fix seam, more like he's giving up. We are not happy with seam. I wouldn't use integer letterbox scale, most game publishers DON'T LIKE small window or impossible to upscale, not cool Ashley.

  • Joannesalfa good example,

    so dear Ashley, can you contact http://phaser.io/ and ask them how they get seamless tilemaps?

  • Joannesalfa - I already said, that example doesn't appear to use floating point positioning, scrolling or scaling. You can do the same in Construct 2 with letterbox integer scale, pixel rounding and point sampling. If Phaser used floating point positions/scrolling/scaling, AFAIK it would show seams just the same, because it's more to do with how computer graphics work in general rather than anything specific to Construct 2.

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Another framework for HTML5 game is called Phaser provides seamless using tilemap in fullscreen.

    Those results are the same you can achieve in C2 using pixel rounding and low quality fullscreen scaling.

  • I have the same problem if I disable the webGL

    If I have the webGL on, I can set everything (scaleIn...etc) and I don't have the seams...

  • Almost at the bottom of that page http://examples.phaser.io/ there are few example of their Tilemap you can play with.

    Don't know what scaling they are using (It's not set in those examples) and I'm not sure about floating point positioning and scrolling, because some of them scrolls quite nicely and some of them clearly looks like integer values. But they for sure are using point sampling - it very visible in exdamples with car moving around desert like tiles.

  • None of the Phaser tilemap demos that shinkan linked to appear to use floating point scaling or positioning. They look like they effectively have fullscreen mode set to 'Off' (for an in-page embed) and 'pixel rounding' to 'on'. You should get equally seamless results in Construct 2 in those circumstances.

    I'm still researching this, but I don't know of any other engines that have solved this when using floating point scaling or positioning. Every other example anyone has pointed to so far simply uses integer scaling and positioning. I'd be interested to find out the technical solutions to this problem.

    Note another workaround I mentioned in another thread: using 'low quality' fullscreen mode avoids floating point scaling from letterbox integer scale, and you may be able to then get by only setting 'pixel rounding' on.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
175 32,642
clifton11221's avatar
Unread hot topic
173 28,555
Rich's avatar
Unread hot topic
105 16,954
Magistross's avatar