[Flutter] - Flame

 

 

 

---

Flame이란?

• Flame은 Flutter 기반의 모듈형 게임 엔진으로, Flutter의 강력한 인프라를 활용하면서도 게임 개발을 단순화해주는 엔진입니다.
• 게임 개발에 필요한 루프 시스템, 입력 처리, 이미지 및 스프라이트 관리, 애니메이션, 충돌 감지, 컴포넌트 시스템(FCS: Flame Component System) 등을 제공합니다.
• 또한, Flame의 기능을 확장할 수 있는 Bridge 패키지도 제공하며, 필요에 따라 원하는 기능만 선택적으로 사용할 수도 있습니다.

---

Flame 설치

• Flame을 사용하려면, pubspec.yaml에 패키지를 추가해야 합니다.
• 최신 버전은 pub.dev 사이트의 Versions에서 확인 가능

 

---

Flame 기본 사용법

• Flame에서 게임을 실행하려면 GameWidget을 사용해야 합니다.
• 일반적인 Flutter 위젯과 동일하게 앱의 루트 위젯으로 사용할 수도 있고, 특정 화면에서만 사용할 수도 있습니다.

GameWidget 사용 예제

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

void main() {
  runApp(  
    GameWidget(  
      game: FlameGame(),  
    ),  
  );  
}

Flame Component System(FCS)

• Flame은 컴포넌트 기반 아키텍처를 제공하고 각 게임 오브젝트를 컴포넌트(Component)로 관리하여 효율적으로 게임을 개발할 수 있습니다.
• 새로운 게임을 만들려면 FlameGame 또는 World 클래스를 확장해야 합니다.

import 'package:flame/game.dart';
import 'package:flame/components.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(
    GameWidget(
      game: FlameGame(world: MyWorld()),
    ),
  );
}

class MyWorld extends World {
  @override
  Future<void> onLoad() async {
    add(Player(position: Vector2(0, 0)));
  }
}

• 여기서 MyWorld 클래스는 World 클래스를 확장하여 플레이어(Player) 컴포넌트를 추가하는 방식으로 구현

---

플레이어 컴포넌트 생성

• 플레이어 같은 개체는 SpriteComponent를 사용하여 생성할 수 있다.

플레이어 예제

import 'package:flame/components.dart';
import 'package:flame/geometry.dart';
import 'package:flame/extensions.dart';

class Player extends SpriteComponent {
  Player({super.position}) :
    super(size: Vector2.all(200), anchor: Anchor.center);

  @override
  Future<void> onLoad() async {
    sprite = await Sprite.load('player.png');
  }
}

 

• player.png 이미지를 불러와 스프라이트로 설정
• 크기(200x200) 및 앵커를 중앙(Anchor.center) 으로 설정
• assets/images/player.png 경로에 이미지를 저장하고 pubspec.yaml에 등록 필요

---

입력 이벤트 처리

• Flame에서는 TapCallbacks 믹스인을 활용하여 터치 입력을 처리할 수 있다.

import 'package:flame/components.dart';
import 'package:flame/geometry.dart';
import 'package:flame/extensions.dart';

class Player extends SpriteComponent with TapCallbacks {
  Player({super.position}) :
    super(size: Vector2.all(200), anchor: Anchor.center);

  @override
  Future<void> onLoad() async {
    sprite = await Sprite.load('player.png');
  }

  @override
  void onTapUp(TapUpInfo info) {
    size += Vector2.all(50);
  }
}

 

• TapCallbacks 믹스인을 추가하여 터치 이벤트 감지
• onTapUp 메서드를 재정의하여 탭할 때 크기를 50씩 증가

---

추가 기능

• Flame은 게임에 필요한 핵심 기능만 포함하고 있으며, 일부 기능은 별도의 패키지나 서비스가 필요할 수 있습니다.

멀티플레이어 기능

• Flame 자체적으로 네트워크 기능은 제공하지 않지만, 멀티플레이어 게임을 만들려면 아래 서비스를 추천합니다.

 

 

---

참고 자료 : https://docs.flame-engine.org/latest/#

Getting Started — Flame