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

Unity5(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity開発】uGUIのImageの使い方【ひよこエッセンス】

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.1.1f1 Personal(2015年6月)
f:id:hiyotama:20150624205139p:plain


ひよこエッセンスの時間です〜

今回はuGUIのImageについて解説していきたいと思います〜

uGUIのImageまとめ


①Image画像を表示してみる
まずは適当なpng画像をImportしましょう〜適当な画像が無い方は、下の画像をお使い下さい〜

f:id:hiyotama:20150624205139p:plain
hiyoko.png (128px * 128px)


画像をImportしたら、画像のTexture TypeをSprite (2D and UI)に変更します〜


f:id:hiyotama:20150624205540p:plain
Texture TypeをSprite (2D and UI)に変更


それではまずは、Imageオブジェクトを作成していきましょう〜HierarchyビューのCreate > UI > Imageを選択します〜


f:id:hiyotama:20150624205735p:plain


ImageオブジェクトのImageコンポーネントにあるSource Imageに、先ほどImportしたひよこの画像を指定すると、ゲーム画面にImage画像が表示されます〜


f:id:hiyotama:20150624205911p:plain
ドラッグ&ドロップ!


f:id:hiyotama:20150624205959p:plain
画面に表示されました


②Imageコンポーネントの設定
それではRectTransformでGUIの位置や大きさ等を設定できるのですが、そちらは以下エッセンスにお任せしようと思います〜

hiyotama.hatenablog.com


ここではImageコンポーネントの解説を致します〜

f:id:hiyotama:20150624210312p:plain
Imageコンポーネント


まずは先ほどSprite画像をドラッグ&ドロップしたSource Imageですが、こちらに指定した画像をゲーム画面に表示します〜


続いてColorです〜Colorで指定した色をSprite画像につけることができ、既に付いている色との中間色になります〜

f:id:hiyotama:20150624210529p:plain
水色にすると


f:id:hiyotama:20150624210555p:plain
緑っぽいひよこになる


続いてMaterialですが、ProjectビューからCreate > Materialで作成したMaterialを、画像に指定できます〜

f:id:hiyotama:20150624210755p:plain


Materialについては、また別途エッセンスを用意できればと思います〜


続いてImage Typeにいきたいと思います〜が、Image Typeはかなり長くなりそうなので、こちらも別途エッセンスを用意させて頂きます〜

hiyotama.hatenablog.com



続いてPreserve Aspectです〜画像のWidthとHeightを変更した時、引き伸ばされて形を崩したくない時にチェックを入れます〜

例えば先ほどのようにWidthを300、Heightを100にしても、Preserve Aspectにチェックが入っていると・・・


f:id:hiyotama:20150624212941p:plain
100 * 100で表示


このように、小さいほうの長さに合わせて画像のアスペクト比を保持してくれます〜この状態でHeightを500にしても・・・


f:id:hiyotama:20150624213107p:plain
300 * 300で表示


小さいほうのWidthに合わしてくれるので、画像が崩れることはありません〜


最後にSet Native Sizeですが、こちらのボタンを押すとWidthとHeightが元画像のサイズになります〜こちらの画像は128px * 128pxなので、Width: 128、Height: 128になります〜


以上、uGUIのImageまとめに関するひよこエッセンスでした〜

ありがとうございました〜