Flameの法則 v1.14.0 対応

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

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

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

円

2023-05-02

CircleComponent

円を表示するにはCircleComponentを使います。
使い方は四角形とほぼ同じで、sizeの代わりにradiusを指定します。

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

描画する

CircleComponentを使ってみます。

circle/game.dart

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

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

    await add(
      CircleComponent(
        position: Vector2(size.x * 0.5, size.y * 0.5),
        radius: size.x * 0.1,
        anchor: Anchor.center,
        paint: BasicPalette.gray.paint(),
      ),
    );
  }
}

これでグレーの円が画面中央に描画されます。

© 2023 tnantoka

Hello World hello

Flame で何もない画面を動かすところまでです。公式ドキュメントのチュートリアルにも同様の内容があります。 Flutter 導入 Flutter の導入手順はたくさん日本語情報があるので割愛します。公式ドキュメントも丁寧です。個人的には以下の手順がおすすめです。 Xcode を入れてシミュレーターで何か動かす Android Studio を入れてエミュレーターで何か動かす Flutter を入れる Flutter に詳しくなくても Flame をとりあえず使うことはできるので（僕もそう）、ひとまずWrite your first Flutter appをやる程度で OK だと思います。 Flame 導入 dependenciesにflameを追加して、pub getするだけです。なお、pub.devからflame: ^1.14.0という文字列がコピーできます。 GameWidget Flame のゲームは Flutter の Widget になっています。以下のように使います。渡しているgameは次で説明するFlameGameです。 GameWidget(game: game) game以外の引数は API リファレンスに載っています。overlayBuilderMapはよく使うと思います。 FlameGame FlameGameがゲームの実態です。これを継承してゲームを作っていきます。今回は何もしないのでただ継承するだけです。 API リファレンスはこちらです。動かす先程作ったHelloGameをGameWidgetに渡して動かします。 $ flutter run これで動きました。右の Live Demo エリアに表示されています。現状は真っ黒なのでわかりづらいですが、では四角形を描画するのでもう少し Live Demo 感があります。

ライフサイクル lifecycle

ライフサイクルメソッド FlameGameが Flutter の Widget ツリーに追加されると下図のようなライフサイクルを辿ります。 onLoad以外は複数回呼ばれることがあります。 onLoad["onLoad(1回のみ)"] onLoad --> onMount onMount --> Update Update --> Render Render --> Update Update --> onRemove `} /> 本サイトで頻繁に使うのは以下の 2 つです。 onLoad: 初回読み込み時に呼ばれる Update: フレームごとに呼ばれる右のライブデモを見ると、Update・Renderはずっと呼び出されていることがわかると思います。また、ブラウザのウィンドウサイズを変えると onGameResizeも 2 回以上呼ばれます。今回はゲームをツリーから削除しないのでonRemoveは呼ばれず、onMount・onLoadは 1 回ずつ呼ばれます。

RectangleComponent ゲーム内の要素はComponentを継承したクラスで表現されます。四角形を描画するにはRectangleComponentを使います。（Componentの子のPositionComponentの子です） PositionComponentは多くの要素のベースになるもので、画面上に描画するのに必要な属性を持っています。 | 属性 | 概要 | | -------- | ---------------------------------------------------- | | position | 座標 | | size | 大きさ | | scale | スケール | | angle | 回転角度 | | anchor | 描画の基準位置。デフォルトは左上（Anchor.topLeft） | RectangleComponentはこれらに加えてpaint（デフォルトは白）を指定することで、任意の四角形を描画することができます。描画する RectangleComponentを使ってみます。 FlameGameを継承したクラスのonLoadでaddしています。これでグレーの四角形が 45 度回転した状態で画面中央に描画されます。

LineComponent はない直線を描画するコンポーネントはないのでで代用します。これで十字線が表示されます。

デバッグ表示 debug

debugMode FlameGameクラスのdebugModeをtrueにすると、各コンポーネントの位置やサイズが描画されるようになります。 FpsTextComponent FpsTextComponentを使うと現在の FPS を表示することができます。動かす debugModeとFpsTextComponentの使用例です。これで左上に FPS が、各コンポーネントにデバッグ情報が表示されます。（四角形の表示方法はを参照）

CircleComponent 円を表示するにはCircleComponentを使います。使い方はとほぼ同じで、sizeの代わりにradiusを指定します。描画する CircleComponentを使ってみます。これでグレーの円が画面中央に描画されます。

position を変更する PositionComponentのpositionを操作することで、コンポーネントを移動させることができます。（アクションを使う方法もあります）動かす CircleComponent（参照）を動かしてみます。今回は自動でずっと動くサンプルなので、毎フレーム呼び出される update メソッドを使います。 updateメソッドは FlameGameやその他のコンポーネントの親であるComponentで定義されています。今回はCircleComponentを継承せずに使っているので、MoveGameクラスのupdateを使っています。これで円が左右に往復し続けるようになりました。

ジョイスティック joystick

JoystickComponent JoystickComponentを使うと画面上にバーチャルスティックを簡単に表示することができます。 knobでスティック部分、backgroundで背景を指定します。位置はmarginかpositionで調整します。四角形を操作するそれではやってみます。まずはメンバーを用意します。次に四角形を初期化します。ジョイスティックの初期化をすれば準備は終わりです。後はupdateで値を読み取り、Rect の位置に反映させます。ここではdeltaで得られる Vector2 をそのまま利用しています。 deltaは傾きに応じた値（0〜± ジョイスティックのサイズ）が返ってくるので、これを速度として使うと傾きによって動く速さが変わります。それを避けたい場合はdeltaの値を見て処理するか、代わりにdirectionで取れる向きを使うなどの対応が必要になります。これでコンポーネントを動かせるようになりました。

テキスト text

TextComponent 文字列を表示するにはTextComponentを使います。 textRendererを設定することで、サイズや色やフォントを変更できます。描画するそれではやってみます。まずはフォントを用意します。（ここは Flame 特有のものではなく普通の Flutter の手順です）今回は Google Fonts からダウンロードしたDotGothic16を使います。このフォントは日本語対応のドット絵風フォントで、ゲーム開発に重宝します。ダウンロードしたフォントは assets/fonts/DotGothic16-Regular.ttf に保存します。 pubspec.yamlにフォントを指定します。準備したフォントを指定して TextComponent を作ります。これでテキストが表示されるようになりました。

テキストボタン button

ButtonComponent テキストボタンを表示するにはButtonComponentを使います。 button（普通の表示）とbuttonDown（クリック中の表示）に任意のPositionComponentを指定できますが、ここではを指定することで、テキストボタンにします。クリック時の処理はonPressedに指定します。動かすメンバーを用意します。ボタンが押された数を表示するために _textと_countを使います。 _textを初期化してaddします。 updateで_countを_textに反映します。主役のボタンです。クリック中は色を変えて、クリック時の処理ではカウントアップしています。これでボタンが動くようになりました。

オーバーレイ overlay

オーバーレイ Flame は Flutter の通常画面を表示するための、オーバーレイという仕組みがあります。これを使うことで、例えば設定画面やモーダルなどを普通の Flutter で構築することができます。この機能は僕が Flame の中で気に入っているものの 1 つです。やはりこの時代 UI はリアクティブに書きたいので、素の Flutter に任せちゃおうというのはとても良いと思います。 overlayBuilderMap オーバーレイで表示する UI は Flutter の Widget として作れば OK です。その Widget をGameWidgetのoverlayBuilderMapに登録します。動かすオーバーレイとして表示する UI を用意します。今回は半透明の背景の中央にモーダルダイアログが表示されるものにします。 OK をクリックしたらgame.overlays.removeを使ってオーバーレイを非表示にしています。次に GameWidget にオーバーレイを登録しておく必要があります。今回はmodalという名前で、先程作ったModalを設定しています。 modalは他の箇所でも使うので定数にすべきでしょうが、この例では文字列で済ませています。最後にボタンを押すとオーバーレイを表示するようにします。なお、このボタンはbuttonDownを省略しているのでクリック中も表示が変わりません。オーバーレイの表示overlays.addを使います。これで素の Flutter 製の UI が表示されるようになりました。

スプライト sprite

SpriteComponent これまでは単色の四角や円のみを使ってきましたが、そろそろ画像を表示したくなってきました。そんなときに使うのがスプライトです。 SpriteComponentもPositionComponentの子なので基本的な使い方はこれまでと変わりません。 spriteにSprite.loadした結果を指定することで、画像を表示することができます。描画する事前準備としてassets/images/にasteroid.pngという画像を入れておきます。画像を使えるようにpubspec.yamlに設定します。これで準備は OK なので、SpriteComponentを使います。 Sprite.loadで先程の画像を読み込み、SpriteComponentのspriteに指定しています。これで画面中央に画像が描画されます。

アニメーション animation

SpriteAnimationComponent 以前、では静止画を表示しましたが、 SpriteAnimationComponentを使えばアニメーションさせることもできます。他にも方法はありますが、images.loadで読み込んだ横並びの画像から、 SpriteAnimationData.sequencedでサイズ・数・秒することで、1 枚の画像からアニメーションを作れます。なおを使ってもアニメーションを作れます。動かす事前準備としてassets/images/にexplosion.pngという横並びの画像を入れておきます。 pubspec.yamlはで設定済みなので修正不要です。それではSpriteAnimationComponentを使います。 images.loadで先程の画像を読み込み、SpriteAnimationData.sequencedで設定を渡します。これで画面中央にアニメーションが描画されます。

パララックス parallax

ParallaxComponent ゲームの種類によっては背景を自動的にスクロールさせたいことがあります。 Flame にはそのための機能が組み込まれています。その名前の通り Flappy Bird のようにパララックスで奥行き効果を出すこともできます。（設定によってはただの自動スクロール背景にもできます）使い方は簡単で画像を用意してloadParallaxComponentで読み込むだけです。動かす事前準備としてassets/images/にbg-back.png・bg-stars.pngという画像を入れておきます。あとは loadParallaxComponentで読み込むだけです。 baseVelocityでスクロール速度を、velocityMultiplierDeltaで画像ごとの速度差を設定します。（velocityMultiplierDeltaを設定しなければパララックス効果がなくなります）これでパララックス効果を持った自動スクロール背景が表示されます。

TapCallbacks TapCallbacksミックスインを使うとタップを検出できます。例えばonTapDownにはタップしたときの処理を書くことができます。なお、よりジェスチャー検出機能の一部として TapDetector というミックスインもありますが、以下の記述があるので、基本的には TapCallbacks を使う方が良いようです。 This document describes the new tap events API. The old (legacy) approach, which is still supported, is described in Gesture Input. TapCallbacksはcontainsLocalPointメソッドを実装しているコンポーネントでしか使えないので、それが満たせない場合などにTapDetectorを使うことになるでしょう。 TapDetetorについては以下を参照してください。 event.localPositionをinfo.eventPosition.gameに変更すればTapCallbacksと同じように使えます。動かす Game クラスにwith TapCallbacksを追加し、onTapDownメソッドでタップ時の処理を書きます。今回はタップした場所にを表示しています。このようにしてタップに反応するゲームを作ることができます。

パーティクル particle

ParticleSystemComponent ParticleSystemComponentを使うといろいろなパーティクルを表示することができます。画像を使うSpriteParticleや円を使うCircleParticleなどがあります。公式サンプルを見るとどんな種類があるかわかると思います。動かしてみる赤い四角をランダムに散らすパーティクルを表示してみます。事前準備としてassets/images/にparticle.pngという画像を入れておきます。この画像をSpriteParticleに設定してParticleSystemComponentを作成します。ここでは 32 個のランダムな速度のパーティクルを生成しています。これでタップした箇所にパーティクルが表示されます。

物理演算 physics

forge2d 物理エンジン Box2D を Dart に移植したforge2dによって物理演算を行うことができます。 Flame 向けにはflame_forge2dが用意されています。 FlameGameの代わりにForge2dGameを使うことで forge2d の機能を簡単に使うことができます。動かしてみる左右と下に壁を作り、タップした場所にボールを生成するサンプルを作ってみます。まずはflame_forge2dを導入します。壁クラスを用意します。BodyComponentを継承して作ります。ボールクラスを用意します。回転がわかりやすいように線を引いています。 Forge2dGameを継承したゲームクラスで、壁やボールを生成します。これで物理演算が動くようになりました。

衝突判定 collision

HasCollisionDetection HasCollisionDetectionミックスインを使うことで物理演算を使わない当たり判定をすることができます。各コンポーネントに Hitbox を設定すると、衝突時にonCollisionが呼ばれるようになります。動かしてみる地面を作り、タップした場所にボールを生成するサンプルを作ってみます。ボールは落下しますが、地面か他のボールに触れると停止します。まずは地面を作ります。 RectangleHitboxを使って、四角形の Hitbox を作ります。次にボールクラスを用意します。 CircleHitboxを使って、円形の Hitbox を作ります。またupdateでは落下させるためにyを増やしています。 onCollisionで落下を止めます。あとはゲームクラスで、地面やボールを生成します。これで当たり判定が動くようになりました。

ポリゴン polygon

PolygonComponent 多角形にはPolygonComponentを使います。 relativeファクトリーとparentSizeを使うことでサイズを可変にできて便利です。描画する PolygonComponent.relativeを使って-1〜1 の範囲でポリゴンを指定し、 parentSize でサイズを決めています。これで平行四辺形が画面中央に表示されます。

サウンド sound

flame_audio 音を鳴らすにはflame_audioを使います。これはaudioplayersをラップしたものです。音を鳴らす flame_audioを導入します。 assets/audioにhit.wavを入れ、pubspec.yamlでも指定します。ボタンを押したときにFlameAudio.playで音を鳴らします。これでサウンドが再生されます。

エフェクト effect

MoveByEffect エフェクトを使うとコンポーネントに様々な効果を与えることができます。ここでは指定距離を動かす MoveByEffectを紹介します。（指定地点へ動かしたい場合は MoveToEffectを使います。）他のエフェクトは公式ドキュメントに載っています。動かし方はそんなに変わらないので MoveByEffectの動かし方がわかれば後は同じ要領で動かせます。動かす画面をタップしたら_rectに対してMoveByEffectを適用しています。これで四角形がランダムに 0.3 秒かけて動くエフェクトが実装できました。

テキストボックス text_box

TextBoxComponent TextBoxComponentを使うと指定の領域に合わせてテキストを表示することができます。また timePerChar というテキストを徐々に表示するオプションもあります。描画する onLoadでテキストボックスを追加し、renderではテキストボックスの領域に合わせてボーダーを描画しています。これで枠内に 0.08 秒ごとにテキストが表示されます。

カスタムペインター custom_painter

CustomPainterComponent CustomPainterComponentを使うとペインターで自由に描画するコンポーネントを作成できます。描画するまずはカスタムペインターを定義します。コンポーネントのpainterオプションとして指定します。今回はプレースホルダー画像のような斜め線入りの四角形を描画しています。

スクリーンヒットボックス screen_hitbox

ScreenHitbox ゲームにScreenHitboxを追加すると、画面の周囲に当たり判定を追加できます。たとえば壁に当たったら消すなどの処理を実装するのに便利です。動かすゲームのonLoadでScreenHitboxを設定します。タップしたらランダムに動くボールを追加します。 BallではonCollisionでScreenHitboxに当たったら止まって色を変えます。このように画面の周囲に当たり判定を追加できます。

ルーター router

RouterComponent RouterComponentを使うと、複数の画面を切り替えることができます。 MaterialAppのinitialRouteとroutesと同じような使い方です。ちなみに、日本ではルーターと発音されがちなrouterですが、ラウターの方が正しい発音に近いようですね。動かすまずは遷移する先を 2 つ作ります。これはComponentを継承して作れば OK です。画面遷移は gameRef.router.pushNamed、戻るのはgameRef.router.popを使います。そしてその 2 つをRouterComponentに登録します。これでFirstRouteとSecondRouteを行き来できるようになりました。

プライオリティ priority

priority Componentのpriorityを設定することで、描画順を制御できます。デフォルトは 0 で、値が大きいほど前面になります。CSS のz-indexと同じような使い方です。描画するまずは描画するコンポーネントを作ります。 TapCallbacksを指定して、onTapDownでpriorityを変更しています。またHasGameRefによってgameを参照できています。「全てのRectが持つpriorityの最大値」+1 を指定することで、最前面に描画されるようになります。そして、このRectを色と位置を変えて追加します。 1.7 以前で使われていたTappable、HasTappablesは非推奨になったので、TapCallbacksを使っています。これで描画順が変わることが確認できます。

キーボードイベント keyboard_events

KeyboardEvents KeyboardEventsミックスインを使うとキーボード入力を処理できます。動かすまずはキーボードで動かす四角形を準備します。 updateでvx/vyを加算することで、毎フレーム移動します。次にKeyboardEventsミックスインを使ってキーボード入力を処理します。 onKeyEventの中で、キーが離されたらvx/vyを 0 に、矢印キーが入力されていたらvx/vyを ±1 にしています。これでキーボード入力を処理できるようになりました。

キーボードリスナー keyboard_listener

KeyboardListenerComponent 以前ではKeybaordEvents mixin を使ってキーボード入力を自分で処理しましたが、単純にキーボード入力を処理するだけならKeyboardListenerComponentを使うと簡単にできます。動かすゲームクラスに HasKeyboardHandlerComponents mixin を指定します。次にKeyboardListenerComponentを使ってキーボード入力を処理します。行数は多いですが、KeyDown/KeyUp 時の処理を単純に指定するだけなので簡単です。これでと同じようにキーボード入力を処理できるようになりました。

カメラ camera

CameraComponent CameraComponentのfollowを使うと、よくあるキャラクターに追従する画面スクロールを実現できます。 ※ 1.7 以前で使われていたCameraは非推奨になりました。動かすまずはマップとなるコンポーネントを作ります。 1500x1500 のサイズで、今いる場所がわかりやすいように適当に背景を描画します。次にカメラを設定します。 1.9 から world、cameraがデフォルトで用意されるようになったので、自前で作る必要がなくなりました。 mapと_rectをworldにaddして、followでcameratが_rectを追いかけるようにします。なお、_rectはの例で使ったものと同じで、矢印キーで動きます。これで、キャラクターに合わせて画面が動きます。

スプライトシート sprite_sheet

SpriteSheet SpriteSheetを使うと、スプライトシート画像を読み込むことができます。読み込んだ後は、行や時間を指定してアニメーションやスプライトを作れます。描画する事前準備としてassets/images/にpower-up.pngという画像を入れておきます。あとは、この画像を読み込みSpriteSheetを作成。 SpriteSheetのcreateAnimationで作成したアニメーションをSpriteAnimationComponentに指定すれば OK です。 forで 1 行目と 2 行目をそれぞれ表示しています。これでと同様のアニメーションが作成できました。

GlowEffect 以前も使ったの 1 つであるGlowEffectを使うと、コンポーネントを発光させることができます。なお、このエフェクトは以下の注意書きがあり、今後 API が変更される可能性があるようです。ここではバージョン1.14.0で動作することを確認しています。 This effect is currently experimental, and its API may change in the future. 描画する CircleComponentにGlowEffectを追加しています。 infiniteを設定することでエフェクトを繰り返します。また、reverseDurationで逆再生する際の秒数を設定しています。これで発光表現ができました。

flipHorizontally flipHorizontallyを使うと、コンポーネントを反転させることができます。右向きしかない素材を左向きにしたい場合などに便利です。上下反転させるfilpVerticallyもあります。動かす player1という画像を用意します。あとはこれをスプライトとして表示し、タップのたびにflipHorizontallyを呼び出します。これでスプライトを反転できました。

バリュールート value_route

ValueRoute 以前のでは、単純な画面遷移をしましたが、 ValueRouteを使うと、表示した Route から戻り値を受け取ることができます。ダイアログなどに便利です。動かす ValueRouteを継承したダイアログを作ります。選択したintを返す単純ものです。値は completeWith で返します。あとは pushAndWait で表示して結果を受け取るだけです。これで数字を選択するダイアログができました。

drawArc 以前使ったでdrawArcを使えば円弧も描画できます。これは Flame ではなく Flutter（dart:ui）の機能ですが。サンプルゲームの color_wheel でも活用しています。描画する基本はと同じで、 paintの中でdrawArcを使います。第 3 引数はsweepAngleで描画する角度（終了角度ではありません）, 第 4 引数のuseCenterはtrueにするとパスが閉じて扇形になります。これで円弧が描画できました。

スプライトウィジェット sprite_widget

SpriteWidget FlameGame の外で Flame のスプライトを使いたいことがあります。例えば UI を普通の Flutter で作っていて、その中でキャラを表示したい場合などです。 SpriteWidgetを使えば、スプライトを Widget として配置できます。ちなみに、Flutter 製のゲームフレームワークの 1 つ SpriteWidget とは関係ありません。これも Flame とは関係ない話ですが、Flame を使ってないアプリでもスプライト画像から Wiget を作りたくなることがあるので、そのためのSpriteというパッケージを開発して公開しています。スプライトを表示するだけの軽量ライブラリです。動かす今回は FlameGame は使わず普通の Widget です。静止画像の場合はこのように書きます。アニメーションの場合はこうです。 SizedBoxで大きさを指定している以外は、どちらもやと同様の使い方です。これで Flutter の UI の中に Flame のスプライトを埋め込むことができました。

スケールモード scale_mode

スケールモードはないゲーム開発フレームワークには「固定サイズでゲームを作っておき、画面サイズに合わせていい感じにリサイズしてくれる」機能があります。例えばSpriteKit の scaleModeやPhaser3 の ScaleManagerを使えば、簡単に実現できます。残念ながら Flame には現状この機能がないようで、Issue 上でのやりとりを見る限り、当面実装されない気配です。この機能がないと複数画面サイズの対応が大変になるので、 PositionComponentのscaleとFlameGameのonGameResizeを使って擬似的に実装してみます。動かすまずはゲーム本体となるPositionComponentを固定サイズで用意します。今回はわかりやすく枠を描画するためRectangleComponentを使います。 onGameResizeではゲームサイズ（=画面サイズ）に合わせてscaleを変更します。リサイズ時の挙動を変えたい場合はここの動作を変えれば OK です。例えば画面一杯に拡大したい場合などもあるでしょう。これで準備は整いました。あとはコンポーネントをゲームではなく_contentにaddします。位置の計算などにもgame.sizeではなく_content.sizeを使います。これで画面サイズに応じてコンテンツが拡大・縮小されるようになりました。

ポーズ pause

pauseEngine FlameGame に pauseEngineというメソッドがあります。これを使うとゲームの動きを止めることができます。復帰させる時は resumeEngine を呼びます。 stopTime 以前ので使ったRouteにstopTimeというメソッドがあります。こちらは今表示しているRouteの動きを止めることができます。復帰させる時はresumeTimeを呼びます。こちらはゲーム全体ではなく一部のRouteを止めるので、「別の半透明なRouteを表示させて、そこでアニメーションを表示する」などの使い方ができます。以下のドキュメントに半透明なアニメーションと共にポーズさせる例が載っています。動かす単純に stopEngine、stopTimeを呼び出す例です。どちらのボタンをクリックしてもカウントが止まることがわかると思います。これでポーズの実装ができました。

タイムスケール time_scale

timeScale HasTimeScale mixin に timeScaleというプロパティがあります。これを使うとゲームの速度を変更することができます。大きくすれば速く、小さくすれば遅くなります。動かすアニメーションはと同じ爆発の例を使います。 HasTimeScale mixin を使用するため、withで指定します。あとはボタンをクリックした時にtimeScaleを変更します。これで、ゲーム速度の変更ができました。

波紋公式ドキュメントのタップにあった波紋っぽいサンプルが良かったので簡略化したものを作りました。ソシャゲでタップ位置を示すのに使われているのを見かけます。 CircleComponent（参照）を継承して、updateでradiusを変更すれば簡単に作れます。動かす CircleComponentを継承したRippleを作ります。あとはタップした位置にこれをaddするだけです。これで、波紋っぽい表現ができました。

アニメーションティッカー animation_ticker

SpriteAnimationTicker 以前で、SpriteAnimationComponentを使ってアニメーションを表示しました。 SpriteAnimationTicker を使えば、アニメーションの終了を待つなど状況に応じて処理ができます。 SpriteAnimationTickerはSpriteAnimationComponentのanimationTickerプロパティで取得できます。動かすタップした位置にアニメーションを表示し、アニメーションが終わったら四角形を表示するようにします。 animationTickerのcompletedをawaitを待つことで実現できます。これでアニメーションの状況に応じた処理ができます。

ローディングビルダー loading

LoadingBuilder GameWidgetのloadingBuilderプロパティに Widget を指定することで、ゲームがローディングされるまでの表示を変更することができます。表示する GameWidgetのloadingBuilderプロパティでCircularProgressIndicatorを返します。ローディング中であることがわかりやすいようにGameのonLoadで 10 秒待った後、Loadedを表示します。これでローディング画面が表示できます。

エラービルダー error

ErrorBuilder GameWidgetのerrorBuilderプロパティに Widget を指定することで、ゲームがエラーになった時の表示を変更することができます。表示する GameWidgetのerrorBuilderプロパティでTextを返します。待ち時間がわかりやすいようにと同じ設定もしています。 10 秒待った後、Errorをthrowします。この方法でエラー画面が表示できます。

バックグラウンドビルダー background

BackgroundBuilder GameWidgetのbackgroundBuilderプロパティに Widget を指定することで、背景に表示される内容を指定することができます。ここで指定した内容は Game.backgroundColor より前面に、ゲーム内の要素よりは後ろに表示されます。表示する GameWidgetのbackgroundBuilderプロパティでTextを返します。ゲームでは背景色をグレーにし、中央にを表示します。グレー背景 → Text → 四角形の順で表示されているのがわかると思います。この方法で背景画面を変更できます。

パスファインディング pathfinding

PathFinding.dart PathFinding.dartパッケージを使うとマップないの 2 点間の道順を計算することができます。これは Flame の機能ではありませんが、ゲームでよく使われると思うので紹介します。（タップした場所まで障害物を避けつつ移動する場合など） Gridでマップを準備して、AStarFinderかJumpPointFinderでパスを計算します。動かすまずpubspec.yamlにpathfindingパッケージを追加します。あとはコードを書いていきます。横 10 マス、縦 10 マスのマップ（_cells）を作ります。初期値は全部道である 0 で埋めています。ランダムで壁を作るために 1 にします。また壁以外の点からランダムでスタート、ゴールを選びます。次が pathfinding の本番です。用意したマップ、スタート、ゴールからパスを見つけます。最後に render で画面に表示します。道は白、壁はグレー、スタートは緑、ゴールは赤、パスを青で描画します。このようにしてパスファインディングを実装できます。

タイマー timer

TimerComponent TimerComponent を使うと、一定時間ごとに処理を繰り返したり、一定時間後に処理を実行したりできます。 Flutter 標準機能との違い Timer.periodicやFuture.delayedと同じ機能に見えますが、違いがあります。内部実装を見ると、Flame のに合わせて処理されるようになっているので、の際に止まるなどのメリットがあります。基本的にはこちらを使う方がよいでしょう。動かす TimerComponentを使ってみます。秒数をperiodに、処理をonTickにしています。まずは繰り返しです。ここでは 1 秒ごとにカウントアップしています。繰り返すにはrepeat: trueを指定します。次に一定時間後に一度だけ処理します。ここではボタンをランダムに動かして、0.5 秒後に停止しています。この場合はrepeat: trueは不要です。処理し終わったらもう不要になるので removeOnFinish: trueを指定する方がよいでしょう。このようにしてタイマーが使えます。

HSVカラー hsv

HSVColor HSVColor を使うと、HSV 色空間で色を指定できます。これは Flame ではなく Flutter の機能ですが、カジュアルゲームを作る時にランダムな色を使うことはよくあると思います。その際に RGB ではなく HSV で指定すると便利なことがあるので使い方を紹介します。表示する HSVColorを使ってみます。 _h、_s、_vの 3 つの変数から HSVColorを作り、toColor で RectangleComponent の色を指定しています。変数の値はボタンの変更できるようになっています。このようにして HSV カラーが使えます。