３Ｄダイビングゲーム　発展４

ーSkyboxの自動変更処理の実装ー

＜Skyybox　設定なし(Default)＞

＜Skyybox　設定あり＞

　・Skyboxの自動変更処理の実装

＜実装動画　ゲームを実行するたびに Skybox がランダムに設定される＞
https://gyazo.com/836b133d85f3fd88b3aa6ba7711f1745

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

　・Skybox
　・RenderSettings.skybox 変数

１．Skybox について

　Unity では Skybox という遠景に見える空の背景画像を設定できます。

　設定場所は Lighting というウインドウにあります。
Lighting ウインドウは、左上のメニューの中から、Window => Rendering => Lighting を選択することで開きます。

Lighting ウインドウ

　Lighting ウインドウ内の Environment タブを押すと、Skybox の設定を行う内容に切り替わります。

Lighting ウインドウ　Environment タブ

　Skybox Material という部分が設定項目になります。Material という名前の通り、Skybox の設定にはマテリアルを使用します。

　初期値は Default skybox というマテリアルが指定されています。
この部分を設定することで Skybox を変更できます。自由なものに設定してみてください。空の背景が変更になります。

　この手順では、この Skybox の設定をスクリプトから操作し、スクリプト内に事前に登録してあるマテリアルに変更する制御を行います。

２．設計

　Skybox の設定を変更する場所は分かりました。

　Skybox は無料のアセットを利用してインポートすることが出来ますので、
まずは最初に、Skybox を Unity にインポートして、色々な Skybox に変更出来るようにします。

　その後、Skybox を変更するための SkyboxChanger スクリプトを作成し、その中に Skybox に利用したいマテリアルを登録します。
そして、 Skybox を変更するメソッドを用意します。このメソッドを外部のスクリプトから呼び出すことにより、
登録したマテリアルを Skybox に適用して変更を行います。

　SkyboxChanger スクリプトの Skybox を変更するメソッドを呼び出すのは、ゲームの管理を行っている GameManager スクリプトに行わせます。

　新しく Awake メソッドを用意し、その中で Skybox の変更を行うメソッドを呼び出して変更を行います。
Awake メソッドは Start メソッドよりも処理を行うのが早いメソッドとして定義されていますので、
ゲームを実行すると他の処理よりも早く、Skybox の変更が行われることになります。

３．Skybox のアセットをインポートする

　ここでは Skybox の無料アセットを紹介します。
アセットストアを検索していただくと他にも無料の Skybox はありますので、他のアセットを利用していただいても構いません。

　Fantasy Skybox FREE

　アセットストアへ移動して、上記のアセットの名前で検索をしてください。対象のアセットが見つかります。
ダウンロードしてインポートを行ってください。

Fantasy Skybox FREE

　インポート後のフォルダは以下の通りです。

Fantasy Skybox FREE

　以上でアセットのインポートは完了です。

　先ほどの Lighting ウインドウを開いて、インポートした Skybox 用のマテリアルを設定してみましょう。

　色々なマテリアルを試しておいてください。次の手順で Skybox のマテリアルを変更するスクリプトを作成しますが
そこに、変更したいマテリアルを数個登録することになります。

　設定した Skybox はそのままでもよいですし、Default skybox に戻していただいても構いません。

４．SkyboxChanger スクリプトを作成する

　新しい SkyboxChanger スクリプトを作成します。

　このスクリプトではメソッドを用意し、そのメソッドを実行することにより、Lighting ウインドウの Skybox Material の項目を、スクリプトから変更して制御を行います。

　Skybox Material にはマテリアルを指定するため、Material 型の配列変数を用意し、事前に登録をしておき、この値を利用して変更するマテリアルを指定します。
SerializeField属性で宣言しておくことで、インスペクターから好きな数のマテリアルを登録できるように設計しておきます。

SkyboxChanger.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SkyboxChanger : MonoBehaviour
{
    [SerializeField]
    private Material[] skyboxMaterials;   // Skybox 用のマテリアルを登録するための配列

    [SerializeField, Header("Skybox設定用の指定値。999 の場合、ランダムにする")]
    private int skyboxMaterialsIndex; 

    /// <summary>
    /// Skyboxを変更
    /// </summary>
    public void ChangeSkybox() {

        // ランダム設定の場合
        if (skyboxMaterialsIndex == 999) {

            // Skybox をランダムな要素番号のマテリアルの Skybox に変更
            RenderSettings.skybox = skyboxMaterials[RandomSelectIndexOfSkyboxMaterials()];
        } else {

            // Skybox を指定された要素番号のマテリアルの Skybox に変更
            RenderSettings.skybox = skyboxMaterials[skyboxMaterialsIndex];
        }

        Debug.Log("Skybox 変更");
    }

    /// <summary>
    /// Skyboxのランダムな要素番号を取得
    /// </summary>
    /// <returns></returns>
    public int RandomSelectIndexOfSkyboxMaterials() {
        return Random.Range(0, skyboxMaterials.Length);
    }
}

５．＜RenderSettings.skybox 変数＞

　Skybox はマテリアルによって設定されているため、適用するためのマテリアルを用意して RenderSettings.skybox 変数を利用することで、
スクリプトから動的に Skybox の変更が可能になっています。

  // Skybox を指定された要素番号のマテリアルの Skybox に変更
  RenderSettings.skybox = skyboxMaterials[skyboxMaterialsIndex];

参考サイト

Unity公式スクリプトリファレンス
RenderSettings.skybox
https://docs.unity3d.com/ja/2018.4/ScriptReference...

６．SkyboxChanger ゲームオブジェクトを作成して、SkyboxChanger スクリプトをアタッチし、設定を行う

　ヒエラルキーの何もない場所で右クリックをしてメニューを開き、Create Empty を選択します。
新しい空のゲームオブジェクトが作成されますので、名前を SkyboxChanger に変更します。

ヒエラルキー画像

　作成してある SkyboxChanger スクリプトをドラッグアンドドロップして、SkyboxChanger ゲームオブジェクトにアタッチします。

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

　SkyboxChanger スクリプトの skyboxMaterials 変数の Size を 0 から好きな数に変更します。
この値の分だけ、Skybox 用のマテリアルの登録が出来ます。ここでは 4 に設定しています。

Size 0

　Size を変更すると、配列の要素を登録するための Element が追加されます。
要素番号は 0 から始まります。

Size 4 に変更　Element が表示される

　各 Element にインポートした Skybox のアセットに含まれているマテリアルを自由に設定してください。

フォルダ

フォルダ

登録例　SkyboxChanger ゲームオブジェクト　インスペクター画像

　以上で Skybox 変更用の設定は完成です。
続いて、Skybox を変更するメソッドを呼び出す処理を GameManager スクリプトに追加します。

７．GameManager スクリプトの修正を行い、高度表示用のキャラのアイコンとキャラの位置とを同期させる

　宣言フィールドに SkyboxChanger 型の変数を用意します。SerializeField属性で宣言しておくことで、インスペクターより値の登録が可能になります。
SkyboxChanger スクリプトには Skybox を変更するメソッドが用意してありますので、この変数はその命令を実行させるために必要な情報です。

　新しいメソッドとして Awake メソッドを追加します。
　　
　Awake メソッドは Start メソッドよりも早く実行される Unity が扱うメソッドです。
Start メソッドよりも処理が早いため、このメソッドの中で Skybox を変更する命令を実行します。
そうすることによってゲーム開始時には Skybox が設定されている状態になります。

　プログラムの処理の順番は非常に大切です。こういった、どのタイミングでどの処理をすればよいか、ということは
ロジックを組む際に一緒に考えておくことが重要です。

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

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

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

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

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

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

    [SerializeField]
    private CameraController cameraController;

    [SerializeField]
    private ResultPopUp resultPopUp;

    [SerializeField]
    private AudioManager audioManager;

    [SerializeField, Header("ステージをランダム生成する場合にはチェックする")]
    private bool isRandomStaging;

    [SerializeField, Header("移動する花輪の割合"), Range(0, 100)]
    private int movingFlowerCirclePercent;

    [SerializeField, Header("大きさが変化する花輪の割合"), Range(0, 100)]
    private int scalingFlowerCirclePercent;

    [SerializeField]
    private FlowerCircle flowerCirclePrefab;　　　　// 花輪のプレファブ・ゲームオブジェクトにアタッチされている FlowerCircle スクリプトをアサインする(同じプレファブ)

    [SerializeField]
    private Transform limitLeftBottom;　　　　　　　// キャラの移動制限用のオブジェクトを生成位置の制限にも利用する

    [SerializeField]
    private Transform limitRightTop;　　　　　　　　// キャラの移動制限用のオブジェクトを生成位置の制限にも利用する

    [SerializeField]
    private Slider sliderAltimeter;                 // Slider コンポーネントの操作を行うための変数


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


    [SerializeField]
    private SkyboxChanger skyboxChanger;            // SkyboxChanger スクリプトの操作を行うための変数


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


    private float startPos;                         // ゲーム開始時のキャラの位置情報を代入するための変数

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



////* ここからメソッドを１つ追加 *////


    void Awake() {

        // Skyboxの変更
        skyboxChanger.ChangeSkybox();
    }


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


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

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

        // Y軸が高さの情報なので、双方の高さの値を減算して差分値を距離とする
        distance = player.transform.position.y - goal.position.y;
      
        txtDistance.text = distance.ToString("F2");

        // 高度計用のキャラのアイコンの位置を更新
        sliderAltimeter.DOValue(distance / startPos, 0.1f);

        // 距離が 0 以下になったら
        if(distance <= 0) {

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

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

　　        // カメラを初期のカメラに戻す
            cameraController.SetDefaultCamera();

            // リザルト表示
            resultPopUp.DisplayResult();

　　　　　　// ゲームクリアのBGMを再生する
　　　　　　audioManager.PlayBGM(AudioManager.BgmType.GameClear);
        }
    }


    IEnumerator Start() {

        // スタート地点取得
        startPos = player.transform.position.y;

　　　　// キャラの移動を一時停止(キー入力も受け付けない)
        player.StopMove();

        // Updateを止める
        isGoal = true;

        // 花輪をランダムで配置する場合
        if (isRandomStaging) {

            // 花輪の生成処理を行う。この処理が終了するまで、次の処理を中断する
            yield return StartCoroutine(CreateRandomStage());
        }

        // Updateを再開
        isGoal = false;

　　　　// キャラの移動を再開(キー入力受付開始)
        player.ResumeMove();

        Debug.Log(isGoal);
    }

    /// <summary>
    /// ランダムで花輪を生成してステージ作成
    /// </summary>
    private IEnumerator CreateRandomStage() {

        // 花輪の高さのスタート位置
        float flowerHeight = goal.position.y;

        // 花輪を生成した数
        int count = 0;
        Debug.Log("初期の花輪のスタート位置 : " + flowerHeight);

　　　　// 花輪の高さがキャラの位置に到達するまで、ループ処理を行って花輪を生成する。キャラの位置に到達したらループを終了する
        while (flowerHeight <= player.transform.position.y) {

            // 花輪の高さを加算(float 型の Random.Range メソッドは 10.0f を含む)
            flowerHeight += Random.Range(5.0f, 10.0f);

            Debug.Log("現在の花輪の生成位置 : " + flowerHeight);

            // 花輪の位置を設定して生成
            FlowerCircle flowerCircle = Instantiate(flowerCirclePrefab, new Vector3(Random.Range(limitLeftBottom.position.x, limitRightTop.position.x), flowerHeight, Random.Range(limitLeftBottom.position.z, limitRightTop.position.z)),Quaternion.identity);
                     
            // 花輪の初期設定を呼び出す。引数には評価後の戻り値を利用する。このとき、移動するかどうか、大きさを変えるかどうかの情報を引数として渡す
            flowerCircle.SetUpMovingFlowerCircle(Random.Range(0, 100) <= movingFlowerCirclePercent, Random.Range(0, 100) <= scalingFlowerCirclePercent);

            // 花輪の生成数を加算
            count++;

            Debug.Log("花輪の合計生成数 : " + count);

            // 1フレームだけ中断。　　※　この処理を入れないと無限ループしてUnityがフリーズします。
            yield return null;
        }

        Debug.Log("ランダムステージ完成");
    }
}

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

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

８．GameManager ゲームオブジェクトの設定を行う

　ヒエラルキーにある SkyboxChanger ゲームオブジェクトを選択して、skyboxChanger 変数へドラッグアンドドロップしてアサインしてください。
自動的に、SkyboxChanger スクリプトが登録されます。

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

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

　すべての手順が完成しましたので、ゲームを実行してください。
Skybox の設定が、SkyboxChanger スクリプトで指定している要素番号のマテリアルに変更されれば成功です。

　要素番号は Element の番号と対応していますので、0 ～ 3 までの値を順番に入れて、
その番号のマテリアルになるかどうかを確認してください。

＜実行動画　Skybox に指定した要素番号のマテリアルが設定される＞
https://gyazo.com/836b133d85f3fd88b3aa6ba7711f1745

　続いて、SkyboxChanger ゲームオブジェクトの SkyboxChanger スクリプトを確認し、skyboxMaterilasIndex 変数の値を 999 に変更します。
この値が 999 に設定された場合には、スクリプトの制御により、Skybox の設定がゲーム実行のたびに、skyboxMaterilas 変数に登録されている範囲内でランダムに変更されます。
今回の場合であれば、4種類のマテリアルのうちの1つに変更されます。何回かゲームを実行して確認してください。

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

＜実行動画　ランダム設定にしてゲームを実行して確認する＞
https://gyazo.com/cbbb207976860d57c4b0f8132c9e3222

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

　=>　次は　発展５　ー設置型アイテムの実装ー　です。

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

印刷する

コメント（0）

３Ｄダイビングゲーム　発展４ - i-school 先頭へ

コメントをかく

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

i-school