Flutter Flame으로 게임 개발하기 - 애니메이션 및 깊이 추가

이제 게임에 Animation을 추가할 차례다. 그러기 위해선 기존에 SpriteComponent를 상속한 Player 컴포넌트를 SpriteAnimationComponent를 상속하도록 변경해야 한다.

class Player extends SpriteAnimationComponent
   with HasGameReference<FirstFlameGame> {
 Player() : super(size: Vector2(100, 150), anchor: Anchor.center);

 @override
 Future<void> onLoad() async {
   await super.onLoad();

   animation = await game.loadSpriteAnimation(
     'player.png',
     SpriteAnimationData.sequenced(
       amount: 4,
       stepTime: .2,
       textureSize: Vector2(32, 48),
     ),
   );

   position = game.size / 2;
 }

 void move(Vector2 delta) {
   position.add(delta);
 }
}

player.png의 이미지는 다음과 같다.

기존에 단순히 sprite를 불러오던 것과 다르게, loadSpriteAnimation 함수를 이용해서 부른다. 게다가 player.png 파일은 우주선 4대가 나열된 모습이다.

알아보니, 이게 sprite를 사용해서 애니메이션을 주는 방법인 것 같다. 나는 그동안 이런 게임 속 2D 애니메이션은 여러개의 이미지를 순서대로 보여주는 방식인 줄 알았다. 그런데 실제로는 한장의 이미지 파일에 이렇게 여러개의 그림을 만들어두고, 보여주는 이미지의 좌표를 다르게 하는 방식이라는 것 같다.

SpriteAnimationData.sequenced(
    amount: 4,
    stepTime: .2,
    textureSize: Vector2(32, 48),
),

SpriteAnimationData.sequenced 함수 내의 각 값을 설명하자면 다음과 같다.

amount: 이미지의 전체 프레임 수
stepTime: 프레임 당 노출되는 시간
textureSize: 각 프레임의 사이즈

player.png 파일에 그려진 우주선은 4대이고 각 우주선이 차지하는 크기는 32x48 이다. 그리고 각 이미지가 0.2초마다 다음 이미지로 넘어가는 방식인 것이다.

그 다음으로 별이 빛나는 배경을 만들어줘야 하는데, 내가 참고하는 튜토리얼에서는 parallx scrolling을 이용해 배경화면을 구현해줄 것이라고 한다. Parallax scrolling이란 컴퓨터 그래픽 기술로, 관측 위치에서 멀리 있는 이미지가 가까운 이미지보다 느리게 움직이도록 처리하는 기술이다. 이를 통해 2D 이미지에 입체감을 줄 수 있다.

class FirstFlameGame extends FlameGame with PanDetector {
  late Player player;

  @override
  Future<void> onLoad() async {
    final parallax = await loadParallaxComponent(
      [
        ParallaxImageData('stars_0.png'),
        ParallaxImageData('stars_1.png'),
        ParallaxImageData('stars_2.png'),
      ],
      baseVelocity: Vector2(0, -5),
      repeat: ImageRepeat.repeat,
      velocityMultiplierDelta: Vector2(0, 5),
    );
    add(parallax);

    player = Player();
    add(player);
  }

  // 기타 코드 생략
}

배경으로 사용할 stars_0.png 부터 stars_2.png 까지 각 이미지를 준비한 후 loadParallaxComponent를 이용해 각 이미지를 불러온다. 이 값들에 대해 설명하자면

baseVelocity: 기본 속도. Vector2(0, -5)라고 하면 x축으로는 움직이지 않고, y축으로는 음의 방향으로 초당 5픽셀씩 이동한다는 것이다. 기본 속도는 가장 느린 레이어를 기준으로 한다(즉, 가장 멀리 있는 레이어).
repeat: 말 그대로 이미지가 반복해서 재생되도록 하는 것이다.
velocityMultiplierDelta: 기본 속도에 곱해지는 값이다. 가장 느린 레이어에서 순차적으로 값이 곱해진다.

이를 통해 배경화면까지 완성했다. 이제 코드를 실행하면 다음과 같이 부스터의 불꽃이 일렁이는 우주선과 움직이는 배경화면을 볼 수 있다.