Way to avoid ugly graphic seams?

[Outcast]

I have noticed sometimes when my games are scaled up (especially when running fullscreen in html5 browser) that graphics get "seams" between them. Objects that are placed side by side look like they are "split up", like this: https://dl.dropboxusercontent.com/u/...-27_182629.png

Do anyone know of an "easy" way to fix this? The only way I know of so far is to make all these graphics a bit bigger on the sides so they overlap, but that does not feel optimal.

[BossRighteous]

I know HTML5 and Flash can support decimal heights/widths, but the exporter may not be jiving well with that, or the division increments may not evaluating well across dozens of objects of different sizes. Perhaps there is some ceiling function you could run in JS to round up any object h/w sizes that are decimals?

[Outcast]

Hm how do you mean decimals? All the objects in the screenshots have dimension of power of 2. The small squares are 32*32. The bigger ones are 64*128

[BossRighteous]

Sorry, I mean when the HTML document scales, it has to compute how much to scale all of the Fusion assets to fill the screen. If the resolution were fixed, there would be no seams, but as you scale the window (fullscreen) seems appear.

I am curious, can you scale the window without fullscreening? If so do the seems come and go depending on how much scaling you apply as you drag out the corner?

[Outcast]

Hmm I use the fullscreen option to make it fullscreen on mobile devices so I dont know if there is an option to how much you scale it?

[tompa]

you can normalize the scale modifier.

( round( scale modifier * tile side )) / ( tile side )

[Outcast]

Tompa, sorry what do you mean? Scale modifier? :S

[DaveC]

lol Tompa, you so smart. You're speaking in a tongue that is incomprehensible to us mere mortals. (please clarify)

[tompa]

oh, sorry

In fusion 100% scale = 1.
This is usually multiplied by a value that's used for scaling and translations ingame.
The value has to be normalized towards the shortest edge of a tile. Because that's the shortest distance a translation take place.


One way is to do it like this:



(pic from my tweet)



it's the same feature as in "king arthur's gold"

[Outcast]

Thanks for the explenation Tompa, but I still dont understand how to use this in practice within Fusion? I just export my game to Html5 as normal with normal 32*32 tiles like in this example. But what and where should I change something to get this new calculation on the scaling so they don't get the gaps?