Unityに関連する記事です

 以下の内容で順番に実装を進めていきます。

手順3 ーCanvasを作成ー
 4.ヒエラルキー上にCanvasを設置する
 5.Canvas内にゲームの舞台(背景)用のゲームオブジェクトを設置し、設定する



 新しい学習内容は、以下の通りです。

 ・Canvas内のみでゲーム画面を作成(ワールド空間は使用しない)
 ・Raycast Target 機能について自分で調べる
 ・CanvasRenderer コンポーネントの Cull Transparent Mesh 機能



4.ヒエラルキー上にCanvasを設置する

1.設計


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


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

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


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


2.Canvas ゲームオブジェクトを作成する


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

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



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

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


<手順動画 Canvas ゲームオブジェクトの作成>
動画ファイルへのリンク


ヒエラルキー画像



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



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

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


3.Canvas ゲームオブジェクトの設定を行う


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

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

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

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



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

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


<アサイン手順動画(アサインはヒエラルキー上にあるゲームオブジェクトを指定します)>
動画ファイルへのリンク


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




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


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



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



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



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

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


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



Sceneビューと Gameビュー画像



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


5.Canvas内にゲームの舞台(背景)用のゲームオブジェクトを設置し、設定する

1.設計


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

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


2.ゲーム背景画像の取得してUnityにインポートする


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

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

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



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

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


フォルダ分け



<手順動画 Unityへの画像ファイルのインポート方法>
動画ファイルへのリンク

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


3.Canvas ゲームオブジェクトの子オブジェクトとして StageSet ゲームオブジェクトを作成する


 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します
新しく空のゲームオブジェクト(Transfrom コンポーネントのみアタッチされている、役割のまだないゲームオブジェクト)が作成されますので、名前を StageSet に変更します。
StageSet ゲームオブジェクトは、ゲーム画面に関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。


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



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


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



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



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


4.StageSet ゲームオブジェクトの子オブジェクトとして、imgBackground ゲームオブジェクトを作成する


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


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


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


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



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



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


5.imgBackground ゲームオブジェクトの設定を行う


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

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


<手順動画 画像をアサインして登録する>
動画ファイルへのリンク


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



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

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


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



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


インスペクター画像(サイズは参考値です。自分の画像とゲーム画面での見え方に合わせて適宜なサイズにしてください)



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



Gameビュー画像



 以上で設定は完了です。


6.<CanvasRendererコンポーネントの Cull Transparent Mesh 機能>


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

 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...



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

 次は 手順4 −行き先の作成− です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます