Google

2012年9月25日火曜日

Unityでコインゲー開発:アスペクト比

開封の儀以降、iPhone5の調整や開発に時間を取られてばかり。
お陰であまりUnity記事を書いてませんが、今回は画面比率(アスペクト)のお話です。

アスペクトとは簡単に言うと縦と横のドットサイズの比率のこと。
Unityでは実行時の画面サイズを以下のクラスから取得できます。

 Unity Screen

これが4:3だったり16:9だったりするのですが、Unityで何も考えないとこんな問題が出てきます。

 ・見せたくない場所が見えてしまう
 ・見せたい場所が半端に隠れてしまう
 ・画面が縦や横に間延びして見えてしまう

固定サイズのPCやWebならまだなんとかなります。
実機ではそうはいかず、Androidは間違いなく最も比率が混在するため、最も対策を考えなければならない環境というのが現状でしょう。

幸い、コインゲームはiOS系で先行販売方針だったので、以下の2種類で済みました。

 ・iPhone/touch系
 ・iPad系

現在はここにiPhone5の3種類が入ることになります。
もしXCodeネイティブで作成する場合、iPad用の画面は別途準備したりしますが、Unityだとそこまで考えてはくれません。
これにも色んな策があるのですが、今回ご紹介する手段がこちら。

  【カメラ比率固定方法】

UnityのカメラにはrectというRect構造体のメンバがあります。
これは書き込みも可能になっていて、ここを調整するというやり方です。
具体的なコードはこんな感じ。

using UnityEngine;
using System.Collections;
public class AspectUtility : MonoBehaviour {
// 縦横比です。インスペクタから修正します。
public float m_x_aspect = 4.0f;
public float m_y_aspect = 3.0f;
void Awake(){
// カメラを検索します。
Camera camera = GetComponent<Camera>();
// 指定された比率からサイズを出します。
Rect rect = calcAspect(m_x_aspect, m_y_aspect);
// カメラの比率を変更します。
camera.rect = rect;
}
// アスペクト比計算
public Rect calcAspect(float width, float height){
float target_aspect = width / height;
float window_aspect = (float)Screen.width / (float)Screen.height;
float scale_height = window_aspect / target_aspect;
Rect rect = new Rect(0.0f, 0.0f, 1.0f, 1.0f);
if(1.0f > scale_height){
rect.x = 0;
rect.y = (1.0f - scale_height) / 2.0f;
rect.width = 1.0f;
rect.height = scale_height;
}
else{
float scale_width = 1.0f / scale_height;
rect.x = (1.0f - scale_width) / 2.0f;
rect.y = 0.0f;
rect.width = scale_width;
rect.height = 1.0f;
}
return rect;
}
}


マジックナンバーとか入りまくってますが、サンプルなのでご勘弁を。
これはMain Cameraなど、カメラがついているGameObjectにヒモ付して使います。
比率情報はインスペクタから自由に変更して下さい。

起動時にカメラを探し、予め指定されたアスペクト比を元に計算し、現在の画面比率を強制的に変更するという仕組みです。
本来の想定と違う比率で起動した場合、比率から外れるエリアにはカメラが届かないため、真っ黒な領域が表示されることになります。

なお、起動中のUnityEditor画面サイズを変更した場合のケースには対応していません。
修正すれば可能ですが、そこは各自工夫して頑張ってください。

前回ポーズの際に使用したデモにこのスクリプトを追加したものを作成しました。
UnityEditor上ではあまり恩恵が無いとは思います。
実機に落とした際(iOSならiPad)にカメラ範囲の制限がされていることを確認できます。

FreeAspectなのにカメラ比率が変わっていることが確認できるかと。
比率から外れている領域は何もしていないのに真っ暗です。
上記ソースを含んだサンプルコードは以下からどうぞ。

  InstanceManageProject3.zip

次回は画面アスペクトのさらに先、絶対位置の変化に対応する話です。

0 件のコメント:

コメントを投稿