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

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

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

カスタムペインター

2023-05-13

CustomPainterComponent

CustomPainterComponentを使うとペインターで自由に描画するコンポーネントを作成できます。

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

描画する

まずはカスタムペインターを定義します。

custom_painter/game.dart 
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final strokePaint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    canvas.drawRect(
      const Rect.fromLTWH(-50, -50, 100, 100),
      strokePaint,
    );
    canvas.drawLine(
      const Offset(-50, -50),
      const Offset(50, 50),
      strokePaint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

コンポーネントのpainterオプションとして指定します。

custom_painter/game.dart 
    await add(
      CustomPainterComponent(
        position: Vector2(size.x * 0.5, size.y * 0.5),
        painter: MyPainter(),
      ),
    );

今回はプレースホルダー画像のような斜め線入りの四角形を描画しています。

© 2023 tnantoka