TomLGD Posted January 4, 2017 Share Posted January 4, 2017 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 More sharing options...
TomLGD Posted January 5, 2017 Author Share Posted January 5, 2017 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 More sharing options...
Recommended Posts