Unityに関連する記事です

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

24.Canvas内にResultPopUpゲームオブジェクト(リザルト表示用のUI部品群)を作成する(背景イメージ、点数表示、消した数表示、タップを促す表示)



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

・CanvasGroupコンポーネントの使用方法
・CanvasRendererコンポーネントの Cull Transparent Mesh 機能



24.Canvas内にResultPopUpゲームオブジェクト(リザルト表示用のUI部品群)を作成する(背景イメージ、点数表示、消した数表示、タップを促す表示)


 ヒエラルキーにあるCanvasゲームオブジェクトの中に、新しくゲームオブジェクトを追加していきます。
これはResultPopUpという名前で、ゲームのリザルト表示用のポップアップとなります。このポップアップ内に、表示に必要な部品をさらに加えていって完成させます。
この手順が終わった際には、下記の画像のような形になります。

ヒエラルキー 参考画像


ResultPopUp内のヒエラルキー画像


完成画像 Canvasの上部に配置


完成画像


 
 完成画像,鮓ていただくとわかるように、ResultPopUpはインスタンシエイトさせるのではなく、Canvasの上部に隠しておいて
ゲーム終了のタイミングに合わせてゲーム画面内にスライドさせて表示させて使用します。

 もちろんインスタンシエイトする方法もありますが、今回はDoTweenの機能を教材として使用するためにこのような設計にしています。


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


 Canvasゲームオブジェクトの上で右クリックを行い、UI => Image を選択し、ゲームオブジェクトを作成します。名前を ResultPopUp に変更します。
ResultPopUpゲームオブジェクトでは、リザルト時の背景画像を設定します。またこの背景画像上にゲーム内で獲得したスコアと消した干支の合計数を表示します。

 ResultPopUpゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考に(細かい数字は適宜切り上げてください)、Canvasと同じ大きさにして、画面の上部にゲーム画面から隠れるように配置しておいてください。

 つづいてImageコンポーネントのSourceImageに、リザルト表示の背景となる画像を設定します。
ここでは無料画像を探してきてインポートして利用していますが、画像は自由に設定してください。(干支に合わせて絵馬のイメージにしています)
 合わせてImageコンポーネントにある Raycast Target のチェックを外します。

ResultPopUp インスペクター画像



ResultPopUp 配置


ResultPopUp 配置



ResultPopUpゲームオブジェクトの子オブジェクトとして、TextBasePrefabを配置し、txtTitleに名前を変える


 以前作成してある TextBasePrefab をここでも利用します。ResultPopUpゲームオブジェクトの子オブジェクトとしてドラッグアンドドロップして配置してください。
名前を txtTitle に変更します。この部分はリザルト表示のタイトルメッセージの表示を行います。

 txtTitleゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考にしてください。(細かい数字は適宜切り上げてください)

 Textコンポーネント内のText欄にタイトルとなる文字列を設定します。ここでは "結果発表" という文字列を表示させていますが、適宜変更してください。


txtTitle インスペクター画像


txtTitle Sceneビュー画像



ResultPopUpゲームオブジェクトの子オブジェクトとして、TextBasePrefabを配置し、txtScoreに名前を変える


 しばらく同じ手順が続きます。ResultPopUpゲームオブジェクトの子オブジェクトとして TextBasePrefab を配置してください。
名前を txtScore に変更します。この部分はゲーム内で獲得したスコアをゲームの結果として表示します。

 txtScoreゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考にしてください。(細かい数字は適宜切り上げてください)

 Textコンポーネント内のText欄にタイトルとなる文字列を設定します。ここでは "000000" という文字列を表示させています。
これは文字列の最大数を確認するとともに、DoTweenの機能によってスコア表示をアニメーションさせるためです(スコアが一瞬で表示されるのではなく、ドラム式のように動く)


txtScore インスペクター画像


txtScore Sceneビュー画像



ResultPopUpゲームオブジェクトの子オブジェクトとして、TextBasePrefabを配置し、lblScoreに名前を変える


 ResultPopUpゲームオブジェクトの子オブジェクトとして TextBasePrefab を配置してください。
名前を lblScore に変更します。この部分はゲーム内で獲得したスコアのラベル部分です。

 lblScoreゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考にしてください。(細かい数字は適宜切り上げてください)

 Textコンポーネント内のText欄にタイトルとなる文字列を設定します。ここでは "スコア : " という文字列を表示させています。
この lblScore に常に スコア と表示されているため、txtScore では数字のみを表示すればよいように設計しています。


lblScore インスペクター画像


lblScore Sceneビュー画像



ResultPopUpゲームオブジェクトの子オブジェクトとして、TextBasePrefabを配置し、txtEraseEtoCountに名前を変える


 ResultPopUpゲームオブジェクトの子オブジェクトとして TextBasePrefab を配置してください。
名前を txtEraseEtoCount に変更します。この部分はゲーム内で消した干支の総数をゲームの結果として表示します。

 txtEraseEtoCountゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考にしてください。(細かい数字は適宜切り上げてください)

 Textコンポーネント内のText欄にタイトルとなる文字列を設定します。ここでは "000000" という文字列を表示させています。
これは文字列の最大数を確認するとともに、DoTweenの機能によってスコア表示をアニメーションさせるためです


txtEraseEtoCount インスペクター画像


txtEraseEtoCount Sceneビュー画像



ResultPopUpゲームオブジェクトの子オブジェクトとして、TextBasePrefabを配置し、lblEraseEtoCountに名前を変える


 ResultPopUpゲームオブジェクトの子オブジェクトとして TextBasePrefab を配置してください。
名前を lblEraseEtoCount に変更します。この部分はゲーム内で獲得したスコアをゲームの結果として表示します。

 lblEraseEtoCountゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考にしてください。(細かい数字は適宜切り上げてください)

 Textコンポーネント内のText欄にタイトルとなる文字列を設定します。ここでは "消した干支の数 : " という文字列を表示させています。
これもスコアの時と同様で、常に消した干支の数と表示されているため、txtEraseEtoCount では数字のみを表示すればよいように設計しています。


lblEraseEtoCount インスペクター画像


lblEraseEtoCount Sceneビュー画像



ResultPopUpゲームオブジェクトの子オブジェクトとしてButtonゲームオブジェクトを追加し、btnClosePopUpに名前を変える


 Canvasゲームオブジェクトの上で右クリックを行い、UI => Button を選択し、ゲームオブジェクトを作成します。名前を btnClosePopUp に変更します。
また子オブジェクトとしてTextゲームオブジェクトが一緒に追加されますが、こちらは削除してください。

 btnClosePopUpゲームオブジェクトでは、リザルト時の画面のタップを検知して、リザルト表示を終了して、ゲームを再スタートさせます。また、背景画像を設定します。

 btnClosePopUpゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考に(細かい数字は適宜切り上げてください)、ResultPopUpゲームオブジェクトと同じ大きさにしておいてください。
(ゲーム画面のどの部分をタップしても検知できるようにするためです。)

 次にCanvasRendererコンポーネントの Cull Transparent Mesh チェックを入れます。機能の説明は後で行います。

 つづいてImageコンポーネントのSourceImageに、ボタン表示の背景となる画像を設定します。
ここでは無料画像を探してきてインポートして利用していますが、画像は自由に設定してください。
参考画像の場合はリザルトの絵馬の画像にかぶらないように、画面の上部と下部のみの画像を用意しています。(画面中央付近は透明)
 
 最後に Add Component を押して、 CanvasGroupコンポーネントを追加します。設定はそのままで問題ありません。


btnClosePopUp .ぅ鵐好撻ター画像


btnClosePopUp◆.ぅ鵐好撻ター画像



btnClosePopUp Sceneビュー画像



<CanvasGroupコンポーネントの機能>


 このCanvasGroupコンポーネントがアタッチされているゲームオブジェクトと、その子のゲームオブジェクトがグループ化されます。
これにより、グループ全体の透明度を変更したりすることができます。

 今回はbtnClosePopUpゲームオブジェクトにCanvasGroupコンポーネントをアタッチしています。
そのためこのゲームオブジェクトの子オブジェクトであるimgMessageBGゲームオブジェクトとtxtMesssageゲームオブジェクトとがグループ化されます。

透明度(Alpha)を操作した場合の動画 グループ化されているため、子要素も一緒に透明になったり、元に戻ったりします。

CanvasGroupコンポーネント Alpha操作の動画
https://gyazo.com/43d616ddbd36b95d9b58ef0364a558a6
Unity公式マニュアル
CanvasGroup
https://docs.unity3d.com/ja/2020.1/Manual/class-Ca...
TechProjin様
【Unity】Canvas Groupってこんなに便利だったのか…
https://tech.pjin.jp/blog/2017/03/20/unity_ugui_ca...


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


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

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

 今回はbtnClosePopUpとその子オブジェクトの2つについてこの機能を利用しています。
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...


btnClosePopUpゲームオブジェクトの子オブジェクトとしてImageゲームオブジェクトを追加し、imgMessageBGに名前を変える


 btnClosePopUpゲームオブジェクトの上で右クリックを行い、UI => Image を選択し、ゲームオブジェクトを作成します。名前を imgMessageBG に変更します。
画面タップを促すメッセージの背景画像を設定する部分です。
 
 imgMessageBGゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考に適宜な大きさにして設定してください。

 次にCanvasRendererコンポーネントの Cull Transparent Mesh チェックを入れます。

 最後にImageコンポーネントのSourceImageに、タップメッセージの背景となる画像を設定します。
ここでは画像の設定はせずに、Color の設定から色と透明度のみを変更して使用しています。画像は自由に設定してください。
 

imgMessageBG インスペクター画像


imgMessageBG Sceneビュー画像



imgMessageBGゲームオブジェクトの子オブジェクトとしてTextBasePrefabを設置し、txtMessageに名前を変える


 imgMessageBGゲームオブジェクトの子オブジェクトとして TextBasePrefab を配置してください。(btnClosePopUpゲームオブジェクトから見て、孫の位置)
名前を txtMessage に変更します。この部分は次のゲームの再開を促すメッセージを表示させる部分です。

 txtMessageゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考にしてください。(細かい数字は適宜切り上げてください)

 Textコンポーネント内のText欄にタイトルとなる文字列を設定します。ここでは "画面をタップすると再スタート!" という文字列を表示させています。


txtMessage .ぅ鵐好撻ター画像


txtMessage◆.ぅ鵐好撻ター画像


txtMessage Sceneビュー画像



ゲーム画面での配置を確認する


ResultPopUp 完成画像


 ResultPopUpゲームオブジェクトを選択してインスペクターを確認します。
RectTransfromコンポーネントの Top と Bottom の値をどちらも 0 に設定してみてください。

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



この操作を行ったときに、ResultPopUpゲームオブジェクトがゲーム画面の上にぴったりとはまれれば完成です。
 
参考画像(ゲーム画面上にResultPopUpゲームオブジェクトが配置されている)



 次の手順ではゲーム終了に合わせて画面上部に配置したResultPopUpゲームオブジェクトをスライドして、ゲーム画面上に表示させていきます。



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

 次は 手順13 です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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