スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --年--月--日 --:--:-- : スポンサー広告 ]

【Unity】 NGUI(3.x)でUI表示+3Dも扱おう ② - Spriteの表示とピクセル等倍表示対応

NGUIをとにかく扱ってみましょうな記事その②、表示の基本編。



スプライトを表示する

前回の記事ではNGUI(v3.0.8)をインポートして、テクスチャからアトラスを作成した。

そのアトラスを使って何かUIを表示するには、NGUIでは一番スタンダードなものとしてSpriteがある。
とりあえず表示してみよう。

まずAtlasMakerからTrumpアトラスを選択した状態で、
その中にある c01 という名前のスプライトを選択。




その状態で、NGUI→Create→Spriteを選択すると、
画面にトランプのスプライトが表示される。




これだけで表示は完了だ。

アトラスさえ作ってしまえば、こうしてアトラスから表示したいスプライトを選択し
NGUI→Create→Spriteを選択するだけで表示出来る。




ピクセル等倍にする

ひとまず表示だけについてはここで置いておいて、
このNGUIのスプライトをiPhoneやAndroidの実機端末で表示する事を考えて、
もっと基本的な事の設定をしよう。


エディタ上でGameビューをFree AspectにしながらUIの表示の調整を行うのは意味がほとんどない。
実機でどう見えるかを、出来ればこのエディタ上で分かるようにしたい。

それにはまずGameビューのアスペクトを何か1つの端末を想定して設定し、
作業を行っていく方法がある。


今回はiPhone4(解像度640x960、アスペクト比2:3)の縦持ちを想定して、
Unityのエディタ上とNGUIにその設定をする方法を紹介する。

まずUnityのプラットフォームをiOSにスイッチする。
次に、Gameビューのアスペクト設定をiPhone 4 Tallにする。




エディタの設定はこれだけだ。
次にNGUIの方の設定だが、まず最初に表示したトランプの画像を見た時に「大きすぎない?」と思ったことだろう。

(※個人の環境の違いによって見え方が必ずしもこうなるわけではないので、今回の場合)


このトランプのテクスチャのサイズは200x300、しかしエディタ上は640x960で設定しているはずなのに
明らかにトランプの表示が大きい。

つまりピクセル等倍で表示されていない、ということだ。


何故今こうなっているかというと、NGUIがそうしているからだ。
Hierarchyを見てみよう。




1つ1つ説明出来るほど詳しくはないが、NGUIはクセのある構造になっているので
まずそれに慣れる必要がある。

MainCameraしかない状態でスプライトを1個表示しただけで、
UIRootというオブジェクトの下にカメラとスプライトがぶら下がっている。


実はこのUIRootというのが、NGUIでのUI表示の全ての親となるオブジェクトだ。

実行中にNGUIで表示されているものは全て、これにぶら下がるシステムになっている。
そして必ずそのUIを表示する為のカメラを内包させる必要がある。

最初に行ったスプライトの表示で、そのUIRootとカメラがついでに生成されたのである。
なので2つ目以降のスプライト表示はこの状態でスプライトだけがUIRootの下に足されていく。


このUIRootの中にあるカメラはデフォルトでOrthographicになっている。
カメラの座標は現在(0,0,0)でZ軸の正を向いている状態。
これはとりあえずこのまま置いておく。


トランプの画像がピクセル等倍で表示されていないのは、
このUIRootのオブジェクトのScale値がNGUIによって調整されているのが要因だ。

InspectorのUIRootの項目に「Scaling Style」というのがある。
選べるのは

PixelPerfect
FixedSize
FixedSizeOnMobile

の3つ。

デフォルトはPixelPerfectが選択されており、Minimum HeightMaximum Heightの値が設定出来るようになっている。

Scaling Styleというのはあまり詳しくは知らないが、使ってみた感じ全体のUIのサイズを
最終的にどうするかというのを設定する
項目だ。

Pixel Perfectはフリーアスペクト時に向いている手法なのか分からないが、
今回の目的はただこちらの想定した解像度で、スプライトをピクセル等倍で出すことなのでスルーする。


調べてみると、FixedSizeにするとManual Heightという値が設定でき、
この値を実機の端末の解像度のタテのサイズとして見立てて、それに合わせてUIRootのスケール値を決めてくれる。

では今回はタテの解像度が960を想定しているので、この値に960を入れてみる。

すると見え方がこうなる。




分かりにくいかもしれないが、トランプの大きさがちゃんとピクセル等倍になっている。
不安であれば自分でサイズを確かめるテクスチャを用意して表示してみるといいだろう。(自分はやったw)

これでピクセル等倍表示の対応は完了だ。


次は座標系について簡単に説明。

座標系はカメラの設定に依存するが、この状態だと

・(0,0,0)が中心
・X軸は右向きが正
・Y軸は上向きが正

である。

確認の為に、表示したスプライトを左上に移動させてみよう。
SpriteのオブジェクトのTransformのPositionに、以下の値を入れてみる。




画面の中心が(0,0)なので、一番左上は(-320,480)となる。



ちゃんとトランプの中心点が画面左上に来ている。


これでこちらが指定した画面の解像度(正確には高さ)に対してピクセル等倍で、
指定した座標にUIを表示するという基本中の基本設定は完了だ。

NGUIは基本、設定した高さに合わせて色々とサイズを調整する、というのを以前に色んな記事で見かけたので、
そういうものだと割りきっておくといいと思う。

実際これで十分使いやすいし特に問題は今の所無い。




次回は

思った以上に記事が長くなってしまったので、他解像度対応については次回で。


エディタ上でアスペクト設定をiPhone5 Tall(9:16)にすると、
先ほど表示していた左上のトランプはこう見えてしまう。




iPhone5の解像度は640x1136(9:16)なので、iPhone4(640x960)より縦に伸びている。

それを無理矢理タテのサイズを960に固定して絵がピクセル等倍に見えるようにNGUI側で設定しているので
タテの座標系は合わせられている(480〜-480)が、その分横の幅が変わっている(この場合小さくなっている)のだ。

次回はこういった他解像度にしても、作成側が指定した解像度で同じような見え方にする方法を紹介する。

[ 2014年02月01日 19:50:56 : Unity ]

カレンダー

プルダウン 降順 昇順 年別

11月 | 2018年12月 | 01月
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -


全記事表示リンク

全ての記事を表示する

検索フォーム

リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。