[Flutter] Flame 엔진으로 간단한 게임을 만들어보자

S_Soo100·2023년 10월 30일
appfltter flameflutterflutter game앱 개발플러터플러터 플레임플러터게임
4

flutter

목록 보기
14/19
post-thumbnail
  • Flutter의 게임 엔진 Flame으로 간단한 게임을 구현해보자.
    • 공식 문서 : 링크
    • 구글 코드랩스 교육문서 : 링크

0. 아이디어 스케치

  • 화면 최상단에서 오브젝트가 생성되서 내려오고, 화면 최하단에 있는 플레이어 캐릭터는 좌우로 움직이며 그것을 피하는 게임을 만들어보기로 했다.
  • 어릴적 이런 형태의 간단한 게임들을 많이 봤을 것이다.
    우선 오브젝트 생성, 움직임, 충돌판정 등을 구현하고, 이미지는 여기에서 무료로 가져다 쓰기로 했다.

1. Flutter Flame 기본 구조

1.1 설치

  • 우선 신규 프로젝트에 플레임을 설치하자.

    	 $ flutter pub add flame

  • 플레임 엔진으로 만든 게임은 플러터의 다른 위젯처럼 사용이 가능하다.
    단, GameWidget()으로 게임 인스턴스를 감싸서 렌더링 해야 한다.

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

class YourGamePage extends StatefulWidget {
  const YourGamePage({super.key});

  @override
  State<YourGamePage> createState() => _YourGamePageState();
}

class _YourGamePageState extends State<YourGamePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Airplane Game"),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: GameWidget(
            game: YourGame(), // 이부분에 게임 인스턴스를 넣어준다.
          ),
        ),
      ),
    );
  }
}

  • 위의 구조만 따라가면 게임을 어느 크기로든, 어느 위치에서든 편리하게 불러낼 수 있다.
    물론 직접 YourGame() 같이 구현할 필요 없이, 다른데서 주입해주거나 매번 인스턴스를 새로 생성하게 할수도 있다.

1.2. FlameGame 클래스

  • GameWidget안에 넣는 FlameGame클래스는 우리가 Stateless위젯 만들듯이 extends 해주면 된다.
    기본적으로 @override해서 사용할 수 있는 함수들을 많이 제공하는데, 대부분 그것들과 섞어서 쓰면 된다.
    그 외에도 여러 Mixin을 섞어서 탭 하는걸 인식하거나 충돌을 인식하거나 할 수 있으며,
    이는 컴포넌트 레벨에서도 동일하게 적용된다.
    우리는 컴포넌트를 구현 할 때 충돌 인식을 구현할 것이다.

    import 'package:flame/game.dart';

class YourGame extends FlameGame {
	
  // 게임 인스턴스가 생성될때 실행하는 함수, 대부분 여기에 내용을 배치한다.
  @override
  Future<void> onLoad() async {
    super.onLoad();
  }
  
  // 업데이트 되는 매 프레임마다 실행되는 로직
  @override
  void update(double dt) async {
    super.update(dt);
  }
  
  // 인스턴스가 해제될 떄 실행되는 로직
  @override
  void onRemove() {
 	super.onRemove();
  }
}

1.3. 컴포넌트 클래스 - 배경화면 구현

  • 이제 컴포넌트를 만들어보자. 웹에서 처럼 게임에서 무언가를 구성하는 요소들을 모두 컴포넌트(Component)라고 부른다.
    flame/components를 상속하는 새로운 클래스를 만들어 보자.

  • 우리는 스프라이트 이미지를 이용해서 게임을 만들 것이기 때문에 SpriteComponent를 상속하면 된다.
    그리고 onLoad() 함수에 스프라이트를 불러와준다.

    import 'package:flame/components.dart';

class AirplaneGameBg extends SpriteComponent with HasGameRef {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    sprite = await gameRef.loadSprite('your_background_image.jpg');
    size = Vector2(gameRef.size.x, gameRef.size.y);
  }
}

  • HasGameRef mixin은 플러터 위젯의 context처럼, 지금 이 컴포넌트를 자식으로 가지는, 부모 게임 인스턴스의 여러 요소들을 끌어다 쓸 수 있게 해준다.
    여기서는 게임판의 size를 받아와서 스프라이트 이미지를 불러오는 우리 컴포넌트의 크기를 게임판의 크기로 맞추고 있다.
    컴포넌트를 구성했다면 이제 게임에서 불러와야 한다. 게임 코드로 가서 백그라운드 컴포넌트를 불러내보자.

  • await add() 메서드로 컴포넌트를 불러와주면 된다. 이건 onLoad()시에만 사용 가능한 메서드가 아니며, 언제든 불러낼 수 있다.

    import 'package:flame/game.dart';

class YourGame extends FlameGame {
 // 게임 인스턴스가 생성될때 실행하는 함수, 대부분 여기에 내용을 배치한다.
 @override
 Future<void> onLoad() async {
   final AirplaneGameBg _ = new AirplaneGameBg();
   await add(_);
   super.onLoad();
 }
 ...
 ...
}
- 자 이제 배경이 만들어진걸 알 수 있다.

1.4. 오브젝트 배치

  • 이제 또 SpriteComponent를 사용해서 우리가 플레이 할 플레이어 캐릭터 비행기를 만들어보자.

  • 기본 크기는 가로 세로 모두 60프레임으로 지정해두고, 만들어낼 위치(포지션)와 충돌 이벤트때 받아야 하는 함수만 외부에서 넣어주자.
    그리고 충돌도 구현하기로 했으니, 동그랗게 히트박스도 만들어서 표시해주자.

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

class PlayerPlane extends SpriteComponent with HasGameRef, CollisionCallbacks {
  static const double playerSize = 60.0;
  final Function hitAction;
  PlayerPlane({required position, required this.hitAction})
      : super(size: Vector2.all(playerSize), position: position);

  late ShapeHitbox hitbox;

  @override
  void onLoad() async {
    super.onLoad();
    sprite = await gameRef.loadSprite('player.png');
    position = position;

    // 빨간색 원으로 잘 보이는 히트박스 만들어주기
    final Paint defaultPaint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke;
    hitbox = CircleHitbox()
      ..paint = defaultPaint // paint를 하지 않거나 선을 투명으로 하면 보이지 않음
      ..renderShape = true;
    add(hitbox);
  }

  // CollisionCallbacks Mixin 사용시 @override 가능, 충돌 발생시 메서드
  @override
  void onCollision(Set<Vector2> points, PositionComponent other) {
    super.onCollision(points, other);
    if (other is ScreenHitbox) {
        // 게임 화면과 충돌했을 때 메서드 정의
    } else if (other is EnemyPlain) {
        // other의 타입을 지정해서 충돌이 일어나는 컴포넌트별로 분기할 수 있다. 
        hitAction(); //외부로 받아온 매개변수
    }
  }
}

  • 컴포넌트를 어느정도 정리했으면 이제 배경화면 위에 띄워보자.

    import 'package:flame/game.dart';

class YourGame extends FlameGame {
 final YourBackground _backGround = YourBackground();
 late PlayerPlane _player;
	
 // 게임 인스턴스가 생성될때 실행하는 함수, 대부분 여기에 내용을 배치한다.
 @override
 Future<void> onLoad() async {
   await add(_gameBg);
   _player = PlayerPlane(
       position: Vector2(size.x / 2 - 30, size.y - 100), hitAction: hitAction);
   await add(_player);
   super.onLoad();
 }
 ...
 ...
}

  • 이미지와 빨간 히트박스 구현이 된 것을 확인할 수 있다.
    그리고 FlameGame 안에서 _player로 불러냈기 때문에, PlayerPlane클래스의 메서드도 사용할 수 있다.
    움직이거나, 폭파시키거나, 형태를 변화하거나 등등 원하는 메서드를 만들어 사용하면 된다.

  • 이제 적군 비행기 클래스를 만들어보자.

    // enum으로 비행기의 상태를 관리하자, 날고있는지 아니면 충돌했는지
enum EnemyPlainState { flying, hit }

class EnemyPlain extends SpriteComponent with HasGameRef, CollisionCallbacks {
  // 우리 플레이어 비행기랑 똑같이 60픽셀로
  static const double enemySize = 60.0;
  EnemyPlain({required position})
      : super(size: Vector2.all(enemySize), position: position);

  //초기 상태는 비행중으로
  EnemyPlainState _state = EnemyPlainState.flying;
  //getter를 써서 상태를 외부에서 변경 못하도록 
  EnemyPlainState get state => _state;
  late ShapeHitbox hitbox;
  late Sprite? _spirte;

  @override
  void onLoad() async {
    super.onLoad();
    _spirte = await gameRef.loadSprite("적 비행기 이미지");
    sprite = _spirte;
    position = position;

    // 플레이어 비행기랑 똑같이 빨간 선으로 히트박스 표시
    final Paint defaultPaint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke;
    hitbox = CircleHitbox()
      ..paint = defaultPaint
      ..renderShape = true;
    add(hitbox);
  }

  @override
  void update(double dt) {
    // y값(세로)을 변경해서 날아가도록 수정해보자
    fly();
    super.update(dt);
  }

  void fly(){
    // y값을 변경하며 매 프레임마다 아래로 날아가도록 로직을 구현하자
  }

  @override
  void onCollision(Set<Vector2> points, PositionComponent other) {
    super.onCollision(points, other);
    if (other is ScreenHitbox) {
      // 스크린과 충돌했을 때 로직
    } else if (other is PlayerPlane) {
      // 플레이어 비행기와 충돌했을 때 로직
    }
  }
}

  • 아직 만들어야 할 메서드가 많지만 기본형은 이렇게 될 거 같다.
    이 적군 비행기는 Player비행기처럼 처음부터 만들어두지 않고, Timer를 써서 일정 시간마다 만들어서 위에서 아래로 내려오게 하자.

  • 이제 게임 코드에서 EnemyPlane을 만들어내는 로직 부분을 수정하자.

2. 게임 로직 만들기

  • Flame에서 컴포넌트의 위치(포지션)를 변경할 수 있는 방법은 2가지가 있다.
    1. 컴포넌트 내부에서 자신의 포지션을 변경하는 함수
    2. 컴포넌트를 불러온 부모 컴포넌트 혹은 부모 게임에서
      "그" 컴포넌트의 포지션을 변경하는 함수
  • 적군 비행기 클래스는 본인들이 알아서 움직여야 하니 1번 방식을 택하고,
    플레이어 비행기는 외부 오버레이 위젯(최상단에 띄워놓는 버튼 등)을 이용해서도 움직이게 할 게획이니, 2번 방식을 택하자.

2.1. 내 캐릭터 움직이기 + 외부 오버레이 위젯

  • 우선 제일 중요한 내 캐릭터부터 컨트롤해보자
    YourGame 클래스 안에 두 메서드를 추가한다.

      void flyLeft() {
    _player.position = Vector2(_player.position.x - 10, _player.position.y);
  }

  void flyRight() {
    _player.position = Vector2(_player.position.x + 10, _player.position.y);
  }

  • x좌표는 왼 쪽 끝이 0이다. flyLeft는 왼 쪽으로 10픽셀, flyRight는 오른쪽으로 10 픽셀 움직여준다.

  • 그리고 이러다가 화면 밖으로 나가버리면 안되니, 벽이랑 부딛히면 더 가지 말고 멈추라는 함수를 추가하자.

      @override
  void onCollision(Set<Vector2> points, PositionComponent other) {
    super.onCollision(points, other);
    // 스크린과 부딛히면?
    if (other is ScreenHitbox) {
		// 내 비행기의 위치가 게임판의 x값보다 크면?
      // 그대로 x값 0에 고정
      if (position.x < size.x) {
        position = Vector2(0, position.y);?
      // 그게 아니면? 겹치지 않는 맨 끝 위치에 고정
      } else {
        position = Vector2(game.size.x - size.x, position.y);
      }
    }
    ...생략
  }

  • 이제 이 기능들을 내가 탭해서 쓸 수 있도록, 게임 상단에서 이놈들을 불러다 쓸 버튼 두 개를 화면에 배치하자
    이를 위해서는 GameWidget을 가지고 있는 부모 위젯에서 코드를 수정해줄 필요가 있다.

    class YourGamePage extends StatefulWidget {
  const YourGamePage({super.key});

  @override
  State<YourGamePage> createState() => _YourGamePageState();
}

class _YourGamePageState extends State<YourGamePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Airplane Game"),
      ),
      body: Center(
        child: GameWidget(
          game: YourGame(),
          // Map<String, Widget Function> 타입의 overlayBuilderMap을 추가한다.
          // String으로 Overlay 이름을 정하고 위젯을 만들어두면 Game내에서 overlay.add 가능
          overlayBuilderMap: {
          	// context와 game을 모두 참조할 수 있다.
              // game의 클래스 타입을 제대로 명시해주지 않으면 내부메서드 사용이 어렵다.
            'leftRightButton': (BuildContext context, YourGame game) {
              return Align(
                alignment: Alignment.center,
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      ElevatedButton(
                          onPressed: () {
                            // 왼쪽으로 이동
                            game.flyLeft();
                          },
                          child: Text(">")),
                      ElevatedButton(
                          onPressed: () {
                            // 오른쪽으로 이동
                            game.flyRight();
                          },
                          child: Text(">")),
                    ],
                  ),
                ),
              );
            },
          },
        ),
      ),
    );
  }
}

  • Overlay맵을 정의했다면 이제 Game쪽 코드를 수정하자!

    class YourGame extends FlameGame with TapCallbacks, HasCollisionDetection {
  late PlayerPlane _player;

  void hitAction() {}

  @override
  Future<void> onLoad() async {
    final AirplaneGameBg _ = new AirplaneGameBg();
    await add(_);
    _player = PlayerPlane(
        position: Vector2(size.x / 2 - 30, size.y - 100), hitAction: hitAction);
    await add(_player);
    // overlay.add를 하면 상위에 정의해둔 String을 Key로 오버레이를 불러온다.
    overlays.add("leftRightButton");
    super.onLoad();
  }

  void flyLeft() {
    _player.position = Vector2(_player.position.x - 17, _player.position.y);
  }

  void flyRight() {
    _player.position = Vector2(_player.position.x + 17, _player.position.y);
  }
}

    이제 확인해보면 잘 올라왔다.

  • 파란색으로 좌/우 버튼이 추가된걸 볼 수 있다(지금 보니 둘다 ">"로 해놨다.)
    눌러서 확인해보니 YourGame내에 정의한 함수가 잘 움직이고 있다.

2.2. 적군 캐릭터 랜덤 추가

  • 우선 적 비행기를 랜덤하게 만들어보자.
    YourGame의 onLoad() 메서드에 타이머와 적군 비행기 추가 로직을 추가하자.

    import 'dart:math';
import 'dart:async' as ASYNC;

class YourGame extends FlameGame with TapCallbacks, HasCollisionDetection {
  late PlayerPlane _player;
  late ASYNC.Timer? _enemyTimer;
  late ASYNC.Timer? _enemyTimer2;
	
  // 아직 임시
  void hitAction() {}

  @override
  Future<void> onLoad() async {
    final AirplaneGameBg _ = new AirplaneGameBg();
    await add(_);
    _player = PlayerPlane(
        position: Vector2(size.x / 2 - 30, size.y - 100), hitAction: hitAction);
    await add(_player);
    overlays.add("leftRightButton");

	// 타이머 한개는 1초마다, 한개는 1.5초마다 적 비행기 생성한다.
    // 타이머 시간은 임의로 수정하면 된다.
    _enemyTimer =
        ASYNC.Timer.periodic(const Duration(milliseconds: 1000), (timer) {
      add(addEnemy());
    });
    _enemyTimer2 =
        ASYNC.Timer.periodic(const Duration(milliseconds: 1500), (timer) {
      add(addEnemy());
    });
    super.onLoad();
  }

  EnemyPlain addEnemy() {
    // x축의 위치를 랜덤하게 만들어준다.
    // y축의 위치는 임의로 30으로 고정한다.
    int randomDx = Random().nextInt(13) + 1;
    return EnemyPlain(position: Vector2(randomDx * 30, 30));
  }

  void flyLeft() {
    _player.position = Vector2(_player.position.x - 17, _player.position.y);
  }

  void flyRight() {
    _player.position = Vector2(_player.position.x + 17, _player.position.y);
  }
}

    자 추가가 잘 되고 있다.

2.3. 적군 캐릭터 움직임, 피격시 반응 추가

  • 이제 EnemyPlain 클래스를 수정할 차례다.
    5가지의 기능을 추가해야 한다.

    1. 생성될 때 랜덤한 스프라이트 보여주기
2. 알아서 아래쪽으로 내려가게 만들기(속도는 랜덤하게)
3. PlayerPlane과 부딛히면 깜빡이며 사라지게 만들기
4. 바닥과 충돌하면 사라지게 만들기
5. 생성되었을 때 x축 맨 끝과 겹쳐지게 만들어지면 안쪽으로 위치 옮기기

  • 꽤 많아 보이지만 코드로 보면 간단할거다!

    import 'dart:math';
import 'dart:async' as ASYNC;
import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

enum EnemyPlainState { flying, hit }

class EnemyPlain extends SpriteComponent with HasGameRef, CollisionCallbacks {
  static const double enemySize = 60.0;
  final int speed;
  EnemyPlain({required position, required this.speed})
      : super(size: Vector2.all(enemySize), position: position);

  late ShapeHitbox hitbox;
  EnemyPlainState _state = EnemyPlainState.flying;
  EnemyPlainState get state => _state;
  late String planeType;
  late Sprite? _spirte;

	// 실행시 랜덤하게 Sprite를 결정해주자!
  String initRandomType() {
    int type = Random().nextInt(4);
    switch (type) {
      case 0:
        return 'airplane_game/enemies/enemy1-1.png';
      case 1:
        return 'airplane_game/enemies/enemy2-1.png';
      case 2:
        return 'airplane_game/enemies/enemy3-1.png';
      case 3:
        return 'airplane_game/choppers/chopper2-2.png';
      default:
        return 'airplane_game/enemies/enemy3-1.png';
    }
  }

  @override
  void onLoad() async {
    super.onLoad();
	  // 실행시 랜덤하게 Sprite를 결정해주자!
    planeType = initRandomType();
	  // 랜덤하게 결정한 스프라이트를 로드한 놈을 할당해주기
    _spirte = await gameRef.loadSprite(planeType);
	  // 할당한 스프라이트를 컴포넌트에 넘겨주기 
    sprite = _spirte;
    position = position;

    final Paint defaultPaint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke;
    hitbox = CircleHitbox()
      ..paint = defaultPaint
      ..renderShape = true;
    add(hitbox);
  }

  @override
  void update(double dt) {
	// 외부에서 속도를 받아와서, flying(날고있는)상태면 계속 y값을 아래로 내리기
    if (_state == EnemyPlainState.flying) {
      position = Vector2(position.x, position.y + speed);
    }
    super.update(dt);
  }

  @override
  void onCollision(Set<Vector2> points, PositionComponent other) {
    super.onCollision(points, other);
    if (other is ScreenHitbox) {
  	// PlayerPlane때 한대로 비슷하게 구현하면 된다.
      if (position.x > game.size.x) {
        if (position.x < size.x) {
          position = Vector2(0, position.y);
          return;
        } else {
          position = Vector2(game.size.x - size.x, position.y);
          return;
        }
      }
      // removeFromParent는 컴포넌트 클래스의 내부함수로, 이 컴포넌트를 해제한다.
      // 나랑 안 부딛히고 바닥에 부딛히면 없애버리자.
      if (position.y + size.y > game.size.y) {
        removeFromParent();
      }
    // player랑 부딛히면 비행기를 멈추고 사라지게 하는 함수 추가
    } else if (other is PlayerPlane) {
      stopPlane();
    }
  }

  ASYNC.Timer? destroyTimer;

  void stopPlane() {
    _state = EnemyPlainState.hit;
    destroy();
    Future.delayed(const Duration(seconds: 1), (() => removeFromParent()));
	// Timer클래스는 다 사용하면 항상 cancel()로 해제하자
    destroyTimer?.cancel();
  }
  
  // PlayerPlane과 충돌나면 깜빡거리는 점멸효과를 1초정도 준다.
  void destroy() async {
    _spirte = await gameRef.loadSprite(planeType);
    bool blink = false;
    sprite = null;
    destroyTimer =
        ASYNC.Timer.periodic(const Duration(milliseconds: 50), (timer) {
      if (blink == true) {
        sprite = null;
        blink = false;
      } else {
        sprite = _spirte;
        blink = true;
      }
    });
  }
}

    이제 잘 굴러가나 체크해보자

  • 랜덤하게 비행기 이미지들도 잘 불러와지고, 아래로 내려오되 속도도 랜덤하다.
    그리고 충돌하면 1초간 깜빡거리며 이후에 잘 사라지고 있다.

  • 여기까지 왔다면 Flutter Flame 엔진의 기초적인 부분은 한번씩 다 사용해봤다고 생각한다.
    이제 직접 게임을 만들며 게임 안에 게임진행상태, HP, SCORE등 내부 상태를 주고 관리하며 게임을 고도화 해보면 좋을 것 같다.

profile
S_Soo100
플러터, 리액트
이전 포스트

[Flutter] Custom Clipper - 2. 도형과 곡선

다음 포스트

[Flutter] 부드러운 로딩 처리 - Skeleton Loader

0개의 댓글