３Ｄダイビングゲーム　手順１４

　前回の続きから実装します。

　キャラと水面までの距離を計算することができるようになりましたので、
この手順ではその距離の値を常時画面に表示し、あとどの位で水面についてしまうのかをユーザーに伝えるようにします。

＜完成画像＞

＜完成動画＞
https://gyazo.com/151ee074c84fd6f06782161a5cb3c2ec

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

手順１４　－距離の表示処理の実装－

２２．Canvas内にUI部品を作成する②（現在の距離表示)
２３．画面に現在の距離を更新表示する

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

　・ToStringメソッドの引数

２２．Canvas内にUI部品を作成する②（現在の距離表示)

１．設計

＜完成図＞
https://gyazo.com/151ee074c84fd6f06782161a5cb3c2ec

　前回の手順で作成したスクリプトには距離の値が変数として追加されました。
こちらの情報をゲーム画面に表示して、落下に合わせて、キャラと水面までの距離がカウントダウンして徐々に近づいていく様子の表示を実装します。

　必要な情報としては距離の値の変数ですが、スコアのときとおなじで、距離の値をゲーム画面に反映するためのゲームオブジェクトも必要になります。

　スコアを表示する際にも利用したUIをここでも利用しましょう。
Canvas というコンポーネントを持つゲームオブジェクトの中に(子オブジェクトとして)
ゲームオブジェクトを設置することで、ゲーム画面の一定の位置に常に情報を表示する機能を実装出来ます。

　制御の内容としては、ゲーム画面の右下に常時距離の数字の表示を行い、落下に合わせてこの数字を更新するようにします。

　最初に距離の値の表示を行うためのゲームオブジェクトの作成を行います。
それから、距離の計算を行っているスクリプトを修正して、距離の変数の情報を、距離の値表示用のゲームオブジェクトに対して送り出す制御を実装します。

ヒエラルキー画像　完成図

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

　ヒエラルキーの構成の画像をみていただくと分かりますが、スコアの表示を作成した場合と同じ方法で順番に作成していきます。

　すでに Canvas ゲームオブジェクトがありますので、こちらをそのまま利用しましょう。

　Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
新しく空のゲームオブジェクトが作成されますので、名前を Distances に変更します。
Distances ゲームオブジェクトは、距離の表示に関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。

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

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

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

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

　Distances ゲームオブジェクトの位置とアンカーを変更します。
RectTransform コンポーネント内にある Anchor（アンカー）をクリックして、Alt キーを押しながら、Bottom Right の位置をクリックしてください。
Distances ゲームオブジェクトが画面の左上の位置に移動するとともに、アンカーの位置も画面左上に設定されます。

＜手順動画　アンカーの設定(Altキーを押しながらクリックすることで、アンカーの設定とゲームオブジェクトの移動が一緒に行われる)＞
https://gyazo.com/ec98ea5bc979c608b0331987230d6e17

Distances ゲームオブジェクト　アンカー設定後のインスペクター画像

Distances ゲームオブジェクト　アンカー設定後のSceneビュー画像

　以上で設定は完了です。

３．Distances ゲームオブジェクトの子オブジェクトとして、imgBackground ゲームオブジェクトを作成する

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

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

　imgBackground ゲームオブジェクトは、距離の値の表示の背景画像の役割を持ちます。

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

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

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

　背景用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

　今回はこちらのパスにある画像を利用しています。

Assets/JKT_Art/UI/Arrow/box_11.png

フォルダ画像

　画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください。

　画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)

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

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

imgBackground ゲームオブジェクト　Gameビュー画像

　以上で設定は完了です。つづいて、この imgBackground ゲームオブジェクトに子オブジェクトを２つ追加していきます。

６．imgBackground ゲームオブジェクトの子オブジェクトとして、lblDistance ゲームオブジェクトを作成する

　imgBackground ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Text を選択します。
Textコンポーネントがアタッチされたゲームオブジェクトが作成されますので、名前を lblDistance に変更します。

　lblDistance ゲームオブジェクトは、画面上に m (距離のメートルの略語)という文字列を常に表示する、ラベルの役割を持ちます。
このゲームオブジェクトではスコアの更新は行いません。

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

　lblDistance ゲームオブジェクトを選択し、Textコンポーネントの Text プロパティ欄に、"m" と入力してください。
ラベル役のゲームオブジェクトですので、この文字列を常に画面に表示します。フォントの種類やサイズは適宜に調整してください。
文字の位置は左側・中央寄せに設定しています。

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

　続いて、RectTransform コンポーネントを確認します。
Sceneビューと RectTransform の Position の値を調整して、適宜な位置に設置してください。
Gameビューで実際にどのように画面に映るか確認することも必要です。

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

lblDistance ゲームオブジェクト　Gameビュー画像

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

７．imgBackground ゲームオブジェクトの子オブジェクトとして、txtDistance ゲームオブジェクトを作成する

　imgBackground ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Text を選択します。
Textコンポーネントがアタッチされたゲームオブジェクトが作成されますので、名前を txtDistance に変更します。

　txtDistance ゲームオブジェクトは、画面上に距離の値を表示する役割を持ちます。
このゲームオブジェクトの Text コンポーネントの機能を利用して、画面上に現在の距離の値を表示・更新していきます。

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

　txtDistance ゲームオブジェクトを選択し、Textコンポーネントの Text プロパティ欄に 0 と入力してください。
ここにはゲーム中にスクリプトを利用して、動的に距離の値が表示されます。

　フォントのサイズは点数が目立つように、lblDistance ゲームオブジェクトの Text コンポーネントより少し大きめがいいでしょう。
フォントも同様に、lblDistance と同じフォントを選択してください。文字の位置は右寄せ・中央寄せに設定しています。
こちらもRaycastTarget のチェックも外してください。

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

　続いて、RectTransform コンポーネントを確認します。
Sceneビューと RectTransform の Position の値を調整して、適宜な位置に設置してください。
Gameビューで実際にどのように画面に映るか確認することも必要です。下記の画像も参考してください。
txtDistance ゲームオブジェクトと文字の下の高さの位置を合わせるようにしましょう。

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

txtDistance ゲームオブジェクト　Sceneビュー画像②(txtDistance ゲームオブジェクトと文字の下の高さの位置を合わせる)

txtDistance ゲームオブジェクト　Gameビュー画像

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

　以上の手順で距離の表示用のゲームオブジェクト群は完成です。

ヒエラルキー画像

Gameビュー　完成画像

２３．画面に現在の距離を更新表示する

１．設計

　距離の変数と、その変数を表示するコンポーネントを持つゲームオブジェクトの配置が終了しましたので、
これらの処理をスクリプトを利用して紐づけて、Text コンポーネントに距離の値が表示されるようにロジックを考えていきます。

　スコア表示と同じ手法で距離の値をゲーム画面に表示しますので、スクリプトを見ずに挑戦出来る方はまずは自分で処理を書いてみましょう。
PlayerController スクリプトに記述しているスコア表示用の処理が参考になると思います。

　１点注意すべき点があります。それは、最後に着水した後の距離の表示です。
そのまま距離の変数の値を表示してしまうと恐らくマイナス表示になりますので、この制御も一緒に行いましょう。

　着水したら 0 と表示するようにしてください。

　制御の方法も何種類かあります。表示する際に制御を行うのか、あるいは距離の変数の値に対して制御を行うのか、色々と考えて実装してみましょう。

２．距離の変数を記述したスクリプトを修正する

　前回の手順で作成した距離の変数を管理しているスクリプトに処理を記述します。

　上記の注意点を考慮しながら制御処理を記述してください。

GameManager.cs(自分で作成しているスクリプトがある場合には、そのスクリプトを修正する)

　<=　クリックすると開きます

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;                    // <=  追加します

public class GameManager : MonoBehaviour
{
    [SerializeField]
    private PlayerController player;     // キャラの位置情報

    [SerializeField]
    private Transform goal;              // ゴール地点(水面)の位置情報


////* ここから追加 *////


    [SerializeField]
    private Text txtDistance;            // 距離の値を受け取って更新するためのコンポーネントを代入する


////* ここまで *////


    private float distance;              // キャラと水面までの距離の計測用

    private bool isGoal;                 // ゴール判定用。距離が 0 以下になったらゴールと判定して true にする。false の間はゴールしていない状態(着水判定と同じ bool 型の利用方法)


    void Update()
    {
        // 距離が 0 以下になったらゴールしたと判定して距離の計算は行わないようにする
        if (isGoal == true) {

            // return があると、この処理よりも下の処理は処理されない
            return;
        } 

        // Y軸が高さの情報なので、双方の高さの値を減算して差分値を距離とする
        distance = player.transform.position.y - goal.position.y;
       
        // 距離が 0 以下になったら
        if(distance <= 0) {

            // 距離が 0 以下になったので、ゴールと判定する
            isGoal = true;

            // 距離を 0 にする
　　　　　　distance = 0;

　　　　    // TODO 着水した際の処理を追加する

        }

        // Consoleビューに距離を表示する
　　　　//Debug.Log(distance.ToString("F2"));              //  <=  確認が終了し、今回から画面上に距離の表示をするので、コメントアウトするか削除してください。


////* ここから追加 *////


        // 距離の画面表示を更新
        txtDistance.text = distance.ToString("F2");


////* ここまで *////


    }
}

３．＜ToString()メソッドの引数＞

　距離の計算は小数点付で計算されています。このときこの値をそのまま画面に表示すると、小数点が非常に多く見にくくなってしまいます。
そのような場合には、ToStringメソッドの引数を利用して表示する値を整数のみ、あるいは指定した小数点の位までにします。

txtDistance.text = distance.ToString("F2");

　ToString()メソッドの引数に "F2" が指定されています。このメソッドは引数に指定した文字列によって表示方法を変化させることができます。
今回の F2 では、小数点第２位までを表示するように指定して、int型をstring型にする処理を行っています。
F の後ろの数字が小数点の位を指定しており、F0 の場合には少数点なし、F1 の場合には小数点第１位まで表示、というように表示方法の指定が可能です。

　実際にいろいろな値にして小数点表示を試してみましょう。

４．距離の変数を持つスクリプトがアタッチされているゲームオブジェクトのアサイン情報に Text コンポーネントがアタッチされているゲームオブジェクトをアサインする

　距離の変数を持つスクリプトがアタッチされているゲームオブジェクトを確認します。
インスペクターに新しく宣言した txtDistance 変数が表示されていますので、こちらに対象となるゲームオブジェクトをドラッグアンドドロップしてアサインします。
距離の値を更新させて表示するには Text コンポーネントを利用しますので、利用する予定の Text コンポーネントがアタッチされているゲームオブジェクトをアサインしましょう。
手順については割愛します。

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

　<=　クリックすると開きます。

５．ゲームを実行して動作を確認する

　すべての処理の実装・アサインが完了したら、ゲームを実行して距離の値が表示されて、落下に合わせて更新されていくか確認してください。
また、落下が終了したとき、表示される値がマイナスの値ではなく、0 になるように制御されているかも確認します。

＜実行動画＞
https://gyazo.com/151ee074c84fd6f06782161a5cb3c2ec

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

　=>　次は　手順１５　－キャラの姿勢変更の制御－　です。

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

印刷する

コメント（0）

３Ｄダイビングゲーム　手順１４ - i-school 先頭へ

コメントをかく

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

i-school