ゲームへの周期Leaderboardの導入

Game Centerチームの Harrisonです ゲームのLeaderboardの 使用方法について解説します Game Centerは プレイヤーが多くのゲームで データにアクセスするために 使用できるIDを提供 Game Centerを使用すると 実績やマルチプレイヤー Leaderboardなどの機能を 簡単に追加できるので それについて説明します このセッションは Code-alongなので 初期設定が必要になります 次にGame Centerの Leaderboardのタイプと サンプルゲームを使った説明をします 周期Leaderboardを App Store Connectに追加し サンプルゲームで使用する 方法もお見せします ではセットアップから始めましょう

デベロッパポータルでは Xcode13と互換性のある プロジェクトを提供しています ビデオを一旦停止してすぐ ダウンロードしてください

ダウンロードできたら再開です 初期設定について説明します ダウンロードしたフォルダには The CoastというXcode プロジェクトがあります それを開いてください Game Centerの機能を使用する このAppを変更するため チームに登録する必要があります 必要に応じて一時停止してください プロジェクトナビゲータから The Coastファイルを選択 次にターゲットのリストから The Coastを選択します 「Signing & Capabilities」パネルの 「Team」メニューから チームを選択します Apple IDまたはチームが メニューにない場合は まず「Add an Account」を選択し Apple ID情報を入力します 次にバンドルIDを一意の 識別子に設定します 続行するにはバンドルIDを 変更する必要があります プロンプトが表示されたら 「Register Device」をクリックして プロファイルを作成します

登録が完了するとステータスの下の 警告は表示されなくなります

選択したバンドルIDが登録されたので App Store Connectに Appレコードを追加できます App Store Connectの右上隅から バンドルIDの登録時に 使用したチームを選択します 次に「マイApp」セクションに移動します 左上隅のプラスボタンをクリックして 「新規App」を選択します iOS専用Appで作業するので プラットフォームとしてiOSを選択し 適切な名称とプライマリ言語 およびSKUを選択します バンドルIDにはXcodeに登録した バンドルIDを選択 すべての必須フィールドに入力したら を選択してApp レコードを追加します 後でApp Store Connectに戻ります ここではLeaderboardの概要を紹介します

プレイヤーは各Leaderboardで 世界中のプレイヤーとランクを確認できます Leaderboardの種類は そのLeaderboardの アクティブ期間によります

標準Leaderboardは 常にアクティブです 歴代ランキングの記録や 週次および日次のランキング 特に経験値の合計や 現在のコイン数など 累積スコアの確認に有効です 周期Leaderboardは 短期のLeaderboardです デベロッパが定義したスケジュールで 5分ごとや30日ごとなどの 一定期間繰り返します 現在アクティブなものを取得したり プレイヤーが最後に終了した 時点から30日以内に送信した Leaderboardを取得することもできます 周期Leaderboardは 毎週日曜日の正午から開始する １時間チャレンジのような 時限イベントや 週ごとの新規Leaderboardに有効です このセッションでは繰り返しの 周期Leaderboardの使用例を見てみます その前にXcodeで開いたプロジェクトに 戻ることにします iOSデバイスまたはシミュレータで実行します

The Coastのタイトル画面です 画面にゲームを開始する ためのボタンがあります “プレイ”をタップして続行します ゲームプレイは非常に簡単です 船を見つけたらタップして ポイントを獲得 各セッションは60秒間続きます フィニッシュは再試行するか タイトル画面に 戻るかを選択できます 右上のメニューボタンを選択すると いつでも終了できます どのように実装されているのでしょうか？

まず主要なクラスを見てみます TitleScreenViewControllerは タイトル画面用です Game Centerでの 認証に使用されます 主な処理はプレイをタップしたときの GameViewControllerの表示です

GameViewControllerは非常にシンプルで ビューがロードされると GameSceneと呼ばれる SpriteKitシーンを表示し endGameのデリゲートメソッドで タイトル画面に戻ります すべてのゲームプレイロジックを管理する

GameSceneが表示されると 複数のSpriteKitノードが設定され うち１つのSpriteKitノードが は背景画像で作成されます デバイスの画面サイズに 基づいてスケーリングされ 他のすべてのノードは 子としてデバイスに追加 もう１つは画面の左上に 配置されたSKLabelNodeの scoreLabelで これは 現在のスコアを表示します 最後はCountdownNodeで 残り時間をプレイヤーに表示し 時間切れになると GameSceneに通知します これらのノードが追加されると setupBoatNodeWithActions メソッドが呼び出されます

これにより一連のSpriteKit アクションが開始され ボートのスプライトが セッションの過程で フェードインおよびアウトされます

touchesEndedメソッドは ボートスプライトのタップ時に これを削除し スコアを追加します

カウントダウンの最後に timeIsUpメソッドで

すべてのノードが背後で削除され 最終スコアのメニューが表示されます 周期Leaderboardを活用して The Coast体験を向上させる 方法は数々ありますが 今回は３つに焦点を当てます まず日毎のコンペティションを 確立する方法について 24時間繰り返すLeaderboardを作成して Game CenterのデフォルトUIに リンクする方法について これは周期Leaderboardを 追加する最も簡単な方法で プレイヤー同士の パフォーマンスの比較に 優れた方法です 毎日の繰り返しで トップの座への 新たな機会がすべての プレイヤーに保証されます 次にゲームプレイ中に ライブランキングを表示 プレイヤーがリアルタイムで 見ることができるので ゲームに多くの興奮をもたらし どれだけトップの座に 近いのかが分かります 最後に現在および以前のランクを 参照してプレイヤーが 時間の経過とともにどう 進化しているかを示します これはプレイヤーにゲームの進行状況を 伝えるための非常に 簡単な方法です では始めましょう 日毎に繰り返すLeaderboardを 使用することについてお話ししました ゲームでLeaderboardを使用する前に App Store Connectで Leaderboardを設定します まずSafariでAppを開きます

タブに移動し Game Centerが 選択されていることを確認します 次にLeaderboardの横に あるプラスボタンをクリック 周期Leaderboard オプションを選択します 標準と周期のLeaderboard両方に 設定するこれらの６つの フィールドがあります Leaderboard参照名は App Store Connectの 内部で使用されます “DailyHighScore”など わかりやすい名前にしましょう LeaderboardIDはApp内で Leaderboardを 参照するために使用されます 簡単にするために参照名と同じ 記述値を使用します スコアのフォーマットタイプは Game Center UIでの スコアのフォーマットを決定します The Coastのスコアは単なる整数ですが 他のゲームでは時間や お金が単位の場合もあります プレイヤーが同じLeaderboardに 複数のスコアを送信した場合 そのタイプによって ランク付けされるスコアが決まります ベストスコアまたは最新スコア のいずれかです その日の最も高いスコアを 記録したいので The Coastにはベストスコア を採用します 並べ替えの順序はプレイヤーの スコアが互いに どのようにランク付け されるかを決定します The Coastの場合 スコアは高いほど良いので 高から低を選択します オプションで有効な スコアの範囲も定義します その範囲外のスコアは拒否されます これは不正行為に対する 対策として有効です 最小値を０ 最大値を200 に設定すれば これを逸脱する 可能性は低いはずです 周期Leaderboardにはこれらの 追加の必須フィールドがあります 開始日時はLeaderboardの 初回オカレンスの日時（UTC）です 過去の日付は選択できないので １分後などの近い将来の 日付と時刻を選択してください これですぐにLeaderboardを 使い始められます 期間はLeaderboardに スコアを投稿できる 時間を意味します 日毎のLeaderboardでは１日です Restarts Everyは Leaderboardの 開始頻度を設定します 頻度は 重複しないよう 期間の値以上の値に設定します The Coastはオカレンスの 間隔を必要としないため 期間と等しく設定します これらのフィールドがどのように 相互作用するか 図を次に示します 開始日をたとえば ６月11日の午前９時に 設定してみます 期間が１日に設定 されているため このオカレンスに送信できるのは １日間です 期限切れになった直後 つまり６月12日午前９時 新しいオカレンスが作成されます これは期間と頻度の設定 が一致するためです このプロセスは無期限に続きます 最後に設定するのは ローカリゼーション情報 Leaderboardを適切に Game CenterUIに 表示するために必要です 少なくとも１つの言語を設定します ここでは英語に設定 毎日のLeaderboardには “デイリーハイスコア”など 適切な表示名を選択します スコアのフォーマット も選ぶ必要があります 整数型の場合 ピリオドかコンマを 千単位の区切りに使えます 設定言語に合ったものを 選択してください スコアのフォーマットの接尾辞は ポイントやヒットなど スコアの単位を指定します The Coastでは空白の ままにしておきます Leaderboardの画像は任意ですが Game Center UIでのゲーム用に カスタマイズできるためお勧めします プロジェクトのAssetsディレクトリに leaderboardImageという 画像があります それをアップロードします Leaderboardを保存したら Game Centerで認証して ゲームで使用します それではGame Centerを認証します TitleScreenViewControllerには authenticateLocalPlayer() というメソッドがあり― ボディがコメントアウトされています これをアンコメントします これはローカルプレイヤーの 認証ハンドラを設定して Game Center開始時の ログインフローをトリガーするものです 詳しい情報が必要な場合は ドキュメントへの リンクを参照してください これでスコアを送信できる ようになりました 先ほどタッチが終了したときの スコア更新メソッド touchesEndedを紹介しました そこに移動します

２つのsubmitScore メソッドがあります １つはクラスメソッドで もう１つはインスタンスです クラスメソッドに送信すると どのような場合でも 現在アクティブのオカレンスに 送信されます アクティブなオカレンスがない 場合のみ 不具合が発生します インスタンスメソッドでは まずGKLeaderboardを ロードするところから始めます

次に完了ハンドラで スコアを送信すると オカレンスがアクティブ の場合のみ成功します

都度異なるチャレンジを 毎時間繰り返される Leaderboardで提供する ゲームを考えてみましょう あるチャレンジのスコアが 次のチャレンジの際 デバイスとサーバー間の ネットワーク遅延などが原因で エラーが出ないように する必要があります インスタンス送信スコア メソッドでそれを解決します The Coastの日毎のLeaderboardは 特定のゲームセッションに 紐付けられないので どのオカレンスで スコアを受領しても構いません クラスメソッドを使用してみましょう

スコアがアクティブな Leaderboardのオカレンスに 提出されます コンテキストは０に 設定しておきましょう コンテキストを使用して ゲーム固有の情報やスコアを エンコードして保存できます The Coastの場合 スコアに コンテキストは不要です 日毎のLeaderboardに 送信しているので タイトル画面から Game CenterUIに ボタンを追加しましょう TitleScreenViewController に移動します

新しいIBActionメソッドを作成します

showLeaderboardVC と名付けます

GKGameCenterViewController をインスタンス化し

leaderboardIDを渡します

playerScopeをglobalとし timeScopeも設定します 周期Leaderboardの場合 timeScopeはallTimeです

gameCenterDelegateを selfに設定

次にそれをpresentします

UIButtonも作成しましょう

ここではleaderboardButton と呼ぶことにします

メインストーリーボードに すべてをつなげます アセットディレクトリで 使用できるグリフを用意しました 画像のボタンを追加し テキストを削除します グリフが引き伸ばされないように アスペクト比の制約を設定します

次にPlayボタンの横にそれを配置

Touch Up Insideイベントを 新しいメソッドに設定し

New Referencing Outletを 新しいボタンに設定

次にAppをビルド・実行して 新規のLeaderboardを試してください

Game Centerにログインを 求められたら ログインしてください Leaderboardが機能するには 認証済みのアカウントが必要です Leaderboardのグリフをタップすると Game CenterUIの Leaderboardに移動します まだプレイしていない場合 Leaderboardは空です 少しプレイしてから Leaderboardで 再度新しいスコアを確認します

Leaderboardが作成され スコアも送信されたので ゲームプレイ中にライブ スコアを追加しましょう

LeaderboardNode クラスを見てください

名前とスコアで構成される Leaderboardエントリの リストを取得する SpriteKitノードです 次にランクに従って それらを表示します エントリで初期化し 必要に応じて エントリを更新できます GameSceneのメンバーとして 任意のleaderboardNodeを追加

setupInitialGameplayで Leaderboardの 位置を初期化します そのすぐ下のノードを初期化します

ここでは５行で設定 最初のエントリは 空白のままにしておきます

backgroundNode に追加してシーンに表示

エントリをロードして Leaderboardを更新します そこで関数を作成 updateLeaderboardNodeです

まずDailyHighScore Leaderboardをロード

完了ハンドラでLeaderboardを使用 グローバルLeaderboardから 上位５つのエントリをロード これは周期Leaderboardなので timeScopeは常にallTimeです

ロードされたらGameKitエントリが nilでない場合 LeaderboardNodeが使用する LeaderboardEntry構造体に 変換します

♪♪

次にLeaderboardNodeのupdateEntries メソッドを呼び出します

最後のステップはゲームプレイ全体で LeaderboardNodeを更新することです このゲームではプレイヤーの スコアが頻繁に変化するため LeaderboardNodeの 同期の維持が不可欠です updateLeaderboardNode()を submitScoreの完了 ハンドラに呼び出します

プレイヤーが得点する前に Leaderboardを 適切に表示したり ノード作成直後の 呼び出しに必要です

次にビルドして再度実行します

一緒にゲームしている友達がいます スコアが上がるにつれて Leaderboardが継続的に 更新されるのを確認します

最後の変更はプレイヤーの 現在のデイリーランクと 以前のデイリーランクの差異を 表示することです 時間になったらこれを GameMenuNodeに 確認します

一連のネストされた 完了ハンドラでも 実装できますが GameKitを使用して 非同期メソッドにより コードを読みやすくします 新規非同期メソッドを作成します addRankToGameMenu()としましょう

GameKitの非同期メソッドは 遅延する可能性があるため エラーをキャッチする必要があります それらをログに記録

毎日のLeaderboardをロードし 正常に返されたことを確認します このLeaderboard インスタンスでの作業は まずasync letにより エントリを非同期でロードします ローカルプレイヤーの スコアのみ対象なので forパラメータは空のままにしておきます

次にLeaderboardの 以前のオカレンスを 非同期でロードし エントリをロードします

この情報を表示するには gameMenuNodeに メソッドを作成する必要があります addRankNodeと呼ぶことにして

現在および以前のランクを渡します

準備が整うまでtry awaitで待ちます

先に進んでtimeIsUpから デタッチブロックで 新規非同期メソッドを呼び出します

次にGameMenuNodeから addRankNodeを実装します

これはは直近ランクの差を 参照して テキストを生成します

どちらもゼロの場合は そのまま戻ります ラベルノードにテキストを表示します ヘルパー関数を使用して テキストを作成できます

適切な配置を設定します

水平方向の中央かつ 垂直方向の中央より 少し下に追加します

次にそれを背景に追加

結果を見てみましょう

昨日プレイしたので前の ランクがあります ご覧のとおり今日は私の ランクが少し下がっています プレイを続けないといけないですね このセッションでは App Store Connectに 設定された周期Leaderboard スコアを送信してゲームで使用する方法 Game Center独自の Leaderboard UIへのリンク Leaderboard APIによる グローバルランクの表示 前回からのランク付けなどを説明しました 周期Leaderboardの詳細については 昨年のWWDCの動画 “Game Centerの活用 Leaderboard アチーブメント マルチプレイヤー”をご覧ください Game Centerの新機能のチェックも お忘れなく [音楽]