如何在Flame引擎中将原点(0,0)设置为左下角

Flame默认以屏幕左上角为坐标原点，要切换到左下角作为原点，有两种常用实现方式：

方法一：使用CameraComponent（全局生效，推荐） #

Flame 1.0+推荐用CameraComponent管理全局坐标系统，通过调整相机变换实现原点切换：

import 'package:flame/game.dart';
import 'package:flame/camera.dart';
import 'package:flutter/material.dart';

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    // 创建适配窗口大小的固定分辨率视口
    final viewport = FixedResolutionViewport(size);
    final camera = CameraComponent(viewport: viewport);
    
    // 调整相机位置并翻转Y轴，将原点移至左下角
    camera.position = Vector2(0, size.y);
    camera.viewfinder.transform.scale(Vector2(1, -1));
    
    add(camera);
  }
}

代码说明： #

• camera.position = Vector2(0, size.y)：将相机定位到屏幕底部左侧的对应位置
• camera.viewfinder.transform.scale(Vector2(1, -1))：翻转Y轴方向，让Y轴数值向上递增，匹配左下角原点的常规坐标逻辑

方法二：自定义画布变换（局部组件生效） #

如果仅需在单个组件内使用左下角原点，可在render方法中手动调整画布变换：

import 'package:flame/components.dart';
import 'package:flutter/material.dart';

class BottomLeftComponent extends PositionComponent {
  @override
  void render(Canvas canvas) {
    canvas.save(); // 保存当前画布状态
    // 平移画布到屏幕底部，再翻转Y轴
    canvas.translate(0, parentSize!.y);
    canvas.scale(1, -1);
    
    // 此处绘制逻辑将以左下角为原点
    canvas.drawRect(
      Rect.fromLTWH(20, 20, 60, 60),
      Paint()..color = Colors.blue,
    );
    
    canvas.restore(); // 恢复画布状态，避免影响其他组件
  }
}

注意事项： #

• 方法一的全局设置会影响所有游戏组件，适合整个游戏统一坐标系统
• 方法二仅对当前组件生效，适合局部特殊场景的坐标需求

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