セーフエリア・サンプル

  • Article

今回はセーフエリア サンプル(Safe Area)の紹介をします。

世の中には様々なTVがある

ゲームをプレイする人達のTV環境は実に様々なものがあります。

  • オーバースキャンとアンダースキャン
  • HDTVとSDTV
  • ワイドスクリーンと4:3
  • コンポーネント接続とコンポジット接続
  • 60cm(2フィート)と3m(10フィート)

オーバースキャンとセーフエリア

PCモニタなどのイメージ全体を表示するアンダースキャン方式に対して、HDTV、SDTVのどちらも、その多くがイメージ全体を表示することのできないオーバースキャン方式を採用しています。

イメージ全体を表示することができないので、ゲームでスクリーン座標の左上(0, 0)に文字を表示したりするとオーバースキャン方式のディスプレイでは文字が読めなくなってしまいます。

こういったオーバースキャン方式のディスプレイには以下の二つのタイプのセーフエリアがあります。

  • タイトルセーフエリア(80%の領域)
  • アクションセーフエリア(90%の領域)

タイトルセーフエリアには文字などの大事な情報を表示する領域で、下図の青い色の領域になります。アクションセーフエリアは殆どのディスプレイで表示される領域です数では緑色の枠内の領域になります。そして、赤い部分はディスプレイによっては全く表示されない領域です。

この画像は1280x720の画像なので、ゲームのインターフェースのデザインなどをするときにガイドラインとして使えるようになっています。

safearea

さて、タイトルセーフエリアに大事な情報を表示するからといって、Xbox 360、PCの両方で文字列をタイトルセーフエリアに描画した場合、Xbox 360上での見た目は良いとしても、PC上だと無駄にまわりのスペースが空いてしまいます。

そこで、XNA GS 3.0から追加されたViewport.TitleSafeAreaプロパティを使います。このプロパティPC上では元のビューポートのサイズと一緒になりますが、Xbox 360上ではビューポートの80%の領域、つまりタイトルセーフエリアを返します。

Safe Areaサンプル内にあるAlignedSpriteBatchクラスでは文字列をタイトルセーフエリアの右端、左上といった位置情報を指定して描画できるようになっています。

また、SafeAreaOverlayはコンポーネントになっていて、Xbox 360、デバッグの設定の時のみにタイトルセーフエリアの外側の領域を赤く表示するようになっています。

実際のゲーム開発の場合に気をつける事としては、

  • 3Dゲームの場合、操作するキャラクターが画面中央に描画しているかぎりはセーフエリアを気にすることがありません。
  • スクロールタイプの2Dゲームの場合、メインキャラクターはタイトルセーフエリア内に表示するようにします。サンプルでは猫を移動することで画面をスクロールするようになっていますが、猫は常にタイトルセーフエリア内にいます。
  • 通常は全ての画面全体を描画するべきですが、シューティングゲームのようなものだと、あらかじめアクションセーフエリア外の部分を黒く表示して自機の移動範囲を判りやすくするという方法もあります。
  • インターフェースの全てをタイトルセーフエリアに納める必要はない。下図はRoboGameをXbox 360上で実行したときの画面にセーフエリアを重ねた画像です。ゲームプレイにとって大事なプレイヤーのHPや武器の残弾数などの表示はタイトルセーフエリアに表示されていますが、ゲームプレイに支障のないインターフェースのデザイン的な部分はアクションセーフエリアに表示されています。

safearea-sample

解像度とアスペクト比

TVモニタの場合は標準解像度の640x480から、1080pの1980x1080まで様々な種類があり、またアスペクト比も16:9と4:3の二種類があります。

Xbox 360向けのゲームで様々な解像度とアスペクト比に対応するもっとも簡単な方法は720p、つまり1280x720を使うことです。Xbox 360には1/4～4倍の解像度にスケーリングしてくれるハードウェアがあるので、720pを設定するとどの解像度でも自動的にスケーリングしてくれます。また、720pのアスペクト比は16:9ですが、4:3のTVを使った場合にはTV上では以下のようにレターボックス表示になります。

4x3

モニタとの距離

ゲーム開発中、PCモニタとの距離は60センチ程度ですが、実際にリビングルームでゲームをする場合は3メートル程の距離があります。と、米国では言ってますが日本の住宅事情を考えると、もうちょっと短い距離になりそうですが、要点としては自室でPCモニタを見ている感覚でゲームを作ってしまうと、リビングルームでプレイする時に文字が小さくて読めないという問題が発生します。目安としては720pの解像度で20ポイント以上の大きさの文字列をつかうことです。

TVとの距離の他にも

  • 細い線を描画しない、特に水平線を書いた場合にインターレース方式のTVではちらつきが発生します。
  • 明るい赤い文字を使用しない。NTSCの場合、にじみの原因になります。
  • 大事な情報は色だけでなく、サイズや形を変えたり、アニメーションするようにする。これは赤と緑の色の区別がつきにくいという色覚障害が日本人では男性の20人に１人、女性は500人に１人という低くない割合でいるので、こういった配慮をすることでより多くの人達が快適に遊べるようになります。パズルゲームで色を合わせるといった場合は、色だけでなく模様や形状を変えると良いでしょう。

レイアウトに注意

3Dゲームのシーンを描画する時には気にする必要はあまりありませんが、メニュー画面などをデザインする時にはセーフエリアを意識してデザインする必要があります。特に、パズルゲームやテーブルゲームなどの固定画面型の2Dゲームの場合にはレイアウトがそのままゲームプレイに影響するので、画面一杯使ってレイアウトした結果、TV上ではゲームをプレイするのが不可能になってしまったなんて事にならないよう注意しましょう。

元ネタ:Safe Areaに含まれるドキュメントファイルから