Appleプラットフォーム向けの高度なゲームのデザイン

こんにちは Design Evangelism Teamの Lindaです Appleプラットフォーム向けの ゲームを初めて開発するには 今が最適なタイミングです Appleのデスクトップデバイスや モバイルデバイスでは コンソール対応の 高度なゲームを処理することができます 統合ゲーミングプラットフォームにより ゲームは今や驚異的な グラフィックスとパフォーマンスを Mac iPad iPhoneで サポートできるようになりました これにより 皆さんのゲームをさらに多くの プレイヤーに届けることができます

また ヒューマンインターフェイス ガイドラインの 新しい「ゲーム向けのデザイン」 セクションや 最新バージョンの Game Porting Toolkitなど 開発プロセスをシンプルにして 時間を節約するための リソースが用意されています このツールキットについては詳しくは 「Port advanced games to Apple platforms」をご覧ください Mac iPad iPhone向けのゲーム開発が これまで以上に簡単になりました

このビデオでは Dylanと私から Appleプラットフォームで 素晴らしいプレイヤー体験を提供する ゲームのデザイン方法について説明します まず私から ゲームのインターフェイスを デバイスごとに調整する方法をお伝えします その後 Dylanがゲームの入力要素を デザインする方法を解説します まずは デバイスに応じた デザインから始めましょう 素晴らしいゲーム体験を提供するには ゲームのデフォルト設定 レイアウト テキスト コントロールが Appleデバイスでどのように感じられるかを よく考えることが重要です まず考慮すべきなのは プレイヤーができる限り早く ゲームプレイに 飛び込めるようにする方法です それは プレイヤーがゲームを デバイスにインストール する瞬間から始まります

通常 ハイエンドのゲームは 初期ダウンロード容量が大きくなります 想像してみてください ゲームがインストールされるのを ワクワクしながらじっと待ち さあ これでプレイできると思ったとき さらにダウンロードが必要だという メッセージが表示されたとしたら どうでしょうか おそらくそのプレイヤーが 初回起動時で期待していた 体験ではないでしょう 特にAppleプラットフォームの プレイヤーは アプリがすぐに使えることを 期待しています

インストールが完了するとすぐに プレイできるようにすることで 待ち時間を最小限に抑えられます

そのためには ゲームの初期ステージが 起動時にダウンロードされるようにします ゲームプレイの最初の15分程度を App Storeのダウンロードに 含めることを目指しましょう そこからバックグラウンドで 次のチャプターをロードし始めます

そうすればプレイヤーは ゲームの起動からプレイまで シームレスに移行できます バックグラウンドで追加のデータが ダウンロードされるのを 待つ必要がありません ダウンロードの進行状況は 表示しないようにしましょう データがまだ読み込み中であることを プレイヤーに知らせる必要はありません 起動時からゲームがプレイ可能だったように 感じてもらえればよいのです

プレイヤーが 未インストールのゲームエリアまで 進んだ場合は そこで初めて ゲームがまだ 完全にインストールされていないことを UIを通じて知らせます

その時点でダウンロードの 進行状況をどこかに示します ゲームプレイの邪魔をしない レベル選択画面などの 関連する場所が理想的です

また プレイヤーが 以前のチャプターやレベルに 戻れるようにすることも 検討するとよいでしょう 進行状況バーを見ながら ただ待っていなくてすみます

バックグラウンドで ゲームデータをダウンロードするため オンデマンドリソースや バックグラウンドアセットを利用できます いずれもAppleのフレームワークで アプリのインストール後に 追加のゲームデータを 取得できるようにするものです オンデマンドリソースは App Storeでホストされ バックグラウンドアセットは 自身のデータベースでホストされます これらの詳細は デベロッパ向けWebサイトで確認できます

アセットをどのように 読み込むかにかかわらず 最終的な目標は ゲームプレイとシームレスに融合し プレイヤーに意識させない インストール体験を実現することです Appleデバイスに最適な デフォルト設定を行うことも重要です

プレイヤーのAppleデバイスについては 様々な情報がすぐに得られます 例えば ハードウェアモデル 画面解像度 ペアリングされたアクセサリなどです これらはすべて ゲームを始める際に プレイヤー自身で最適化してもらう 必要がありません

プレイヤー向けのオプションを 自動的に設定すれば ゲームのオンボーディングが シンプルになります

例えば オンボーディングと設定で プレイヤーに関係しない選択肢を 排除することを検討します 例えば画面サイズや アスペクト比などは デバイス自体から取得できます

物理的なゲームコントローラを ユーザーに手動で設定してもらう代わりに Game Controllerフレームワークを使用して コントローラのペアリング状態を 自動的に検出し プロファイルを取得できます

これにより 起動時にプレイヤーの物理的なボタンを UIにマッピングできます

異なるプラットフォーム間で デフォルト設定を行う際は そのデバイスの性能に応じて ゲームの初期パフォーマンス設定を 調整してください 例えば 最上位モデルのMacでは iPhoneより高品質な デフォルト設定を選ぶことができます

特にモバイルプラットフォームでは プレイヤーはデバイスを 手に取ってすぐに使いたいと考えています そのため デスクトップの場合より 設定の粒度を 下げることができる機会を探りましょう

ここでは 事前に行う 多数の設定項目を1つにまとめ 質を優先するか パフォーマンスを優先するかを プレイヤーが選べるようにしています

適切なデフォルトを選ぶことで プレイヤーの手間が削減され すぐにゲームを楽しむことができます

優れたデフォルト設定を行ったら 次にゲームのレイアウトについて 各Appleデバイスに柔軟に 対応する方法を見ていきましょう 統一されたゲームプラットフォームにより ゲームを様々な画面サイズに 対応させて簡単に配信できます 適応型のゲームインターフェイスを 早期にデザインするよう計画しましょう 画面全体のデザイン時間を 削減するだけでなく 新しいデバイスがリリースされた際に ゲームの将来性を高める上でも役立ちます 最も簡単な方法は レイアウトが異なる アスペクト比に対応するようにすることです 同じプラットフォームでも デバイスモデルによって アスペクト比が異なる可能性があります

UIでこれを処理する方法の1つは デバイスに合わせてインターフェイスを スケールアップ/ダウンすることです

ただしこの場合 コントロールの位置が保証されません 手の届きにくい位置に表示されたり サイズが小さすぎたり 大きすぎたりする可能性があります さらに デバイス自体とずれて 見えてしまう場合もあります

代わりに UIレイアウトを 複数のセクションに分けます 各セクションを 画面の特定の辺に固定すれば

デバイスの形状が変わっても 各セクションを 一貫したサイズと 位置に保つことができます

これにより モバイルプレイヤーにとって快適な サイズのコントロールを維持しつつ

様々なデバイスで 画面スペースを有効に活用できます

この方法を使用すれば 見た目やバランスがよくないレイアウトを 快適で使いやすいレイアウトに 変えることができます 最適なレイアウトを実現できたら それがいつでも ユーザーに表示されるようにしましょう そのためには フルスクリーン向けのデザインを行います Mac iPad　iPhoneでフルスクリーンの ゲーム体験をデザインする場合 セーフエリアを念頭に置くことが重要です セーフエリアとは ハードウェアやソフトウェアの機能と 重なることなくUIを配置できる ディスプレイ領域です

iPadとiPhoneでは UIがデバイスの 丸い角に隠れないようにするために セーフエリアが役立ちます また システムのホームインジケータや iPhoneのDynamic Islandを 避けるうえでも役立ちます これらはいずれも コントロールの タップターゲットと重なる可能性があります

Macでは 上端からセーフエリアになっており デバイスの丸い角や カメラ周辺のエリアを 避けるために役立ちます

セーフエリア内でデザインすることで UIのすべての部分がプレイヤーに見えやすく アクセスしやすくなります

これを支援するため Appleのデザインリソースには セーフエリアテンプレートが 用意されています デベロッパ向けWebサイトから ダウンロードしてください

Xcode内のSimulatorアプリに ゲームをビルドしてみることもできます Simulatorでは 様々な デバイスモデル ベゼル 向きで ゲームのレイアウトをプレビューできます また UIが正しい場所に 配置されているかどうかも確認できます

セーフエリアはUIを 配置するためのガイドです ゲームの周囲に余白を 確保するためのものではありません

画面のピクセルを最大限に活用して ゲームの環境をデザインしてください

ゲームの重要なコンテンツが デバイスの比率で 切り取られる場合は まずカメラの調整を試み 異なるズームレベルや角度で そのコンテンツを収められるか どうかを確認します

場合によっては 映画のカットシーンのように レンダリング済みのコンテンツが 特定のアスペクト比に 設定されていることがあります

その場合 レターボックスを使用して すべての重要な詳細を 画面に収めることができます

レターボックスを フルスクリーンの体験のように 感じられるようにするには カスタムのゲームアートワークで そのエリアを埋めるか デバイスの物理的なハードウェアベゼルと 調和するように黒く塗ります

ただし レターボックスは 必要な場合にのみ使用してください 通常 画面全体を活用したほうが ゲームの臨場感が高まります

Appleデバイスでゲームの見栄えを 良くするための最後のポイントは UIの読みやすさです これが特に重要になるのは コンソールやPC向けのゲームを 画面が小さいAppleデバイスに ポーティングする場合です 大画面のテレビで見栄えが良かったものが 調整なしで小さなサイズに縮小されると 読みづらくなることがあります

ゲーム体験に大きな違いをもたらす 最小限の考慮事項の1つは テキストが十分に大きくて 読みやすいようにすることです デバイスが小さくなるほど テキストサイズを大きくしてください 各プラットフォームには 推奨されるデフォルトの文字サイズと 最小の文字サイズがあります iPhoneとiPadでは 文字サイズを 17ポイント以上に設定しましょう このサイズは本文テキストや 吹き出しに最適です あまり重要でない情報も 11ポイント未満にはしないでください プレイヤーが画面上の表示を 読めなくなるリスクがあります

Macでは 快適なデフォルトの 文字サイズは13ポイント以上です 最低でも10ポイントに設定すれば テキストは読み取れるはずです

プレイヤーがゲームのコピーを 読めるようにするだけでなく コントロールを快適に 操作できるようにすることも重要です

選択しやすいように コントロールを十分に大きくしてください これは特に モバイルプラットフォームの ゲームで重要になります プレイヤーはタッチ入力を使用するので 指で操作できるだけの大きさが必要です iPhoneとiPadでは デフォルトのタップターゲットサイズは 44×44ポイントを目指しましょう このサイズであれば ほとんどの人が指で簡単に コントロールを選択できます

重要性の低いUIの場合 28ポイントまで縮小できますが 正確に選択するのが難しくなる 可能性があることを覚えておきましょう プレーヤーがゲームプレイに 集中している場合は特に難しくなります

Macの場合 コントロールのヒットエリアが 28×28ポイント以上であれば マウスやトラックパッドなどの ポインタで無理なく選択できます

重要性または 使用頻度の低いコントロールの場合 サイズを20ポイントまで小さくできます

テキストとボタンの両方で 最小値ではなくデフォルト値を 目指しましょう より多くのプレイヤーに 快適なゲーム体験を提供できます

大きいサイズの文字を 小さい画面に収めるには どうすればよいのか迷ったときは モバイルユーザーはスクロールに 慣れていることを思い出してください スクロールビューを利用すれば より多くのUIを表示できます

例えば ゲームのすべての設定を 1画面に一度に表示する代わりに スクロールを利用すれば より多くの垂直スペースを活用できます これにより コントロールのサイズを 大きくするための余裕も得られます テキストでも同様です 情報を表示しきれない場合 文字サイズを小さくするのではなく スクロールビューを使用してください

プレイヤーが説明を読んだり コントロールを操作したりできるか 不安な場合は 実際のデバイスで テストすることをお勧めします 自分で体験することで ゲームのUIがどのように表示され どのように動作するかを 正確に把握できます さらに できるだけ多くの テスターを使って レイアウトを試してみるとよいでしょう そうすれば どのハードウェアでプレイしても プレイヤーが快適に感じると 自信を持つことができます さて ここまで ゲームプレイのスムーズな開始 柔軟なレイアウト UIの読みやすさなど Appleデバイス向けデザインの ベストプラクティスを紹介してきました 次はDylanにバトンを渡して 入力方法について話してもらいましょう

ありがとう Linda！ こんにちは AppleデザインチームのDylanです 今回は Appleプラットフォームに ゲームの入力スキームを 適応させる方法についてお話しします 各入力方法に関する 考慮事項を説明し 移動とカメラを適応させたり コントロールを直感的に配置したり ゲームプレイに応じて反応させたり フィードバックを提供したりして 最適なタッチコントロールを デザインする方法について詳しく説明します まずはAppleプラットフォームで 利用可能な 様々な入力方法を見ていきましょう キーボード マウス ゲームコントローラなどの一般的な入力が 包括的にサポートされているため ゲームをAppleプラットフォームに ポーティングするのは簡単です 他のプラットフォームで使用している コントロールスキームを iPhone、iPad、Macに ほぼ直接移行することができますが いくつか考慮すべき点があります まずAppleでは 他のプラットフォームより 幅広いコントローラをサポートしており これらのコントロールにはそれぞれ異なる グリフが印字されています

デザインでこれに対応するには SF Symbolsアプリを使用します これらのグリフや その他多数のグリフの 膨大なライブラリを提供するものです ただし これらのアートを ゲームで直接使用するのではなく GameControllerフレームワークを 使用して コントローラ用の 適切なシンボルを取得します これにより 新しいコントローラや 再マッピングされた コントロールにも対応できるようになります キーボードサポートを実装する場合 Apple製キーボードの修飾キーは 一般的なPCキーボードとは 配置が異なるため コントロールマッピングが 快適かどうかを確認し 必要に応じて調整してください

マウス キーボード コントローラのサポートに加えて Appleは タッチファーストプラットフォームでも ハイエンドのゲームをサポートしています 一部のプレイヤーはiPhoneやiPadで コントローラを使用して ゲームをプレイするかもしれませんが ほとんどはコントローラを利用しません ゲームのリーチを最大化し 外出先でプレイしたいユーザーに 素晴らしい体験を提供するため カスタムタッチコントロールを デザインすることができます タッチ操作のデザインは コントローラ用とは少し異なります 従来 ゲーム内にはコントローラの静的な 入力に反応するための 豊富なデザインスペースがありました

しかしタッチスクリーンでは 入力面が出力面も兼ねています ゲームをデザインすることは 入力もデザインすることを意味します タッチコントロールは動的であり ゲーム自体に基づいて変化するからです ここに iPhone用に コンソールコントロールを 単純にポーティングしたゲームがあります 現在は 画面上に コントロールが散乱しており コンテンツが隠され 快適かつ正確に ボタンを押すことが難しくなっています このコントロールスキームを見直し タッチ入力にどのように 適応させればよいかを見ていきましょう まず 移動とカメラコントロールを 物理的なサムスティックから タッチに適応させる方法を紹介します 1人称または3人称視点のゲームの場合 物理的な左サムスティックコントロールを バーチャルに代替するものを作成します タッチスクリーンの動的な性質により 使用されていないときに このコントロールを隠して ゲームを妨げないようにすることができます

通常 サムスティックでは 物理的なサイズが固定されますが タッチではその制約に縛られません プレイヤーは触覚コントロールに 対する手の位置を 物理的に感じることができないため 入力エリアを できるだけ広くすることが重要です

このゲームでは コントローラの サムスティックを押してスプリントしますが バーチャルサムスティックでは それができません この機能のために ボタンを作成することはできますが 非常に煩わしく 切り替えるために 移動を停止する必要があります

代わりに タッチサーフェスの 広い動的範囲を利用して 追加のボタンを使用せずに バーチャルサムスティックに スプリント機能を 直接組み込みます

カメラコントロールには 通常 右サムスティックを使用します 別のバーチャルサムスティックを使用した コントローラ入力の タッチへの切り替えも可能ですが これではタッチスクリーンを 最大限に活用していません

代わりに 直接タッチ入力を使用して カメラをパンします 指を左 右 上 下に ドラッグすると カメラの位置を直接 操作していることに気づくでしょう これにより ジョイスティックよりも マウス入力に似た 高速で正確な移動が 可能になります 移動について述べたように このコントロールの入力エリアは できるだけ広くする必要があります

上から見下ろす視点や アイソメトリック視点のゲームでは いくつかの異なる考慮事項があります バーチャルサムスティックが 移動に十分である場合もありますが 移動をタップ操作可能にすることも 検討してください パンによるカメラ移動は 問題なく移行できますが 大きな距離を迅速に移動するための 慣性を追加し ピンチ操作でズームイン/ズームアウト できるようにすることも可能です これらの操作はiOSユーザーには 馴染みのあるものです マップなど システム全体で 使われているからです 基本的な移動とカメラの機能の次は ゲームの他のアクションのコントロールを 配置する方法について説明します Lindaが説明したように セーフエリアを考慮し 画面の端にコントロールを配置することは 避ける必要があります また 移動やカメラ入力が 予想されるエリアに コントロールを配置するのも避けたいですし 当然 キャラクターを 隠さないようにしたいので ディスプレイの中央にも コントロールを配置しません

これにより 頻繁に使用する 重要なアクションの配置に最適な 親指の周りの領域と メニューボタンのように 使用頻度の低い コントロールの配置に適した 画面上部の領域が残ります プレイヤーがゲームを2本の親指だけで プレイする可能性が高いため 同時に使用する必要がある コントロールを考慮し それらを適切な側に 配置する必要があります コントローラでは 左トリガーやL2ボタンを使用して カメラをズームして照準を合わせ R2で照準アビリティを発動する 一般的なパターンがあります このコントロールスキームは そのままではタッチにうまく移行できません 照準を合わせながら移動したり R2アクションを使用しながら 照準を合わせたりできません これらのコントロールを入れ替えることで 右親指でズームと照準を同時に行い 左親指で移動や発射ができます

これでコントロールが適切に配置されました タッチスクリーンでのみ可能な 新しい動的な動作を加えることで さらに向上させることができます タッチファーストプラットフォームで ゲームの操作性を高めるための 簡単なガイドラインを用意しています まずは静的なコントローラボタンの グリフを表示する代わりに コントロールのアクションを より適切に表現する グリフを使用するとよいでしょう コンテキストに基づいて コントロールが動作を変更する場合 そのシンボルを適宜更新する必要があります 重要なのは 利用できない または利用しないアクションを 完全に削除して 画面が散らからないようにすることです

このゲームに適用すると 標準のコンソールボタンのグリフを 各コントロールの説明的なグリフに置き換え 照準時にのみ利用可能な発射ボタンなど 利用しないコントロールを 完全に削除します

プレイヤーが照準を合わせ始めたら 表示されるコントロールを更新し 発射ボタンを表示して 他のすべてを非表示にします

ゲームの状態に関する情報を コントロールに反映することもできます ここでは 発射ボタンを使用して 再び発射できるようになるまでの状態を 視覚的に表しています

もちろん メニューを表示する際は コントローラUIを完全に非表示にします メニューがタッチに 反応することが重要であり バーチャルコントローラがコンテンツを覆うと メニューのナビゲーションが煩雑になります これでゲームのコントロールスキームを 完全にタッチに適応させました しかし 1つ重要な要素が欠けています フィードバックです タッチスクリーンには物理的なコントロールの 触覚フィードバックがないため 他の方法でフィードバックを 提供する必要があります タッチコントロールを作成する際は プレス状態を持たせることが非常に重要です プレス状態は ボタンを押下したときの 確信をプレイヤーに与えます これがないと コントロールの反応が鈍く感じられます 押下されたボタンを暗くしたり ハイライトしたりする方法もありますが スピーディーなゲームでは コントロールの境界外に グローエフェクトなどの 視覚効果を追加してみましょう これにより 指がボタンを覆っている状態でも フィードバックを提供できます また これらのエフェクトを ゲームの視覚スタイルに合わせて テーマ化することもできます サウンドと触覚フィードバックも 優れたフィードバックの形であり 単純なボタンの押下感を超える フィードバックを提供することができます タッチダウン/タッチアップ時に 微妙な触覚フィードバックを加え 反応性を感じさせるとともに コントロールが行うアクションに対して サウンドや触覚フィードバックを デザインできます これで フィードバックを 組み込んだコントロールが完成し タッチスクリーンの利点を最大限に活用した コントロールスキームを作成できました

入力に関する Appleの推奨事項について詳しくは ヒューマンインターフェイスガイドラインの 「入力」セクションにある 「ゲームコントロール」をご覧ください ここではLindaと私から Appleデバイス向けの デザインや入力のデザインなど 様々な内容を取り上げました このガイダンスを通じて プレイヤーが 魅力的なゲームプレイを すべてのAppleデバイスで 直感的に楽しめるようになり キーボード マウス コントローラまたは 新しくデザインした カスタムタッチ コントロールのどれを使っても 快適にプレイできるようになることを 願っています Appleプラットフォームへのゲームの ポーティングに関する技術的な詳細は 「Port advanced games to Apple platforms」をご覧ください ご視聴ありがとうございます