こんにちは。FlutterFlow公式のYoutubeで昔のマリオのようなレトロゲームを作ってみたという動画がありましたね。Endless Runner Games with FlutterFlow: Players & Obstacles Movement

これが面白そうだったので、試しに真似して作ってみました。

こんな感じです。

まずはシンプルに敵が向かってきて、主人公はジャンプして避ける、それだけのアプリになります。簡単ですね！今はまだ敵にあたっても素通りしちゃいますが（笑）、その辺も問題なく実装できそうです。


ノーコードで、一切コードも書かずにこんなのゲームができるのってすごいですよね。

では概要を説明したいと思います。

細かい作り方は下の方でYoutube動画のリンクがあるのでそちらも参考にしてください。

UI作成

まずはUIを作成します。今回はデータベースの接続も要らないので簡単です。

以下のようにstackを配置し、その上にプレイヤー画像と敵の画像（この場合は炎）のを配置します。あとは左上にスタートボタンを置いたらUIはほぼ完了です。

AlignmentのX座標とY座標

ここが一番のポイントになります。以下画像のAlignmentのところを見てください。
プレイヤーのX、Y座標は（-1, 1）になっています。（-1, 1）が左したなんですね。

炎の位置は（1, 1）になります。画面の左上の位置は（-1, -1）、右上は（1, -1）です。
画面中央は、（0, 0）です。

これを前提に作っていきます。

Local Page Stateにプレイヤーと敵のX、Y座標を保持

以下のように座標を保持します。

  • fireXAlignmentに炎のX座標を保持

  • playerYAlignmentにプレイヤーのY座標を保持

  • playerInitialYにプレイヤーの初期Y座標（1）を保持

  • fireInitialXに炎の初期X座標（1）を保持

  • jumpIsAscendingにジャンプした時に上昇中か否かを保持

  • jumoPeakHeightにジャンプした時の最大の高さを保持

こんな感じです。

スタートボタンの実装

次にスタートボタンを押した時の挙動です。以下のようにStart Periodic Actionを設定し、インターバル時間毎に繰り返し処理を行うようにします。

次に、以下のように炎のX座標をデクリメントしていき（つまり少しずつ左に移動するようにする）、敵が迫ってくるような挙動を作ります。

その後にはある一定の位置まで来たらX座標を元に戻してまたループして襲ってくるような動きにしました。

プレイヤーのジャンプアクションを定義

最後はジャンプした時の挙動です。Stackのクリックアクションに書いていきます。

最初にjumpIsAscendingをTrue（上に上がってる状態）にセットします。

そこからPeriodic Actionをスタートします。

あとは、ジャンプが上昇中の場合はプレイヤーのY座標を少しずつ減らして（つまりプレイヤーは上に移動する）、高さがjumoPeakHeightを超えた時にはjumpIsAscendingをFalseにします。（左側の赤枠のロジック）

そのあとは右側のロジックに入り、今度はプレイヤーのY座標を増やして（プレイヤーは下に移動する）あげて、地面の位置より下になったらperiodic actionを止める、、、という感じです。

これだけで完了です！簡単ですね。

Youtube動画：FlutterFlowでレトロゲーム

細かい実装方法はこちらのYoutube動画でも解説しているので興味のある方はこちらもどうぞ。

動画：FlutterFlowでレトロゲームを作ってみた①

動画：FlutterFlowでレトロゲームを作ってみた②

FlutterFlowでレトロゲーム開発：まとめ

今回はマリオ的なレトロゲームのシンプルなやつを少し作ってみました。
面白いですね。

X・Y座標の使い方やperiodic actionなど勉強になりました。

FlutterFlowでできることはどんどん増えているので、これからもキャッチアップ・発信を続けていきたいなと思いいます。

アプリ・Webサービスの開発の無料相談はこちら

FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。