4. 플러터로 게임 만들기 - Components

Flame에는 다음과 같이 Component라는 클래스가 있고, 종류는 아래와 같습니다.

Component

- TimerComponent

- ParticleComponent

- SpriteBatchComponent

- Effects

- PositionComponent

 - SpriteComponent

 - SpriteGroupComponent

 - SpriteAnimationComponent

 - ParallaxComponent

 - IsoMetricTileMapComponent

 - HudMarginComponent

   - HudButtonComponent

   - JoystickComponent

 - ButtonComponent

 - CustomPainterComponent

 - ShapeComponent

 - SpriteButtonComponent

 - TextComponent

 - TextBoxComponent

 - NineTileBoxComponent

- FlameGame 

 

컴포넌트 클래스 생성자

Component({
    Iterable<Component>? children,
    int? priority,
    this.key,
  })

- priority 매개변수를 통해서, 화면상에 Z 를 지정해줄 수 있다.

컴포넌트 추가하는 방법

다음과 같이 add 함수를 이용해서 컴포넌트를 추가할 수 있습니다.

class ExampleGame extends FlameGame{

	@override
    onLoad(){
    	add(
        	PositionComponent(
            	position: Vector2(30, 0),
                children: [
                	HighScoreDisplay(),
                    HitPointsDisplay(),
                    FpsComponent(),
                    ],
                 ),
                ),
               }

}

컴포넌트 "키" 사용법

특정 컴포넌트를 지정해서 사용하고 싶을 때 키를 지정해주어서 사용할 수 있습니다.

// 키를 갖고 있는 컴포넌트 선언
final myComponent = Conponent(
	key: ComponentKey.named('player'),
    );
    
// 키로 컴포넌트 찾기
flameGame.findByKey(ComponentKey.named('player));

 

PositionComponent Class

PositionComponent 클래스는 position, size, scale, angle, anchor를 지정할 수 있는 클래스입니다.

 

 

- 원 그리기

class Dash extends PositionComponent{
  Dash(): super(
    position:  Vector2(0, 0),
    size: Vector2(20, 20)
  );

  @override
  void update(double dt){
    super.update(dt);
    position.x  += 1;
  }

  @override
  void render(Canvas canvas){
    super.render(canvas);
    canvas.drawCircle(Offset.zero, 20, BasicPalette.blue.paint());
  }
}

- drawCircle 함수

- position : 화면 중앙을 기준으로 (0,0)으로 계산한다. 

 

- 결과

- 사각형 그리기

class Dash extends PositionComponent{
  Dash(): super(
    position:  Vector2(0, 0),
    size: Vector2(20, 20)
  );

  @override
  void update(double dt){
    super.update(dt);
    position = Vector2.zero();
    angle+=0.1;
  }

  @override
  void render(Canvas canvas){
    super.render(canvas);
    canvas.drawRect(
        Rect.fromCenter(center: Offset.zero, width: size.x, height: size.y),
        BasicPalette.red.paint());
  }
}

- drawRect 함수

SpriteComponent Class 

SpriteAnimationComponent Class 

 

SvgComponent Class 

ShapeComponent Class ( PolygonComponent, RectangleComponent, CircleComponent )

- PolygonComponent

- RectangleComponent

- CircleComponent

ParallaxComponent Class