Flutter로 게임을 개발해보자

Flame이란 무엇인가

Flame의 장점

• Flutter 통합: Flutter 위젯과 함께 사용 가능하여 UI와 게임 로직을 쉽게 결합할 수 있음.

• 다양한 플랫폼 지원: Flutter 기반이므로 Android, iOS, 웹, 데스크톱 등 여러 플랫폼에 게임을 배포 가능.

• 경량 엔진: 작은 프로젝트에 적합한 경량화된 게임 엔진으로, 빠른 개발이 가능.

• 풍부한 기능 제공: 애니메이션, 물리 엔진, 충돌 감지 등 2D 게임 개발에 필요한 다양한 유틸리티 지원.

타 엔진과의 비교

Flame 개요

Components

flowchart TD
	Component --> t[TimerComponent\nParticleComponent\nSpriteBatchComponent]
	Component --> e[Effects]
	Component --> PositionComponent
	Component --> FlameGame
	
	Game --> FlameGame
	
	PositionComponent --> sprite[SpriteComponent\nSpriteGroupCompponent\nSpriteAnimationComponent\nSpriteAnimationGroupComponent\nParallaxComponent\nIsoMetricTileMapComponent]
	PositionComponent --> HudMarginComponent
	HudMarginComponent --> hudGui[HudButtonComponent\nJoystickComponent]
	PositionComponent --> gui[ButtonComponent\nCustomPainterComponent\nShapeComponent\nSpriteButtonComponent\nTextComponent\nTextBoxComponent\nNineTitleBoxComponent]
	

Component Lifecycle

flowchart LR
	ET[Runs Each Tick] ~~~ AR[Runs On Add & Resize]
	AR ~~~ RO[Runs Once]
	oL[onLoad] --> onGameResize
	onGameResize --> oM[onMount]
	oM --> update
	update --> render
	render --> update
	render -- if_removed --> oR[onRemove]
	oR -. if_re_parented.-> oL
	style AR fill:#fcf
	style RO fill:#f9f
	style oL fill:#f9f
	style oM fill:#f9f
	style oR fill:#f9f
	style onGameResize fill:#fcf
	 

• onLoad
• onLoad는 component 의 비동기 초기화시 실행하는 method 입니다.
• 해당 method는 component 의 life cycle 중 한 번만 실행되므로 asynchronous constructor로도 여길 수 있습니다.

• onGameResize
• onGameResize 는 화면 크기 변경 시마다 호출됩니다.
• 또한, component 가 component tree에 추가될 때 또한 호출됩니다.

• onParentResize
• onParentResize 는 onGameResize 와 비슷하게, component가 component tree에 추가될 때 호출됩니다.
• 또한, parent component의 크기 변경 시마다 호출됩니다.

• onMount
• onMount 는 component가 Game Tree에 추가될 때마다 실행됩니다.
• 해당 method 내에서 late final변수를 초기화하는 것은 권장하지 않습니다.
• parent component 가 mount 된 상태여야 해당 method 가 호출되며, 조건 미충족 시 parent component가 mount 될 때까지 기다립니다.

• onRemove
• onRemove 는 component가 Game Tree 제거되기 전에 실행할 code를 재정의합니다.
• 해당 method는 component가 부모의 remove를 통해 제거되든, component의 remove 메서드를 통해 제거되든 상관없이 한 번만 실행됩니다.

• onChildChanged
• onChildChanged 는 부모의 child component의 변경을 감지해야 할 때 실행할 code를 재정의합니다.
• 해당 method는 자식이 부모에 추가되거나 제거될 때마다 호출되며, 자식이 부모를 변경할 때도 호출됩니다.
• parameter는 target child compnent와 해당 자식이 겪은 변화(추가 또는 제거)가 포함됩니다.

PositionComponent

• Position
• Vector2 형식으로 component 의 anchor의 부모에 따른 상대 좌표를 나타냅니다.
• 만약 부모가 FlameGame인 경우 viewport 기준의 좌표를 나타냅니다.

• Size
• camerad의 zoom level 이 1.0일 때 기준의 크기입니다.
• 해당 값은 부모의 영향을 받지 않습니다.

• Scale
• Vector2 형식으로 해당 component 및 children의 배율 값을 나타냅니다.
• x와 y값을 동일하게 입력할 경우 비율이 유지되며, 두 값이 다를 경우 그 반대입니다.

• Angle
• Double이며 anchor를 기준으로 하여 회전된 각도이며 radian으로 나타냅니다..
• 해당 값은 부모의 각도에 영향을 받습니다

• Anchor
• Position, rotation 의 기준이 되는 점입니다.
• 기본 값은 top left 입니다.

FlameGame

Low-level API

flowchart BT
	b[Normal Class]~~~ a[Abstract Class]
	OxygenGame --Extends--> Game
	GameWidget --> Game
	FlameGame -- With --> Game
	FlameGame -- Extends --> Component
	oComp[Other Components] -- Extends --> Component
	style Game fill:#f9f
	style a fill:#f9f

• onLoad: 이 메서드는 클래스가 부모에 처음 추가될 때 한 번만 호출됩니다.

• onMount: onLoad가 호출된 이후에 호출되며, 이 클래스가 새로운 부모에 추가될 때마다 실행됩니다.

• onRemove: 이 메서드는 클래스가 부모에서 제거될 때 호출됩니다.

GameWidget

class GameWidget<T extends Game> extends StatefulWidget

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

Asset

.
└── assets
    ├── audio
    │   └── explosion.mp3
    ├── images
    │   ├── enemy.png
    │   ├── player.png
    │   └── spritesheet.png
    └── tiles
        ├── level.tmx
        └── map.json        

flutter:
  assets:
    - assets/audio/explosion.mp3
    - assets/images/player.png
    - assets/images/enemy.png
    - assets/tiles/level.tmx

간단 실습

구현 시 추가 학습 내용

Collision Detection

• FlameGame을 상속 받은 class에 HasCollisionDetection mixin 을 추가하면 해당 게임에서 Collision detection 관련 기능이 활성화됩니다.

• Collision Detection 을 적용할 객체에는 CollisionCallbacks mixin 을 추가하여 Collider 가 포함된 component임을 선언합니다.
• 충돌하는 두 object 모두 CollisionCallbacks 를 포함해야 합니다.

• onComponentTypeCheck 함수를 override 하여 노랑색 사각형(star), 와 파란색 사각형(player)의 충돌 시에만 onCollisionStart 함수를 실행하도록 합니다.
• onCollisionStart 함수를 override 하여 충돌체가 player 인 경우 해당 star object를 부모로부터 삭제하도록 합니다.

Tap 인식 및 좌표 값 이용

• FlameGame을 상속 받은 class에 TapCallbacks mixin 을 추가하면 해당 게임에서 관련 기능이 활성화됩니다.

• onTapDown 은 Tap 시 1회 발생하는 함수로, parameter로는 TapDowEvent 가 있습니다.

• TapDownEvent.canvasPosition 깂은vector2 형식으로 tap한 위치를 나타넵니다.

작성 코드

// main.dart
import 'package:demo_racing/game_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flame Demo',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const GameScreen(),
    );
  }
}

// game_screen.dart
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flame/game.dart';
import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:demo_racing/game_objects.dart';
import 'package:flame/collisions.dart';
class GameScreen extends StatelessWidget {
  const GameScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GameWidget(
        game: RacingGame(),
      ),
    );
  }
}

class RacingGame extends FlameGame with HasCollisionDetection, TapCallbacks{
  late Player player;
  double nextSpawnSeconds = 0;
  @override
  Future<void> onLoad() async {
    player = Player(
      position: Vector2(size.x * 0.25, size.y - 20),
    );
    add(player);
  }

  @override
  void onTapDown(TapDownEvent event) {
    super.onTapDown(event);
    if (!event.handled) {
      final touchPoint = event.canvasPosition;
      if (touchPoint.x > size.x / 2) {
        player.position = Vector2(size.x * 0.75, size.y - 20);
      } else {
        player.position = Vector2(size.x * 0.25, size.y - 20);
      }
    }
  }

  @override
  void update(dt) {
    super.update(dt);
    nextSpawnSeconds -= dt;
    if (nextSpawnSeconds < 0) {
      add(Star(Vector2(size.x * (Random().nextInt(10) > 5 ? 0.75 : 0.25), 0)));
      nextSpawnSeconds = 0.3 + Random().nextDouble() * 2;
    }
  }
}

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

class Player extends RectangleComponent with CollisionCallbacks {
  static const playerSize = 96.0;
  int totalCount = 0;
  late TextComponent textComponent;

  Player({required dynamic position})
      : super(
          position: position,
          size: Vector2.all(playerSize),
          anchor: Anchor.bottomCenter,
        );

  @override
  Future<void> onLoad() async {
    super.onLoad();
    paint.color = Colors.blue;
    add(RectangleHitbox());

    textComponent = TextComponent(
      text: '',
      textRenderer: TextPaint(
        style: const TextStyle(
          fontSize: 40,
        ),
      ),
      anchor: Anchor.center,
      position: Vector2(playerSize / 2, playerSize / 2),
    );
    add(textComponent);
    textComponent.text = "0";
  }

  @override
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    if (other is Star) {
      textComponent.text = '${++totalCount}';
    } else {
      super.onCollisionStart(intersectionPoints, other);
    }
  }
}


class Star extends RectangleComponent with HasGameRef, CollisionCallbacks {
  static const starSize = 64.0;

  Star(position)
      : super(
          position: position,
          size: Vector2.all(starSize),
          anchor: Anchor.bottomCenter,
        );

  @override
  Future<void> onLoad() async {
    super.onLoad();
    paint.color = Colors.yellow;
    add(RectangleHitbox());
  }

  @override
  void update(double dt) {
    super.update(dt);
    position.y = position.y + 5;
    if (position.y - starSize > gameRef.size.y) {
      removeFromParent();
    }
  }

  @override
  bool onComponentTypeCheck(PositionComponent other) {
    if (other is Star) {
      return false;
    } else {
      return super.onComponentTypeCheck(other);
    }
  }

  @override
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    if (other is Player) {
      removeFromParent();
    } else {
      super.onCollisionStart(intersectionPoints, other);
    }
  }
}