読者です 読者をやめる 読者になる 読者になる

とあるプログラマの備忘録

都内某所に住むプログラマが自分用に備忘録を残すという趣旨のブログです。はてなダイアリーから移動しました!

Unity4.6 uGUI 入門 Canvas編

気づけばもう師走。。。

この数ヶ月でTwitterで知り合ったエンジニアさん達と飲んだり
子供が生まれたり
仕事の量が2倍になったり
楽園追放を見に行ったり忙しい日々を送っております。

さて、GTMFでお披露目されされていたuGUIが遂に正式版でリリースされたたようです。
前回ちょっと触った時はまだCBTだったのでおおっぴらにいえませんでしたが
ちょくちょく触って情報を外だしして行きたいです。

間違っていたりしたら教えてください。

まずは適当なシーンにcanvasを作る

見せてもらおうか新しいuGUIの威力を…。
という事で適当に作成します

f:id:raharu0425:20141209181758p:plain

Inspectorはこんな感じですね。

f:id:raharu0425:20141209181812p:plain

ふむふむ、これが噂のCanvasというものらしいです。
なんか枠ができあがりました。

f:id:raharu0425:20141209181926p:plain

Canvasに画像を追加してみる

UI > imageを作成して、
適当な背景画像をアタッチします。

f:id:raharu0425:20141209182009p:plain

画像の大きさはiOSの4sにあわせて640 x 960にしています。

f:id:raharu0425:20141209182145p:plain

大体予想してましたが、
さっきのcanvasの白い枠を大きく超えてしまっている見たいです。

f:id:raharu0425:20141209182216p:plain

レゾリューション対応どうすればいいの?

結構前にUnity界隈で有名な方が
ReferenceResolutionコンポーネント追加すればよろし!
と言っていたのですが、最新のバージョンには無い!

無い訳がないので代わりの物の名前がCanvasScalerになったようです。
なるほど。。。

CanvasScalerは最初からアタッチされているのであとは設定しろという事ですね
わかります!!

実際の設定

f:id:raharu0425:20141209182708p:plain

Canvasの設定をScreen Spaceに変更して
ReferenceResolutionに任意の解像度をセットします今回は640 x 960です。

MatchはWidthとHeightどっちにあわせるの?という事です
今回は横基準で合わせますがこれ0.5にセットすると縦、横中間比率で合わせてくれます(流石Unity)

動かしてみた


uGUICanvas - YouTube

とりあえず基本中の基本と思われるCanvasの使い方をやってみました。 ではでは良いお年を