Game Centerのデザイン

こんにちは WWDCへようこそ

“Game Centerの設計” こんにちは ジョーです マイケルです Game Centerデザインチームの デザイナーです 今日お話しするのは 新しいGame Center体験と― たくさんの機能強化に ついてです ゲームを より魅力的に 美しくすることができます 今回は Game Centerを活用した― ゲームのデザイン方法を ご説明します 皆さんのゲームにGame Centerを 追加する理由はたくさんあります たとえば ソーシャル機能では― プレイヤーは友達を追加して ゲーム上のIDを管理でき― アチーブメントとリーダーボードで対戦を 促し もっとプレイしてもらえるようにします リアルタイム対戦とターン制のゲームに リッチなマルチメディア体験を提供します これらのメリットをすべて活用できるよう 詳しくご説明してききます まず アクセスポイント プレイヤーは 一貫性があり 分かりやすい方法で ゲーム内から Game Centerにアクセスします “The Coast” ゲームを起動して この機能を見てみましょう インディーゲームの“The Coast”です 船を慎重に離岸させて― 衝突して大切な積み荷を 失わないようにします ゲームを起動すると まず始めに― Game Centerの ウェルカムバナーが表示されます これが消えると 新しいUIエレメントが表示されます これが アクセスポイントです どのゲームからでも Game Centerの情報に アクセスできる わかりやすく簡単な方法です

プレイヤーのアバターが Game Centerの アクセスポイントとして機能します タップまたはクリックすると 新しいGame Center Dashboardが起動します プレイヤーは ここで プロフィール アチーブメント リーダーボードを確認でき このゲームに役立つ情報を 入手します これは 後でご説明します プレイヤーのアバターだけを 表示するか― または “ハイライト”と呼ばれる 参考情報とペアで表示するか選べます ハイライトは プレイヤーのGame Centerデータ― たとえば アチーブメントの進捗や リーダーボードの順位を表示します アクセスポイントは フレキシブルで― ゲームのUI画面の どの角にも配置できますが― なるべく 左上に配置することを お勧めします

そのほうが 縦向きでも横向きでも ゲームのデザインに合います また 最大サイズで ゲームのUIが― アクセスポイントの表示域に 重ならないよう― 注意してください iPhone 11 Proでは― 縦向きのゲームのアクセスポイントは 62x335ポイントです 114ポイントのセーフエリアを残すことを お勧めします 画面の上端または下端から 幅は全幅です 横向きのゲームは― 62x280ポイント セーフエリアは91ポイント残すのが ベストです 画面の上端または下端から 幅は全幅です アクセスポイントは 他のプラットフォームでも 利用可能です 他のデバイスでセーフエリアを使う 詳しい方法は― “Human Interface Guidelines”に 載っています できる限り アクセスポイントを ゲームのメインメニューで表示してください そうすることで ゲーム開始前に すばやくアクセスできます ゲームの起動シーケンスの 適切なタイミングで表示されるようにします スプラッシュ画面や オープニング映像が終了してから― ゲームのメインメニューと一緒に― アクセスポイントを表示してください

メインメニューにアクセスポイントを 配置できない場合は― ゲーム内でプレイヤーが戻れる 場所にします レベル選択画面や― “設定”などです アクセスポイントはゲームに適応できるように デザインされています ただし ゲームのUIデザインも― うまく調和し 自然に 体験にフィットするように考えてください

ゲーム開始時に アクセスポイントを非表示にすると良いです ゲームプレイに集中できますし― スペースを ゲーム内のコントロールに 割り当てられます アクセスポイントは ゲーム内からGame Centerに― アクセスする 最良で一貫性のある方法です ただし カスタムUIで Game Centerにリンクすることもできます 皆さんのゲームから使用する アイコンのオプションを提供しています フルカラー 白 黒のバリエーションを さまざまなフォーマットでです どれも “Apple Design Resources”で 探せます イコノグラフィは提供されたまま使用し 改変しないでください カスタムディープリンクに テキストを含める場合― 正式名称の“Game Center”を― ローカライズせず使用してください 以上が 新しいアクセスポイントです 覚えておくことは― なるべく メインメニューに配置すること ベストなコーナーに表示すること ハイライトでプレイヤー情報を 表示すること そして― アクセスポイント周囲の セーフエリアを確保することです ジョー 出番だよ ありがとう マイケル Dashboardとプロフィールに 移りましょう アクセスポイントをタップすると Dashboardが開いて― 主要なエリアにジャンプでき これが 新しいGame Center体験になります Dashboardはゲームの上に 透明レイヤとして表示されます 後ろに画面の色が 透けて見えます Dashboardの表示中 ゲームを一時停止するか― 動きの激しいアニメーションは 最小化することを お勧めします Dashboardは 他のGame Center UIと同様― 横向きと縦向きの 両方をサポートします 皆さんのゲームデザインが 尊重されます また デザインは iOS iPadOS macOS tvOSで 一貫性を感じられるようにしています

tvOSでは Dashboardに オプションのアートワークも表示できます これは 体験をブランド化し― ゲームに統一感を出すのに 役立ちます ここに表示するアートワークを 選ぶときに― Game Center UIとのコントラストに 違和感がないようにしてください 背景が透けて見えるよう 透明度を検討します アートワークは シンプルでクリアに― 遠くからでも 読めるようにします ここに使用するアートワークは Appアイコンではなく― 何か別のものにします たとえば ゲームのロゴや文字商標などです Dashboardのアートワークに フォーカスを与えることはできません Dashboardアートワークの アップロード仕様は次のとおりです

必ず 透過をサポートする TIFFまたはPNGファイルであること 画像サイズは 1xでは 923x150ピクセル

2xでは 1846x300ピクセル 72DPI以上 色空間はsRGBです

Dashboardの最初のセクションは プロフィールへのアクセスを提供します タップすると Game Centerプロフィール 全体の概要と― 友達や Friend Suggestionsを表示し アチーブメントへのアクセス権を― プレイしたことのある すべてのゲームについて表示します

プロフィールはいつでも Dashboardからアクセスできます ただし オプションでゲーム内で ボタンを提供し― 直接プロフィールページに リンクさせることもできます

プレイヤーに もっと友達を追加して ゲームのリーダーボードや― マルチプレイヤー体験を 楽しんで欲しいときに便利です

直接 プロフィールへのリンクを 提供したい場合は― このアイコンを使ってください ゲームに合うよう スタイルを変更できますが― 形状は改変しないでください アクセスポイントのデザインとの 混乱を避けるため― プレイヤーのGame Centerアバターを この目的に使用しないでください リンクをテキストと組み合わせる場合は 正しい用語― “Game Centerプロフィール”を使用し― プロフィールとか アカウントなどの 用語は使用しないでください 先ほど説明したとおり “Game Center”はローカライズしません ただし プロフィールの部分は ローカライズできます

Game Centerの別のセッションで プロフィールへの― リンク方法を説明しています

以上が 新しいDashboardと プロフィールです ここまでの説明をまとめます Game Center UIが開いたら ゲームを一時停止します オプションで tvOS用に Dashboardアートワークを提供できます 必要な場合 ゲームから Game Centerプロフィールに直接リンクできます マイケルが 次のセクションを説明します ここからは 私のお気に入りの Game Centerのアップデート― アチーブメントです Dashboardの2番目の セクションです

私はトレーディングカード収集が 大好きでした 全部集めたくなりますし― レアなカードを手に入れる 嬉しさといったらないですよね ですので アチーブメントの デザインを新しく― カードをコレクションする 形式にしたのです 新しいデザインの アチーブメントのセクションでは― ゲームのアチーブメントを示す カードのラインナップが表示されます コンプリート済みとロック中に グループ化されています アチーブメントには 複数のタイプがあります “スタンダード” これは要件を満たせば 獲得できます

“プログレッシブ”は― アチーブメントを開放するまで あと どれくらいか プレイヤーに知らせます そして “ヒドゥン” 開放されるまで 詳細は謎のままです これらのアチーブメントのタイプを 活用して― プレイ体験を向上させることを 考えてみます

プレイヤーがアチーブメントを コンプリートすると カードの上部に 画像が表示されます

この画像の見映えが すごくいいことが肝心です “The Coast”では 世界中の素晴らしい灯台の画像です レベル5で これをゲットしました パッセージ灯台は五大湖の マキナック島の近くにあるものです 目を引くもので― ゲームのルックアンドフィールを補完し― 特別な報酬をもらったと 達成感を感じられるものであるべきです プレイヤーのエンゲージメントを 維持するための 大きな一歩です

アートワーク内にはテキストを 使わないようにし― アチーブメントごとに カスタム画像をアップロードします ユニークなアチーブメントを獲得し 達成感を味わうのは楽しいものです

各アチーブメント用に 不透明画像を提供します 画像は システムで自動的に 円形に切り取られますので― 主要なコンテンツが 中央にくるようにします アチーブメント画像は表示のみですので フォーカスを与えることはできません アチーブメントの順序を ゲームプレイの進捗に合わせて決めます ゲームにつき最大100個の アチーブメントを設定できます 提供する個数は 良く考えて選ぶようにします ゲームを少し難しくするのに ちょうどいい数だけ使うとよいです 報酬を獲得したことを実感できます ゲームのバージョン1で 100個全部を提供するよりも― 続編で提供する余地があったほうが プレイヤーに戻ってきてもらいやすくなります アチーブメント画像について 考慮すべきルールがあります JPEG TIFF または PNGファイルであること 1xでは 512x512ピクセル 2xでは 1024x1024ピクセル 72DPI以上 色空間はsRGBです

アチーブメントごとに タイトルと― 説明テキストを 含める必要があります なるべく 簡潔で明瞭な表現で― アチーブメントの獲得方法が 一目でわかるようにします

アチーブメントカードには タイトルと説明で 各２行 表示されますので はみ出さないよう― テキストは30文字以内に 収めるようにして― どのデバイスでも 機能するようにします タイトルは 語頭を大文字で 説明文は大文字と小文字を使い― すべて大文字にするのは避けます コピーの仕上げに― アチーブメントをコンプリートしたとき用の 別の説明文を含めます コピーはすべて 国や地域に応じて ローカライズします

また ゲーム内のアチーブメント通知を 表示して― プレイヤーが即時に 達成感を味わえるようにもできます ゲームの中で こうした工夫をすることを 強くお勧めします タイミングを計り まさにコンプリートの瞬間に表示します この“The Coast”では レベルをクリアした瞬間です もっと直接アクセス できるようにするために― Game Centerのアチーブメントセクションへの カスタムリンクを提供できます イコノグラフィを使う場合は こちらの― カード式のものを 使用してください ゲームのUIに合わせて スタイルを変更できますが― 形状は改変しないでください

また 呼び方に一貫性を 持たせるため― 用語は“アチーブメント”とし トロフィーとか アワードなどの用語は― 使用しないでください 以上が 新しいアチーブメントの 体験です まとめましょう ゲームに合わせて アチーブメントタイプを使用します ユニークで目を引く 画像をデザインします 説明は簡潔明瞭に ゲーム内の通知を取り入れて 即時に報酬を得られるようにします お返しします ジョー ありがとう マイケル Dashboardの次のセクションは ゲームのリーダーボードです

友達と対戦するよう プレイヤーに促すのに最適です そして もっとプレイして もらうためにも このセクションをタップすると ゲーム内の― すべてのリーダーボードが 表示されます ゲームプレイの主要な構造を 最も良く表すように リーダーボードを― 作成することをお勧めします ゲームの特定のスコアに 紐付けることができます たとえば 進んだ距離の長さ― または 集めたコインの総数などです あるいは “The Coast”のように― 各リーダーボードを ゲーム内の 特定の地域に紐付けます

最初のリーダーボードを見てみましょう “クレーター・レイク”です リーダーボードのイメージを デザインするとき― ユニークな目を引く アートワークを提供し― 一目で認識できるようにします リーダーボードごとに異なる アートワークを使用し― プレイヤーが確実に 区別できるようにします また リーダーボード同士を 並べたときの見え方を考慮し― セットとして相互補完的に 感じられるようにします

リーダーボード画像の仕様です 画像は JPEG TIFF またはPNGファイル 1xでは 512x512ピクセル 2xでは 1024x1024ピクセル 72DPI以上 色空間はsRGBです tvOSでは リーダーボードのアスペクト比は 16:9です フォーカス可能で 1層から3層までの マルチレイヤ画像をサポートし― 視差効果を提供します 視差にフォーカスがあるとき 一部のレイヤのエッジ周辺のコンテンツが― 切り取られたり はっきり表示されないことがあります 画像のスケールや 移動によるものです 主要なコンテンツは 常に表示されるよう― エッジ付近に 配置しないでください

tvOSのリーダーボード画像は アップロード仕様が異なります 画像はPNGファイル 1xでは 659x371ピクセル 2xでは 1318x742ピクセル 72DPI以上 色空間はsRGBです tvOS用の フォーカス可能な レイヤ画像を― デザインする方法の詳細は― “Human Interface Guidelines”に 載っています はみ出さずにリーダーボードに 表示できるのは 最大２行です リーダーボードのタイトルを 30文字以内に収めることをお勧めします すべてのデバイスと アクセシビリティ設定で― 適切に機能します リーダーボードのタイトルは 語頭を大文字にし― すべて大文字にするのは 避けてください

どれかをタップすると そのDashboardのスコアが開きます Dashboardの新しいデザインでは 友達 つまり― 最も良く対戦する相手に 焦点を合わせています そういえば マイケル さっきは惜しかったね リーダーボードからの情報を 直接ゲームに埋め込んで― 重要なシーンで プレイヤーが 見られるようにできます たとえば あるレベルを開始する前に― 自分の順位を見たり― 最後で 友達の最高得点を 超えたかを見たりできます

Game Centerの技術セッションで リーダーボードのデータを― ゲームに埋め込む方法を説明しています “Tap into Game Center” Game Centerのリーダーボードセクションに 直接リンクすることもできます または 特定のリーダーボードに 直接リンクもできます

その場合は 私たちが提供するアイコンを使用してください ゲームのUIに合うように スタイルを変更できますが― 形状は改変しないでください

アイコンにテキストを付ける場合は 正しい用語― “リーダーボード”を使用し ランキングとか スコアなどの用語は使用しないでください

以上が リーダーボードです 今ご説明したことのまとめです ユニークな目を引くアートワークを リーダーボードごとにデザインしてください tvOSでは カスタム16:9 レイヤアートワークが必要です 説明は 簡潔明瞭にしてください オプションで リーダーボードのデータを ゲームに埋め込めます 直接リンクを特定のリーダーボードに 提供することもできます マイケルにお返しします マルチプレイヤーについて 触れておきます

Game Centerでは 堅牢なマルチプレイヤー機能を 簡単に― リアルタイム対戦とターン制の ゲームに活用できます “マルチプレイヤー” 分かりやすく マルチプレイヤーロビーを 開くボタンを用意するだけです

新しいデザインのロビーでは シンプルで簡単に― ゲームを始められます ロビーを開くときに― バックグラウンドの動きの 激しいアニメーションを一時停止して― 友達を招待できるようにします 追加をタップすると プレイヤーの選択が開きます

ここから 近くのプレイヤー 友達― 最近のプレイヤーと 連絡先を表示できます プレイヤーをタップして ロビーに追加します 準備ができたら “招待して開始”をタップします また UIを使わずに マルチプレイヤー機能を― ゲームに直接構築して― 実装することも可能です 詳細は 技術セッションを 視聴してください お返しします ジョー ありがとう マイケル では 最後のセクションです “App Store” Game CenterはApp Storeに 統合されるようになっています ストアを訪れると Game Centerプロフィールにアクセスして― アチーブメントを見たり 友達を追加したり― 友達がプレイしているゲームを ブラウズしたりできます

Appアイコンに 友達のアバターが表示され― ゲームのタブで目立つようになります

また ゲームの製品ページで プレイ中の友達がハイライトされます ページの上部に 友達が表示され― その下に 詳細も表示されます すべて ゲームをGame Centerに 統合するだけで有効になり― App Storeで注目を集める チャンスが生まれます これで終了です マイケルにお返しして 全体をまとめてもらいましょう ありがとう ジョー 今回の内容は 新しいGame Center体験でした ゲーム内のハイライトからGame Centerに アクセスする新しい方法― 新デザインのDashboard― 美しい コレクション方式の アチーブメント― 魅力的なリーダーボード そのほか 盛りだくさんでした 今回お話しした内容について 詳細は― “Human Interface Guidelines”を ご覧ください 皆さんがGame Centerを どう使うか楽しみです 皆さんのデザインしたゲームを 待っていますよ ありがとうございました ありがとうございました