Breaking News
Home / デザイン / UI/UX / 初心者必見!Unityの「uGUI」を使って実際にUIを制作してみよう!

初心者必見!Unityの「uGUI」を使って実際にUIを制作してみよう!


unity

Unity初心者の皆さん、UIの作成ってどうしてますか?

 

そもそもUnityに慣れるのに必死でUIに手が回っていなかったり

ゲームシステムの作成で精一杯でUIなんて全くやってないなんて人もいるかと思います。

ですが、UnityでのUI作成はuGUIという機能を使えば比較的簡単に作ることができます。

 

特にゲーム制作に関しては

UIを作るだけで一気にゲームっぽくなりモチベーションの向上にも繋がるため

この機会にUI制作をしてみましょう!

 

1. そもそもuGUIとは?

uGUIとは、Unity4.6からUnityの機能として標準搭載された、UIシステムです。

中にはSprite Rendererなどを使って必死でゲーム画面を作っている方もいるかと思いますが

このuGUIを使えばゲーム画面やアプリ画面を簡単かつ便利に作成することができます。

 

2. uGUIでタイトル画面を作ってみる

では、uGUIの良さをすぐに体感して頂くために、タイトル画面を作成してみましょう。

今回の記事は分量の関係で前後編の2回に分けさせて頂きます。

 

概要

仕様ツール : Unity Ver.5.4.1f1

使用言語 : C#(後編で使用)

所要時間 : 20分程度

難易度 : 初心者向け

 

始める前にタイトル画面の背景で使用する画像を用意してください。

フリー素材配布サイトなどを利用するのがおすすめです。

解像度は特に指定はしませんが、1280×720や1920×1080などがおすすめです。(筆者は1920×1200の画像を使用)

 

タイトル画面の背景画像配置

 

メインメニューからGameObject>UI>Imageを実行してください。

1

 

 

 

 

 

 

 

 

そうすると、Hierarchy上にCanvasとImage、そしてEventSystemが作成されます。

2

 

 

 

 

 

 

 

EventSystemは、uGUIを利用するために必要なものです。

EventSystemを消してしまうとuGUIが機能しなくなるため、必ず残しておいてください。

EventSystemに関してはそのままでもuGUIが機能するため、解説はしません。

 

Canvas、Imageの設定

用意した画像をUnityのProjectウィンドウにドラッグアンドドロップしてインポートしましょう。

Unityでは、画像をインポートするとTextureというタイプに変換されます。

ですが、ImageではTextureタイプの画像は使用できないのでSpriteというタイプに変換する必要があります。

さっきインポートした画像をクリックし、Inspector上のTexture TypeをSprite(2D and UI)にして、Applyをクリックしてください。

 

ではいよいよImageに当てはめていきます。

Hierarchy上のImageという項目をクリックし、Inspector上のImage>Source Imageに先ほどSpriteにした画像をアタッチしてください。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

あれ、画像が小っちゃくて歪んでますね・・・

6

 

 

 

 

 

 

 

でも大丈夫です。Imageの一番下にあるSet Native Sizeをクリックしてみてください。

そうすると、本来の解像度(この画像だと1920×1200)に合わせて画像が配置されます。

7

 

 

 

 

 

 

画像の歪みはなくなりましたが、今度は画面表示枠(白い枠線)をオーバーしてしまいました・・・

 

HierarchyのCanvasをクリックし、canvas Scaler>UI Scale ModeScale With Screen Sizeに変更して

そしてすぐ下にあるReference ResolutionのX、Yを用意した画像の解像度に合わせてください。

4

 

 

 

 

 

 

 

 

8

 

 

 

 

 

 

今度はしっかり枠に収まりました。

 

さらにCanvas Scalerを上記のように設定したことで

解像度の違う端末でプレイするときも、解像度に合わせてUIを崩さないように表示されるので安心です!

 

そうしたらGameビューを開き、アスペクト比を用意した画像に合わせるか、新規で画像の解像度を設定してみましょう。

そうすると、用意した画像がしっかりと表示されていると思います。

5

 

 

 

 

 

 

 

 

 

 

 

 

 

3.前編のまとめ

  • EventSystemは何も弄る必要はないが、削除してはいけない!
  • Imageで使用する画像は、Texture TypeをSpriteに変更する!
  • Imageに画像をアタッチしたら、Set Native Sizeをクリック!
  • CanvasのCanvas Scalerを変更すると、色々な解像度の端末に対応でき、画像が画面にフィット!

Imageなどについての他の機能などの解説は、機械があれば別の記事で書かせて頂きます。

 

後編では、タイトルロゴと、ゲームスタートボタンを作成し、実際にゲーム画面への遷移までを制作したいと思います。


About T.H

T.H
2年間3DCGを学び、今はUnityをメインに勉強しています。UI/UXデザインやプランニングにも興味があり、目下勉強中です。

Check Also

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-21-02-09

【やさしく解説!】CSSで多角形のボタンを作成する方法

webサイトなどを作るにあたっ …