お久しぶりです。 pregum_foxです。
今回は、最近1.0.0がリリースされて開発が活発になっているFlameを使って複数のプラットフォームで動くブロック崩しを作ってみました。
実際の画面はこんな感じです。
赤枠がついているのはdebugModeで配置しているためです。
目次です。
Flameとは？
Flutterを知っている方でもFlameは知らない方がいるかと思いますので、簡単に説明します。
Flameとは、一言で言うとFlutterで使用できる2Dゲーム向けライブラリです
2Dゲームで必要な機能は一通り揃っていてFlutterでゲームを作るならおすすめのライブラリです。
今回作ったブロック崩しでは
おそらく作り込んでいく場合は追加で
- タイルマップの読み込み
- スプライト、アニメーションの表示
- 音楽assetsの再生
- カメラの移動
などが必要になってくると思います。
その辺りの処理もライブラリが用意されていますので、自前で作りこまなくてもすむのはありがたいですね。
作ってみた
実際に作ったリポジトリはこちらです。
ここでは、画面を２つ作っていて
- 素のFlutterで作った画面
- Flameを使用して作った画面
の順に遷移するようになっています。
Flameも画面に配置する際に使用するGameWidgetクラスはStatefulWidgetを継承しているので、FlutterのWidgetと同じように配置ができます。
GameWidget class - game library - Dart API
ゲームのループ
- Flutterの更新処理はsetStateメソッドで更新したメンバフィールドを更新していましたが、Flameの場合はsetStateでは更新を行わず、onLoad, updateメソッドで状態を更新する処理を実装します。
flameのライフサイクルは下記ページが参考になるかと思います。
下記の通り、onLoadで1度行いたい初期化処理などを行い、オブジェクトの移動などはupdate処理に記載するようになっています。
コンポーネント/オブジェクトステム(FCS)
FlameではComponentクラスを継承して配置を行っていきます。
クラス構成は下記urlに記載されている図のようになっています。
キャラクターを配置する場合は、画像を使用する場合はSpriteComponent, 今回のサンプルのように四角形などのシンプルな画像を表示する場合は、ShapeComponentやPositionComponentを使用する形になります。
テキストを表示したい場合は、TextComponentを使用します。
ボタンを配置する場合は、ButtonComponentを使用するのが良いかと思います。
もし自前のComponentでボタンのようなタップ時の処理を実装する場合は、Tappable mixinをタップしたいComponentに適用すると、タップ時に、onTapDownメソッドが呼ばれるようになるので、そこでタップされた時の処理を記載します。
上記のようにタップ時や、衝突時に処理を行いたい場合はmixinを加えることでタップ時、衝突時に特定のメソッドが呼ばれるようになります。
キー入力
キー入力は、下記のKeyboardのonKeyEventを使用してキー入力時に処理を行いました。
今回は←キーを入力時、自機を左に移動、→キーを入力時、自機を右に移動する処理を行いました。
障害物検知
ブロック崩して必要なボールとブロックのぶつかった判定は、Hitboxをオブジェクトに追加して判定するようになっています。
書き方はUnityに似た感じで、衝突時に特定のeventが発生するためそこに、行いたい処理を実装する形になっています。
さまざまな形でhitboxを追加することができ、今回はブロックにはRectangleHitbox, ボールにはCircleHitboxを適用しました。
使ってみた感想
Flutterでもゲームが作れるのは個人的には嬉しく何か１つ自作のゲームでも作ってみたくなりました。
ただ、やはりコードで全て実装する形になるのでボールの配置やブロックの位置を結構手探りで位置調整などを行っていたのでもう少し良い実装方法を知りたいと思いました。
今後欲しい機能としては、UnityのようにGUI上で編集できるツール・ソフトが出てきてくれるとぐっと敷居が下がってFlutterで2Dゲームを作る方が増えるかと思いました。
あまり時間がなかったので、詳しいコードは記載できませんでしたが、今回のサンプルとは別にFlameで作っているものがありますので、そっちのコードを例にもう少し深掘りして説明する記事も上げたいと思います。
とりあえずどんなことができるか知りたい場合は、exampleページがありますのでそちらから色々なサンプルを試してみるのが良いかと思います。
