パズルゲーム　発展２

干支のシャッフル機能を追加する①

　ゲームをプレイしていると、干支同士がうまくつながらないような場面があります。
生成される干支の種類を5種類に絞っていても、ランダムな干支を毎回生成している以上、どうしても避けられない問題です。

　そこで１つの打開策として、干支の位置をシャッフルし、今いる位置からランダムな位置へと移動させることで、膠着した状況を打破できるような設計を考えてみます。

　シャッフル用のボタンを画面下部のUI部分(CanvasのBottomUI部分)を用意し、そのボタンを押すことで干支がランダムな位置へと移動します。

　ロジックとしては、見えないコライダーをゲーム画面内に設置しておいて、シャッフルのボタンを押すと、そのコライダーのスイッチがオンになり
コライダー内にある干支に対して、Rigidbody2DのAddForceメソッドを処理して、空中へと打ちあげるようにします。
ゲーム画面上では、干支の下方向から上方向に向かって風が起きて、浮かび上がっているように表現されています。

完成動画
https://gyazo.com/7557b737aefde69ec4b5e3d9687d5eb0

　このシャッフル機能を、発展２～３で実装していきます。この手順では、以下の内容を実装します。

　１．Canvas内にShuffleゲームオブジェクトを作成する
　２．Canvas内のBottomUIの子オブジェクトとして空のゲームオブジェクトを作成し、Buttonsに名前を変える
　３．Buttonsゲームオブジェクトの子オブジェクトとして、Buttonゲームオブジェクトを作成し、btnShuffleに名前を変える

　４．Shuffleスクリプトを新しく作成する
　５．ShuffleスクリプトをShuffleゲームオブジェクトにドラッグアンドドロップしてアタッチする　
　６．Rigidbod.AddForceメソッドがどのように作用するか確認する

　新しく学習する内容になります。

・メソッドの引数を利用してアサイン情報を取得する方法
・三項演算子による処理

１．Canvas内にShuffleゲームオブジェクトを作成する

　シャッフルさせるゲームオブジェクトも干支と同じ場所にないと動作しませんので、これをCanvas内に設置していきます。

　Canvas上で右クリックしてメニューを表示し、Create Emptyを選択して空のゲームオブジェクトを１つ作成します。名前を Shuffle に変更します。

ヒエラルキー

　Shuffleゲームオブジェクトをヒエラルキー上で選択し、インスペクターでRectTransformコンポーネントを確認します。普通のTransformコンポーネントになっていたら削除して再度作成してください。
位置についてはCanvasの下部になる辺りに調整します。画像を参考にしてください。

RectTransformコンポーネント

　それでは次に、コンポーネントを２つ追加していきます。

　インスペクターの一番下にある Add Component ボタンを押して、Rigidboby2dコンポーネントを追加します。設定については Gravity Scale(重力)を 0 にして、重力なしの状態にしてください。
他の部分は変更しなくて問題ありません。

Rigidbody2D

　続いてもう一度 Add Componentボタンを押して、CapsuleCollider2Dコンポーネントを追加します。Sceneビューのコライダーを確認しながら、Canvas内に収まる大きさの円を作成します。
位置については干支の配置されている部分と重なるくらいの位置に調整します。Sceneビューの画像を参考してください。

CapsuleCollider2D

Sceneビューでの画像①

Sceneビューでの画像②

Sceneビューでの画像③

Shuffleゲームオブジェクトのインスペクター画像(RectTransformの他に２つのコンポーネントがアタッチされていれば大丈夫です)

　以上の手続きでShuffleゲームオブジェクトは完成です。

２．Canvas内のBottomUIの子オブジェクトとして空のゲームオブジェクトを作成し、Buttonsに名前を変える

　Canvas内に作成済のBottomUIを選択し、その上で右クリックをしてメニューを表示します。
Create Empty を選択して空のゲームオブジェクトを１つ作成し、名前をButtonsに変更します。

　このButtonsゲームオブジェクトは、ボタン用ゲームオブジェクトのフォルダとして利用します。

ヒエラルキー画像

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

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

３．Buttonsゲームオブジェクトの子オブジェクトとして、Buttonゲームオブジェクトを作成し、btnShuffleに名前を変える

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

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

　
　btnShuffleゲームオブジェクトを選択してインスペクターを確認します。

　位置と大きさについては、RectTransformコンポーネントのPositionや、Sceneビューの画像を参考して調整してください。

RectTransform

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

　つづいてImageコンポーネントを選択し、シャッフル用のボタンの画像を設定します。
無料素材を探してきてインポートして利用してください。
ここでは回転のアイコンを利用していますが、シャッフルというアクションが分かればどんな画像でもよいでしょう。(出来れば、PNG形式の透過性画像がいいです)
他の設定はそのままで問題ありません。

画像設定

　Buttonコンポーネントについては変更ありませんので、アタッチされていることが確認できれば大丈夫です。　

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

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

Sceneビュー画像

　以上でシャッフル用のボタンのゲームオブジェクトは完成です。

４．Shuffleスクリプトを新しく作成する

　シャッフルさせる挙動を実装するために、新しくスクリプトを用意して機能をそちらに記述します。

　Project内の Scripts フォルダ内で右クリックし、Create => C# Script を選択します。名前を Shuffle に変更します。

　それではスクリプトを書いていきましょう。

Shuffle.cs

using UnityEngine;

public class Shuffle : MonoBehaviour {

    [SerializeField, Header("シャッフルの力")]
    private float shufflePower = 10.0f;

    [SerializeField, Header("シャッフルの速度")]
    private Vector2 shuffleVelocity = new Vector2(10.0f, 10.0f);

    [SerializeField, Header("シャッフルの時間")]
    private float duration = 1.0f;

    private CapsuleCollider2D capsuleCol;     // Colliderのオン/オフ制御用
    private float shuffleTimer;               // シャッフル時間のカウント用

    private UIManager uiManager;

    /// <summary>
    /// シャッフルの初期設定
    /// </summary>
    /// <param name="uiManager"></param>
    public void SetUpShuffle(UIManager uiManager) {
        this.uiManager = uiManager;

        capsuleCol = GetComponent<CapsuleCollider2D>();

        // シャッフル用のコライダーをオフにしておく
        capsuleCol.enabled = false;
    }

    /// <summary>
    /// シャッフル開始
    /// </summary>
    public void StartShuffle() {
        // コライダーをオンにして干支をシャッフルできるようにする
        capsuleCol.enabled = true;

        // シャッフル時間を設定
        shuffleTimer = duration;

        // シャッフルの方向をランダムで取得
        int value = Random.Range(0, 2);
        
        // シャッフルの方向をシャッフル速度のXに設定(-1 = 左方向、1 = 右方向)
        shuffleVelocity.x = value == 0 ? shuffleVelocity.x *= -1 : shuffleVelocity.x *= 1;
    }

    /// <summary>
    /// シャッフル停止
    /// </summary>
    private void StopShuffle() {
        shuffleTimer = 0;

        // コライダーをオフにして干支への影響をなくす
        capsuleCol.enabled = false;

        // 再度シャッフルボタンを押せるようにする
        //uiManager.ActivateShuffleButton(true);　　　//　コメントアウトしておきます
    }

    /// <summary>
    /// シャッフルの実処理
    /// </summary>
    /// <param name="col"></param>
    void OnTriggerStay2D(Collider2D col) {
        if (col.TryGetComponent(out Rigidbody2D rb)) {
            // コライダー内にある干支に対して物理演算を行う

            // 干支に対するシャッフルの相対速度を計算
            Vector2 relativeVelocity = shuffleVelocity - rb.velocity;

            // 干支に力を加える(シャッフル)
            rb.AddForce(shufflePower * relativeVelocity);
        }
    }

    void Update()
    {
        // シャッフル中のみ、shuffleTimerをカウント
        shuffleTimer -= Time.deltaTime;

        // shuffleTimerが0になり、かつコライダーがオンの場合には
        if (shuffleTimer <= 0 && capsuleCol.enabled)
        {
            // シャッフル停止
            StopShuffle();
        }
    }
}

　スクリプト内の StopShuffle メソッド内にある以下の処理は、まだ呼び出し先のメソッドが用意されていないため、現時点ではエラーが出ます。
こちらの部分は、一旦コメントアウトしておいてください。

  // 再度シャッフルボタンを押せるようにする
  //uiManager.ActivateShuffleButton(true);　　//　コメントアウトしておきます

　次回の発展３内で UIManager のスクリプトを修正した後に、コメントアウトを解除してください。

５．ShuffleスクリプトをShuffleゲームオブジェクトにドラッグアンドドロップしてアタッチする

　Shuffleスクリプトを作成したら、作成してある、Shuffleゲームオブジェクトにドラッグアンドドロップしてアタッチします。
Shuffleゲームオブジェクトを選択して、Shuffleスクリプトをインスペクターにて確認します。
宣言フィールドで宣言している変数が３つ表示されていると思います。いずれも初期値を入力してありますので、数値が 0 でなければそのまま変更せずに問題ありません。

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

　変数の説明です。

　ShufflePowerはAddForceメソッドで使用する、シャッフルする際の力の値です。初期値は 10 です。大きい値になるほど力の係数が上がるため、干支はより高く打ちあがります。

　ShuffleVelocityはシャッフルの速度です。干支に対してシャッフルの速度を使って相対速度を算出し、それをAddForceメソッドにて使用します。
この値も大きくなるほど相対速度が速く（大きく）なりますので、干支はより高く打ちあがります。Xは左右方向への速度、Yは上下方向への速度を表します。
初期値はどちらも 10 です。シャッフルする際にはXに対して -1 か 1 が掛けられて -10 か 10 になることで、ランダムに左右方向が決定されます。

　Durationはシャッフルする時間です。初期値は 1 ですので、1秒間だけシャッフルされます。

　これらの数値は実際にゲームでシャッフルをしながら、調整してみてください。

インスペクター画像①

インスペクター画像②

＜メソッドの引数を利用してアサイン情報を取得する方法＞

　他のクラスの情報をクラス内で利用したい場合、その紐づけの方法にはいくつかの手段があります。
private変数内に代入したいのであれば、紐づけしたいクラスがアタッチされているゲームオブジェクトを探して(Findメソッドを利用して)、それからGetComponentする方法、
public変数であれば、インスペクターからゲームオブジェクトをドラッグアンドドロップして事前にアサインしておく方法などです。

　今回Shuffleクラスでは、UIManagerクラスの情報を代入するための変数をprivateで用意しています。
こういった場合にはインスペクターによる事前のアサインができませんが、Findメソッドを利用せずにアサインを取得する方法の１つとして、
メソッドの引数の値にUIManagerクラスを届けてもらう方法があります。


    private UIManager uiManager;    //　アサイン情報

    /// <summary>
    /// シャッフルの初期設定
    /// </summary>
    /// <param name="uiManager"></param>
    public void SetUpShuffle(UIManager uiManager) {　　　　// <=  引数でUIManagerクラスが届いている
        this.uiManager = uiManager;                        // それを変数に代入する

        (省略)
    }

　このような手法を用いれば、処理の重いFindメソッドを利用することなく、private変数にアサイン情報を代入することが可能です。
クラス内で利用したい外部クラスの情報は、それをどのように取得するか、という部分で設計を検討することで、このようなやりとりによる値の代入ができます。

＜三項演算子による処理＞

　
　三項演算子という処理は、if文の分岐処理を1行で簡潔に記述できる書式です。

次のような条件のif文があったとします。

    int value = Random.Range(0, 2);
    
　　// シャッフルの方向をシャッフル速度のXに設定(-1 = 左方向、1 = 右方向)
    if(value == 0)
    {
         shuffleVelocity.x *= -1;
    } 
    else 
    {
         shuffleVelocity.x *= 1;
    }

　この条件式を三項演算子にして1行にまとめると、次のような式になります。

　　// シャッフルの方向をシャッフル速度のXに設定(-1 = 左方向、1 = 右方向)
    shuffleVelocity.x = value == 0 ? shuffleVelocity.x *= -1 : shuffleVelocity.x *= 1;

　三項演算子はその名前の通りで、３つの項目があります。

【条件文】 ? 【trueだった場合返す値や処理】 : 【falseだった場合返す値や処理】

　右辺では、この条件式とtrueとfalseの３つの項目を用意して、その結果に合わせて左辺へ値を代入します。

参考記事

@crazy_traveler様
参考になる三項演算子
https://qiita.com/crazy_traveler/items/5fb5ec9568e...

６．Rigidbod.AddForceメソッドがどのように作用するか確認する

　ここで実際に、AddForceメソッドによってどのような挙動が実装されているかをデバッグして確認してみましょう。

　デバッグを開始するにあたり、まずはShuffleスクリプト内のUpdateメソッドの処理をすべてコメントアウトします。この部分があるとデバッグができないためです。

　ゲームを実行して、干支を生成します。Shuffleゲームオブジェクトを選択して、CapsuleCollider2Dのスイッチをオン、オフを切り替えてみてください。
OnEnterStay2Dメソッド内に記述しているAddForceメソッドが実行されて、オンの時には干支が空中に浮かび上がって、オフにすると落下するはずです。

　確認が取れたらデバッグを終了しますので、先ほどコメントアウトしたShuffleスクリプトのUpdateメソッドを元に戻しておいてください。

デバッグ動画　Shuffleゲームオブジェクトのコライダーをオン/オフして、どのようにRigidbody2DのAddForceが作用するかを確認する
https://gyazo.com/6f64c7c22674cf8e2f6b7b47f6006d9f

　次の手順では、このオン/オフをシャッフルボタンを用意して切り替えるようにして、シャッフル機能を実装していきます。

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

　次は 発展３ です。

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

印刷する

コメント（0）

パズルゲーム　発展２ - i-school 先頭へ

コメントをかく

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

i-school