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

　この手順ではキャラの姿勢を変更する処理を、ボタン操作によって制御する処理を実装します。
またボタンを操作するたびに、ボタンのアイコン画像を回転させて、姿勢の状態とリンクさせるようにします。

＜完成画像＞

＜完成動画＞
https://gyazo.com/3df9e1519a78258af0a8363cc6d14081

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

手順１６　－ボタンによるキャラの姿勢変更の制御－

２５．Canvas内にUI部品を作成する③（姿勢変更用のボタン）
２６．スクリプトを使って、姿勢の変更処理をボタンから行えるように変更する

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

　・Button.onClick.AddListenerメソッド　スクリプトからボタンタップ用メソッドの登録
　・Transform.GetChild メソッド

２５．Canvas内にUI部品を作成する③（姿勢変更用のボタン）

１．設計

　キーボードでの姿勢変更操作は出来ましたので、ゲーム画面にボタンを配置して、そのボタンを押した場合にも
同じように姿勢の変更を行うよう制御を実装していきます。
　
　ボタンを設置するためには、 Button コンポーネントを持つゲームオブジェクトが必要になります。
Button コンポーネントを持つゲームオブジェクトは Canvas ゲームオブジェクトの子オブジェクトではないと動作しませんので
すでにある Canvas ゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを追加します。

　設置が完了したら、Button コンポーネントを制御するプラグロムを PlayerController スクリプトに追加して
キーボードを押した際と同じように、ボタンを押した際にも ChangeAttitude メソッドを呼び出す処理を追加して、Button コンポーネントを制御します。

ヒエラルキー画像　完成図

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

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

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

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

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

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

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

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

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

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

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

　以上で設定は完了です。

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

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

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

　btnChangeAttitude ゲームオブジェクトはボタンの制御とボタンの背景画像の設定を行うゲームオブジェクトです。

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

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

　最初に btnChangeAttitude ゲームオブジェクトの子オブジェクトにある Text ゲームオブジェクトは今回使用しませんので、これを削除します。

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

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

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

Assets/JKT_Art/UI/Arrow/box_6.png

フォルダ画像

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

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

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

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

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

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

　以上で設定は完了です。Button コンポーネントには変更はありません。

最後にボタン用のアイコン画像用のゲームオブジェクトを btnChangeAttitude ゲームオブジェクトの子オブジェクトとして作成します。

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

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

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

　imgAttitude ゲームオブジェクトはボタンのアイコン画像の設定を行うゲームオブジェクトです。

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

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

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

　アイコン用の画像ですが、今回はこちらのパスにある画像を利用しています。

Assets/JKT_Art/UI/Character/peng_icon.png

フォルダ画像

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

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

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

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

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

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

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

ヒエラルキー画像

Gameビュー　完成画像

２６．姿勢の変更処理をボタンから行えるように変更する

１．設計

　キーボードでの姿勢変更の操作をボタンでも制御できるように設計を行います。

　すでに姿勢変更用のメソッドは ChangeAttitude メソッドを準備してありますので、ボタンを押した際に、このメソッドを呼び出すように処理を追加します。
Button コンポーネントには OnClick というメソッドを登録できる場所があります。
ですが今回はそちらではなくて、スクリプトから OnClick イベントに ChangeAttitude メソッドを登録して制御を行います。

　またボタンを押すたびに、キャラの姿勢に合わせてボタンの向きを変更する処理も追加します。
このようにボタンの情報が更新させることによって、ユーザーはボタンを押すとどのような操作が可能になるのか分かりやすくなります。

　自分がゲームを遊ぶ側の立場に立って、どういった演出があればわかりやすいかという観点でプログラムを考えていきましょう。

＜ボタンを押すと姿勢と一緒にボタンの向きも変わる＞
https://gyazo.com/3df9e1519a78258af0a8363cc6d14081

２．PlayerController スクリプトを修正する

　Button コンポーネントの操作を行いたいので、Button 型の変数を用意して Button コンポーネントの情報を紐づけ出来るようにします。
SerializeField属性をつけて変数を宣言しておいて、インスペクターより Button コンポーネントのアタッチされているゲームオブジェクトをアサインして登録します。

　メソッドの追加はありませんが、Start メソッドと ChangeAttitude メソッド内に Button コンポーネントの制御処理を追加します。

　Start メソッドには Button コンポーネントの OnClick イベントに ChangeAttitude メソッドをスクリプトから登録して
ボタンを押した際に ChangeAttitude メソッドが呼び出されるように制御を追加します。

　ChangeAttitude メソッドには、キャラの姿勢に応じてボタンの回転角度を変更する制御処理を追加します。
キャラが頭を下に向けて直滑降で落下している場合にはボタンは水平方向の回転向きで、ボタンを押すことによって変更になる姿勢を表示します。

＜直滑降時　ボタンは横向き＞

　伏せの状態の際には、ボタンの回転角度を変更して、キャラが頭を下にしている画像になるように制御します。
これらのボタンの回転には DOTween の機能を利用して、ペンギンのアイコン画像がアニメして回転するように演出します。

＜伏せ時　　ボタンは下向き＞

PlayerController.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;

public class PlayerController : MonoBehaviour
{
    [Header("移動速度")]
    public float moveSpeed;

    [Header("落下速度")]
    public float fallSpeed;

    [Header("着水判定用。trueなら着水済")]
    public bool inWater;

    // キャラの状態の種類
    public enum AttitudeType {
        Straight,        // 直滑降(通常時)
        Prone,           // 伏せ
    }

    [Header("現在のキャラの姿勢")]
    public AttitudeType attitudeType;


    private Rigidbody rb;

    private float x;
    private float z;

    private Vector3 straightRotation = new Vector3(180, 0, 0);     // 頭を下(水面方向)に向ける際の回転角度の値

    private int score;                                             // 花輪を通過した際の得点の合計値管理用

    private Vector3 proneRotation = new Vector3(-90, 0, 0);        // 伏せの姿勢の回転角度の値


    [SerializeField, Header("水しぶきのエフェクト")]
    private GameObject waterEffectPrefab = null;

    [SerializeField, Header("水しぶきのSE")]
    private AudioClip splashSE = null;

    [SerializeField]
    private Text txtScore;


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


    [SerializeField]
    private Button btnChangeAttitude;


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


    void Start() {
        rb = GetComponent<Rigidbody>();

        // 初期の姿勢を設定(頭を水面方向に向ける)
        transform.eulerAngles = straightRotation;

　　　　// 現在の姿勢を「直滑降」に変更(いままでの姿勢)
        attitudeType = AttitudeType.Straight;


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


　　　　// ボタンのOnClickイベントに ChangeAttitude メソッドを追加する
　　　　btnChangeAttitude.onClick.AddListener(ChangeAttitude);


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

    }

    void FixedUpdate() {

        // キー入力の受付
        x = Input.GetAxis("Horizontal");
        z = Input.GetAxis("Vertical");

        // 斜め移動の距離が増えないように正規化処理を行い、単位ベクトルとする(方向の情報は持ちつつ、距離による速度差をなくして一定値にする)
        Vector3 direction = new Vector3(x, 0, z).normalized;

        // velocity(速度)に新しい値を代入して移動
        rb.velocity = new Vector3(direction.x * moveSpeed, -fallSpeed, direction.z * moveSpeed);
    }

　　// IsTriggerがオンのコライダーを持つゲームオブジェクトを通過した場合に呼び出されるメソッド
    private void OnTriggerEnter(Collider col) {

        // 通過したゲームオブジェクトのTagが Water であり、かつ、isWater が false(未着水)であるなら
        if (col.gameObject.tag == "Water" && inWater == false) {

            // 着水状態に変更する
            inWater = true;

            // 水しぶきのエフェクトを生成
            GameObject effect = Instantiate(waterEffectPrefab, transform.position, Quaternion.identity);
            effect.transform.position = new Vector3(effect.transform.position.x, effect.transform.position.y, effect.transform.position.z - 0.5f);

            // エフェクトを２秒後に破壊
            Destroy(effect, 2.0f);

　　　　　　// 水しぶきのSEを再生
　　　　　　AudioSource.PlayClipAtPoint(splashSE, transform.position);

　　　　　　// コルーチンメソッドである OutOfWater メソッドを呼び出す
            StartCoroutine(OutOfWater());        
        }

　　　　// 侵入したゲームオブジェクトの Tag が FlowerCircle なら
        if (col.gameObject.tag == "FlowerCircle") {

            // 侵入した FlowerCircle Tag を持つゲームオブジェクト(Collider)の親オブジェクト(FlowerCircle)にアタッチされている FlowerCircle スクリプトを取得して、point 変数を参照し、得点を加算する
            score += col.transform.parent.GetComponent<FlowerCircle>().point;

            // 画面に表示されている得点表示を更新
　　　　　　txtScore.text = score.ToString();
        }
    }

    /// <summary>
    /// 水面に顔を出す
    /// </summary>
    /// <returns></returns>
    private IEnumerator OutOfWater()
    {
        // １秒待つ
        yield return new WaitForSeconds(1.0f);   //  <= yield による処理。yield return new WaitForSecondsメソッドは、引数で指定した秒数だけ次の処理へ移らずに処理を一時停止する処理 

        // Rigidbody コンポーネントの IsKinematic にスイッチを入れてキャラの操作を停止する
        rb.isKinematic = true;

        // キャラの姿勢（回転）を変更する
        transform.eulerAngles = new Vector3(-30, 180, 0);

        // DOTweenを利用して、１秒かけて水中から水面へとキャラを移動させる
        transform.DOMoveY(4.7f, 1.0f);
    }

    void Update() {

        // スペースキーを押したら
        if (Input.GetKeyDown(KeyCode.Space)) {

            // 姿勢の変更
            ChangeAttitude();
        }
    }

    /// <summary>
    /// 姿勢の変更
    /// </summary>
    private void ChangeAttitude() {

        // 現在の姿勢に応じて姿勢を変更する
        switch (attitudeType) {

　　　　　　// 現在の姿勢が「直滑降」だったら
            case AttitudeType.Straight:

                // 現在の姿勢を「伏せ」に変更
                attitudeType = AttitudeType.Prone;

                // キャラを回転させて「伏せ」にする
                transform.DORotate(proneRotation, 0.25f, RotateMode.WorldAxisAdd);

                // 空気抵抗の値を上げて落下速度を遅くする
                rb.drag = 25.0f;


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


　　　　　　　　// ボタンの子オブジェクトの画像を回転させる
                btnChangeAttitude.transform.GetChild(0).DORotate(new Vector3(0, 0, 180), 0.25f);


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


                // 処理を抜ける(次の case には処理が入らない)
                break;

            // 現在の姿勢が「伏せ」だったら
            case AttitudeType.Prone:

　　　　　　　　// 現在の姿勢を「直滑降」に変更
                attitudeType = AttitudeType.Straight;

                // キャラを回転させて「直滑降」にする
                transform.DORotate(straightRotation, 0.25f);

                // 空気抵抗の値を元に戻して落下速度を戻す
                rb.drag = 0f;


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


　　　　　　　　// ボタンの子オブジェクトの画像を回転させる
                btnChangeAttitude.transform.GetChild(0).DORotate(new Vector3(0, 0, 90), 0.25f);


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


                // 処理を抜ける
                break;
        }
    }
}

　スクリプトの修正が終了したら、Penguin ゲームオブジェクトのインスペクターから PlayerController スクリプトを確認します。
新しく追加した btnChangeAttitude 変数の表示が追加されていれば問題ありません。

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

３．＜Button.onClick.AddListenerメソッド　スクリプトからボタンタップ用メソッドの登録＞

　ButtonコンポーネントにはOnClickというイベントを登録する場所があります。ここにゲームオブジェクトのアサインを行うことで、
アサインしたゲームオブジェクトにアタッチされているスクリプトに宣言されている public 修飾子のメソッドを登録することができます。

　この処理をスクリプトから制御して追加して行う処理が、onClick.AddListenerメソッドです。引数のない場合と引数のある場合で書式が変化します。

　利点は、private 修飾子のメソッドでも登録できること、スクリプトから登録しているので、Unity内の上記の画像のButton部分への登録作業や、確認をする必要がなくなること、などがあります。

　今回は引数のないメソッドを登録していますので、引数にはそのままメソッド名を記述します。メソッドの()を書くとエラーになるので、メソッド名のみを記述します。

　// ボタンのOnClickイベントに ChangeAttitude メソッドを追加する
　btnChangeAttitude.onClick.AddListener(ChangeAttitude);

　詳細については公式のリファレンスを参考にしてください。またネットには記事が多くありますので調べてみましょう。

参考サイト

Unity公式スクリプトリファレンス
Button.on.Click.AddListener
https://docs.unity3d.com/2019.1/Documentation/Scri...

４．＜Transform.GetChild メソッド＞

　ボタンを押すたびにボタンのアイコンの画像も回転させてキャラの姿勢とリンクするように制御を行いたいのですが
アイコンのゲームオブジェクトは、ボタンのゲームオブジェクトから見て、子オブジェクトとして存在しています。

＜アイコンの画像は btnChangeAttitude ゲームオブジェクトではなく、その子オブジェクトである imgAttitude に設定されている＞

　こういった場合には色々な参照方法がありますが、今回の場合は、Unityが用意している Transform クラスの GetChild メソッドを利用しています。
このメソッドは引数に int 型の値を指定します。この値が親オブジェクトからみて n 番目の子オブジェクトの Transform の情報を戻り値として取得する、というメソッドです。

  // ボタンの子オブジェクトの画像を回転させる
  btnChangeAttitude.transform.GetChild(0).DORotate(new Vector3(0, 0, 180), 0.25f);

　上記の命令は、btnChangeAttitude ゲームオブジェクトの Transform クラスに対して命令を出し、自分の子オブジェクトのうち、0 番目の子オブジェクトの Transform の情報を取得します。
つまり、GetChild(0) の部分は、imgAttitude ゲームオブジェクトの Transform の値が取得されていることになります。

そしてimgAttitude ゲームオブジェクトの Transformに対して、DORotate メソッドを実行してください、という処理になります。
(親オブジェクトからみて、自分の一番上にいる子オブジェクトから番号が割り当てられ、最初は 0 番です)

　そのため、btnChangeAttitude ゲームオブジェクトを経由して、子オブジェクトである imgAttitude ゲームオブジェクトの Transform に対して回転させる命令を出すことが出来ています。
　

　このようにスクリプトが操作を行いたいゲームオブジェクトの参照を持っていない場合であっても、親子関係を利用することによって
親オブジェクトを経由して子オブジェクトの制御を行う、あるいは子オブジェクトを経由して親オブジェクトの制御を行うという制御処理が実装出来ます。

参考サイト

Unity公式スクリプトリファレンス
Transform.GetChild
https://docs.unity3d.com/ja/current/ScriptReferenc...

Quita @Armyporoco 様
【Unity】親オブジェクトについたスクリプトから子オブジェクトを操作する！
https://qiita.com/Armyporoco/items/391776d4c79d25c...

５．Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報に必要な情報をアサインする

　 PlayerController スクリプトにButton コンポーネントのアサイン情報が追加されましたので、
Button コンポーネントがアタッチされている対象のゲームオブジェクトをドラッグアンドドロップして btnChangeAttitude 変数に登録します。
アサインの手順については割愛します。
　

Penguin ゲームオブジェクト　アサイン後のインスペクター画像

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

　ボタンを押すたびに姿勢が変更なり、かつ、ボタンが回転して、押すと変更する姿勢の向きになるように制御されているか確認してください。

＜直滑降時　ボタンは横向き＞

＜伏せ時　　ボタンは下向き＞

＜実行動画＞
https://gyazo.com/3df9e1519a78258af0a8363cc6d14081

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

　=>　次は　手順１７　－姿勢変更ゲージの作成－　です。

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

印刷する

コメント（0）

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

コメントをかく

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

i-school