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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク
スポンサーリンク

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

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

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

エンドロール用UIを作成

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

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

エンドロールUIの階層

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

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

エンドロール用UIのPanelの設定

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

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

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

Vertical OverflowはOverflowを選択します。

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

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

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

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

エンドロール用UIのTextのインスペクタの設定

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

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

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

リッチテキスト - Unity マニュアル
UI 要素のテキストおよびテキストメッシュは複数のフォントスタイルやサイズを含めることができます。リッチテキストは UI システムと旧 GUI システムの両方をサポートしています。GUIStyle、GUIText、TextMesh クラスは Rich Text 設定があり、Unity にテキスト中のマークアップタグを探...

を参照してください。

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

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

エンドロール用UIのTextの初期位置

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

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

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

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

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

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

フィールド

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でシーンをあらかじめ登録しておく必要があります。

エンドロール用のシーンをBuild Settingsで設定

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

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

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

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

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

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

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

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

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

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

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

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

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

EndRollAnimのインスペクタのLoop Timeのチェックを外す

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

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

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フレームにドラッグします。

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

Animationウインドウのフレーム間表示を狭める

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

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

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

エンドロールのアニメーション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という名前にします。

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

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

WaitEndRollAnim状態のインスペクタは

WaitEndRollAnim状態のインスペクタ

上のようになります。

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

終わりに

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

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

コメント

タイトルとURLをコピーしました