2014年10月16日

ゲーム改善の本番 (13) | 対応デバイス追加!アンカーでいろんな画面サイズに対応しようぜ編!

さて、じゃいよいよ本気でいろんな画面サイズのデバイスへ対応していきますね。
元々iPhone5用に作ってたアプリを、ちょっと修正して3GSでも、ちゃんと表示される様にして行きますね。
ちなみに、今の状態はこんな感じ。
IMG_2473.PNG


オーソカメラの追加
そうそう。今回問題になってるのは2DのUIなんですよね。
で、てっきり普通のオーソカメラ(正投影っていうのかな?)を使ってたと思ってんだけど、普通にパースペクティブカメラだったんですよね。なんで、オーソカメラと、そのカメラの為のレイヤーを追加しますね。
layer2.png
まずレイヤー追加
カメラは、前にあった "GameObject_Camera" を Duplicate して、名前を "UI_Ortho_Camera" に変更。
NewCamera.png
Culling Mask をさっきの新規レイヤーだけに。
CameraSetting2.png
Projection を Orthographic に。
CameraSetting3.png
これでカメラ側の準備は完了かな?


アンカークラス(Anchor)の作成
で、キモになる部分!アンカーって、クサビを打つ。って感じですかね。
デバイスの画面サイズ毎にアンカーの位置を調整して、画面サイズに合う様にしてくれるコードです。
アンカーの位置は9カ所が基準になるんだけど、画面の、左上、真ん中上、右上、左真ん中、真ん中、右真ん中、左下、真ん中下、右下。
ここを基準にUIを作成する事で、ある程度どんな画面にも対応出来る様にしたいね♪ って考え方です。
ま、調整は必要な事もあるけどね。

で、コードはこんな感じ。
Screen Shot 2014-10-14 at 7.25.09 PM.png
6行目で、Unityエディターから基準にするカメラを設定出来る様に。
8行目からが、アンカー位置のenum。
で、コードの中心部。
Screen Shot 2014-10-14 at 7.25.30 PM.png
基本的に、ゲームが始まった後に画面サイズが変わる事は無いんで、Start() で全部やっちゃいます。
33行目で、画面のピクセルサイズをGet。
そのサイズから、アンカー位置に応じてアンカーのピクセル座標を計算。これが35〜51行目。
で、53〜55行目で、ピクセル座標をワールド座標に変換して、gameObject の位置として設定。
これで、このGameObjectの位置が確定するはず!


アンカーオブジェクトと子供を設定
じゃ、実際のアンカーを作って行きましょう!
ミサイルUIをくっ付ける為に、"HUD_Ortho_UI" っていう GameObject を"HUD_root" に作りました。
やる事は、この obj の以下のレイヤーを忘れずに "UI_2D_Ortho" にする事ぐらいかな?

で結局の所、Hierarchy ビューは、こんな感じになります。
Screen Shot 2014-10-14 at 7.40.05 PM.png
左側のミサイルUI3つは、左真ん中をアンカー(HUD_UI_Left_Anchor)として位置調整。
右側のミサイルUI3つは、右真ん中をアンカー(HUD_UI_Right_Anchor)として位置調整。

アンカー obj達の内容は、こんな感じ。
"YGAnchor" クラスがくっ付いてるだけ。
カメラと "Anchor Pos" の設定を忘れずに!
Anchor2.png
座標は起動後に変わっちゃうので何でもいいけど、エディタの設定に合ってる方が作り易いから、調整はほっといて、一度実行しちゃって、変更された値から、子供obj達の調整をしましょうね。

さ、これでどうかな?
Screen Shot 2014-10-14 at 7.51.39 PM.png

まずはいつもの iPhone5 から。
IMG_9257.PNG

オッケー!じゃ、3GSどうかな....?

IMG_2477.PNG

だいじょうぶ〜!!
同じビルドで、両方のデバイス対応できましたね♪

        にほんブログ村 ゲームブログ×PlayNCBlogへ
 初めてみました。よかったらクリックお願いね ♪

こんな本がそばにあると心強いよね♪
posted by やまけん at 11:39| Comment(0) | Unity | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: