Pixel perfect tiles bleeding when camera moves

Phaser 3
1

Hi there !
For the sake of self-training I’m building a cheap Mario Land game-template, trying to make it the way you are supposed to :
http://lab.gildasp.fr/mario-phaser3/

Everything works fine but I have bleeding issues with my tilemap, and I really don’t get it…

I found lots of advices on the subject but none of it is working.
I mean I already :

  • extruded my tileset (which I never did on previous projects)
  • tried any combination of pixelArt, autoRound and roundPixels game params
  • added cameras.main.roundPixels = true (which did nothing)
  • tried both canvas and webgl with the same result

Extruding helped a lot, things where worse before it…
I also re-arranged my tileset tu put empty tiles around some problematic ones (which helped a bit).

But anyway, I still have ugly lines appearing between tiles whenever the player moves.

On previous projects I used to upscale all my assets (by 2 or 4), which seemed to resolve that kind of issues… but it seems to me an ugly workaround when you work with low-rez pixel-art; like an esthetic nonesense :grin:

Anyway, I don’t get it, because in the Phaser 3 exemples the tilesets that are used are not upscaled, not even extruded, and averything seems to work fine !

Any help or idea or advice or just any kind of point of vue on it ?
I guess a lot of people here build pixel perfect retro games !
Thanks :slightly_smiling_face:

2

Oh, the real game-size is 160x144 (game boy rez), and it is just css-scaled on the demo page.
Maybe the really small rez doesn’t help ?
The css scaling doesn’t seem to affect my bleeding issues, at scale 1 the exact same lines do appear too :thinking:

3

Hello there !
I just noticed my issues seem to show only on firefox (I usally work on firefox) :

mario-firefox
mario-firefox506×518 3.82 KB

On chrome there’s no bleeding at all (thanks to extrusion and all, I guess) :

mario-chrome
mario-chrome506×518 3.84 KB

Strange, isn’t it ?
Did anyone had the same issues on other projects ?

Regarding pixel webfonts, firefox does a better work, it’s all blury on chrome (both inside and outside of the canvas)… I’ll look into it soon.

4

Where can I download this super mario land code?

Thank You! <3

5

Solution: https://github.com/sporadic-labs/tile-extruder
Source Code of this project: https://github.com/digitsensitive/phaser3-typescript/tree/master/src/games/super-mario-land

6

@Hollow I already used tile-extruder, which helped a lot.
But it still bleeds on firefox…

I didn’t know about the source code you pointed, I built the one I’m showing by myself, from scratch (well, using Phaser 3).
This source code is awesome !
It doeasn’t solve my problem but I’ll learn a lot from it, thanks for the link :+1:

Oh, and I can see that in that project tile-extruder was not used at all

7

I know, I just shared him the source code because the game is very similar.