おはじきゲーム 手順２
最終更新：
orika_ex_miyako 2021年02月10日(水) 13:33:28履歴
以下の内容で順番に実装を進めていきます。
手順２ ーCanvasを作成ー
新しい学習内容は、以下の通りです。
３．ヒエラルキー上にCanvasを設置する
今回のゲームではCanvas内にゲームオブジェクトを配置してゲームを製作していきますので、このCanvasがメインの製作場所となります。
最初に、Directinal Lightゲームオブジェクトは不要ですので、もしもある場合にはこちらはヒエラルキー上から削除してください。
ヒエラルキー上にてゲームオブジェクトのない位置でメニューを表示し（Windowは右マウスボタンをクリック）、UI => Canvas を選択してCanvasを作成しましょう。
一緒にEventSystemも作成されます（タップ感知などを行うものなので、削除しないでください。）
作成手順動画
https://gyazo.com/133fd5ee609e1137176318539a387004
ヒエラルキーにあるCanvasゲームオブジェクトを左クリックして、インスペクターに情報を表示させます。
Canvasコンポーネントを確認して、Render Mode を ScreenSpace - Camera に変更します。
すぐ下にアサインできる場所ができますので、こちらにヒエラルキー上にあるMain Cameraゲームオブジェクトをドラッグアンドドロップしてアサインします。
この設定によりMainCameraの映している画面がゲーム画面として利用されるようになります。
アサイン手順動画（アサインはヒエラルキー上にあるゲームオブジェクトを指定します）
https://gyazo.com/81ccd648646961489098c8bb47556514
同じくCanvasゲームオブジェクトの持つCanvasScalerコンポーネントを確認して、UI Scale Mode を Scale with Screen Size に変更します。
Reference Resolusion の X と Y は自分のスマホの解像度で設定しておきましょう。画像はiPhone 11 の設定の場合です。
上記の手順を行ったあとのCanvasゲームオブジェクトのインスペクターの画像です。
ここまでのヒエラルキーの画面ショットです。
４．Canvas内にUI部品を作成する��
おはじきゲームのゲーム画面を製作していきます。基本的にはすべてCanvasの中に子としてゲームオブジェクトを作成していきます。
そのため通常のゲーム制作で利用するUnityのワールド空間は、今回のゲームデザインでは使用しません。
ゲーム背景画像の取得
まずはゲームの背景となるイメージを設置します。イメージには自由な素材をお使いください。
サンプルの場合はポップな世界観を表現したかったので、明るく柔らかいタッチの画像のフリー素材を使用しています。
画像素材のインポート(Unityで使用できるように追加)は、画像ファイルをUnityのProject内にドラッグアンドドロップすることでインポートできます。
ドラッグアンドドロップする前にSpritesフォルダを作成しておいて、そちらにドラッグアンドドロップしてください。
フォルダはProjcet内で右クリックして Create => Folder で作成できます。さらに細かくフォルダ分けをしておいてもいいです。
フォルダ
Unityへのインポート手順動画
https://gyazo.com/8452435936c620b8e4a28ae13fd98249
ゲーム背景用のImageゲームオブジェクトを作成
Canvas上で左クリックをしてメニューを表示し、UI => Image を１つ作成します。
Sceneビュー内の中央に白いゲームオブジェクトが作成されます。名前を GameGroud に変更します。
作成したGameGroundゲームオブジェクトをヒエラルキー上で選択し、インスペクターを表示します。
Imageコンポーネントがアタッチされていますので、こちらのSource Image 部分に先ほど取得した画像を指定します。
Sceneビューの白いゲームオブジェクトに登録した画像が表示されますので、こちらの大きさを適宜調整します。
上下左右とも少しCanvasからはみ出る位に設置してください。
GameGround インスペクター画像
画像を設定する場合のコツは、Sceneビューと一緒にGameビューも表示しておいて、Gameビューにどのような形で映るかを
確認しながら配置や大きさを調整すると合わせやすいです。エディターのレイアウトを設定してみましょう。
上がSceneビュー、下がGameビューでレイアウトを設定しています。
見えない壁用のゲームオブジェクトを複数作成
Canvasの左右の端と下方向に、見えない壁用のゲームオブジェクトを設置します。これは、あとで手球をゲーム画面内に生成した際に
物理演算で移動を行うようにしているため、見えない壁がないとゲーム画面外に手球がはみ出してしまい、なくなってしまうのを防ぐためです。
ヒエラルキーのCanvas上で右クリックしてメニューを表示し、Create Empty で空のゲームオブジェクトを１つ作成します。名前を InbisibleWalls に変更します。
このオブジェクトをフォルダ代わりとして利用します。
InbisibleWallsゲームオブジェクトの上で右クリックしてメニューを表示し、UI => Image でImageゲームオブジェクトを１つ作成します。
名前は Wall_Left にしておきます(あとで複製して変更します。)
このWallゲームオブジェクトをCanvasの左端になるように設置します。大きさは Canvas より少し大きめ位にしておいてください。
手球が画面外に出ない位の大きさであれば問題ありません。
作業する場合には、GameGroundゲームオブジェクトのSetActive(名前の左横のチェック)を外しておくと、Canvasの大きさが確認しやすいです。
Wall_Leftゲームオブジェクト Scene画像
大きさを調整しましたら、Tag の設定を行います。Tag は異なるゲームオブジェクト同士をカテゴライズして分類をするためのラベルの役割を持ちます。
インスペクターの上部にある Tag を選択し、プルダウンメニューより、Add Tag を選択します。インスペクター表示が Tags And Layers に切り替わりますので、
Tag の右下にあるプラスボタンを押します。ウインドウが開きますので、"Wall" と入力して Save してください。これで Tag を登録できました。
登録した Tag をゲームオブジェクトに設定します。もう一度 Wall_Left ゲームオブジェクトを選択して、インスペクターの Tag を選択します。
プルダウンメニューに Wall が追加されていますので、そちらを選択します。
つづいて、コライダーも同じように調整を行います。Wall_Leftゲームオブジェクトと同じ形になるように調整してください。
Wall_Leftゲームオブジェクト インスペクター画像
調整が終了したら、Imageコンポーネントのスイッチをオフにして、壁を見えないようにします。あとで確認したりすることもありますので
ImageコンポーネントはRemoveせずに、スイッチを切っておくだけにしておいてください。
合わせてCanvas Render コンポーネントの Cull Transparent Mesh のスイッチを入れておきます。
Canvas Render コンポーネント
＜CanvasRendererコンポーネントの Cull Transparent Mesh 機能＞
この機能をオンにすると、透明なオブジェクトの描画をスキップできます。
Unityではオブジェクトを透明にした場合、透明な状態を描画していることになります。そのため、描画の負荷が通常よりも高くなります。
透明な描画を行う必要があるゲームオブジェクトについては、この Cull Transparent Mesh 機能を利用してください。
今回は各Wallゲームオブジェクトついてこの機能を利用しています。
設定が終了したら、この Wall_Left ゲームオブジェクトを複製し、右側にも壁を作成します。
ヒエラルキーの Wall_Left ゲームオブジェクトの上で右クリックを行いメニューを表示して、Duplicate を選択します。
ヒエラルキーに Wall_Left(1) というゲームオブジェクトが追加されます。名前を Wall_Right に変更します。
複製してできた Wall_Right ゲームオブジェクトは複製元(Wall_Leftゲームオブジェクト)と同じ位置にありますので、
Wall_Right ゲームオブジェクトをヒエラルキーで選択して、Canvasの右端に移動させます。
大きさとコライダーはすでに調整済ですので、位置だけ変更すれば、あとはそのままで問題ありません。
Wall_Rightゲームオブジェクト Scene画像
Wall_Rightゲームオブジェクト インスペクターの画像
続いてCanvasの上(トップ)位置と下(ボトム)位置にも、見えない壁を設置します。
先ほどと同じようにWall_Leftを複製して、名前を Wall_Top に変更し、画面のトップ位置へ移動させます。左右の大きさを広げて、上下の大きさを小さくしてください。
画面の上下には後程、UI(残り時間などを表示する場所)を表示させるようにしますので、その部分も壁として扱うようにします。
そのため、少しゲーム画面内へ壁が入るように配置します。
Wall_Topゲームオブジェクト Scene画像
Wall_Topゲームオブジェクト インスペクターの画像
最後に Wall_Top ゲームオブジェクトを複製し、名前を Wall_Bottom に変更します。
Wall_Bottom ゲームオブジェクトをヒエラルキーで選択して、画面のボトム位置に設置します。
こちらも Wall_Top ゲームオブジェクトと同じようにUI部分を加味して、少し画面内に壁が入るように設置します。
Wall_Bottomゲームオブジェクト Scene画像
Wall_Bottomゲームオブジェクト インスペクター画像
以上で４方向の壁が完成しました。
完成時のヒエラルキーの画像
以上でこの手順は終了です。
手順２ ーCanvasを作成ー
３．ヒエラルキー上にCanvasを設置する ４．Canvas内にUI部品を作成する� 淵▲�ション画面イメージ。背景画像入手、設置。見えない壁設置。親子関係や配置する位置も含めて設置する）
新しい学習内容は、以下の通りです。
・Canvas内のみでゲーム画面を作成(ワールド空間は使用しない) ・CanvasRendererコンポーネントの Cull Transparent Mesh 機能
３．ヒエラルキー上にCanvasを設置する 
今回のゲームではCanvas内にゲームオブジェクトを配置してゲームを製作していきますので、このCanvasがメインの製作場所となります。
最初に、Directinal Lightゲームオブジェクトは不要ですので、もしもある場合にはこちらはヒエラルキー上から削除してください。
ヒエラルキー上にてゲームオブジェクトのない位置でメニューを表示し（Windowは右マウスボタンをクリック）、UI => Canvas を選択してCanvasを作成しましょう。
一緒にEventSystemも作成されます（タップ感知などを行うものなので、削除しないでください。）
作成手順動画
https://gyazo.com/133fd5ee609e1137176318539a387004
ヒエラルキーにあるCanvasゲームオブジェクトを左クリックして、インスペクターに情報を表示させます。
Canvasコンポーネントを確認して、Render Mode を ScreenSpace - Camera に変更します。
すぐ下にアサインできる場所ができますので、こちらにヒエラルキー上にあるMain Cameraゲームオブジェクトをドラッグアンドドロップしてアサインします。
この設定によりMainCameraの映している画面がゲーム画面として利用されるようになります。
アサイン手順動画（アサインはヒエラルキー上にあるゲームオブジェクトを指定します）
https://gyazo.com/81ccd648646961489098c8bb47556514
同じくCanvasゲームオブジェクトの持つCanvasScalerコンポーネントを確認して、UI Scale Mode を Scale with Screen Size に変更します。
Reference Resolusion の X と Y は自分のスマホの解像度で設定しておきましょう。画像はiPhone 11 の設定の場合です。
上記の手順を行ったあとのCanvasゲームオブジェクトのインスペクターの画像です。
ここまでのヒエラルキーの画面ショットです。
４．Canvas内にUI部品を作成する��
おはじきゲームのゲーム画面を製作していきます。基本的にはすべてCanvasの中に子としてゲームオブジェクトを作成していきます。
そのため通常のゲーム制作で利用するUnityのワールド空間は、今回のゲームデザインでは使用しません。
ゲーム背景画像の取得
まずはゲームの背景となるイメージを設置します。イメージには自由な素材をお使いください。
サンプルの場合はポップな世界観を表現したかったので、明るく柔らかいタッチの画像のフリー素材を使用しています。
画像素材のインポート(Unityで使用できるように追加)は、画像ファイルをUnityのProject内にドラッグアンドドロップすることでインポートできます。
ドラッグアンドドロップする前にSpritesフォルダを作成しておいて、そちらにドラッグアンドドロップしてください。
フォルダはProjcet内で右クリックして Create => Folder で作成できます。さらに細かくフォルダ分けをしておいてもいいです。
フォルダ
Unityへのインポート手順動画
https://gyazo.com/8452435936c620b8e4a28ae13fd98249
ゲーム背景用のImageゲームオブジェクトを作成
Canvas上で左クリックをしてメニューを表示し、UI => Image を１つ作成します。
Sceneビュー内の中央に白いゲームオブジェクトが作成されます。名前を GameGroud に変更します。
作成したGameGroundゲームオブジェクトをヒエラルキー上で選択し、インスペクターを表示します。
Imageコンポーネントがアタッチされていますので、こちらのSource Image 部分に先ほど取得した画像を指定します。
Sceneビューの白いゲームオブジェクトに登録した画像が表示されますので、こちらの大きさを適宜調整します。
上下左右とも少しCanvasからはみ出る位に設置してください。
GameGround インスペクター画像
画像を設定する場合のコツは、Sceneビューと一緒にGameビューも表示しておいて、Gameビューにどのような形で映るかを
確認しながら配置や大きさを調整すると合わせやすいです。エディターのレイアウトを設定してみましょう。
上がSceneビュー、下がGameビューでレイアウトを設定しています。
見えない壁用のゲームオブジェクトを複数作成
Canvasの左右の端と下方向に、見えない壁用のゲームオブジェクトを設置します。これは、あとで手球をゲーム画面内に生成した際に
物理演算で移動を行うようにしているため、見えない壁がないとゲーム画面外に手球がはみ出してしまい、なくなってしまうのを防ぐためです。
ヒエラルキーのCanvas上で右クリックしてメニューを表示し、Create Empty で空のゲームオブジェクトを１つ作成します。名前を InbisibleWalls に変更します。
このオブジェクトをフォルダ代わりとして利用します。
InbisibleWallsゲームオブジェクトの上で右クリックしてメニューを表示し、UI => Image でImageゲームオブジェクトを１つ作成します。
名前は Wall_Left にしておきます(あとで複製して変更します。)
このWallゲームオブジェクトをCanvasの左端になるように設置します。大きさは Canvas より少し大きめ位にしておいてください。
手球が画面外に出ない位の大きさであれば問題ありません。
作業する場合には、GameGroundゲームオブジェクトのSetActive(名前の左横のチェック)を外しておくと、Canvasの大きさが確認しやすいです。
Wall_Leftゲームオブジェクト Scene画像
大きさを調整しましたら、Tag の設定を行います。Tag は異なるゲームオブジェクト同士をカテゴライズして分類をするためのラベルの役割を持ちます。
インスペクターの上部にある Tag を選択し、プルダウンメニューより、Add Tag を選択します。インスペクター表示が Tags And Layers に切り替わりますので、
Tag の右下にあるプラスボタンを押します。ウインドウが開きますので、"Wall" と入力して Save してください。これで Tag を登録できました。
登録した Tag をゲームオブジェクトに設定します。もう一度 Wall_Left ゲームオブジェクトを選択して、インスペクターの Tag を選択します。
プルダウンメニューに Wall が追加されていますので、そちらを選択します。
つづいて、コライダーも同じように調整を行います。Wall_Leftゲームオブジェクトと同じ形になるように調整してください。
Wall_Leftゲームオブジェクト インスペクター画像
調整が終了したら、Imageコンポーネントのスイッチをオフにして、壁を見えないようにします。あとで確認したりすることもありますので
ImageコンポーネントはRemoveせずに、スイッチを切っておくだけにしておいてください。
合わせてCanvas Render コンポーネントの Cull Transparent Mesh のスイッチを入れておきます。
Canvas Render コンポーネント
＜CanvasRendererコンポーネントの Cull Transparent Mesh 機能＞
この機能をオンにすると、透明なオブジェクトの描画をスキップできます。
Unityではオブジェクトを透明にした場合、透明な状態を描画していることになります。そのため、描画の負荷が通常よりも高くなります。
透明な描画を行う必要があるゲームオブジェクトについては、この Cull Transparent Mesh 機能を利用してください。
今回は各Wallゲームオブジェクトついてこの機能を利用しています。
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...
設定が終了したら、この Wall_Left ゲームオブジェクトを複製し、右側にも壁を作成します。
ヒエラルキーの Wall_Left ゲームオブジェクトの上で右クリックを行いメニューを表示して、Duplicate を選択します。
ヒエラルキーに Wall_Left(1) というゲームオブジェクトが追加されます。名前を Wall_Right に変更します。
複製してできた Wall_Right ゲームオブジェクトは複製元(Wall_Leftゲームオブジェクト)と同じ位置にありますので、
Wall_Right ゲームオブジェクトをヒエラルキーで選択して、Canvasの右端に移動させます。
大きさとコライダーはすでに調整済ですので、位置だけ変更すれば、あとはそのままで問題ありません。
Wall_Rightゲームオブジェクト Scene画像
Wall_Rightゲームオブジェクト インスペクターの画像
続いてCanvasの上(トップ)位置と下(ボトム)位置にも、見えない壁を設置します。
先ほどと同じようにWall_Leftを複製して、名前を Wall_Top に変更し、画面のトップ位置へ移動させます。左右の大きさを広げて、上下の大きさを小さくしてください。
画面の上下には後程、UI(残り時間などを表示する場所)を表示させるようにしますので、その部分も壁として扱うようにします。
そのため、少しゲーム画面内へ壁が入るように配置します。
Wall_Topゲームオブジェクト Scene画像
Wall_Topゲームオブジェクト インスペクターの画像
最後に Wall_Top ゲームオブジェクトを複製し、名前を Wall_Bottom に変更します。
Wall_Bottom ゲームオブジェクトをヒエラルキーで選択して、画面のボトム位置に設置します。
こちらも Wall_Top ゲームオブジェクトと同じようにUI部分を加味して、少し画面内に壁が入るように設置します。
Wall_Bottomゲームオブジェクト Scene画像
Wall_Bottomゲームオブジェクト インスペクター画像
以上で４方向の壁が完成しました。
完成時のヒエラルキーの画像
以上でこの手順は終了です。
コメントをかく