おはじきゲーム　手順２３

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

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

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

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

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

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

手順２３　－リザルト用ゲームオブジェクトを作成－

５０．Canvas内にResultPopUpゲームオブジェクト（リザルト表示用のUI部品群）を作成、プレファブにする

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

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

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

設計

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

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

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

　表示されたリザルトポップアップでは、今回のゲームの結果をドラム式に数字をアニメ演出して表示します。
小計である３つの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 から変更できます。

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

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

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

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

スプライトの９スライス

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

参考サイト

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

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

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

インスペクター画像

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

　今回使用した無料のフレーム画像にも９スライスを設定し、 ImageType を Sliced にして適用しています。
（なおSpriteRendererコンポーネントで９スライスを使用する場合には、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 ゲームオブジェクトを次の手順で作成しますので、左に寄せています。

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

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 ゲームオブジェクトの子オブジェクトにして１セットにしてください。

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

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

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

　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 ゲームオブジェクトを複製してください。親子関係のある３つのゲームオブジェクトが複製されます。
それぞれの名前を 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 ゲームオブジェクトを複製してください。親子関係の２つのゲームオブジェクトが複製されますので、
それぞれの名前を lblTotalMoney と txtTotalMoney に変更してください。

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

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

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

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

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

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

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

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

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

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

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

　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

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

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

おはじきゲーム　手順２３ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school

おはじきゲーム　手順２３