はじめに
前回はなぜデザイナーがUnityをやるのかということと、Unityの導入から画面の見方まで紹介しました。
今回はUIデザインを実際にUnity上に実装する第一歩として、フォルダの生成から画像のインポートと配置について紹介していきます！
フォルダの生成
画像をはじめとした様々なアセットをインポート、または生成する場合、Assetsフォルダ以下であればどのフォルダに保存しても基本的には大丈夫です。
しかし、ある程度綺麗にフォルダを分けておくことが、後々の自分を助けることになるので、まず初めにフォルダの生成方法を覚えておきましょう。
以下の画像を参考にフォルダを生成することができます。
後からファイルやフォルダの名前を変更する場合は以下の手順を踏みます。
1. 変更したいフォルダ/ファイルを選択する
2. ダブルクリック、または「Enter」キーをクリックし変更可能状態にする
3. 名前を入力する
4. 「Enter」キーをクリックし確定する
フォルダ分けについて（業務レベル）
UnityにはResourcesフォルダという特殊な機能を持つフォルダが存在します、また特定のフォルダを参照して何かを行うこともあります。
そのため、業務においてはエンジニア（あるいはその責務を持つ人）にどのフォルダに何を入れていいかなどを確認することが大切です。
SceneとCanvas（業務レベル）
Scene
業務上、デザイナーが作ることはあまりないと思いますが、SceneとCanvasは理解しておくと良い概念なので、簡単に紹介します。
（とにかく手を動かしたいタイプの人は飛ばしてください。）
Sceneとは、ゲーム内の1つの場面、大きな括りの機能をまとめたものです。
UnityEditor（ゲームを作る際に開いているアプリケーション、画面）上の実行はHierarchy上で開かれているSceneに対して行われます。
実際にゲームとしてパッケージとなった状態の場合、最初に開くSceneを指定し、それ以外のSceneは別のSceneから開きますが、UnityEditor上では好きなSceneから開くことが可能です。
プロジェクトによって、どの規模でSceneを分けるかは異なりますが、たとえば簡単に以下のように分けることがあります。
- アウトゲーム用のScene
- ホーム画面やデッキ編成画面、ショップ画面など、ゲームのメインの遊びの部分以外全てが含まれるScene
- インゲーム用のScene
- ゲームのメインの遊びの部分が含まれるScene
Sceneを分けることで、以下のようなメリットとデメリットがあります。
メリット
- 画面・機能ごとに整理しやすくなる
- 読み込みにかかる時間やメモリ消費を抑えやすくなる
- Scene毎に試すことができるようになる
- 複数人で作業しやすい
デメリット
- 跨いだ参照・やりとりがややこしくなる
- シーン切り替えの演出・ローディング処理が増える
実際にSceneをどう分けるかなどは、エンジニアが考えるべきことなので、デザイナーの人が意識することはないと思いますが、もし業務でUnityを操作することになったら以下のようなことをエンジニアに確認することになると思います。
- どのSceneで作業すれば良いか
- 試すにはどのSceneを開いて実行すれば良いか
今回のような学習においても作るUIに毎にSceneを変えたくなることがあるかもしれないので、試しに以下の画像を参考にSceneを新しく作って開いてみましょう！
ここまでできたら実際に作ったSceneを開いてみましょう！
Projectから作成したScene（以下の画像ではTestScene）をクリックするとHierarchy上の一番上に開いたSceneの名前が表示されます。
これで、作成したシーンが開けました！
Canvas
Canvasとは、2DのUIの土台となるものです。
2DのUIをUnity上に実装する場合、Scene上にCanvasをおき、その子階層にUI要素を配置していくことになります。
Scene上に複数のCanvasを配置することやCanvasの中にCanvasを配置することも可能です。
うまく分けることで表示の優先度のコントロールやパフォーマンスの向上が見込めますが、基本的にエンジニアが考えるべきことなので業務でデザイナーが気にすることは少ないと思います。
また、Canvas自体の設定で複数のCanvasが重なった場合や3Dのオブジェクトと重なった場合の挙動を変更できますが、ここでは割愛します。
実際に作成する方法は次の節で紹介します！
画像表示
Canvasの生成
画像を配置するには土台となるCanvasが必要です。
以下のように作ることができます！
Canvasを作成すると、EventSystem
画像のインポートと表示
画像のインポートはとても簡単です。
ProjectでAssets以下の任意のフォルダを開き、そこに画像をドラッグ&ドロップするだけで完了します！
このままでも画像をUIとして表示することは可能ですが、UI上での操作の自由度を高めるため、以下のような設定を行い、画像のTexture TypeをSprite(2D and UI) に変更します。
画像のインポート設定と表示について（業務レベル）
ImageではなくRaw Imageを使うことで、画像をSprite(2D and UI) にせず、Defaultのままでも画像をゲーム内に表示することが可能です。
Raw Imageは様々な形式の画像を表示することが可能ですが、そのままではImageより機能が制限されています。
そのため、基本的にはImageを使うという認識で問題ありません。
また、インポート設定におけるTextureType以外の項目は画質やパフォーマンスに影響を与えるため、業務においてはエンジニアと相談して圧縮形式などを決めていく必要があります。
画像をUIとして表示するにはHierarchy上にImageというオブジェクトを置き画像を割り当てることでできます。
ただ、この状態でGameを確認すると、思っていた見た目になっていないことが多いと思います。
例えば、以下の画像は1920：1080の画像を取り込みましたが、正方形で表示されてしまっています。
それは、Gameの設定とImageの設定が適切ではないからです。
そこで、以下の画像のようにそれぞれを設定しなおします。
これで画像がインポートしたサイズで表示されるようになりました！
Gameで指定しているサイズより大きい画像を使うと、画像が見切れてしまいます。
画像のサイズやGameのサイズを考え直してみましょう。
オブジェクトコンポーネントの関係（業務レベル）
UnityではHierarchy上で見れる要素をオブジェクト（Object）と呼びます。そしてオブジェクトに機能を持たせるものをコンポーネント（Component）と呼びます。Imageもコンポーネントの1つであり、このようなコンポーネントをつけることでオブジェクトに色々な機能を持たせることができます。
上述のImageの生成方法では最初からImageコンポーネントがついているオブジェクトを生成しています。もし、Image以外のオブジェクトを作った場合でも、そのオブジェクトを選択しInspectorの「Add Component」をクリックしてImageコンポーネントをつけることでImageを表示することができます。
ただし、コンポーネント同士が競合することがあるので最初からコンポーネントのついたオブジェクトを生成することをおすすめします。
（基本的に自分でコードを書いて作ったコンポーネントは「Add Component」で追加することになります。）
Sceneの保存
Hierarchy上やInspector上で操作すると、以下の画像の用に、シーン名の横にアスタリスクが付きます。
この状態では保存されていないので、何か作業をおこなった後は「Command+S（Ctrl+S）」をクリックして保存しましょう。
まとめ
今回はフォルダの生成や、画像のインポート、配置まで紹介しました。
次回は画像などのオブジェクトの位置（レイアウト）を調整する方法を紹介します！