[flutter] Flame Components

Flame Components 다이어그램

 

대표 컴포넌트 간략 설명

1. BaseComponent: 모든 컴포넌트의 기본이 되는 클래스입니다.
2. PositionComponent: 위치 정보를 가지는 컴포넌트입니다. 위치 정보만을 가지므로, 정적인 객체를 구현할 때 사용됩니다.
3. SpriteComponent: 이미지를 가지는 컴포넌트입니다. 이미지를 표시할 때 사용됩니다.
4. TextComponent: 텍스트를 가지는 컴포넌트입니다. 텍스트를 표시할 때 사용됩니다.
5. AnimationComponent: 애니메이션을 가지는 컴포넌트입니다. 애니메이션을 표시할 때 사용됩니다.
6. ParticleComponent: 입자 효과를 가지는 컴포넌트입니다. 입자 효과를 표시할 때 사용됩니다.
7. BackgroundComponent: 배경 이미지를 가지는 컴포넌트입니다. 배경 이미지를 표시할 때 사용됩니다.
8. ParallaxComponent: 특정 이미지를 기준으로 다른 이미지를 상대적으로 움직이는 효과를 가지는 컴포넌트입니다.
9. TextConfig: 텍스트를 표시할 때 사용되는 구성 요소입니다. 폰트, 크기, 색상 등을 설정할 수 있습니다.
10. SpriteAnimation: SpriteComponent에 사용되는 애니메이션을 나타내는 구성 요소입니다. 각 프레임의 이미지와 지속 시간을 설정할 수 있습니다.
11. SpriteAnimationData: SpriteComponent에 사용되는 애니메이션 데이터를 나타내는 구성 요소입니다. SpriteAnimation 객체를 만들 때 사용됩니다.
12. Particle: ParticleComponent에 사용되는 입자를 나타내는 구성 요소입니다. 입자의 이미지, 크기, 수명, 속도 등을 설정할 수 있습니다.
13. ParticleEmitter: ParticleComponent에 사용되는 입자 생성기를 나타내는 구성 요소입니다. 입자 생성 위치, 생성 속도, 방향, 형태 등을 설정할 수 있습니다.

 

PositionComponent과 DynamicFpsPositionComponent 비교 Component 응용

Flutter Flame은 2D 게임을 만들기 위한 엔진으로, 여러 종류의 Component를 제공합니다. 이 중에서도 가장 기본적인 Component는 PositionComponent입니다. PositionComponent는 게임에서 위치만을 가지는 객체를 나타냅니다. 예를 들어, 게임에서 움직이지 않는 배경 이미지나, 정적인 장애물 등은 PositionComponent로 구현할 수 있습니다.

 

반면에, DynamicFpsPositionComponent는 PositionComponent를 상속받아서 구현된 Component입니다.

 

DynamicFpsPositionComponent는 게임에서 위치뿐만 아니라, 속도와 방향을 가지는 동적인 객체를 나타냅니다. 예를 들어, 게임에서 움직이는 적 캐릭터나, 플레이어 캐릭터 등은 DynamicFpsPositionComponent로 구현할 수 있습니다.

 

그렇다면 둘의 차이점은 무엇일까요? DynamicFpsPositionComponent는 속도와 방향을 가지므로, 게임에서 이동하는 객체를 구현할 때 편리합니다. 예를 들어, 캐릭터가 화면을 이동할 때, 일정한 속도와 방향으로 움직여야 하는데, 이런 동작을 구현할 때 DynamicFpsPositionComponent를 사용하면 편리합니다. 반면에, PositionComponent는 위치만을 가지므로, 정적인 객체를 구현할 때 유용합니다.

 

또한, DynamicFpsPositionComponent는 프레임 단위로 위치를 업데이트하므로, 화면이 바뀌는 속도에 따라 객체의 이동 속도가 일정하게 유지됩니다. 이에 반해, PositionComponent는 위치만을 가지므로, 화면이 바뀌는 속도에 따라 객체의 이동 속도가 달라질 수 있습니다.

 

요약하면, PositionComponent는 위치만을 가지는 정적인 객체를 구현할 때 사용하고, DynamicFpsPositionComponent는 속도와 방향을 가지는 동적인 객체를 구현할 때 사용합니다.

 

import 'package:flame/components.dart';

abstract class DynamicFpsPositionComponent extends PositionComponent {

  double _fps = 60;
  double _targetDt = 1 / 60;
  double _dtTotal = 0;

  DynamicFpsPositionComponent(double fps) {
    setFps(fps);
  }

  @override
  void update(double dt) {
    super.update(dt);
    _dtTotal += dt;

    if (_dtTotal >= _targetDt) {
      _dtTotal = 0;
      updateDynamic(dt);
    }
  }

  void updateDynamic(double dt);

  void setFps(double fps) {
    _fps = fps;
    _targetDt = 1 / _fps;
  }
}

 

2023.05.15 - [프로그램 개발해서 돈벌기/flutter] - [flutter] abstract class는 무엇이고 왜 쓰는가?

[flutter] abstract class는 무엇이고 왜 쓰는가?

 

Component lifecycle

 

• onGameResize : 화면 크기가 조정될 때마다, 그리고 onMount가 구성 요소 트리에 추가될 때 호출됩니다.
• onParentResize : 구성 요소가 구성 요소 트리에 마운트될 때와 현재 구성 요소의 부모가 크기를 변경할 때마다 호출됩니다.
• onRemove : 구성 요소가 게임에서 제거되기 전에 코드를 실행하도록 재정의할 수 있습니다. 부모 제거 메서드와 제거 메서드를 모두 사용하여 구성 요소를 제거하더라도 한 번만 실행됩니다.
• onLoad : 이미지 로드와 같이 구성 요소에 대한 비동기 초기화 코드를 실행하도록 메서드를 재정의할 수 있습니다.
• onMount : 구성 요소가 게임 트리에 탑재될 때마다 실행됩니다.
• onChildrenChanged : 부모의 자식에서 변경 사항을 감지하는 데 필요한 경우 메서드를 재정의할 수 있습니다.

 

Flame 기술 문서

https://docs.flame-engine.org/latest/flame/components.html

Components — Flame