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

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

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

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


スポンサーリンク

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


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


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

uGUIのRawImageまとめ

①ImageとRaw Imageの違い

以前にImageに関するエッセンスも書かさせて頂きました〜

hiyotama.hatenablog.com


ImageとRaw Imageの違いは何かというと、ImageはSprite画像限定でしたが、Raw ImageはSprite限定ということはなく、Texture画像も使えます〜


その代わり、Imageに比べて機能が制限されています〜具体的に言うとImage Typeを選ぶことができません〜
ImageTypeについてはこちらで解説しています〜


hiyotama.hatenablog.com


f:id:hiyotama:20150630180755p:plain
Image Typeが無い

②Raw Image解説

それではRaw Imageの解説をしていきます〜

まずはRaw Imageを作成しましょう〜HierarchyからCreate > UI > Raw Imageを選択します〜


f:id:hiyotama:20150630181506p:plain
Raw Image作成


何か適当な画像をProjectビューにインポートします〜


f:id:hiyotama:20150630182001p:plain
適当な画像


Importが完了したら、Texture TypeはTextureのままでいいので、Raw ImageのTextureにドラッグ&ドロップしてあげます〜


f:id:hiyotama:20150630182554p:plain
Texture Type: Texture


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


これでゲーム画面にRaw Imageが表示されました〜


f:id:hiyotama:20150630183112p:plain


Colorを変えると、色を変更することができます〜


f:id:hiyotama:20150630183210p:plain
赤くして、色を薄くしてみた


Colorと同じく、Materialを設定することもできます〜


続いてUV Rectです〜


まずはX,Yですが、これはOffsetの設定です〜Offsetは画像をズラして表示させたい時に設定します〜

試しにX,Y共に0.5にしてみましょう〜すると、


f:id:hiyotama:20150630183821p:plain
X: 0.5 Y: 0.5

このように画像が上下左右にズレ、四方に分割されました〜


次のW,HはWidthとHeightです〜
0.5にするとTextureが拡大されて半分だけ表示されます〜


f:id:hiyotama:20150630185143p:plain
X: 0.5 Y: 0.5


逆に2にすると、Textureを2つ並んで表示します〜


f:id:hiyotama:20150630185306p:plain
X: 2 Y: 2


どうしてもSprite画像を使えないという状況になったらRaw Imageを使ってみるといいかもしれません〜


以上、ひよこエッセンスでした〜

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