【Unity講座_4時限目】ゲーム背景用パネルの作成と背景画像の設定〜ギルド画面編〜

Unity講座

ここからは実際にUnityを操作してギルド画面を作っていきましょう。前回(3時限目)の最後に掲載したイメージと照らし合わせながら進めていくと、より理解しやすいと思います。

画面全体の背景となるパネルの作成

STEP1:編集画面への移動

画面の編集を行うため、下図のようにSceneタブを選択します。

 

Scene画面とGame画面はざっくりいうと下記の様な違いがあります。
Game画面:実際にゲームとして再生した時にどの様に写るかを示す。
Scene画面:編集用の画面で画面の部品等を移動させたりすることができる。

 

 

STEP2:背景パネルの作成

次に画面全体の背景となるパネルを作りましょう。この作業をしておくことで、他のUI部品(テキストやボタン等)を配置させるのが楽になります

パネルを作るには下に示すように、ヒエラルキーウィンド上で右クリックを押し、UI→Panelを選択します。

これでパネルはできたのですが、下の図の様に画面の位置とパネルの位置がズレています。

そこで次は画面の位置と作成したパネルの位置を合わせます。

STEP3:パネルの位置と大きさを画面に合わせる

下に示すようにヒエラルキーウィンドでCanvasを選択し、インスペクターウィンド上のRenderModeをScreenSpace-Cameraに変更します。

次にヒエラルキーウィンドでCanvasを選択した状態のままMain Cameraを左クリックし、それをインスペクターウィンドのRenderCameraの部分にドラッグ&ドロップします。(下図参照)

結果として画面中央の画面が下図のようになっていれば成功です。

STEP4:パネルの位置情報(RectTransform)の変更

次はPanelを選択し、インスペクターウィンドのRectTransform左上の四角を左クリックし、アンカーをmiddle-centerに変更しましょう。(下図参照)

 

こうすることでPanelが画面中央をからPosX,Y,ZだけずれたWidth(幅),Height(高さ)を持つパネルになります。このパネルは画面からずらす必要がないため、X,Y,Zは0のままにしておきます。

STEP5:Panelの名前変更

最後にパネルの名前を変えておきます。必ずしも変える必要はないのですが、Panel等よく使うものは同じ名前の部品があると分かりにくくなるので変更しておいた方が混乱しなくていいと思います。

今回はBackGroundPanelという名前に変更します

復習になりますが、名前の変更はPanelを選択した状態でEnterキーを行うか、右クリック→Renameを選択することできます。

背景画像の設定

次に画面の背景画像を設定してみましょう。

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フォルダを作成し、下の図のように先ほどの画像を格納させておきます。

 

Resourcesフォルダを作るのはResources.Load メソッドを利用することで、その中にあるImageファイルやCSVファイルにスクリプトを使ってアクセスできるためです。但し、他にも良い方法もあるようですので、興味のある方はご自分で調べてみて下さい。

 

さて少し長くなってしまいましたが、今回はここまでとしたいと思います。皆さんお疲れ様でした。

次回はギルド画面にUI部品を配置していきましょう。

以上。

 

 

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

スポンサーリンク
HelloAnotherWorld
HelloAnotherWorld
¥120
posted withアプリーチ
Unity講座
ソフィーのUnity講座

コメント