Flutter と Back4app を使用したマルチプラットフォーム ゲームの構築

はじめに flutterは、googleによる多用途のオープンソースフレームワークで、開発者が単一のコードベースからモバイル、ウェブ、デスクトップ、埋め込みデバイス向けのネイティブコンパイルアプリケーションを構築できるようにします。flutterは主に従来のアプリ開発で知られていますが、そのパフォーマンス、広範なパッケージエコシステム、ホットリロード機能により、ゲーム開発にもますます使用されています。 このガイドでは、flutterとflameを使用してマルチプラットフォームのフラッピーバードスタイルのゲームを開発する方法を説明します。flameはflutterでの2dゲーム用に設計されたゲームエンジンです。さらに、ユーザーのスコアを保存し、リーダーボードを表示するために、ゲームをバックエンドサービス（baas）プラットフォームであるback4appに接続します。 このガイドの終わりまでには、モバイルおよびウェブプラットフォームで動作するゲームの作業バージョンが完成し、back4appからハイスコアを保存および取得できるようになります。 前提条件 このチュートリアルを完了するには、次のものが必要です back4appアカウント。 back4app com https //www back4app com で無料アカウントにサインアップしてください。 ローカルマシンにflutter開発環境が設定されていること。まだ設定していない場合は、 flutterインストールガイド https //flutter dev/docs/get started/install を参照してください。 dart、flutterウィジェット、およびゲーム開発の基本的な知識。 ステップ1 – back4appバックエンドの設定 back4appプロジェクトを作成する あなたの back4appアカウント https //dashboard back4app com/ にログインし、新しいプロジェクトを作成します。 parseクラスを作成する このチュートリアルでは、ゲーム関連データを管理するためのシンプルなバックエンドを設定します。あなたのback4appプロジェクトで、次の2つのparseクラスを作成します player と gamescore player プレイヤーの情報（ユーザー名、レベル、実績など）を保存します。 gamescore ゲームのスコアとランキングを保存します。 back4appの認証情報を取得する プロジェクト設定に移動して、flutterゲームをback4appに接続するために必要なアプリケーションidとクライアントキーを取得します。 ステップ2 – flutterプロジェクトの設定 新しいflutterプロジェクトを作成する ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します 依存関係を追加する pubspec yaml を開き、次の依存関係を追加します アプリでparseを初期化する lib/main dart , parse sdkをインポートし、 main 関数内で初期化します import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flame/flame dart'; import 'package\ flame/game dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(mygameapp()); } class mygameapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home gamescreen(), ); } } 「 'your back4app app id' 」と「 'your back4app client key' 」を実際のback4appの資格情報に置き換えてください。 ステップ 3 – flameを使用したゲームの設定 ゲームクラスを作成する flameはflutterの上に構築されたオープンソースのゲームエンジンです。2dゲームを構築するためのツールとapiを提供します。flameを使用してシンプルなゲームクラスを作成します import 'package\ flame/game dart'; import 'package\ flame/components dart'; class mysimplegame extends flamegame { @override future\<void> onload() async { super onload(); add(playercomponent()); } } class playercomponent extends positioncomponent { @override future\<void> onload() async { // load player sprite or set up player visuals here size = vector2(50, 50); // set size of the player position = vector2(100, 100); // set initial position // optionally, add sprite or animations } @override void update(double dt) { // update player state here } @override void render(canvas canvas) { super render(canvas); // draw player visuals final paint = paint() color = colors blue; canvas drawrect(size torect(), paint); } } 2\ ゲーム画面を作成する gamescreen ウィジェットを更新してゲームを表示します class gamescreen extends statelesswidget { @override widget build(buildcontext context) { return scaffold( body mysimplegame() widget, ); } } 3\ ゲームを実行する flutter run を使用してアプリを実行し、シンプルなゲームを確認できます。プレイヤーを表す青い四角が表示されるはずです。 ステップ 4 – back4appを使用したゲームデータの管理 プレイヤーデータの保存 次に、プレイヤーがレベルアップしたり何かを達成したときに、プレイヤーデータをback4appに保存する関数を作成しましょう future\<void> saveplayerdata(string username, int level, list\<string> achievements) async { final player = parseobject('player') set('username', username) set('level', level) set('achievements', achievements); final response = await player save(); if (response success) { print('player data saved successfully'); } else { print('failed to save player data'); } } 2\ ハイスコアの取得 ゲームのハイスコアをback4appから取得してリーダーボードに表示することもできます future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } 3\ リーダーボードを表示 listview\ builder を使用して、flutterウィジェットで上位10スコアを表示します class leaderboardscreen extends statefulwidget { @override leaderboardscreenstate createstate() => leaderboardscreenstate(); } class leaderboardscreenstate extends state\<leaderboardscreen> { list\<parseobject> highscores = \[]; @override void initstate() { super initstate(); fetchhighscores() then((scores) { setstate(() { highscores = scores; }); }); } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('leaderboard')), body listview\ builder( itemcount highscores length, itembuilder (context, index) { final score = highscores\[index]; return listtile( title text(score get\<string>('playerid') ?? 'unknown player'), subtitle text('score ${score get\<int>('score')}'), ); }, ), ); } } ステップ5 – flameを使った高度な機能の追加 より複雑なゲームメカニクス、アニメーション、またはインタラクションを追加したい場合は、スプライト、物理、衝突検出などの追加コンポーネントを導入することでflameの使用を拡張できます。flameはfirebaseとの統合もサポートしており、マルチプレイヤー機能、アプリ内購入などが可能です。 結論 このチュートリアルでは、flutterとflameを使用してシンプルなマルチプラットフォームゲームを構築し、プレイヤープロフィールやハイスコアなどのゲームデータを管理するためにback4appを統合する方法を学びました。単一のコードベースから複数のプラットフォームにデプロイできるflutterの能力と、back4appの堅牢なバックエンドサービスを組み合わせることで、ゲームの開発とスケーリングに強力なスタックを提供します。 シンプルなカジュアルゲームを作成する場合でも、より複雑なインタラクティブな体験を作成する場合でも、flutterとback4appはゲームを効率的に構築、デプロイ、管理するためのツールを提供します。 詳細については、次を確認してください。 flutterのドキュメント https //flutter dev/docs と back4appのドキュメント https //www back4app com/docs 。コーディングを楽しんでください!