Phaser TileMap在Firefox中显示多余线条问题求助

游戏配置代码 #

import Phaser from 'phaser'
import GameScene from './scenes/GameScene'

const config = {
  type: Phaser.CANVAS,
  parent: 'game-content',
  backgroundColor: '#123456',
  pixelArt: true, // 防止像素图缩放时模糊
  scale: {
    mode: Phaser.Scale.ScaleModes.RESIZE,
    width: window.innerWidth,
    height: window.innerHeight,
  },
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0, x: 0 },
    },
  },
  scene: [GameScene],
}

export const phaserGame = new Phaser.Game(config)

问题现象 #

• 桌面端Chrome、Safari浏览器中，TileMap显示正常，无多余线条
• 桌面端Firefox浏览器中，TileMap出现多余线条

常见解决方案 #

• 启用像素对齐：在游戏配置中添加roundPixels: true，或者在场景的create方法里设置this.cameras.main.roundPixels = true;，避免浮点坐标导致的渲染间隙
• 切换渲染模式：将配置中的type: Phaser.CANVAS改为Phaser.AUTO或Phaser.WEBGL，Firefox对WebGL的TileMap渲染兼容性更好
• 检查TileSet资源：确认TileSet图片是紧密排列的，没有多余的透明边距，部分情况下资源本身的间隙会在Firefox中被放大显示
• 固定整数倍缩放：避免非整数比例的窗口缩放，可设置固定的游戏宽高，或在缩放时确保比例为整数，减少渲染精度问题
• 调整TileMap渲染参数：创建TileMap时设置renderOrder: Phaser.Tilemaps.RenderOrder.RIGHT_DOWN，或给TileSet纹理设置filterMode: Phaser.Textures.FilterMode.NEAREST

内容的提问来源于stack exchange，提问作者dev_el