今回はGUIを作成するためにuGUIの使い方について書いていきます。uGUIは難しくないわりにGUIで作成するものをほぼカバーできるのでかなり便利です。
まずは最低限の画像の配置とボタンを配置し、メソッドを起動するとことまでを書いていきます。
今回は例としてこのような画面を作成していきます。構成としては背景画像とボタン2つです。
画像を表示させる
まず背景画像を作成します。メニューのGameObjectからUIのImageを選択します。すると、HierarchyにCanvasとEventSystemというGameObjectが作成され、Canvasの中にImageが作成されます。EventSystemはあとでボタンを使うときに使用するので消さないようにしましょう。
Imageを作成すると白い板が作成されます。この白い板に画像を適用するのですが、画像を適用するまえに、使用する素材をuGUIで使えるように設定します。画像を読み込むとデフォルトの設定ではTextureとして読み込まれるので、Projectの中にある画像を選択し、InspectorからTexture TypeをSprite(2D and UI)にします。
そして、ImageのSource Imageに先ほど作成したSpriteを指定すると、白かった板に画像が表示されます。
しかし、画面全体に表示したい画像が一部しか表示されていないため、これを表示したい大きさにする必要があります。今回のような画面全体に表示したい場合、一番簡単な方法としてはAnchorsのMinをXとY両方0にし、MaxをXとY両方1にします。そしてPosX、PosY、Width、Heightを0にすると全画面に表示されます。
この設定にすると、画面がどの大きさになっても画面の端にそってスケーリングされます。しかし、このままだとサイズがまちまちなので、デザイン通りにボタンを配置するのが難しいです。
そこでCanvasのサイズを固定にしてしまうことでデザインの適用をしやすくします。そのための方法は、CanvasのInspectorにある、Canvas ScalerのUI Scale ModeをScale With Screen Sizeに変更し、Reference Resolutionに画面サイズを指定することで、Canvas上での配置が指定した解像度に基いて配置されるようになります。
ボタンを作成する
次にボタンを作っていきます。作成の仕方はImageと同じでメニューのUIからButtonを選択すると作成されます。作成するとボタンのImageとその子要素にボタンのテキストが作成されますが、今回テキストは使用しないので削除してしまいます。
先ほどと同じようにButtonのImageにSpriteにした画像を指定します。今回は画像を画面いっぱいにする必要はないので、素材の画像サイズと同じ大きさにします。
そしてボタンを配置する位置に指定しますが、uGUIはアンカーという考え方によって配置されます。最初に作成した時の設定では画面の中心が原点となっていて、そこからどれくらい離れるかを指定します。このどこの位置を原点とするのかは画面の解像度が異なった時に重要になってきます。
このような感じに配置してみました。
もうデザインと同じ見た目になりました。
ボタンにスクリプトを割り当てる
空のGameObjectでもいいので、ボタンを押した時に動作させるスクリプトがアタッチされたGameObjectを用意します。ボタン自身にアタッチしても構いません。
今回はボタンを押した時にSceneを変更するスクリプトを書きました。ちなみに呼び出すスクリプトはpublicである必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
using UnityEngine; using System.Collections; public class test : MonoBehaviour { public void loadARScene(){ Application.LoadLevel ("ar"); } public void loadCameraScene(){ Application.LoadLevel ("camera"); } } |
ではボタンを押した時にメソッドが呼ばれるように設定します。
ボタンのInspectorにあるButtonコンポーネントのOn Clickが最初はList is Emptyとなっているので、+を押してリストを追加します。追加するとこのようになります。
ここにスクリプトがアタッチされたGameObjectを指定します。そしてNo Functionとなっているドロップダウンメニューから、呼び出したいスクリプトのメソッドを指定すれば設定は完了です。
もう一つのボタンも同じように設定します。呼び出すメソッドは同じGameObjectのスクリプトに記載してあっても問題はありません。
これだけでマウスによるクリックでも、スマートフォンでタッチしたときでも反応してメソッドが呼び出されるようになります。
終わりに
今回はuGUIで画面とボタンを作成しました。特にuGUIのボタンはかなり便利なのでよく使うことになると思います。uGUIはスクロールビューなども作れますが、少し作り方が特殊なのでそのうち書いていこうかなと思います。
今回でUnityだけでできることが大体書き終わりました。次回からはiOSとAndroid向けに作るときのことを書いていこうと思います。
では、また。