跳至主要內容

為您的手機遊戲新增成就和排行榜

玩家玩遊戲有各種不同的動機。大致來說,主要有四種動機:沉浸感、成就感、合作和競爭。無論您建置什麼遊戲,有些玩家都想要在其中達成成就。這可能是贏得獎盃或解鎖秘密。有些玩家則想要在其中競爭。這可能是創下高分或完成速通。這兩個概念對應到成就排行榜的概念。

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 區塊按下 + 圖示。

    Screenshot of the + button in App Store Connect

  7. 仍在 App Store Connect 中,尋找 Game Center 區塊。在撰寫本文時,您可以在 Services 中找到它。在 Game Center 頁面中,您可以根據您的遊戲設定排行榜和數個成就。請記下您建立的排行榜和成就的 ID。

Android

#

若要在 Android 上啟用 Play 遊戲服務

  1. 如果您還沒有註冊遊戲,請前往 Google Play 管理中心 並在那裡註冊您的遊戲。

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

  2. 仍在 Google Play 管理中心中,從導覽選單中選取 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 管理中心和 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 管理中心和 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
  • 儲存和載入遊戲狀態
  • 登出遊戲服務

某些成就可以是漸進式的。例如:「您已收集到所有 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 Casual Games Toolkit 包含以下範本

  • basic:基本入門遊戲
  • card:入門卡牌遊戲
  • endless runner:入門遊戲(使用 Flame),玩家在其中不斷奔跑,避開陷阱並獲得獎勵