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

11min
はじめに
Flutterは、Googleによる多用途のオープンソースフレームワークで、開発者が単一のコードベースからモバイル、ウェブ、デスクトップ、埋め込みデバイス向けのネイティブコンパイルアプリケーションを構築できるようにします。Flutterは主に従来のアプリ開発で知られていますが、そのパフォーマンス、広範なパッケージエコシステム、ホットリロード機能により、ゲーム開発にもますます使用されています。

このガイドでは、FlutterとFlameを使用してマルチプラットフォームのフラッピーバードスタイルのゲームを開発する方法を説明します。FlameはFlutterでの2Dゲーム用に設計されたゲームエンジンです。さらに、ユーザーのスコアを保存し、リーダーボードを表示するために、ゲームをバックエンドサービス（BaaS）プラットフォームであるBack4Appに接続します。

このガイドの終わりまでには、モバイルおよびウェブプラットフォームで動作するゲームの作業バージョンが完成し、Back4Appからハイスコアを保存および取得できるようになります。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Back4appアカウント。 Back4app.comで無料アカウントにサインアップしてください。
ローカルマシンにFlutter開発環境が設定されていること。まだ設定していない場合は、Flutterインストールガイドを参照してください。
Dart、Flutterウィジェット、およびゲーム開発の基本的な知識。
ステップ1 – Back4appバックエンドの設定
Back4appプロジェクトを作成する: あなたの Back4appアカウント にログインし、新しいプロジェクトを作成します。
Parseクラスを作成する: このチュートリアルでは、ゲーム関連データを管理するためのシンプルなバックエンドを設定します。あなたのBack4appプロジェクトで、次の2つのParseクラスを作成します: Player と GameScore:
Player: プレイヤーの情報（ユーザー名、レベル、実績など）を保存します。
GameScore: ゲームのスコアとランキングを保存します。
Back4appの認証情報を取得する: プロジェクト設定に移動して、FlutterゲームをBack4appに接続するために必要なアプリケーションIDとクライアントキーを取得します。
ステップ2 – Flutterプロジェクトの設定
新しいFlutterプロジェクトを作成する: ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します:
依存関係を追加する: pubspec.yaml を開き、次の依存関係を追加します:
アプリでParseを初期化する: lib/main.dart, Parse SDKをインポートし、main 関数内で初期化します:
Dart
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(),
    );
  }
}
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を使用してシンプルなゲームクラスを作成します:
Dart
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);
  }
}
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ウィジェットを更新してゲームを表示します:
Dart
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
﻿
  3.ゲームを実行する: flutter runを使用してアプリを実行し、シンプルなゲームを確認できます。プレイヤーを表す青い四角が表示されるはずです。
ステップ 4 – Back4appを使用したゲームデータの管理
プレイヤーデータの保存: 次に、プレイヤーがレベルアップしたり何かを達成したときに、プレイヤーデータをBack4appに保存する関数を作成しましょう:
Dart
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');
  }
}
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から取得してリーダーボードに表示することもできます:
Dart
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 [];
  }
}
﻿
Dart
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 [];
  }
}
﻿
Dart
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スコアを表示します:
Dart
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')}'),
          );
        },
      ),
    );
  }
}
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のドキュメントとBack4appのドキュメント。コーディングを楽しんでください!
更新日 24 Jan 2025
このページは役に立ちましたか？
Back4App、Next.js、Vercelを使用した会議室予約アプリのチュートリアル
FlutterとBack4Appを使用してAIメール応答アプリを構築する方法
Flutter と Back4app を使用したマルチプラットフォーム ゲームの構築

はじめに

前提条件

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

ステップ2 – Flutterプロジェクトの設定

ステップ 3 – Flameを使用したゲームの設定

ステップ 4 – Back4appを使用したゲームデータの管理

ステップ5 – Flameを使った高度な機能の追加

結論

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