Flameの法則 v1.14.0 対応
Hello World ライフサイクル 四角形 直線 デバッグ表示 円 移動 ジョイスティック テキスト テキストボタン オーバーレイ スプライト アニメーション パララックス タップ パーティクル 物理演算 衝突判定 ポリゴン サウンド エフェクト テキストボックス カスタムペインター スクリーンヒットボックス ルーター プライオリティ キーボードイベント キーボードリスナー カメラ スプライトシート 発光 反転 バリュールート 円弧 スプライトウィジェット スケールモード ポーズ タイムスケール 波紋 アニメーションティッカー ローディングビルダー エラービルダー バックグラウンドビルダー パスファインディング タイマー HSVカラー

PR 第8章にFlameが載ってる模様

マルチプラットフォーム対応 最新フレームワーク Flutter 3入門

ポリゴン

2023-05-04

PolygonComponent

多角形にはPolygonComponentを使います。

relativeファクトリーとparentSizeを使うことでサイズを可変にできて便利です。

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

描画する

PolygonComponent.relativeを使って-1〜1 の範囲でポリゴンを指定し、 parentSize でサイズを決めています。

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

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

    await add(
      PolygonComponent.relative(
        [
          Vector2(0, -1),
          Vector2(1, -1),
          Vector2(0, 1),
          Vector2(-1, 1),
        ],
        parentSize: Vector2.all(64),
        position: Vector2(size.x * 0.5, size.y * 0.5),
        anchor: Anchor.center,
      ),
    );
  }
}

これで平行四辺形が画面中央に表示されます。

© 2023 tnantoka