Flutter Flame으로 게임 개발하기 - 프로젝트 생성 및 기초 컴포넌트 추가

Flame은 Flutter 기반의 2D 게임 엔진이다. Flame을 이용해 멋진 게임들을 만들 수 있다고 한다. 일반적으로 게임을 만들 때는 Unreal Engine이나 Unity를 사용해서 개발하지만, 내가 게임 개발 관련해서는 문외한이기도 하고 Flutter 기반의 게임 엔진으로 개발하면 어떨지 궁금해서 Flame를 처음으로 시도해보게 되었다.

Flame에 관한 튜토리얼은 해당 링크를 참고하였다. space_shooter

먼저, 명령어로 프로젝트부터 생성했다. (fvm을 이용하여 flutter 버전 관리를 하고 있기 때문에, flutter 명령어 앞에 모두 fvm이 붙었다)

fvm flutter create first_flame_project

그 후 flame을 프로젝트에 추가하였다.

fvm flutter pub add flame.

원래 flutter를 시작하면 main 함수에서 runApp 함수를 이용해서 MyApp을 실행한다.

하지만, Flame에서는 Flame에서 제공하는 GameWidget을 실행하게 된다.

// 기존 flutter 의 main 함수
void main() {
  runApp(const myApp());
}

class myApp extends StatelessWidget() {
  // 여러 내용...
}

// flame에서의 main 함수
void main() {
  runApp(GameWidget(game: FirstFlameGame()));
}

class FirstFlameGame extends FlameGame {}

그 후 앱을 실행해보면 검은 화면이 출력된다.

이것은 어떤 컴포넌트도 추가하지 않았기 때문에 아무런 화면도 나오지 않는 것이다.

이제 여기에 컴포넌트 클래스를 추가한다.

class Player extends PositionComponent {
  static final _paint = Paint()..color = Colors.white;

  @override
  void render(Canvas canvas) {
    canvas.drawRect(size.toRect(), _paint);
  }
}

이 컴포넌트를 게임에 추가하려면 앞서 만들었던 빈 클래스인 FlameGame을 상속받는 FirstFlameGame 클래스에 추가해야한다. 게임 시작 시 추가하는 컴포넌트는 모두 onLoad 메서드 내에서 이뤄져야 한다고 한다.

class FirstFlameGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    await super.onLoad();

    add(
      Player()
        ..position = size / 2
        ..width = 50
        ..height = 100
        ..anchor = Anchor.center,
    );
  }
}

이제 게임을 실행해보면 하얀색 직사각형이 화면 중앙에 생긴 것을 확인 할 수 있다.