FlutterとBack4appを使用した持続可能なゲームの構築

はじめに このチュートリアルでは、 持続可能なゲーム を flutter と back4app を使用して構築する方法を説明します。このゲームは、ユーザーに環境に優しい行動を教育し、ポジティブな行動を取ることで報酬を与えます。ユーザーの進捗を追跡し、デジタルアイテムで報酬を与えるために、back4appをバックエンドサービスとして活用します。 ゲームコンセプト：エコウォリアー ゲームの名前は エコウォリアー , ユーザーがリサイクル、水の節約、エネルギー消費の削減などの小さな環境タスクを引き受けるゲームです。ユーザーはタスクを完了することでポイントとデジタル報酬を獲得します。私たちは以下に焦点を当てます タスクの記録と進捗の追跡 ユーザーは自分が行った環境に優しい行動を記録します。 報酬システム プレイヤーは貢献に対してポイントとバッジを獲得します。 バックエンド統合 すべてのユーザーデータと進捗は back4app に保存されます。 前提条件 flutter開発セットアップ flutterインストールガイド https //flutter dev/docs/get started/install back4appアカウント back4app https //www back4app com/ に無料アカウントを登録します。 flutterウィジェットの基本知識とバックエンドとの連携方法。 ステップ1 back4appをセットアップする 1 1 back4appプロジェクトを作成する にログインします back4app https //www back4app com/ そして、 ecowarriorgame という新しいバックエンドプロジェクトを作成します。 次のフィールドを持つ parse class を作成します ecoactions username (string) プレイヤーのユーザー名。 actiontype (string) アクションの種類（例 "リサイクル", "水の節約"）。 points (number) アクションに対して付与されるポイント。 timestamp (datetime) アクションが記録された時間。 1 2 back4appの認証情報を設定する back4appプロジェクトの設定に移動し、 application id と client key を取得します。これらはflutterでback4appを初期化するために使用されます。 ステップ 2 flutter プロジェクトの設定 2 1 新しい flutter プロジェクトを作成する flutter create eco warrior cd eco warrior 2 2 依存関係を追加する 「 pubspec yaml 」を開いて、以下の依存関係を追加します parse sdk と flutter dependencies flutter sdk flutter parse server sdk flutter latest version provider ^5 0 0 # state management 依存関係をインストールするには、「 flutter pub get 」を実行します。 2 3 flutter で parse sdk を初期化する 「 lib/main dart 」で、back4app の資格情報を追加して parse を初期化します import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter 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(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'ecowarrior game', theme themedata(primaryswatch colors green), home gamescreen(), ); } } 「 your back4app app id 」と「 your back4app client key 」を実際の back4app の資格情報に置き換えてください。 ステップ 3 ゲーム ui と機能 これから ecowarrior ゲームの ui を構築し、back4app と統合します。 3 1 ゲーム画面を作成する に lib/game screen dart , プレイヤーが環境タスクを記録し、スコアを表示できる基本的なゲームインターフェースを作成します。 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class gamescreen extends statefulwidget { @override gamescreenstate createstate() => gamescreenstate(); } class gamescreenstate extends state\<gamescreen> { string? selectedaction; int score = 0; final list\<string> actions = \['recycling', 'water conservation', 'energy saving']; future\<void> logaction() async { if ( selectedaction == null) { scaffoldmessenger of(context) showsnackbar(snackbar( content text('please select an action '), )); return; } // assign points for the action int points = 0; switch ( selectedaction) { case 'recycling' points = 10; break; case 'water conservation' points = 15; break; case 'energy saving' points = 20; break; } // save action to back4app final ecoaction = parseobject('ecoactions') set('username', 'player1') // example username set('actiontype', selectedaction) set('points', points) set('timestamp', datetime now()); final response = await ecoaction save(); if (response success) { setstate(() { score += points; }); scaffoldmessenger of(context) showsnackbar(snackbar( content text('action logged! you earned $points points '), )); } else { scaffoldmessenger of(context) showsnackbar(snackbar( content text('failed to log action '), )); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('ecowarrior'), ), body padding( padding const edgeinsets all(16 0), child column( crossaxisalignment crossaxisalignment stretch, children \[ text( 'select an eco friendly action ', style textstyle(fontsize 18), ), dropdownbutton\<string>( value selectedaction, hint text('choose action'), items actions map((string action) { return dropdownmenuitem\<string>( value action, child text(action), ); }) tolist(), onchanged (string? newvalue) { setstate(() { selectedaction = newvalue; }); }, ), sizedbox(height 20), elevatedbutton( onpressed logaction, child text('log action'), ), sizedbox(height 20), text( 'current score $ score', style textstyle(fontsize 20, fontweight fontweight bold), ), ], ), ), ); } } ステップ 4 back4app からユーザーデータを取得する ユーザーが記録した合計スコアとアクションを取得して表示します。 4 1 バックエンドからプレイヤーのスコアを取得する プレイヤーのスコアを取得するには、すべてのアクションを back4app から取得し、合計スコアを計算する必要があります。 lib/game screen dart , gamescreenstate を更新して取得ロジックを含めます future\<void> fetchscore() async { final query = querybuilder\<parseobject>(parseobject('ecoactions')) whereequalto('username', 'player1'); // example username final response = await query query(); if (response success && response results != null) { int totalscore = 0; for (var result in response results!) { totalscore += result get\<int>('points')!; } setstate(() { score = totalscore; }); } } 画面が初期化されたときに fetchscore() を呼び出します @override void initstate() { super initstate(); fetchscore(); } ステップ5：ゲームを実行する デバイスまたはエミュレーターでアプリを実行します プレイヤーはドロップダウンからアクションを選択し、それを記録し、ポイントが back4app に保存されます。 合計スコアは back4app から取得され、画面に表示されます。 ステップ6：ゲームを拡張する 「 ecowarrior 」ゲームを拡張するには より多くの環境タスクとアクションを追加する。 エコフレンドリーなプレイヤーのトップを表示するリーダーボードを実装する。 特定の数のタスクを完了するための実績を追加する。 結論 このチュートリアルでは、 flutter と back4app を使用して持続可能なゲームを構築しました。このゲームでは、プレイヤーがエコフレンドリーなアクションを記録し、バックエンドを使用して進捗を追跡し、ポイントで報酬を得ることができます。flutterの豊富なuiフレームワークとback4appのスケーラブルなバックエンドを使用することで、このコンセプトを簡単に拡張して、より複雑でインタラクティブな持続可能なゲームを構築できます。 詳細情報 flutter ドキュメント https //flutter dev/docs back4app ドキュメント https //www back4app com/docs