ここからは実際にUnityを操作してギルド画面を作っていきましょう。前回（３時限目）の最後に掲載したイメージと照らし合わせながら進めていくと、より理解しやすいと思います。
画面全体の背景となるパネルの作成
STEP1：編集画面への移動
画面の編集を行うため、下図のようにSceneタブを選択します。
Game画面：実際にゲームとして再生した時にどの様に写るかを示す。
Scene画面：編集用の画面で画面の部品等を移動させたりすることができる。
STEP2：背景パネルの作成
次に画面全体の背景となるパネルを作りましょう。この作業をしておくことで、他のUI部品（テキストやボタン等）を配置させるのが楽になります。
パネルを作るには下に示すように、ヒエラルキーウィンド上で右クリックを押し、UI→Panelを選択します。
これでパネルはできたのですが、下の図の様に画面の位置とパネルの位置がズレています。
そこで次は画面の位置と作成したパネルの位置を合わせます。
STEP3：パネルの位置と大きさを画面に合わせる
下に示すようにヒエラルキーウィンドでCanvasを選択し、インスペクターウィンド上のRenderModeをScreenSpace-Cameraに変更します。
次にヒエラルキーウィンドでCanvasを選択した状態のままMain Cameraを左クリックし、それをインスペクターウィンドのRenderCameraの部分にドラッグ＆ドロップします。（下図参照）
結果として画面中央の画面が下図のようになっていれば成功です。
STEP4：パネルの位置情報（RectTransform）の変更
次はPanelを選択し、インスペクターウィンドのRectTransform左上の四角を左クリックし、アンカーをmiddle-centerに変更しましょう。（下図参照）
STEP5：Panelの名前変更
最後にパネルの名前を変えておきます。必ずしも変える必要はないのですが、Panel等よく使うものは同じ名前の部品があると分かりにくくなるので変更しておいた方が混乱しなくていいと思います。
今回はBackGroundPanelという名前に変更します。
背景画像の設定
次に画面の背景画像を設定してみましょう。
STEP1：Imageオブジェクトの作成
まず、先ほど作成したBackGroundPanelを選択した状態で右クリックを押し、UI→Imageを選択します。（下図参照）
すると下のようにBackGroundPanelの一段下に字下げされた所にImageというオブジェクト（部品）ができます。(BackGroundPanelの子要素としてImageが生成される)
子要素と親要素については別の機会にまとめたいと思います。
STEP2：Imageオブジェクトのサイズ変更
Imageオブジェクトは背景画像を表示させるものなので、大きさも画面と同じにしましょう。
具体的には下の図のように、ヒエラルキーウィンドでImegeを選択した状態で、インスペクターウィンドRectTransformのWidth,Heightを画面サイズに合わせ、それぞれ1334,750に変更します。
STEP3：Imageオブジェクトの名前変更
上述のパネル同様、分かりやすい様にImageオブジェクトの名前を変更しましょう。今回は背景のイメージを表示させるのでBackGroundImageとしておきます。
STEP4：背景画像の取得と設定
いよいよ背景画像の設定です。今回は私のゲームでも使用させて頂いた無料素材提供サイトである「ぐったりにゃんこのホームページ」様のものを使用させていただきます。
URL:http://guttari8.sakura.ne.jp/intr002.html
素材をダウンロードしたらプロジェクトウィンドのAssetsフォルダへ画像ファイルをドラッグ＆ドロップし、画像を取り込みます。（下図参照）
最後にヒエラルキーウィンドのBackGroundImageを選択し、インスペクターウィンドのSourceImageの部分に先ほど取り込んだ画像をドラッグ＆ドロップしましょう。（下図参照）
これで背景画像が設定されたはずです。
STEP5：画像ファイルの保管フォルダを作成
画面作成とは関係ないのですが、画像ファイルをまとめるフォルダもここで作っておきましょう。
下に示すようにプロジェクトウィンドのAssetsフォルダを選択し、右クリック→Create→Folderを選択します。そして、そこでできたフォルダの名前をResourcesにしましょう。（これは固定にしておいて下さい）
さらにそのResourcesフォルダの中に同様の手順でImageフォルダを作成し、下の図のように先ほどの画像を格納させておきます。
さて少し長くなってしまいましたが、今回はここまでとしたいと思います。皆さんお疲れ様でした。
次回はギルド画面にUI部品を配置していきましょう。
以上。
コメント