Scaled tilemap position "shivers" (not rendered well)

Recommended Posts


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?



Share this post

Link to post
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: = (this.player.x / 5).toFixed(0) * 5  - realWidth / 2; = (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^^


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.