Unityに関連する記事です

 ゲームのサイクルについて実装し、ゲームの終了情報(クリア、ゲームオーバー)をゲーム画面に表示する機能も追加されました。
基礎手順の最後として、ここではゲームの終了処理のあとに、今回のゲームのプレイ結果をリザルト用のポップアップを作成して、その中に表示する機能を実装します。

 完成画像と動画は以下のようになります。


リザルト表示ポップアップ



<動画> ゲームの終了後、リザルト表示ポップアップを生成し、ゲーム結果を反映して表示する(この例ではステージクリア時に表示)
https://gyazo.com/5b39ddd2793c6ee793ddd2e3bb5e4b12


 手順が多いので、この手順ではまず、リザルト表示用のポップアップ(以下、リザルトポップアップ)を作成し、プレファブにする手順までを実装していきます。
その後、リザルトポップアップ用のスクリプトを作成する、BattleManagerクラスに修正を加える、と順番に処理を追加していって完成になります。



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

手順23 −リザルト用ゲームオブジェクトを作成−
50.Canvas内にResultPopUpゲームオブジェクト(リザルト表示用のUI部品群)を作成、プレファブにする



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

・スプライトの9(ナイン)スライス機能
・Text用のプレファブを作成して運用する



50.Canvas内にResultPopUpゲームオブジェクト(リザルト表示用のUI部品群)を作成する

設計


 リザルトポップアップは、ゲーム画面の前面に表示します。
表示する内容は、今回のゲームのプレイ結果を反映して数字を動的に変更します。(スクリプトを使います)

 表示する内容は、獲得したMoneyの値、残り時間をMoneyに変換した値、手球の残数をMoneyに変換した値、そしてこれらの合計値の4つです。
スペースを確保していますので、今後、オリジナルの機能が実装された場合には、このリザルトポップアップに表示してみましょう。

 表示するタイミングはゲームの終了処理の後です。現在実装されているゲーム終了のタイミングは、ステージクリアとゲームオーバーの時です。
これらの処理の表示後に、少し時間を置いてからBattleManagerクラスによってリザルトポップアップを画面に生成し、表示します。

 表示されたリザルトポップアップでは、今回のゲームの結果をドラム式に数字をアニメ演出して表示します。
小計である3つのMoneyが上から順番に表示されたあと、少し間をおいて、合計値を表示するように演出します。

 これらの処理はリザルトポップアップ用に作成する ResultPopUp スクリプトによって制御を行います。
このスクリプトは次の手順で作成します。 


Canvas内にResultPopUpゲームオブジェクト(リザルト表示用のUI部品群)を作成する


 Canvasの上で右クリックをしてメニューを表示し、Create Empty を選択します。名前を ResultPopUp に変更します。
これは今後作成するリザルトポップアップ用のゲームオブジェクト群をまとめるフォルダの役割を持ちます。

 ヒエラルキーの位置を確認し、Canvasの子オブジェクトとして作成されていない場合には再度作成し直してください。

 ResultPopUpゲームオブジェクトを選択して、インスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントを追加してください。
この機能を利用することにより、すべての子オブジェクトの透明度を一括で変更することが出来ます。(まとめて表示したり、透明にしたり出来ます)


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



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



ResultPopUpゲームオブジェクト Sceneビュー画像



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


 ResultPopUp ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択します。名前を Filter に変更します。


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



 Filter ゲームオブジェクトはリザルトポップアップの一番後ろに位置する黒い背景です。
ImageのColorの透明度(Alpha値)を変更し、うっすらとゲーム画面が見える程度にして、画面全体を覆うように配置してください。
ここでは130〜160前後の透明度を想定しています。


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



Filter ゲームオブジェクト Sceneビュー画像



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


 ResultPopUp ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択します。名前を BackgroundFlame に変更します。


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



 BackgroundFlame ゲームオブジェクトはリザルトポップアップの背景フレーム画像です。このフレーム用画像の中に獲得したMoney群を表示します。
画像については無料素材などを使って自由に設定してください。無料サイトからダウンロードしUnityにインポートした画像は、Imageコンポーネントの Source Image から変更できます。

 画像の大きさについては、下記の画像やインスペクター画像を参考にして適宜な大きさに調整してください。
ここでは下側にスペースを空けていますが、これは最後にボタンを追加するためのスペースです。
もしもボタンもこのフレーム内に収めるデザインにするのであれば、もっと下まで画像を広げて配置して頂いて構いません。

 なお画像を引き伸ばした場合に、画像の比率が崩れてしまう場合があります。その場合には、次の9スライスの機能を設定してください。


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



BackgroundFlame ゲームオブジェクト Sceneビュー画像



スプライトの9スライス


 フレーム用の画像を引き伸ばして設定した時、角の部分や周りのフレーム部分自体が伸びてしまって、元の画像と異なる状態になってしまいます。
これを防ぐ機能として、9(ナイン)スライスという機能があります。画像を9分割することによってさまざまなサイズに調整して利用することが出来ます。

参考サイト
Unity公式 スプライトの9スライス
https://docs.unity3d.com/ja/2019.4/Manual/9SliceSp...

 この機能を利用することで、フレーム用の画像をオリジナルの画像に近い形で配置することが出来ます。

 インポートした画像を以下のように設定し、SpriteEditorを起動します。


インスペクター画像



 SpriteEditorの画像内にある枠を画像の角やフレームに合わせて設定を行うことで、スプライトの比率を維持したままサイズを変更できます。
実際に使用する際には、Imageコンポーネントの ImageType の設定を Sliced か Tiled にして利用します。色々と試してみてください。

 今回使用した無料のフレーム画像にも9スライスを設定し、 ImageType を Sliced にして適用しています。
(なおSpriteRendererコンポーネントで9スライスを使用する場合には、ImageType に対応する項目として DrawMode という項目があり、
そちらで同じように Sliced などの設定ができます。)


SpriteEditor ナインスライス設定時の画像



元の画像



検証動画 ImageType が Sliced の場合(上下左右の外側のフレームの画像が引き伸ばしても比率が変わらない)
https://gyazo.com/1f98564105030a20838899398bd9233a


検証動画◆ImageType が Simple(デフォルト)の場合(上下左右のフレームの画像が伸びて比率が変わってしまう)
https://gyazo.com/90add377b935f22409cc8b437ce94da0


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


 ResultPopUp ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Text を選択します。名前を lblTitle に変更します。


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


 
 lblTitle ゲームオブジェクトはリザルトポップアップのタイトル字を表示する役割を持ちます。

 Textコンポーネントの Text 欄に Result と入力してください。(結果発表、のように同じような意味合いの単語に変更しても頂いても構いません。)
リザルポップアップのタイトル文字になるので、フォントも他の文字のフォントとは変えた方がデザイン的に優れたものになると思います。


Textコンポーネント Text プロパティに文字列を設定



 ネットで検索すると無料のフォントがたくさんありますので、そちらを利用するといいでしょう。
無料フォントをダウンロードしたらファイルを解凍し、それをUnityへドラッグアンドドロップしてインポートします。
画像や音楽ファイルと同じ手順です。同じように Fonts といったフォルダを用意しておいてそこへ格納すると管理しやすくなります。

 なおファイルを解凍し忘れるとドラッグアンドドロップできませんので、忘れずに解凍してください。
インポートできるファイルは TrueType (.ttf) と OpenType (.otf) です。複数のフォントを用意してもいいでしょう。
インポートできれば、あとはTextコンポーネントのFont欄から変更できます。


参考サイト
Unity公式マニュアル
フォント
https://docs.unity3d.com/ja/2019.4/Manual/class-Fo...


 フォントと文字の大きさを設定したら、位置を調整しましょう。下記の画像を参考してください。(見やすければよいので、必ずしもこれと同じである必要はありません。)


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



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



lblTitle ゲームオブジェクト Sceneビュー画像



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


 ResultPopUp ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Text を選択します。名前を lblMoney に変更します。


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



 lblMoney ゲームオブジェクトと次に作成する txtMoney ゲームオブジェクトはセットです。
敵を倒して獲得したMoney(ゲーム画面にも表示されていたMoneyの値)について扱うゲームオブジェクトで、
lblMoney ゲームオブジェクトは、Money の文字表示する役割を持ちます。
txtMoney ゲームオブジェクトは、獲得しているMoneyの数字のみを表示する役割を持ちます。

 常に Money と表示しておくゲームオブジェクトがあることで、別のTextコンポーネントでは数字のみ表示させるように設計出来ます。


 下記の画像のように、Textコンポーネントの Text プロパティに Get Money(Moneyのみでも) と入力し、その後、位置を調整してください。
このゲームオブジェクトの右方向には、数字を表示するtxtMoney ゲームオブジェクトを次の手順で作成しますので、左に寄せています。

 また今後、このゲームオブジェクトの下(縦)方向にあと4つの表示項目に並びますので、それを考慮して配置しています。


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



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



lblMoney ゲームオブジェクト Sceneビュー画像



<Text用のプレファブを作成して運用する>


 もしもフォントや文字装飾などの設定を一度にまとめて変更したいのであれば、このlblMoney ゲームオブジェクトをプレファブ化し、
以降のテキスト用ゲームオブジェクトにはこのプレファブを利用するようにしてください。
プレファブの機能を利用しフォントを変更すれば、すべてのプレファブのフォントが一度に変更可能になるためです。


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


 ResultPopUp ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Text を選択します。名前を txtMoney に変更します。
(この手順内では、Text用プレファブではなくすべて作成する手順として進めます。Text用プレファブを使う場合には読み替えて、新規作成する代わりにプレファブを配置してください。)


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



 先ほどの lblMoney ゲームオブジェクトでも説明しましたように、この txtMoeny ゲームオブジェクトには獲得したMoneyの値を表示します。

 Textコンポーネントの Text 欄で数字が5桁位入るような大きさでフォントを調整してください。調整後は半角数字で 0 に入力設定してください。
その後、位置を lblMoney ゲームオブジェクトの右側に同じ高さで並べて配置してください。


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



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



txtMoney ゲームオブジェクト Sceneビュー画像



txtMoney ゲームオブジェクトを lblMoney ゲームオブジェクトの子オブジェクトにする


 txtMoney ゲームオブジェクトをヒエラルキーで選択して、lblMoney ゲームオブジェクトの子オブジェクトにして1セットにしてください。


ヒエラルキー画像 txtMoney ゲームオブジェクト lblMoneyゲームオブジェクトの子オブジェクトにする



lblMoneyゲームオブジェクトを複製し、それぞれの名前を lblTimeBonus と txtTimeBonus に変える


 lblMoney ゲームオブジェクトを複製してください。1セットにしましたので、親子で1つずつのゲームオブジェクトが複製されます。

 lblMoney(1) ゲームオブジェクトの名前を lblTimeBonus に変更します。
その子オブジェクトである txtMoney(1)ゲームオブジェクトの名前を txtTimeBonus に変更します。


lblTimeBonus(txtTimeBonus) ゲームオブジェクト ヒエラルキー画像



 こちらも役割は同じですが、表示する内容が残り時間をMoneyに変換した値になります。
多くの時間が残って敵を倒すほど、ボーナスがもらえるような設計にしています。(計算処理自体は次の手順以降でスクリプトに追記します)

 複製したゲームオブジェクトは、複製元のゲームオブジェクトと同じ位置にありますので、下方向にずらして縦に並べて配置してください。
その後、lblTimeBonus ゲームオブジェクトの Text プロパティの文字列を GetMoney から TimeBonus に変更してください。
他はそのまま変更なしで大丈夫です。


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



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



lblTimeBonus(txtTimeBonus) ゲームオブジェクト Sceneビュー画像




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



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



lblTimeBonus ゲームオブジェクトの子オブジェクトとして descriptionTimeBonus ゲームオブジェクトを作成する


 lblTimeBonus ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Text を選択します。名前を descriptionTimeBonus に変更します。


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



 descriptionTimeBonus ゲームオブジェクトは、残った時間の計算式を表示する説明文の役割を持っています。

 Text コンポーネントの Text 欄に計算式を書いて画面に表示して文字の大きさを調整します。
調整後は空白にしておいてください。この計算式に用いる倍率をスクリプトで変更できるようにするため、固定値ではなく、動的に計算式を表示するようにします。


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



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



descriptionTimeBonus ゲームオブジェクト Sceneビュー画像



lblTimeBonus ゲームオブジェクトを複製し、それぞれの名前を lblBallBonus と txtBallBonus と descriptionBallBonus に変える


 lblTimeBonus ゲームオブジェクトを複製してください。親子関係のある3つのゲームオブジェクトが複製されます。
それぞれの名前を lblBallBonus と txtBallBonus と descriptionBallBonus に変更してください。


lblBallBonus(txtBallBonus,descriptionBallBonus) ゲームオブジェクト ヒエラルキー画像



 各ゲームオブジェクトの役割は同じですが、こちらに表示する内容は手球の残数によるボーナスMoneyの値になります。
そのため説明文も、手球の残数についての内容になります。この倍率もスクリプトで変更出来るようにします。

 複製された位置から、下方向に下方向にずらして縦に並べて配置してください。
lblBallBonus ゲームオブジェクトの Text プロパティの文字列を TimeBonus から BallBonus に変更してください。
他はそのまま変更なしで大丈夫です。


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



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



lblBallBonus ゲームオブジェクト Sceneビュー画像




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



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




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



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



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


 ResultPopUp ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択します。名前を imgTopLine に変更します。


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



 imgTopLine ゲームオブジェクトは、リザルトポップアップのラインの役割になります。
位置については、画像のように、タイトルの文字の下に配置することで、このラインの部分から内容が変わるという目印として使います。

 画像については自由に設定してください。


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



imgTopLine ゲームオブジェクト Sceneビュー画像



imgTopLine ゲームオブジェクトを複製して、名前を imgBottomLine に変える


 imgTopLine ゲームオブジェクトを複製してください。名前を imgBottomLine に変更します。


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



 同じ位置に複製されますので、位置情報を変更します。こちらは画像のように、BallBonus の表示位置よりも下側に来るように配置します。
これは、次に行う手順に合わせており、このラインよりも上側が各Moneyの小計、このラインの下に全小計の合計を表示するようにデザインしているためです。


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



imgBottomLine ゲームオブジェクト Sceneビュー画像



lblMoney ゲームオブジェクトを複製し、それぞれの名前を lblTotalMoney と txtTotalMoney に変える


 lblMoney ゲームオブジェクトを複製してください。親子関係の2つのゲームオブジェクトが複製されますので、
それぞれの名前を lblTotalMoney と txtTotalMoney に変更してください。

 lblTotalMoney ゲームオブジェクトと txtTotalMoney ゲームオブジェクトは、今回のゲームで獲得したMoneyの合計のラベルと値を表示します。
Moneyと残り時間のボーナスMoneyと手球の残数のボーナスMoneyの合計値になります。

 こちらも複製された位置から下方向に移動し、imgBottomLine ゲームオブジェクトよりも下になるように配置してください。
こうすることで、imgBottomLine ゲームオブジェクトを境目に、上側が小計分、下側が合計分と、分けて表示するデザインになります。


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



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



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



lblTotalMoney ゲームオブジェクト Sceneビュー画像




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



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



 ここまででフレーム内(BackgroundFlame ゲームオブジェクト内)に配置するゲームオブジェクトの作成は終了です。


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


 表示関係の部品は追加できましたので、最後にボタンを2つ用意します。1つ作成してそれを複製して利用します。

 ResultPopUp ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Button を選択します。名前を btnClosePopUp に変更します。


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



 btnClosePopUp ゲームオブジェクトは、リザルトポップアップを閉じて、もう一度ゲームを最初からプレイするための処理を行うボタンです。
位置については、リザルト表示のフレームの外側に配置するようにします。もしもフレームを大きくデザインして利用している場合には、フレーム内に配置してください。


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



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



btnClosePopUp ゲームオブジェクト Sceneビュー画像




 btnClosePopUp ゲームオブジェクトの子オブジェクトである Text ゲームオブジェクトの Text コンポーネントに、ボタンの処理内容を文字列設定します。
ここでは「もう一度あそぶ」と設定していますが、同じ意味合いの別の言葉にして頂いても構いません。簡潔に記述し、あまり長い文字列にならないようにしましょう。


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



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



btnClosePopUp ゲームオブジェクトを複製し、名前を btnExitGame に変える


 btnClosePopUp ゲームオブジェクトを複製してください。名前を btnExitGame に変更してください。


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



 こちらのボタンはゲームを終了する処理を行うボタンです。この操作を行うと、アプリを終了します。

 btnClosePopUp ゲームオブジェクトと同じ位置に複製されますので、横並びになるように、右方向へずらして配置してください。


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



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



btnExitGame ゲームオブジェクト Sceneビュー画像




 btnExitGame ゲームオブジェクトの子オブジェクトである Text ゲームオブジェクトの Text コンポーネントに、ボタンの処理内容を文字列設定します。
ここでは「ゲームをやめる」と設定していますが、同じ意味合いの別の言葉にして頂いても構いません。簡潔に記述し、あまり長い文字列にならないようにしましょう。


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



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



 ここまででリザルトポップアップは完成です。


リザルトポップアップをプレファブにする


 リザルトポップアップが完成しましたので、最後に確認を行います。


完成時のリザルトポップアップの構成図



完成画像 Sceneビュー(上)とGameビュー




 問題なければプレファブにします。プレファブ後はヒエラルキーから削除してください。


手順動画 リザルトポップアップをプレファブにする
https://gyazo.com/5da6b90b8a8e62e47c805125c4fdb97f


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

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

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

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

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

private



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

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