今回のゲームではCanvas内にゲームオブジェクトを配置してゲームを製作していきますので、このCanvasがゲームのメインの製作場所となります。


　ゲーム画面に映る必要のあるゲームオブジェクト（ゲームの舞台背景、キャラ、エネミーなど）に関しては、ゲームの位置情報が Canvas ゲームオブジェクト内にある必要があります。
そのため、ほとんどのゲームオブジェクトに関しては Canvas ゲームオブジェクト内に設置します。

　ゲーム画面に映る必要のないゲームオブジェクト（画像などを持たず、データの管理だけを行うゲームオブジェクトなど）に関しては、ゲームの位置情報はヒエラルキー内のいずれの場所でも問題ありません。
そのため、これらの一部のゲームオブジェクトは、Canvas ゲームオブジェクト外に設置します。


　以上のことをふまえて、ゲーム製作を行っていきます。

---

　最初に、Directinal Light ゲームオブジェクトは不要ですので、もしもヒエラルキーにこのゲームオブジェクトがある場合には、こちらをヒエラルキーから削除してください。
(製作するプロジェクトの選択時に　２Ｄ を選択していれば最初からないと思います。)

　削除する方法は、ヒエラルキーにある Directiona lLight ゲームオブジェクトを選択している状態で右クリックをしてメニューを開き、Delete を選択します。
あるいは、選択している状態でキーボードの Delete ボタンを押すことでも削除できます。

---

　ヒエラルキー上の空いている場所(ゲームオブジェクトのない位置)でメニューを表示し（Windowは右マウスボタンをクリック）、
UI => Canvas を選択して Canvas ゲームオブジェクトを作成しましょう。ヒエラルキーに Canvas ゲームオブジェクトが作成されます。

　一緒に EventSystem も作成されます。このゲームオブジェクトはタップ感知などを行うものなので、削除しないでください。
これは Canvas ゲームオブジェクトと１セットで扱いますのでそのままでヒエラルキーにあっても問題ありません。


＜手順動画　Canvas ゲームオブジェクトの作成＞
https://gyazo.com/133fd5ee609e1137176318539a387004


ヒエラルキー画像



Canvas ゲームオブジェクト　インスペクター画像



　Canvas ゲームオブジェクトの Width(横幅)と Height(縦幅)は、設定してある Game ビューの解像度と同じ値で自動で作成されます。

　続いて、Canvas ゲームオブジェクトにアタッチされている各コンポーネントの確認と設定を行います。

---

　ヒエラルキーにある Canvas ゲームオブジェクトを選択(マウスの左ボタンをクリック)して、インスペクターに情報を表示させます。

　Unity のゲームオブジェクトには、最初は Transfrom コンポーネントしかアタッチされていません。ゲーム内での役割がない状態です。
そのゲームオブジェクトに対して、コンポーネント(スクリプト含む)をアタッチしていくことによって、そのゲームオブジェクトを形作って、役割を決定していきます。

　今回のこの Canvas ゲームオブジェクトには複数のコンポーネントがアタッチされており、それらによってこのゲームオブジェクトに Canvas としての振る舞いを与えています。
つまり、同じ種類のコンポーネントを別のゲームオブジェクトにアタッチすれば、そのゲームオブジェクトもまた Canvas としての振る舞いを得ることになります。

　そういった構造でゲームオブジェクトが作成されていることを覚えておいてください。

---

　まず最初に Canvas コンポーネントを確認して、Render Mode を ScreenSpace - Camera に変更します。

　すぐ下にアサインできる場所ができますので、こちらにヒエラルキー上にある Main Camera ゲームオブジェクトをドラッグアンドドロップしてアサインします。
この設定により MainCamera の映している画面がゲーム画面として利用されるようになります。
　アサインすると、Canvas ゲームオブジェクトの Transfrom の Position の値が自動的に変更されます。それで問題ありません。


アサイン手順動画（アサインはヒエラルキー上にあるゲームオブジェクトを指定します）
https://gyazo.com/81ccd648646961489098c8bb47556514


設定後のインスペクター画像

---

　続いて、同じく Canvas ゲームオブジェクトの持つ CanvasScaler コンポーネントを確認して、UI Scale Mode を Scale with Screen Size に変更します。
変更すると Reference Resolusion という設定が追加されますので、こちらに、Game ビューで使用している解像度と同じ大きさを指定します。
今回の教材では 1440 * 2880 の解像度で設定していますので、こちらも同じ数字に指定します。これは、ご自分の設定した解像度と同じにしてください。


設定後のインスペクター画像



Game ビューの解像度の設定(この解像度とCanvasの解像度を合わせる)



　また ScreenMathcMode を Expand に変更しておきます。
この設定にしておくことで Canvas の設定を水平・垂直に拡大してくれますので、スマホの解像度とCanvasのサイズを自動的に適宜なサイズに合わせてくれます。

---

　以上でこのゲームオブジェクトの設定は完了です。
Canvas ゲームオブジェクトの Graphic Raycaster コンポーネントの設定は変更ありませんので、アタッチされていれば問題ありません。
なお、Transfrom コンポーネントの Scale の数字は、0、あるいは 0 に近い小数点付の数字になります。
Canvas のサイズは Scale に依存しませんので、誤差があっても問題ありません。

　もしも今後も気になった部分があったり、分からない部分があったら、必ず自分で調べて知識としてを蓄えておいてください。


Canvasゲームオブジェクト 完成時のインスペクター画像



Sceneビューと Gameビュー画像



参考サイト

Metal Brage 様
画面解像度とスケーリング
http://www.metalbrage.com/UnityTutorials/uGUI/Scal...

---

　この手順では、Canvas ゲームオブジェクト内にゲーム画面となる背景を製作していきます。
先ほども説明をさせていただいたように、ゲーム画面に映る必要のあるゲームオブジェクトはすべて Canvas ゲームオブジェクトの子オブジェクトとしてゲームオブジェクトを作成していきます。
そのため通常のゲーム制作で利用するUnityのワールド空間は、今回のゲームデザインでは使用しません。

　ここでは、ゲームの舞台(背景)を管理するためのフォルダ役のゲームオブジェクトと、実際にゲーム画面の背景画像を設定するゲームオブジェクトの２つを順番に作成して、ゲーム画面を作成します。

---

　まずはゲームの舞台・背景となるイメージを設置します。イメージには自由な素材をお使いください。
サンプルの場合は正面から奥の方向に向かったフィールドを表現したかったので、世界観を考えつつ、アセットストアの画像素材を探して使用しています。


Background for mobile games, portrait, 2D, art.
https://assetstore.unity.com/packages/2d/environme...

---

　あるいは、検索エンジンにて「ゲーム　背景　無料」といった単語で検索して、自分の検索力を高めましょう。

　ダウンロードする際の画像の拡張子は 画像ファイル名.jpg、あるいは 画像ファイル名.png のいずれかにしてください。
ダウンロード時に確認できるはずですので、そちらを確認してダウンロードしてください。

---

　画像素材のインポート(Unityで使用できるように追加)は、画像ファイルを Unity の Project 内にドラッグアンドドロップすることでインポートできますが、
ドラッグアンドドロップする前に Textures フォルダを作成しておいて、そちらにドラッグアンドドロップしてください。

　フォルダは Projcet 内で右クリックして Create => Folder で作成できます。
Textures フォルダ内にも同じ手順で新しいフォルダが作成できますので、画像の使用用途に応じてさらに細かくフォルダ分けをしておいてもいいです。


フォルダ分け



＜手順動画　Unityへの画像ファイルのインポート方法＞
https://gyazo.com/dff49ff6efb25b66ef143f97a0a9dac5

　以上でインポートは完了です。

---

　Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
新しく空のゲームオブジェクト(Transfrom コンポーネントのみアタッチされている、役割のまだないゲームオブジェクト)が作成されますので、名前を BackgroundSet に変更します。

BackgroundSet ゲームオブジェクトは、ゲームの背景画像に関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。

BackgroundSet ゲームオブジェクト　ヒエラルキー画像



　BackgroundSet ゲームオブジェクトを選択して、RectTransform コンポーネントがアタッチされているか確認します。
Canvas ゲームオブジェクトに含まれるオブジェクトは Transform コンポーネントではなく、RectTransform コンポーネントによって位置情報を管理しています。
もしも通常の Transform コンポーネントがアタッチされている場合には、再度作り直してください。


BackgroundSet ゲームオブジェクト　インスペクター画像



BackgroundSet ゲームオブジェクト　Sceneビュー画像(Sceneビューの中央にある)



　以上でこのゲームオブジェクトの設定は完了です。

---

　BackgroundSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Sceneビュー内の中央に、Imgae コンポーネントがアタッチされた白いゲームオブジェクトが新しく作成されますので、名前を imgBackground に変更します。


imgBackground ゲームオブジェクト　ヒエラルキー画像

imgBackground ゲームオブジェクトは、ゲームの舞台となる背景画像表示の役割を持ちます。

そのため、imgStage といった名称でも構いません。
どういった目的に利用されるのか、意図を明確にするための名称を付けていくように心がけてください。


imgBackground ゲームオブジェクト インスペクター画像



imgBackground ゲームオブジェクト　Sceneビュー画像(真ん中の白いゲームオブジェクト)



　BackgroundSet ゲームオブジェクトの子オブジェクトとして設置されているか、確認した後、次の設定の手順へ移ります。

---

　最初に画像を設定します。
imgBackground ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

　こちらの画像がゲーム画面に適用される舞台・背景用の画像となりますので、先ほどインポートした画像をこちらに利用します。
Textures フォルダ内にある対象の画像ファイルを、Source Image の欄までドラッグアンドドロップしてアサインしてください。
画像が登録されて、Sceneビューに反映されます。


＜手順動画　画像をアサインして登録する＞
https://gyazo.com/c67d85932ff863ec3d1265837bb15065


インスペクター画像



Sceneビュー画像(白いゲームオブジェクトではなくなっている)



　画像の設定が終了したら、Image コンポーネントの Raycast Target のスイッチを外してオフにしておいてください。このスイッチの意味は自分で調べてみましょう。

---

　画像を設定したら、大きさを調整します。ゲーム画面の背景画像になりますので、Canvas のサイズと同じか、あるいは少し大きめにして配置します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
Canvas ゲームオブジェクトの Width と Height の値と同じ値にすれば、この画像の大きさもCanvas ゲームオブジェクトと同じ大きさになります。

　画像を設定する場合のコツは、Sceneビューと一緒にGameビューも表示しておいて、Gameビューにどのような形で映るかを
確認しながら配置や大きさを調整すると合わせやすいです。エディターのレイアウトを設定してみましょう。
下記の画像の場合は、上がSceneビュー、下がGameビューでレイアウトを設定し、Sceneビューを変更した際に、Gameビューを切り替えずに下の画面で見ながら調整できるようにしています。


エディターのレイアウトを自分の見やすいデザインに変更する



　下記のインスペクター画像を参考にして、自分のゲームにとって最適な画像のサイズに調整してください。(インスペクター画像と同じである必要はありません)


imgBackground ゲームオブジェクト　参考用　インスペクター画像(この画像の場合、ゲーム内で使いたい部分が中央部分なので、Canvas に対して大きめに設定し、位置もずらしている)



imgBackground ゲームオブジェクト　参考用　Sceneビュー画像



　以上で設定は完了です。

---

　この機能をオンにすると、透明なオブジェクトの描画をスキップできます。

　Unityではオブジェクトを透明にした場合、透明な状態を描画していることになります。そのため、描画の負荷が通常よりも高くなります。
透明な描画(見えない状態を描画する)を行う必要があるゲームオブジェクトについては、この Cull Transparent Mesh 機能を利用してください。

　なお、Unity2020.2 では、Canvas Renderer コンポーネントのCull Transparent Mesh の初期設定値はオン(チェックあり)になっていますので、確認のみで問題ありません。
それ以前のバージョンでは初期値がオフ(チェックなし)になっていますので、必要に応じて機能を利用してください。

　今回作成した背景用の画像は透明な描画を行うものではありませんので、チェックはオフで問題ありません。

Unity公式スクリプトリファレンス
Canvas Renderer
https://docs.unity3d.com/ja/current/ScriptReferenc...

コガネブログ様
【Unity】uGUI で Canvas Renderer の「Cull Transparent Mesh」をオンにすると透明なオブジェクトの描画をスキップできる
https://baba-s.hatenablog.com/entry/2019/03/18/152...

---

　以上でこの手順は終了です。

　次は　手順４　−プレイヤーの作成−　です。