こんにちは。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でレトロゲームを作ってみた①%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F8o7gFZeo9FE%3Fsi%3Db84Ol8NSf6R52zY2%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E動画：FlutterFlowでレトロゲームを作ってみた②%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FnvCW2xMLsXc%3Fsi%3DyFu8Wtj9TdHTyJy6%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EFlutterFlowでレトロゲーム開発：まとめ今回はマリオ的なレトロゲームのシンプルなやつを少し作ってみました。面白いですね。X・Y座標の使い方やperiodic actionなど勉強になりました。FlutterFlowでできることはどんどん増えているので、これからもキャッチアップ・発信を続けていきたいなと思いいます。アプリ・Webサービスの開発の無料相談はこちらFlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。