Jump to content

Scaled tilemap position "shivers" (not rendered well)


TomLGD
 Share

Recommended Posts

Hi,

My pixelated game with the design resolution of 192x108 which is scaled up to fit a Canvas
with the REAL resolution (fullHD for example) has a problem with a rendered Tilemap.

I scale up everything in the game by a certain scale factor: S = realHeight / 108 so the game is always correctly
scaled and when a sprite rotates the original pixel graphics are still the same.

But for some reason the tilemap layers are working strangely. Cause the explanation is a bit tricky I recorded a video!

As you can see, the map position variable is changed with every step by 1. But the layer graphic "snaps" to certain positions. 
The spikes are normal Phaser Sprites and behaving correctly.

Why does the map do this? And how to achieve a smooth/correct appearance?

Thanks,

Tom

Link to comment
Share on other sites

After a ton of research I have a solution... or kind of.

First I tried to use the offsetX\Y of the layer to work around the restriction that the layer
only can move by full pixels regardless of the scale factor of that tilemap layer.
If I remove this "feature" the tiles will overlapping by subpixels and the whole map
will look very messy and blurry.

So my solution is based on a design resolution of 192x108 but with a real canvas resolution of 192 * 5 x 108 * 5.
Then I have to make the camera follow the player by myself with a simple:

game.camera.x = (this.player.x / 5).toFixed(0) * 5  - realWidth / 2;
game.camera.y = (this.player.y / 5).toFixed(0) * 5 - realHeight / 2;

As you can see I round the current camera position of multiples of 5 -> so by upscaled pixels.

So the tilemap don't shakes independently. On the downside its not possible to move the camera "smoothly"
around in the game cause we have this "by 5" steps with the camera.

So this is not a real real one but more a workaround^^

Tom

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...