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

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

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

波紋

2023-07-06

波紋

公式ドキュメントのタップにあった波紋っぽいサンプルが良かったので簡略化したものを作りました。 ソシャゲでタップ位置を示すのに使われているのを見かけます。

CircleComponent（円参照）を継承して、updateでradiusを変更すれば簡単に作れます。

公式ドキュメント https://docs.flame-engine.org/latest/flame/inputs/tap_events.html#demo

動かす

CircleComponentを継承したRippleを作ります。

ripple/game.dart 
class Ripple extends CircleComponent {
  Ripple({super.position})
      : super(
          anchor: Anchor.center,
          paint: Paint()
            ..color = Colors.white
            ..style = PaintingStyle.stroke
            ..strokeWidth = 1,
        );

  final maxRadius = 20;

  @override
  void update(double dt) {
    super.update(dt);

    radius += 30 * dt;

    if (radius > maxRadius) {
      removeFromParent();
    }
  }
}

あとはタップした位置にこれをaddするだけです。

ripple/game.dart 
  @override
  void onTapDown(TapDownEvent event) {
    super.onTapDown(event);

    add(
      Ripple(position: event.localPosition),
    );
  }

これで、波紋っぽい表現ができました。

© 2023 tnantoka