四角形

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を継承したクラスのonLoadaddしています。

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 度回転した状態で画面中央に描画されます。

© 2023 tnantoka