四角形

2023-05-01

RectangleComponent

ゲーム内の要素はComponentを継承したクラスで表現されます。四角形を描画するにはRectangleComponentを使います。（Componentの子のPositionComponentの子です）

classDiagram
  Component <|-- PositionComponent
  PositionComponent <|-- RectangleComponent

PositionComponentは多くの要素のベースになるもので、画面上に描画するのに必要な属性を持っています。

属性	概要
position	座標
size	大きさ
scale	スケール
angle	回転角度
anchor	描画の基準位置。デフォルトは左上（`Anchor.topLeft`）

RectangleComponentはこれらに加えてpaint（デフォルトは白）を指定することで、任意の四角形を描画することができます。

公式ドキュメント https://docs.flame-engine.org/latest/flame/components.html#rectanglecomponent
APIリファレンス https://pub.dev/documentation/flame/latest/geometry/RectangleComponent-class.html

描画する

RectangleComponentを使ってみます。

FlameGameを継承したクラスのonLoadでaddしています。

rect/game.dart

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame/palette.dart';

class RectGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();

    await add(
      RectangleComponent(
        position: Vector2(size.x * 0.5, size.y * 0.5),
        size: Vector2.all(size.x * 0.2),
        angle: radians(45),
        anchor: Anchor.center,
        paint: BasicPalette.gray.paint(),
      ),
    );
  }
}

これでグレーの四角形が 45 度回転した状態で画面中央に描画されます。