もっと

Flutter、カジュアルゲームツールキット、およびBack4appを使用して高度なエンドレスランナーゲームを構築する方法

49min

はじめに
カジュアルゲームは、そのシンプルさと魅力的なゲームプレイで人気があり、簡単に学べるメカニクスで幅広いオーディエンスを魅了しています。この高度なチュートリアルでは、Flutterのカジュアルゲームツールキットを使用して、完全に機能するエンドレスランナーゲームを開発します。ゲームのバックエンドを管理するために、Back4appを統合し、高得点、プレイヤープロフィール、実績などのユーザーデータを保存します。また、状態管理、パフォーマンス最適化、デプロイメント戦略などの高度なトピックにも掘り下げます。このチュートリアルの終わりまでには、データの永続性と強化された機能を備えた、AndroidとiOSの両方でデプロイ可能な洗練されたエンドレスランナーゲームが完成します。
前提条件
始める前に、以下のものを確認してください:
Flutter開発環境: インストールされ、設定されています。まだ設定していない場合は、公式Flutterインストールガイドを参照してください。
中級Flutter知識: Flutterウィジェット、状態管理、非同期プログラミングに精通していること。
Back4appアカウント: Back4appで無料アカウントにサインアップしてください。
Back4appの理解: プロジェクトの作成とデータ管理の基本知識。Back4appの始め方ガイドを参照してください。
GitHubアカウント: リポジトリをクローンし、バージョン管理を行うため。
状態管理ライブラリの経験: ProviderやBlocなど。
テストとデプロイメントの理解: テストの作成とFlutterアプリのデプロイに関する基本的な理解。
﻿
ステップ1 – Back4appバックエンドの設定
1.1 Back4appで新しいプロジェクトを作成する
Back4appアカウントにログインします。
クリックします "新しいアプリを作成" と名付けます "高度なエンドレスランナーゲーム".
1.2 ユーザーデータのクラスを設定する
次のクラスを作成します ユーザー, スコア, および 実績.
ユーザークラス
フィールド:
ユーザー名 (文字列)
パスワード (文字列)
メール (文字列)
プロフィール画像 (ファイル)
スコアクラス
フィールド:
ユーザー (ユーザーへのポインタ)
ハイスコア (数値)
レベル (数値)
実績クラス
フィールド:
ユーザー (ユーザーへのポインタ)
達成名 (文字列)
達成日 (日付)
1.3 セキュリティと権限の設定
ユーザーデータを保護するためにクラスレベルの権限を設定します。
認証されたユーザーのみが自分のデータを読み書きできることを確認します。
1.4 サンプルデータの追加
統合を後でテストするために、クラスにサンプルデータを入力します。
﻿
ステップ2 – エンドレスランナー テンプレートのクローンと設定
2.1 Flutterカジュアルゲームツールキットリポジトリをクローンする
Bash
git clone https://github.com/flutter/casual-games.git
git clone https://github.com/flutter/casual-games.git
﻿
2.2 エンドレスランナーテンプレートに移動する
Bash
cd casual-games/templates/endless_runner
cd casual-games/templates/endless_runner
﻿
2.3 IDEでプロジェクトを開く
Visual Studio Code、Android Studio、または任意の好みのIDEを使用します。
FlutterとDartのプラグインがインストールされていることを確認します。
2.4 依存関係を更新する
「pubspec.yaml」を開いて、依存関係を最新のバージョンに更新します。
実行:
Bash
flutter pub get
flutter pub get
﻿
﻿
ステップ 3 – 高度な機能でゲームを強化する
3.1 ユーザー認証の実装
プレイヤーがサインアップ、ログイン、プロフィールを管理できるようにします。
3.1.1 Parse Server SDKの追加
に pubspec.yaml:
YAML
dependencies:
  parse_server_sdk_flutter: ^3.1.0
dependencies:
  parse_server_sdk_flutter: ^3.1.0
﻿
実行:
Bash
flutter pub get
flutter pub get
﻿
3.1.2 認証サービスの設定
を作成します lib/services/auth_service.dart:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

class AuthService {
  Future<ParseUser> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);
    var response = await user.signUp();
    if (response.success) {
      return response.result;
    } else {
      throw Exception(response.error!.message);
    }
  }

  Future<ParseUser> logIn(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();
    if (response.success) {
      return response.result;
    } else {
      throw Exception(response.error!.message);
    }
  }

  Future<void> logOut() async {
    var user = await ParseUser.currentUser() as ParseUser;
    await user.logout();
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

class AuthService {
  Future<ParseUser> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);
    var response = await user.signUp();
    if (response.success) {
      return response.result;
    } else {
      throw Exception(response.error!.message);
    }
  }

  Future<ParseUser> logIn(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();
    if (response.success) {
      return response.result;
    } else {
      throw Exception(response.error!.message);
    }
  }

  Future<void> logOut() async {
    var user = await ParseUser.currentUser() as ParseUser;
    await user.logout();
  }
}
﻿
3.1.3 認証画面の作成
サインアップ画面: lib/screens/signup_screen.dart
ログイン画面: lib/screens/login_screen.dart
Flutterウィジェットを使用してユーザー入力用のフォームを作成します。
3.2 UI/UXの強化
カスタムアニメーションを実装する AnimationController を使用して。
lib/theme.dart にカスタムテーマを追加する。
3.3 実績とリーダーボードを追加する
実績を表示するためのUIコンポーネントを作成する。
トップスコアを世界中に表示するリーダーボード画面を実装する。
﻿
ステップ4 – Back4appをゲームに統合する
4.1 main.dart でParseを初期化する
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
  );

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
  );

  runApp(MyApp());
}
﻿
4.2 資格情報を安全に保存する
環境変数を管理するために flutter_dotenv を使用します。
に pubspec.yaml:
YAML
dependencies:
  flutter_dotenv: ^5.0.2
dependencies:
  flutter_dotenv: ^5.0.2
﻿
を作成します .env ファイル（ .gitignore に追加します）:
Text
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
﻿
を更新します main.dart:
Dart
import 'package:flutter_dotenv/flutter_dotenv.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(fileName: ".env");

  final keyApplicationId = dotenv.env['APP_ID']!;
  final keyClientKey = dotenv.env['CLIENT_KEY']!;
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
  );

  runApp(MyApp());
}
import 'package:flutter_dotenv/flutter_dotenv.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(fileName: ".env");

  final keyApplicationId = dotenv.env['APP_ID']!;
  final keyClientKey = dotenv.env['CLIENT_KEY']!;
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
  );

  runApp(MyApp());
}
﻿
ステップ 5 – ステート管理の実装
5.1 状態管理ソリューションを選択する
簡単のために、Providerを使用します。
5.1.1 Provider依存関係を追加する
にpubspec.yaml:
YAML
dependencies:
  provider: ^6.0.0
dependencies:
  provider: ^6.0.0
﻿
実行:
Bash
flutter pub get
flutter pub get
﻿
5.2 ゲーム状態管理を作成する
5.2.1 ゲーム状態クラスを作成する
lib/models/game_state.dart:
Dart
import 'package:flutter/foundation.dart';

class GameState extends ChangeNotifier {
  int _score = 0;
  int get score => _score;

  void incrementScore() {
    _score++;
    notifyListeners();
  }

  void resetScore() {
    _score = 0;
    notifyListeners();
  }
}
import 'package:flutter/foundation.dart';

class GameState extends ChangeNotifier {
  int _score = 0;
  int get score => _score;

  void incrementScore() {
    _score++;
    notifyListeners();
  }

  void resetScore() {
    _score = 0;
    notifyListeners();
  }
}
﻿
5.2.2 ゲーム状態を提供する
にmain.dart:
Dart
import 'package:provider/provider.dart';
import 'models/game_state.dart';

void main() async {
  // ... Parse initialization

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => GameState()),
      ],
      child: MyApp(),
    ),
  );
}
import 'package:provider/provider.dart';
import 'models/game_state.dart';

void main() async {
  // ... Parse initialization

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => GameState()),
      ],
      child: MyApp(),
    ),
  );
}
﻿
**5.2.3
ウィジェットでゲーム状態を消費する**
ゲーム画面で:
Dart
int score = context.watch<GameState>().score;
int score = context.watch<GameState>().score;
﻿
ステップ 6 – パフォーマンスの最適化
6.1 ゲームパフォーマンス
スプライト管理: メモリ使用量を減らすためにスプライトシートを使用します。
フレームレート最適化: パフォーマンスとバッテリー寿命のバランスを取るためにフレームレートを制限します。
6.2 ネットワーク最適化
データキャッシング: ネットワークコールを減らすためにキャッシングメカニズムを実装します。
バッチリクエスト: バックエンドとの通信時にバッチ操作を使用します。
6.3 コードプロファイリング
Flutterの DevTools を使用してアプリをプロファイリングします。
パフォーマンスのボトルネックを特定して修正します。
ステップ 7 – 堅牢なエラーハンドリングとテスト
7.1 エラーハンドリング
トライキャッチブロック: 例外を処理するために非同期呼び出しをラップします。
Dart
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
﻿
ユーザーフィードバック: エラーが発生したときにユーザーフレンドリーなメッセージを表示します。
7.2 ロギング
エラーや重要なイベントを記録するために、loggingパッケージを使用します。
「pubspec.yaml」で:
YAML
dependencies:
  logging: ^1.0.2
dependencies:
  logging: ^1.0.2
﻿
7.3 テスト
7.3.1 ユニットテスト
モデルとサービスのテストを作成します。
「test/game_state_test.dart」の例テスト:
Dart
import 'package:flutter_test/flutter_test.dart';
import 'package:your_app/models/game_state.dart';

void main() {
  test('Score increments correctly', () {
    final gameState = GameState();
    gameState.incrementScore();
    expect(gameState.score, 1);
  });
}
import 'package:flutter_test/flutter_test.dart';
import 'package:your_app/models/game_state.dart';

void main() {
  test('Score increments correctly', () {
    final gameState = GameState();
    gameState.incrementScore();
    expect(gameState.score, 1);
  });
}
﻿
7.3.2 統合テスト
アプリのUIとインタラクションをテストします。
Flutterの統合テストフレームワークを使用します。
ステップ8 – ゲームのデプロイ
8.1 デプロイの準備
アプリアイコンとスプラッシュスクリーン: ブランドに合わせてカスタマイズします。
アプリバンドルID: AndroidとiOSのためにユニークな識別子を設定します。
8.2 リリースバージョンのビルド
Android
署名設定でandroid/app/build.gradleを更新します。
実行:
Bash
flutter build apk --release
flutter build apk --release
﻿
iOS
Xcodeで ios/Runner.xcworkspace を開きます。
署名と機能を設定します。
実行:
Bash
flutter build ios --release
flutter build ios --release
﻿
8.3 App Store 提出
Google Play ストア: 公式ガイドに従ってください。
Apple App Store: 公式ガイドに従ってください。
結論
この高度なチュートリアルでは、Flutterのカジュアルゲームツールキットを使用して、機能豊富なエンドレスランナーゲームを構築し、バックエンドサービスのためにBack4appを統合しました。以下の内容をカバーしました:
ユーザー認証: プレイヤーがサインアップ、ログイン、プロフィールを管理できるようにします。
状態管理: 効率的な状態管理のためにProviderを使用します。
パフォーマンス最適化: ゲームとネットワークのパフォーマンスを向上させます。
エラーハンドリングとテスト: 堅牢なエラーハンドリングを実装し、テストを作成します。
デプロイメント: アプリをアプリストアに準備して提出します。
この包括的なアプローチは、信頼性のあるバックエンド統合を持つプロフェッショナルグレードのFlutterアプリケーションを開発するためのスキルを提供します。さらに、次のような機能を追加してゲームを拡張できます。
ソーシャルシェアリング: プレイヤーがソーシャルメディアで成果を共有できるようにします。
アプリ内購入: 購入可能なアイテムやアップグレードでゲームを収益化します。
マルチプレイヤーサポート: リアルタイムまたはターン制のマルチプレイヤー機能を実装します。
FlutterとBack4appの統合に関する詳細情報は、次を参照してください。
﻿Flutterドキュメント﻿
﻿Back4app Flutterガイド﻿
﻿Parse Serverガイド﻿
楽しいコーディングとゲーム開発を！

更新日 24 Jan 2025

このページは役に立ちましたか？

OverlayPortalとBack4app統合を使用してFlutterアプリを構築する

Flutterでfl_chartとBack4Appを使ってデータを可視化する方法

Flutter、カジュアルゲームツールキット、およびBack4appを使用して高度なエンドレスランナーゲームを構築する方法

はじめに

前提条件

ステップ1 – Back4appバックエンドの設定

1.1 Back4appで新しいプロジェクトを作成する

1.2 ユーザーデータのクラスを設定する

ユーザークラス

スコアクラス

実績クラス

1.3 セキュリティと権限の設定

1.4 サンプルデータの追加

ステップ2 – エンドレスランナー テンプレートのクローンと設定

2.1 Flutterカジュアルゲームツールキットリポジトリをクローンする

2.2 エンドレスランナーテンプレートに移動する

2.3 IDEでプロジェクトを開く

2.4 依存関係を更新する

ステップ 3 – 高度な機能でゲームを強化する

3.1 ユーザー認証の実装

3.1.1 Parse Server SDKの追加

3.1.2 認証サービスの設定

3.1.3 認証画面の作成

3.2 UI/UXの強化

3.3 実績とリーダーボードを追加する

ステップ4 – Back4appをゲームに統合する

4.1 main.dart でParseを初期化する

4.2 資格情報を安全に保存する

ステップ 5 – ステート管理の実装

5.1 状態管理ソリューションを選択する

5.1.1 Provider依存関係を追加する

5.2 ゲーム状態管理を作成する

5.2.1 ゲーム状態クラスを作成する

5.2.2 ゲーム状態を提供する

**5.2.3

ステップ 6 – パフォーマンスの最適化

6.1 ゲームパフォーマンス

6.2 ネットワーク最適化

6.3 コードプロファイリング

ステップ 7 – 堅牢なエラーハンドリングとテスト

7.1 エラーハンドリング

7.2 ロギング

7.3 テスト

7.3.1 ユニットテスト

7.3.2 統合テスト

ステップ8 – ゲームのデプロイ

8.1 デプロイの準備

8.2 リリースバージョンのビルド

Android

iOS

8.3 App Store 提出

結論

ステップ2 – エンドレスランナーテンプレートのクローンと設定