推荐结构lib/pages/game/game_home/components/ ├── game_background.dart ├── game_camera_controller.dart ├── game_static_sprite.dart // 通用静态图片组件 └── game_map_objects.dart // 固定地图物件配置比如 house1/house2大概理解成这样GameStaticSprite(imagePath:house1.png, position: Vector2(80,40), size: Vector2(1019,812),)其中imagePath图片名Flame 会从 assets/images/ 里找。position房子左上角在 1800 x 1624 地图坐标里的位置。size房子在游戏世界里的尺寸。priority层级数字越大越靠上。背景可以是 -100房子可以是 -50 或 0。如果只是左上角和左下角两个固定房子先不用复杂化。可以先做一个通用 GameStaticSprite然后在 GameHomeCanvasGame.onLoad() 里awaitworld.add(GameBackground(images:images));awaitworld.add(GameStaticSprite(...house1...));awaitworld.add(GameStaticSprite(...house2...));game_static_sprite.dart 通用的静态图片组件importpackage:flame/cache.dart;importpackage:flame/components.dart;/// 地图静态图片组件。////// 用于房子、树、石头、摊位等固定在地图上的装饰物或建筑。/// 当前组件只负责“显示图片”后续如果需要点击、碰撞、升级可以在它的基础上继续扩展。classGameStaticSpriteextendsSpriteComponent{GameStaticSprite({requiredImagesimages,requiredthis.imagePath,requiredVector2position,requiredVector2size,required int priority,}):_imagesimages,super(anchor:Anchor.topLeft,position:position.clone(),size:size.clone(),priority:priority,);/// Flame 默认图片目录是 assets/images/。////// 例如这里传 house1.png实际加载路径就是 assets/images/house1.png。finalStringimagePath;finalImages_images;overrideFuturevoidonLoad()async{awaitsuper.onLoad();finalimageawait_images.load(imagePath);spriteSprite(image);}}game_map_objects.dart固定地图物件配置importpackage:flame/cache.dart;importpackage:flame/components.dart;importgame_background.dart;importgame_static_sprite.dart;/// 地图静态物件配置。////// 这里存“物件应该放在哪里、用哪张图、显示多大、层级是多少”。/// 注意配置本身不负责渲染真正渲染交给 [GameStaticSprite]。classGameMapObjectConfig{GameMapObjectConfig({requiredthis.imagePath,requiredVector2position,requiredVector2size,requiredthis.priority,}):positionposition.clone(),sizesize.clone();/// 静态物件图片名对应 assets/images/ 下的文件。finalStringimagePath;/// 物件左上角在游戏世界中的坐标。////// 当前游戏世界坐标和背景设计稿尺寸一致也就是 1800 x 1624。finalVector2position;/// 物件在游戏世界中的显示尺寸。finalVector2size;/// Flame 渲染层级数字越大越靠上。finalint priority;/// 根据配置创建真正加入 Flame world 的静态图片组件。GameStaticSpritebuild({requiredImagesimages}){returnGameStaticSprite(images:images,imagePath:imagePath,position:position,size:size,priority:priority,);}}/// 游戏首页地图上的固定静态物件。classGameMapObjects{constGameMapObjects._();/// 静态物件层级。////// 背景图 priority 是 -100房子使用 -50可以稳定显示在背景上方。staticconstint staticObjectPriority-50;/// 左上角固定房子。staticGameMapObjectConfiggethouse1{returnGameMapObjectConfig(imagePath:house1.png,position:Vector2.zero(),size:Vector2(1019,812),priority:staticObjectPriority,);}/// 左下角固定房子。staticGameMapObjectConfiggethouse2{returnGameMapObjectConfig(imagePath:house2.png,position:Vector2(0,GameBackground.worldSize.y-547),size:Vector2(540,547),priority:staticObjectPriority,);}/// 左侧中下方固定房子。////// position 是根据当前截图红框换算到 1800 x 1624 地图坐标后的初始值。/// 如果真机预览后需要更贴合背景只需要微调这里的 x/y。staticGameMapObjectConfiggethouse4{returnGameMapObjectConfig(imagePath:house4.png,position:Vector2(195,850),size:Vector2(320,448),priority:staticObjectPriority,);}/// 中下方固定房子。////// position 是根据当前截图红框换算到 1800 x 1624 地图坐标后的初始值。/// 如果真机预览后需要更贴合背景只需要微调这里的 x/y。staticGameMapObjectConfiggethouse3{returnGameMapObjectConfig(imagePath:house3.png,position:Vector2(520,1000),size:Vector2(536,409),priority:staticObjectPriority,);}/// 当前地图所有固定静态物件。////// 后续继续加房子、树、石头时优先加到这里避免散落在 GameHomeCanvasGame 里。staticListGameMapObjectConfiggetstaticObjects{returnGameMapObjectConfig[house1,house2,house4,house3,];}}最后别忘了在GameHomeCanvasGame中添加房子overrideFuturevoidonLoad()async{awaitsuper.onLoad();gameCameraController.configureCamera(camera,size);// 背景要先添加后续玩家、敌人、按钮等组件再添加时会自然盖在背景上方。awaitworld.add(GameBackground(images:images));// 固定地图物件属于世界内容的一部分跟随相机一起移动和缩放。// 当前先放4个静态房子后续树、石头、装饰物也可以继续走这套配置。for(finalmapObjectinGameMapObjects.staticObjects){awaitworld.add(mapObject.build(images:images));}}现在这套结构可以这样看GameMapObjectConfig一个静态物品的数据模型记录用哪张图、放在哪里、多大、层级多少 GameMapObjects当前地图的静态物品清单组合 house1、house2、house3、house4 GameStaticSprite真正显示到 Flame 世界里的组件根据 GameMapObjectConfig 创建出来 GameHomeCanvasGame游戏世界入口遍历 GameMapObjects.staticObjects把每个配置 build 成组件然后add到 world也就是流程是配置数据 GameMapObjectConfig(imagePath, position, size, priority)↓ build()Flame 组件 GameStaticSprite ↓ world.add()显示到游戏世界坐标中