Phaser3中2D平台游戏适配多移动设备分辨率问题求助

核心需求 #

• 开发的2D平台游戏需适配不同分辨率的各类移动设备，保证显示适配且可正常游玩
• 实现tiles及所有游戏资产在各类设备上可缩放，视觉表现一致

现有游戏配置 #

通用基础配置 #

import Phaser, { Types } from "phaser";

const ratio = window.innerWidth < 600 ? 2 : 1;

const baseGameConfig: Types.Core.GameConfig = {
  type: Phaser.WEBGL,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: window.innerWidth * ratio,
    height: window.innerHeight * ratio,
  },
  render: {
    antialias: true,
  },
};

export default baseGameConfig;

游戏具体配置 #

import { Types } from "phaser";

import baseGameConfig from "@games/config.base";

import Scenes from "./src/scenes";

const gameConfig: Types.Core.GameConfig = {
  ...baseGameConfig,
  title: "platform2d",
  scene: Scenes.BootScene.scene,
  physics: {
    default: "arcade",
    arcade: {
      debug: process.env.NODE_ENV !== "production",
      gravity: {
        y: 600,
      },
    },
  },
};

export default gameConfig;

Tilemap资源信息 #

当前使用的Tilemap JSON（固定宽高设置）：

{ "compressionlevel":-1,
 "height":20,
 "infinite":false,
 "layers":[
        {
         "data":[...],
         "height":20,
         "id":1,
         "name":"background",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":30,
         "x":0,
         "y":0
        }, 
        {
         "data":[...],
         "height":20,
         "id":2,
         "name":"wall",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":30,
         "x":0,
         "y":0
        }],
 "nextlayerid":3,
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.10.2",
 "tileheight":16,
 "tilesets":[
        {
         "columns":10,
         "firstgid":1,
         "image":"grass.png",
         "imageheight":128,
         "imagewidth":160,
         "margin":0,
         "name":"grass",
         "spacing":0,
         "tilecount":80,
         "tileheight":16,
         "tilewidth":16
        }, 
        {
         "columns":8,
         "firstgid":81,
         "image":"wall",
         "imageheight":128,
         "imagewidth":128,
         "margin":0,
         "name":"wall",
         "spacing":0,
         "tilecount":64,
         "tileheight":16,
         "tilewidth":16
        }],
 "tilewidth":16,
 "type":"map",
 "version":"1.10",
 "width":30
}

遇到的适配问题 #

• 现有资料多采用固定屏幕尺寸（如800x600），未找到针对动态分辨率下Tilemap适配的有效方案
• 不同分辨率设备上显示效果不一致（桌面端、手机端显示均出现适配问题）
• 尝试使用Phaser.Scale.RESIZE模式：不缩小资源则内容超出屏幕，缩小后会导致资源画质下降

期望实现效果 #

tiles及所有游戏资产在各类移动设备上均可自适应缩放，视觉表现保持一致，同时保证游戏可正常游玩

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