Virtual Resolutions and Tiles.

Monkey Forums/Monkey Programming/Virtual Resolutions and Tiles.

Paul - Taiphoz(Posted 2013) [#1]
Hay all..

Noticing a little space when rendering my game tiles, and screen scaling is factoring in, using diddy which I think uses autofit, I have turned on filtering and it helps but there are still a few tiles that show little white line/gaps.

Any ideas?


Wylaryzel(Posted 2013) [#2]
Did you work with Padding?

I recognized that a 1px padding border (where the border itself is only a copy of the neighbor px) killed any gaps while using autofit

BR
Wyl


muddy_shoes(Posted 2013) [#3]
Tiling behaviour varies from platform to platform. Use of padding can help with issues from inaccurate picking from atlas images but if your problems re from using global scaling it gets trickier.

There's a fundamental accuracy problem if you're rendering tiles as separately placed images alongside global scaling. The rendered pixel width of a tile can always end up different to the width you use for positioning. It can work but you're really just getting away with it if it does.

Really you want to render the tiles using quads where you explicitly share vertex positions between neighbours and avoid gaps. Unfortunately that's not supported in mojo or by the HTML5 canvas renderer at all (could be wrong).


Paul - Taiphoz(Posted 2013) [#4]
I just nudged them 1 pixel closer to each other, actually I did .5 of a pixel and it seemed to do the trick.

I doubt anyone else would have noticed it, but it was bothering me. thanks for the tips ..


dragon(Posted 2013) [#5]
for flash or html you need overlapping tiles.
for all other you need tiles extended with 1 neighbour pixel + padding

for cutout-object you need 1 transparent pixel padding


Playniax(Posted 2013) [#6]
Try Ignition :)


Paul - Taiphoz(Posted 2013) [#7]
I might on another project, cant complain at all about diddy, so happy to keep using that at the moment.


monotonic(Posted 2013) [#8]
@Playniax

I bought Ignition the other day and have been using a simple test tilemap created from using a singular image as the fill tile, that method worked like a charm. However, yesterday I started creating a map that will be used in my game, I combined several singular tile images together on a transparent background. When I play the game now there is a black border between the tiles on both HTML5 and WP8, this didn't happen with individual images only when I combined them into an Atlas. There is no gaps between the images in the atlas at all.

Any ideas?

Edit: I'm currently using the tile editor that comes with Ignition, but will be switching to TileD shortly, I'm just modifying the loader so that I can use object layers (which are vital to me).


Playniax(Posted 2013) [#9]
The problem is not Monkey or Ignition. The problem is image filtering on some targets. You can find some threads about this on this forum. The Ignition tile editor solves this problem by enabling padding in the editor before exporting the project. This automatically puts a border between your tiles in the bitmap and the Ignition tile engine will do the rest.


monotonic(Posted 2013) [#10]
I found the cause of my problem. I was calculating the distance to move the camera based on the distance between the last and current touch positions. This calculation resulted in a floating point value, after rounding this to an integer the black flickering lines between tiles have disappeared.

Obvious when you think about it really, but a slippery one none-the-less.