Tilemap feature, seam fix

Ashley - I realize this isn't an optimal solution, but what about having an option for 'two pass' rendering, one pass being the tile map offset by 1 pixel on each axis, the second pass the tile map is rendered again in its normal location?

It would double the pixels to draw so wouldn't be a good choice for low powered mobile devices, but desktop graphics cards are so powerful these days, it might be worth it for some people.

Although I suppose people could do that manually already, so maybe it's not worth implementing.

Perhaps another solution, if this is a scaling problem with floats, is to render a layer/layout without scaling, and then scale the whole layer/layout (rather than individually for each tile). This is assuming without scaling there are no seams (which I think is the case).

Captain - that's what low-quality fullscreen mode already does.

Arima - sounds like a pretty expensive way to solve it - and I think it would introduce new glitches on any tiles with transparency, since the last row of pixels would be doubled up.

Ashley - why is it 'low-quality' as we are dealing with raster images? Text object might be the one exception. So creating images in the layout for the largest size (i.e. fullscreen) needed and scaling down.

Oh right, good point. I didn't think about tiles with transparency.

Captain - oh, I was talking about rendering at a fixed smaller size then stretching up (which is what low quality fullscreen mode does). Rendering an entire layout would be incredibly slow and wasteful, and downscaling can look ugly.

Ok, I think I'm missing something here, because this is an issue with raster images generally (scaling that is).

One last suggestion: Using double-buffering, where the tilemap is rendered unscaled and then render the buffered image scaled onto the canvas? Of course only the relevant region of the tilemap needs to be rendered. Perhaps this is really inefficient, just a thought.

Just trying to help, and I do have years of experience as a CAD developer (not that I know much about javascript or game development).

Thanks everyone for the input so far!

Ashley True, it would cause edge glitches in some cases, but the artist could keep those to a minimum if they know the limitations. Right now, I use a method I haven't seen discussed on the forum yet. I replace all tiles in a tilemap with a single sprite and set its animation frame to that of the tile ID. The frame in the sprite is the same as the tile map except that it overlaps adjacent tiles by one pixel. because I want to use pixel graphics I enlarge them by a scale of 4 that way linear as opposed to point doesn't mess them up. The result is ultra clean pixel art that I can rotate and scale arbitrarily. It takes a lot of time at the moment, cutting up a tile map, enlarging the border so it has an overlap of 1px plus a 1px transparent border. But I can make some code to do that via .net It is not without its limitations of course. You have to know exactly what tiles can go together or you get some weird seaming still. It, unfortunately, is necessary in my game. I need scaling and rotation of the entire screen. I want to use tilemaps because they are a quick way of making a scene for the game, though, at this point I only use block 0 and another script auto-maps the correct tiles.

At this point, I am okay with this workaround, but I figured the workaround could be made more efficient if construct helped out with the process. I know it is less efficient, but I figured its no different than a game that doesn't even use a grid (like aquaria). Can I get away with something of that nature and scale?

------------------------------------------------------------------------------------------------------------------------------------------

TLDR: Ashley, is it too inefficient to not use the tile map but have a series of objects instead? Or will this be bad on lower end machines. I am targeting pc and so could care less about mobile. I already have to many things I need to make mobile not an option. Also, Thanks for the great work on construct! I have thought along time about the time map and can't think of a solution that is perfect either. It is a very complex problem.

-----------------------------------------------------------------------------------------------------------------

Joannesalfa - you can get full screen quite easily with the tile map object like this (this does have some limitations/weaknesses depending on what you want:

1. Set the project to use crop

2. at the start of the game check the window size

3. Depending on how you want the game to scale (inner or outer) and what the minimum playing field is you do some math and arrive at a zoom level or scale factor (0-n) rounded to the nearest whole number (whether you go up or down depends on what you want and how you calculate it)

4. Set the layout scale to this number and viola.

The weakness of course is when you end up with a scale of near n.5 - you either have to cut a lot off or add a lot to the game giving a very wide range of potential screen sizes to work with.

As I already mentioned, breaking it up to individual tiles can be hundreds of times less efficient than the way the current tilemap object does it. It's very well optimised.

Ashley

can this method i use for fixing seams in individual sprite tiles, not be used for tilemap?

example 16*16 tiles / resizing-scale canvas and zooming works

https://dl.dropboxusercontent.com/u/616 ... index.html

to convert this method to tilemap, i think something like this needs to happen.

so it would need a new generated/adjusted texture and tiles should be created with keeping the generated size in mind. (if you want to keep to size2 rule)

split image in array, tiles need to stay in displayorder of the sourcetexture, add 1px transparent border to each tile and fill this surrounding border with the vertical and horizontal adjacent pixelcolor of the tile (what essentialy is the fix for spritetiles) (actually if this works perfectly the displayorder shouldn't matter, but i cant test this because i only have 1 pixel padding per 2 tiles on exported map, so displayorder (grouped tiles) is essential in this case, and is also reason why i couldn't get it to work the first times)

the tiles in the end, use the correct size but use the coordinates of the padded tiles.

this will remove bleeding, will not show the transparent seam, plus if color value's mix on border of tile, it will mix same color of the padded border, so not visible.

the tilemap could use the generated texture to pick from, the array should be thesame, but could display it without the padding.

any reason why this should not work?

Ashley

my biggest problem with tilemaps right now is not with seams but with these artifacts.

as you can see for some reason when the system crops the tilemap in the import process the tiles take one pixel of the above(and left ,right ,bottom) tile although they are perfectly aligned.

please notice how in your tilemap it has taken the top line from the above tile and just a bit on the left because the left tile has only this much to take.

on the right it takes none because it has no other tile there.

if i add 1px of transparency and instead of 128x128 i make them 129x129 then the artifacts disappear but then the tiles have 1 px seam between them.

why is this happening?

if i cut them in Photoshop and import them as sprites they do not have this 1px artifact.

the are perfect.

this happens with your stock c2 platformer tilemap as well.

it is driving me crazy! <img src="{SMILIES_PATH}/icon_cry.gif" alt=":cry:" title="Crying or Very Sad">

EDIT:because the pictures do not show here properly i attached them in their original resolution here:

https://www.dropbox.com/s/dq1auj4faoz73 ... .55.35.png

https://www.dropbox.com/s/m35nkclgmviea ... .51.32.png

https://www.dropbox.com/s/pvybifts7d3l0 ... .56.09.png

Roccinio

if you will succedd, pls make tutorial about Tilemaps & seams etc.

Roccinio - it's exactly the same issue, nothing new: you either need to use letterbox integer scale, pixel rounding and point sampling, or low-quality fullscreen mode with pixel rounding.

Ashley or anyone that knows the answer.

sorry for asking again but i want to understand this once and for all.

i totally understand during runtime to have these artifacts and seams because of the way the gpu renders.

but why they appear in the editor?

why sprites don't have artifacts in the editor and the tilemap has?