玩家玩遊戲有各種動機。大致分為四大主要動機:沉浸感、成就感、合作和競爭。無論您開發什麼樣的遊戲,總有一些玩家希望在其中獲得成就。這可能體現在贏得獎盃或解鎖秘密。有些玩家希望在其中競爭。這可能體現在獲得高分或完成速通。這兩個概念對映到成就排行榜

A simple graphic representing the four types of motivation explained above

App Store 和 Google Play 等生態系統為成就和排行榜提供了集中式服務。玩家可以在一個地方檢視所有遊戲的成就,開發人員無需為每款遊戲重新實現它們。

本食譜演示瞭如何使用 games_services為您的移動遊戲新增成就和排行榜功能。

1. 啟用平臺服務

#

要啟用遊戲服務,請在 iOS 上設定 Game Center,在 Android 上設定 Google Play 遊戲服務

iOS

#

在 iOS 上啟用 Game Center (GameKit)

  1. 在 Xcode 中開啟您的 Flutter 專案。開啟 ios/Runner.xcworkspace

  2. 選擇根 Runner 專案。

  3. 轉到 Signing & Capabilities(簽名與功能)選項卡。

  4. 點選 + 按鈕以新增 Game Center 作為一項功能。

  5. 關閉 Xcode。

  6. 如果您尚未註冊,請在 App Store Connect 中註冊您的遊戲,並在 My App(我的 App)部分點選 + 圖示。

    Screenshot of the + button in App Store Connect

  7. 仍在 App Store Connect 中,找到 Game Center 部分。撰寫本文時,您可以在 Services(服務)中找到它。在 Game Center 頁面上,您可能需要根據您的遊戲設定排行榜和多個成就。記下您建立的排行榜和成就的 ID。

Android

#

在 Android 上啟用 Play 遊戲服務

  1. 如果您尚未註冊,請訪問 Google Play Console 並在此註冊您的遊戲。

    Screenshot of the 'Create app' button in Google Play Console

  2. 仍在 Google Play Console 中,從導航選單中選擇 Play 遊戲服務設定與管理配置,然後按照說明操作。

    • 這需要大量時間和耐心。除此之外,您還需要在 Google Cloud Console 中設定一個 OAuth 同意螢幕。如果任何時候您感到困惑,請查閱官方的 Play 遊戲服務指南

      Screenshot showing the Games Services section in Google Play Console

  3. 完成後,您可以在 Play 遊戲服務設定與管理中開始新增排行榜和成就。建立與 iOS 端完全相同的集合。記下 ID。

  4. 轉到 Play 遊戲服務 → 設定與管理 → 釋出

  5. 點選 釋出。不用擔心,這並不會真正釋出您的遊戲。它只發布成就和排行榜。例如,一旦排行榜以這種方式釋出,就無法取消釋出。

  6. 轉到 Play 遊戲服務 → 設定與管理 → 配置 → 憑據

  7. 找到 獲取資源 按鈕。它會返回一個包含 Play 遊戲服務 ID 的 XML 檔案。

    xml
    <!-- THIS IS JUST AN EXAMPLE -->
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <!--app_id-->
        <string name="app_id" translatable="false">424242424242</string>
        <!--package_name-->
        <string name="package_name" translatable="false">dev.flutter.tictactoe</string>
        <!--achievement First win-->
        <string name="achievement_first_win" translatable="false">sOmEiDsTrInG</string>
        <!--leaderboard Highest Score-->
        <string name="leaderboard_highest_score" translatable="false">sOmEiDsTrInG</string>
    </resources>
  8. android/app/src/main/res/values/games-ids.xml 新增一個檔案,其中包含您在上一步中收到的 XML。

2. 登入遊戲服務

#

現在您已經設定好 Game CenterPlay 遊戲服務,並準備好了成就和排行榜 ID,終於到了 Dart 時間。

  1. 新增對 games_services的依賴。

    flutter pub add games_services
  2. 在做其他任何事情之前,您必須讓玩家登入遊戲服務。

    dart
    try {
      await GamesServices.signIn();
    } on PlatformException catch (e) {
      // ... deal with failures ...
    }

登入在後臺進行。這需要幾秒鐘,因此不要在 runApp() 之前呼叫 signIn(),否則玩家每次啟動遊戲時都將被迫盯著空白螢幕。

games_services API 的 API 呼叫可能因多種原因而失敗。因此,每個呼叫都應該像上一個示例一樣包裝在 try-catch 塊中。為了清晰起見,本食譜的其餘部分省略了異常處理。

3. 解鎖成就

#
  1. 在 Google Play Console 和 App Store Connect 中註冊成就,並記下它們的 ID。現在您可以從 Dart 程式碼中授予這些成就

    dart
    await GamesServices.unlock(
      achievement: Achievement(
        androidID: 'your android id',
        iOSID: 'your ios id',
      ),
    );

    玩家的 Google Play 遊戲或 Apple Game Center 帳戶現在會列出該成就。

  2. 要從遊戲中顯示成就 UI,請呼叫 games_services API

    dart
    await GamesServices.showAchievements();

    這會將平臺成就 UI 顯示為遊戲上的疊加層。

  3. 要在您自己的 UI 中顯示成就,請使用 GamesServices.loadAchievements()

4. 提交分數

#

當玩家完成一輪遊戲時,您的遊戲可以將該遊戲會話的結果提交到一個或多個排行榜。

例如,像超級馬里奧這樣的平臺遊戲可以將最終分數和完成關卡所需的時間提交到兩個獨立的排行榜。

  1. 在第一步中,您在 Google Play Console 和 App Store Connect 中註冊了一個排行榜,並記下了它的 ID。使用此 ID,您可以為玩家提交新分數

    dart
    await GamesServices.submitScore(
      score: Score(
        iOSLeaderboardID: 'some_id_from_app_store',
        androidLeaderboardID: 'sOmE_iD_fRoM_gPlAy',
        value: 100,
      ),
    );

    您不需要檢查新分數是否是玩家的最高分。平臺遊戲服務會為您處理。

  2. 要將排行榜顯示為遊戲上的疊加層,請進行以下呼叫

    dart
    await GamesServices.showLeaderboards(
      iOSLeaderboardID: 'some_id_from_app_store',
      androidLeaderboardID: 'sOmE_iD_fRoM_gPlAy',
    );
  3. 如果您想在自己的 UI 中顯示排行榜分數,可以使用 GamesServices.loadLeaderboardScores() 來獲取它們。

5. 後續步驟

#

games_services 外掛還有更多功能。使用此外掛,您可以

  • 獲取玩家的圖示、姓名或唯一 ID
  • 儲存和載入遊戲狀態
  • 退出遊戲服務

有些成就可以是遞增的。例如:“您已收集了 McGuffin 的所有 10 個碎片。”

每款遊戲對遊戲服務的需求都不同。

首先,您可能需要建立此控制器,以便將所有成就和排行榜邏輯集中在一個地方

dart
import 'dart:async';

import 'package:games_services/games_services.dart';
import 'package:logging/logging.dart';

/// Allows awarding achievements and leaderboard scores,
/// and also showing the platforms' UI overlays for achievements
/// and leaderboards.
///
/// A facade of `package:games_services`.
class GamesServicesController {
  static final Logger _log = Logger('GamesServicesController');

  final Completer<bool> _signedInCompleter = Completer();

  Future<bool> get signedIn => _signedInCompleter.future;

  /// Unlocks an achievement on Game Center / Play Games.
  ///
  /// You must provide the achievement ids via the [iOS] and [android]
  /// parameters.
  ///
  /// Does nothing when the game isn't signed into the underlying
  /// games service.
  Future<void> awardAchievement({
    required String iOS,
    required String android,
  }) async {
    if (!await signedIn) {
      _log.warning('Trying to award achievement when not logged in.');
      return;
    }

    try {
      await GamesServices.unlock(
        achievement: Achievement(androidID: android, iOSID: iOS),
      );
    } catch (e) {
      _log.severe('Cannot award achievement: $e');
    }
  }

  /// Signs into the underlying games service.
  Future<void> initialize() async {
    try {
      await GamesServices.signIn();
      // The API is unclear so we're checking to be sure. The above call
      // returns a String, not a boolean, and there's no documentation
      // as to whether every non-error result means we're safely signed in.
      final signedIn = await GamesServices.isSignedIn;
      _signedInCompleter.complete(signedIn);
    } catch (e) {
      _log.severe('Cannot log into GamesServices: $e');
      _signedInCompleter.complete(false);
    }
  }

  /// Launches the platform's UI overlay with achievements.
  Future<void> showAchievements() async {
    if (!await signedIn) {
      _log.severe('Trying to show achievements when not logged in.');
      return;
    }

    try {
      await GamesServices.showAchievements();
    } catch (e) {
      _log.severe('Cannot show achievements: $e');
    }
  }

  /// Launches the platform's UI overlay with leaderboard(s).
  Future<void> showLeaderboard() async {
    if (!await signedIn) {
      _log.severe('Trying to show leaderboard when not logged in.');
      return;
    }

    try {
      await GamesServices.showLeaderboards(
        // TODO: When ready, change both these leaderboard IDs.
        iOSLeaderboardID: 'some_id_from_app_store',
        androidLeaderboardID: 'sOmE_iD_fRoM_gPlAy',
      );
    } catch (e) {
      _log.severe('Cannot show leaderboard: $e');
    }
  }

  /// Submits [score] to the leaderboard.
  Future<void> submitLeaderboardScore(int score) async {
    if (!await signedIn) {
      _log.warning('Trying to submit leaderboard when not logged in.');
      return;
    }

    _log.info('Submitting $score to leaderboard.');

    try {
      await GamesServices.submitScore(
        score: Score(
          // TODO: When ready, change these leaderboard IDs.
          iOSLeaderboardID: 'some_id_from_app_store',
          androidLeaderboardID: 'sOmE_iD_fRoM_gPlAy',
          value: score,
        ),
      );
    } catch (e) {
      _log.severe('Cannot submit leaderboard score: $e');
    }
  }
}

更多資訊

#

Flutter 休閒遊戲工具包包含以下模板

  • basic:基本入門遊戲
  • card:入門紙牌遊戲
  • endless runner:入門遊戲(使用 Flame),玩家無限奔跑,避開陷阱並獲得獎勵