Unityでエンドロールを作成する

今回はUnityでゲーム終了後に流れるエンドロール（スタッフロール）機能を作成してみたいと思います。

今回作成するのはエンドロールの文字列が下から上に流れていく機能だけで、音声等は組み込んでいません。

音声等を組み込む場合はタイムライン機能と組み合わせて作成すると良い物が作成出来ると思います。

Unityでタイムラインを使ってゲームのイベントシーンの動きを作成してみる

Unityでタイムライン（Timeline）を使ってゲームのイベントシーンの動きを作成してみます。タイムラインを使うとキャラクターのアニメーションや音声の再生等のタイミングを合わせることが視覚的にわかりやすくなります。

エンドロールの文字列を下から上に流す為に今回は二つの方法で作成してみました。

一つはスクリプトを使う方法で、もう一つはUnityのAnimationの機能を使ったものです。

今回の機能を作成すると、

上のようなものが出来上がります。

今回作成するエンドロール機能は固定のウインドウサイズのゲームである必要があります。

ゲームの画面サイズ等をユーザーによって変更出来る場合はエンドロールがうまく機能しません。

エンドロール機能を作成する

それではエンドロール機能を作成していきましょう。

スクリプトを使う方法、Animationを使う方法ともに作成するUIは同じなのでまずは共通するUIを作成していきます。

エンドロール用UIを作成

ヒエラルキー上で右クリック→UI→Panelを選択します。

Panelを選択した状態で右クリック→UI→Textを選択します。

上のような階層が出来上がりました。

次はPanelを選択しインスペクタで横と縦をstretchにして、Colorを黒色に変更します。

これで画面全体の背景が黒になります。

次にTextを選択しインスペクタでTextの縦横の幅が親であるPanelに合わせて伸縮するようにstretchにし、ParagraphのAlignmentで中央と上を選択します。

これでテキストが中央で上付きの表示になります。

Vertical OverflowはOverflowを選択します。

これはテキストが縦の範囲外に出た時に範囲外にテキストを表示するようにします。

TextはstretchにしているのでPanelのサイズによってサイズが変わりますが、スタッフが多いとその範囲に入らなくなります。

その時でもテキストが表示されるようにOverflowを設定しています。

テキストの色を白にします。

ヒエラルキーのTextを選択し、インスペクタのTextに

<color=red><size=50>Producer</size></color>

かめくめちゃん

kamekumechan

kame

<color=red><size=50>Program</size></color>

かめくめ

kamekumechan

<color=red><size=50>Sound</size></color>

かめくめ

<size=40>https://gametukurikata.com/</size>

のようにスタッフ名等を入力します。

Unityのテキストで使用出来るタグは

リッチテキスト - Unity マニュアル

UI 要素とテキストメッシュのテキストには、複数のフォントスタイルとサイズを組み込むことができます。Text、GUIStyle、TextMesh クラスには、テキスト内のマークアップタグを探すよう Unity に指示する Rich Text...

を参照してください。

次にTextの初期位置を設定していきます。

表示されるスタッフ名等は画面外から上に上がってくるようにしたいので、ヒエラルキーのTextを選択してシーンビューで下に移動させPanelの下へと移動させます。

特別Panelとピッタリ合わせる必要はありません（もっと下においても大丈夫）。

これでエンドロール用のUIが完成しました。

スクリプトを使ったエンドロール機能

スクリプトを使ったエンドロール機能を作成してみます。

新しいスクリプトEndRollScriptを作成しTextに取り付けます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;

public class EndRollScript : MonoBehaviour
{
    //　テキストのスクロールスピード
    [SerializeField]
    private float textScrollSpeed = 30;
    //　テキストの制限位置
    [SerializeField]
    private float limitPosition = 730f;
    //　エンドロールが終了したかどうか
    private bool isStopEndRoll;
    //　シーン移動用コルーチン
    private Coroutine endRollCoroutine;

// Update is called once per frame
    void Update()
    {
        //　エンドロールが終了した時
        if (isStopEndRoll) {
            endRollCoroutine = StartCoroutine(GoToNextScene());
        } else {
            //　エンドロール用テキストがリミットを越えるまで動かす
            if (transform.position.y <= limitPosition) {
                transform.position = new Vector2(transform.position.x, transform.position.y + textScrollSpeed * Time.deltaTime);
            } else {
                isStopEndRoll = true;
            }
        }
    }

IEnumerator GoToNextScene() {
        //　5秒間待つ
        yield return new WaitForSeconds(5f);

if(Input.GetKeyDown("space")) {
            StopCoroutine(endRollCoroutine);
            SceneManager.LoadScene("EndRollStartScene");
        }

yield return null;
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.SceneManagement;

using UnityEngine.UI;

public class EndRollScript : MonoBehaviour

{

//　テキストのスクロールスピード

[SerializeField]

private float textScrollSpeed = 30;

//　テキストの制限位置

[SerializeField]

private float limitPosition = 730f;

//　エンドロールが終了したかどうか

private bool isStopEndRoll;

//　シーン移動用コルーチン

private Coroutine endRollCoroutine;

// Update is called once per frame

void Update()

{

//　エンドロールが終了した時

if (isStopEndRoll) {

endRollCoroutine = StartCoroutine(GoToNextScene());

} else {

//　エンドロール用テキストがリミットを越えるまで動かす

if (transform.position.y <= limitPosition) {

transform.position = new Vector2(transform.position.x, transform.position.y + textScrollSpeed * Time.deltaTime);

} else {

isStopEndRoll = true;

}

IEnumerator GoToNextScene() {

//　5秒間待つ

yield return new WaitForSeconds(5f);

if(Input.GetKeyDown("space")) {

StopCoroutine(endRollCoroutine);

SceneManager.LoadScene("EndRollStartScene");

}

yield return null;

}

スクリプトを見ていきます。

フィールド

textScrollSpeedはテキストが下から上へと流れるスピードを設定します。

limitPositionはエンドロール用のTextが移動する目的地のYの位置を指定します。

数字で指定するのである程度プレビューして数値を調整する必要があります。

isStopEndRollはエンドロールが流れ終わったかどうかの判定フラグです。

endRollCoroutineはエンドロールが流れ終わった後に実行するコルーチンを入れておく参照フィールドです。

フィールドはこんな感じになります。

Updateメソッド

次はUpdateメソッドの処理を見ていきます。

isStopEndRollがtrueの時はGoToNextSceneメソッドをコルーチンを使って実行します。

それ以外の時はTextのpositionのyがlimitPositionの位置以上になるまで移動させます。

limitPositionの位置以上になったらisStopEndRollをtrueにします。

GoToNextScene

GoToNextSceneメソッドは最初に5秒待機した後にキーボードのSpaceキーを押したらコルーチンを停止し、設定したシーンへと移動させています。

コルーチンって何？と思った方は

Unityでコルーチンを使って定期的に処理をする

Unityでコルーチンを使うと定期的に何らかの処理を行える事が出来るようになります。一見解り辛いけど使い方がわかれば便利かも！？

を参照してください。

今回はEndRollStartSceneという名前のシーンに移動させるようにしています。

シーン間の移動をするにはUnityメニューのFile→Build Settingsでシーンをあらかじめ登録しておく必要があります。

これで機能が出来ました。

スタッフ名等の長さに応じてlimitPositionの数値を調整していく必要があります。

Animationを使ったエンドロール機能

次はUnityのAnimationを使ったエンドロール機能を作成していきます。

スクリプトを使ったエンドロール機能を既に作って設定している方はTextに設定したEndRollScriptを無効にするか新たにUIを作成し設定していってください。

エンドロールで音声を使ったり他のアニメーション等を含める場合はタイムラインを使うとAnimationと同じような感じでエンドロールアニメーションの作成が出来ます。

Unityでタイムラインを使ってゲームのイベントシーンの動きを作成してみる

エンドロールアニメーションの作成

まずはヒエラルキー上のTextを選択した状態でAnimationタブのCreateボタンを押します。

Animationタブが開いていない方はUnityメニューのWindow→Animation→Animationを選択し表示します。

Createボタンを押すとファイル保存ダイアログが表示されるのでEndRollAnim.animというファイル名で保存します。

これでヒエラルキー上のTextゲームオブジェクトに対するAnimator ControllerであるText、TextゲームオブジェクトのアニメーションであるEndRollAnimが出来上がり、TextゲームオブジェクトにはAnimatorコンポーネントが設定されます。

Assetsエリア内に出来たEndRollAnimを選択し、インスペクタでLoop Timeのチェックを外しアニメーションがループしないようにします。

EndRollAnimはエンドロールの下から上へとTextが移動するアニメーションを作成します。

AnimationウインドウでEndRollAnimのアニメーションを作成していきます。

まずはAdd Propertyボタンを押してRect TransformのAnchored Positionの右の＋を押します。

すると0:00フレームと1:00フレームにAnchored Positionのキーフレームが打たれます。

キーフレームはアニメーションの分岐点のようなもので、キーフレーム間のアニメーションは二つのキーフーレムの値の補間がされアニメーションが作成されます。

エンドロールのアニメーションを作成していきます。

まずは赤い丸を押して操作した値を即座に反映するようにします。

1:00のAnchored Positionの◇を選択し、現在のフレームを1:00の所にします。

現在のフレームはフレームの部分をマウスで押すか、フレーム横の数値入力欄に60を入力します。

ヒエラルキー上のTextを選択し、シーンビュー上でエンドロールが終了する位置に動かします。

これでエンドロールのアニメーションが出来ました。

ただ、現在はSamplesが60でキーフレームが0:00と1:00なので1秒間でエンドロールがアニメーションするようになっています。

そこで1:00のキーフレームを30:00フレームにドラッグします。

マウスの中ボタンのスクロールを下に回転させるとフレーム表示のメモリが大きくなるので先のフレームも見えるようになります。

これでエンドロールのアニメーションが出来ました。

エンドロール後のシーン遷移

エンドロールのアニメーションが出来たので、次はエンドロール後にシーン遷移をする機能を作っていきます。

エンドロールのアニメーションEndRollAnimは文字が下から上へと移動するところまでのアニメーションを作成しました。

エンドロール後のアニメーションの作成

EndRollAnimアニメーションが終わった後の状態を作成し、EndRollAnimからその状態へと遷移させることにします。

AnimationウインドウのEndRollAnimが表示されている部分を押し、Create New Clipを選択し名前をWaitEndRollAnimとします。

これでWaitEndRollAnimアニメーションファイルが作成されます。

次にAnimationウインドウのWaitEndRollAnim部分を押しEndRollAnimに戻します。

EndRollAnimの30:00フレームのキーフレームを選択してCtrl+Cでコピーします。

WaitEndRollAnimに戻り0:00フレームでCtrl+Vキーを押してペーストします。

これでEndRollAnimの最後の状態とWaitEndRollAnimの最初の状態が同じになります。

アニメーターコントローラーの状態と遷移の作成

これでアニメーションが出来たのでAssetsエリア内に出来たアニメーターコントローラーのTextを選択しAnimatorウインドウで状態と遷移を作成します。

WaitEndRollAnim状態を作成し、アニメーションクリップに先ほど作成したWaitEndRollAnimを選択します。

EndRollAnimからWaitEndRollAnim状態へと遷移するようにします。

これでEndRollAnim状態が終わったらWaitEndRollAnim状態へと移行します。

次のシーンへの遷移を作成

次のシーンへ遷移させる処理を作成していきます。

WaitEndRollAnim状態を選択し、インスペクタでAdd Behaviourボタンを押します。

新しいビヘイビアの名前をEndRollToStartSceneという名前にします。

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

public class EndRollToStartScene : StateMachineBehaviour {

private float elapsedTime = 0f;
    [SerializeField]
    private float waitTime = 5f;

// OnStateEnter is called when a transition starts and the state machine starts to evaluate this state
    //override public void OnStateEnter(Animator animator, AnimatorStateInfo stateInfo, int layerIndex) {

//}

// OnStateUpdate is called on each Update frame between OnStateEnter and OnStateExit callbacks
    override public void OnStateUpdate(Animator animator, AnimatorStateInfo stateInfo, int layerIndex) {

if (elapsedTime >= waitTime) {

if (Input.GetKeyDown("space")) {
                SceneManager.LoadScene("EndRollStartScene");
            }
        } else {
            elapsedTime += Time.deltaTime;
        }
    }

// OnStateExit is called when a transition ends and the state machine finishes evaluating this state
    //override public void OnStateExit(Animator animator, AnimatorStateInfo stateInfo, int layerIndex)
    //{
    //    
    //}

// OnStateMove is called right after Animator.OnAnimatorMove()
    //override public void OnStateMove(Animator animator, AnimatorStateInfo stateInfo, int layerIndex)
    //{
    //    // Implement code that processes and affects root motion
    //}

// OnStateIK is called right after Animator.OnAnimatorIK()
    //override public void OnStateIK(Animator animator, AnimatorStateInfo stateInfo, int layerIndex)
    //{
    //    // Implement code that sets up animation IK (inverse kinematics)
    //}
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.SceneManagement;

public class EndRollToStartScene : StateMachineBehaviour {

private float elapsedTime = 0f;

[SerializeField]

private float waitTime = 5f;

// OnStateEnter is called when a transition starts and the state machine starts to evaluate this state

//override public void OnStateEnter(Animator animator, AnimatorStateInfo stateInfo, int layerIndex) {

//}

// OnStateUpdate is called on each Update frame between OnStateEnter and OnStateExit callbacks

override public void OnStateUpdate(Animator animator, AnimatorStateInfo stateInfo, int layerIndex) {

if (elapsedTime >= waitTime) {

if (Input.GetKeyDown("space")) {

SceneManager.LoadScene("EndRollStartScene");

}

} else {

elapsedTime += Time.deltaTime;

}

// OnStateExit is called when a transition ends and the state machine finishes evaluating this state

//override public void OnStateExit(Animator animator, AnimatorStateInfo stateInfo, int layerIndex)

//{

//}

// OnStateMove is called right after Animator.OnAnimatorMove()

//override public void OnStateMove(Animator animator, AnimatorStateInfo stateInfo, int layerIndex)

//{

// // Implement code that processes and affects root motion

//}

// OnStateIK is called right after Animator.OnAnimatorIK()

//override public void OnStateIK(Animator animator, AnimatorStateInfo stateInfo, int layerIndex)

//{

// // Implement code that sets up animation IK (inverse kinematics)

//}

}

OnStateUpdateメソッドのコメントを外しその中で時間を計測しwaitTimeの時間を越えたらキーボードからの受付を出来るようにします。

OnStateUpdateメソッドはWaitEndRollAnim状態にいる間マイフレーム実行されます。

WaitEndRollAnim状態のインスペクタは

上のようになります。

これでAnimationを使ったエンドロール機能が出来上がりました。

終わりに

今回作成したエンドロール機能は文字列を動かすだけですが、タイムライン機能と組み合わせることでBGMとのタイミング等も調整する事が出来そうですね。

とうとうエンドロール機能まで作成することになりましたが、肝心のゲームはまだ一つも作っていない！(´Д｀)