Tile tearing issue?

[keawade]

Hi folks, I've been building out a little Pokemon fan game using excalibur@0.32.0 and @excaliburjs/plugin-tiled@0.32.0 and I'm running into an issue where there is a visual bug similar to screen tearing but between tiles. I've only really noticed it when moving horizontally through my Tiled map.

I'm not sure if I've maybe run into a bug with the tiled plugin or if I've goofed a config somewhere.

Here's a screen capture where I've modified my simple game to use a red background on my map Scenes to make it a bit easier to see the tearing effect.

Screencast.From.2026-01-11.22-27-22.mp4

Source code: https://github.com/keawade/fan-game/tree/d72ff8ae0c209aebc2971411a9effb662849f596

[eonarheim]

@keawade Yah that looks rough! I'll look into this source code asap, my first guess is there is something goofy happening with the filtering/sampling.

[eonarheim]

@keawade Try this

const game = new MyEngine({
  canvasElementId: "game",
  width: 240,
  height: 160,
  // artificially bump the physical resolution by 4x to give the sampler more pixels to work with, the logical rez stays 240x160
  pixelRatio: 4, 
  // antialiasing: false sets the sampler to nearest neighbor which can have a tough time when you're moving sub-pixel amounts
  // pixelArt: true does some fancy sub-pixel filtering but preserves the pixel art look 
  pixelArt: true, 
  displayMode: DisplayMode.FitScreen,
  scenes: {
    world: World,
    playerHouse01: PlayerHouse01,
    playerHouse02: PlayerHouse02,
    pokecenter: PokeCenter,
    battle: Battle,
  },
});

[keawade]

This looks to have fixed it right up, thanks!

That pixelRatio in particular. I had tried just the pixelArt: true setting yesterday and still saw the tearing.

Now it looks buttery smooth! 🎉

lol and double checking the docs it's right there 🤦 https://excaliburjs.com/docs/pixel-art#cons-artifacts

I think I skimmed some of this very early on and didn't clock the significance haha

[eonarheim]

The other option if you want to keep the antialiasing: false and not do the built in pixelArt renderer would be to try this

• (Try this first) Snap the camera to whole pixel amounts
• Only move the player by whole pixels

You can set the engine to pixel snapping (it can cause other issues tho)

const game = new ex.Engine({
  ...
  snapToPixel: true
});

[eonarheim]

I'll have time to dig in closer later to get a more definitive reason this is happening, but my theory is I think it's floating point messing with nearest neighbor sampling, and we're having sampler bleed into transparent pixels on certain tiles...