Timeline を活用する

コメントする / Unity / 2020年6月23日

今回のテーマ

  • 以下のような場面で Timeline を活用する
    • ゲーム開始演出
    • ステージクリア演出
    • カットシーン

学習環境のセットアップ(2D)

Unity 2019.3 以降を想定しています。

  1. 前回 Cinemachine を学んだプロジェクトに追加で作業するのが望ましいが、なければ新しくプロジェクトを作ってもよい
  2. Package Manager から Cinemachine, Timeline をインポートする
    • 既にインポートされている場合はインポートしなくてよい
  3. ユニティちゃんピクセルアートパック for アクションゲーム Vol.2 をダウンロード・インポートする（キャラクター及びアニメーションデータが入っています）
  4. Sound FX - Retro Pack をインポートする（SFX が入っています）
  5. アセットパッケージ LearningTimeline2D.unitypackage をダウンロード・インポートする

解説動画

すみません。まだできていません。

ステージ開始・ステージクリア演出を追加する

どんなことができるか見てみましょう

学習環境がセットアップできたら、次の手順で Timeline でどんなことができるのか見てみましょう。

  1. Timeline を使っていない状態を見てみましょう
    1. シーン Assets/_LearningTimeline/2D/2D を実行してください
    2. 右に移動するとゴールします
      • ゴールすると Console に "Goal" と出力されます
    3. このシーンは何も演出していない状態です
  2. Timeline を使った状態を見てみましょう
    1. シーン Assets/_LearningTimeline/2D/2D with Timeline を実行してください
      • ゲーム開始時とゴール時に演出が追加されています
  3. シーン "2D" を元に Timeline を使って演出を追加し、シーン "2D with Timeline" のような演出ができるようになるのが目標です

ポイント

必須ではありませんが、以下のようにすると作業が楽になります。作業をしてみる前にポイントを説明しても意味がわからないかもしれないので、作業中あるいは作業後に以下のポイントをもう一度おさらいすると「どうしてそうした方がよいのか」がわかると思います。

  1. Timeline を作るためのシーンは、ゲームのシーンとは独立して作るようにしましょう
    • LearningTimeline パッケージには StartTimeline, GoalTimeline というシーンが含まれています
      • 私はこれらのシーンで独立して開始・クリア演出を作りました
  2. プレイヤーキャラクターに演技をさせる場合は、プレイヤーを（一時的に）消して、Timeline の中で新たにプレイヤーを出現させて演技させるとよいでしょう
    • そうしないと、別シーンで独立して作業したり、次の項目で説明するようにプレハブ化することができなくなります
    • 3D ゲームの場合は、プレイヤーを消して Timeline 内で出現させる際に画角を変えるなど工夫するとよいでしょう
  3. UI(Canvas) も含め、Timeline で使うオブジェクトは全て PlayableDirector コンポーネントを追加したオブジェクトの子オブジェクトにするとよいでしょう
    • プレハブ化してゲームに持っていくためです
    • ルートオブジェクトからの相対座標で演技（移動）させると、ゲーム内に設置する時の調整が楽になります
  4. PlayableDirector コンポーネントを追加したオブジェクト（とそれの子オブジェクト達）をプレハブ化しようとしても、Project ウインドウにドロップできないことがあります
    • そのような場合は、Timeline ウインドウの Preview ボタンをトグル オフにすると、プレハブ化できます

どうやって作るのか

ゲーム開始・クリア演出のそれぞれに対して、どうやって作っているのかを見ていきましょう。

ゲーム開始演出

シーン "StartTimeline" の StartDirector というオブジェクトで Timeline が作られています。この Timeline には以下のトラックがあり、これらを組み合わせて一連の演出が作られています。

それぞれのトラックについて以下に説明します。

  1. Holger に対する Animation Track (1)
    • キャラクターに "Walk" と "Warming up" のスプライト アニメーションをさせています
  2. Holger に対する Animation Track (2)
    • キャラクターを左から右へ移動するアニメーションを再生しています
  3. StartImage に対する Animation Track
    • Start! という文字が書かれた画像が左から登場し、真ん中で停止し、右へ消えるアニメーションを再生しています
  4. Holger に対する Activation Track
    • Timeline 上で演技をしている Holger は、操作しているキャラクターとは違います。この演技をしている Holger を Timeline 再生後に消すためのトラックです
      • Inspector から Post-playback state を Inactive にすることで消しています
  5. PlayerSwitch に対する Signal Track
    • プレイヤーキャラクターを一時的に消したり、また出したりするためのトラックです
    • PlayerSwitch オブジェクトにアタッチしている PlayerSwitcher コンポーネントは、"Player" タグを付けたオブジェクトの Active/Inactive を切り替える機能を持っています。このコンポーネントに実装されている TurnOn(), TurnOff() 関数を呼び出して Player を消したり出したりするためのトラックです。
    • Signal Track については「Timelineからメソッドを呼ぶ新機能 「Marker」と「Signal、Signal Receiver」」という記事が詳しいです
  6. Audio に対する Audio Track
    • 任意のタイミングで SFX を鳴らすためのトラックです

ステージクリア演出

シーン "GoalTimeline" の GoalDirector というオブジェクトで Timeline が作られています。この Timeline には以下のトラックがあり、これらを組み合わせて一連の演出が作られています。

  1. Holger に対する Activation Track
    • 演出時に演技をさせる Holger をアクティブにするためのトラックです
  2. PlayerSwitch に対する Signal Track
    • プレイヤーを消すためのトラックです
  3. Holger に対する Animation Track
    • キャラクターに手を振る (wave) させるアニメーションを再生させています
  4. GoalImage に対する Animation Track
    • Goal! と書かれた画像が出現し、消えるアニメーションを再生させています
  5. Audio に対する Audio Track
    • 任意のタイミングで SFX を鳴らすためのトラックです

シーン "2D with Timeline" では、ステージクリア演出のオブジェクトは最初は無効にしています。有効にすると子オブジェクトが見えてしまう（動いてしまう）ためです。ゴールに着くと Goal オブジェクトにアタッチされている GoalController がそれを検出し、ステージクリア演出のオブジェクトを有効にして再生しています。

やってみましょう

自分の作っているゲームの演出を作るのが一番勉強になります。手始めに簡単な事を試してみたい場合は、このプロジェクトに対して以下のようなことをやってみるとよいでしょう。

  1. Start!, Goal! などの文字を別の画像に差し替える
    • または、Text Mesh Pro で作った TextMesh をアニメーションさせてもよいでしょう
  2. 文字がアニメーションする演出のアニメーションを編集し、違う動きをさせる
  3. キャラクターを Holger ではない別のキャラクターを使う
    • アセットには Cindy, Jack, Mariabell など他のキャラクターも用意されているのでそれを使ってみましょう
  4. 別の Audio アセットをインポートして SFX を差し替えて違うタイミングで鳴らす

学習環境のセットアップ(3D)

2D の学習環境をセットアップ済みであることを前提としています。

  1. Package Manager から Probuilder をインポートする
  2. ユニティちゃん 3Dモデルデータ をダウンロード・インポートする
  3. LearningCinemachine.unitypackage をインポートしていない場合はダウンロード・インポートする
    • 前回の Cinemachine を学んだプロジェクトで引き続き作業している場合は必要ではない
  4. LearningTimeline3D.unitypackage をダウンロード・インポートする

解説動画

すみません。まだできていません。

カットシーン（のようなもの）を再生する

どんなことができるのか見てみましょう

学習環境がセットアップできたら、次の手順で Timeline でどんなことができるのか見てみましょう。

  1. Timeline を使っていない状態を見てみましょう
    1. シーン Assets/_LearningTimeline/3D/3D を実行してください
      1. FPS 視点で動き回ることができます
      2. それ以外は特に何も起きません
  2. Timeline を使った状態を見てみましょう
    1. シーン Assets/_LearningTimeline/3D/3D with Timeline を実行してください
      1. 部屋の中に２人のキャラクターが立っています
      2. キャラクターに近づくと、上下に帯が入り、キャラクターが演技を始めます
  3. シーン "3D" を元に Timeline を使って演出を追加し、シーン "3D with Timeline" のような演出ができるようになるのが目標です

どうやって作るのか

シーン "Timeline" の Director というオブジェクトで Timeline が作られています。この Timeline には以下のトラックがあり、これらを組み合わせて一連の演出が作られています。

それぞれのトラックについて以下に説明します。

  1. unitychan に対する Animation Track
    • 左の unitychan に演技をさせるアニメーションを再生しています
  2. BoxUnityChan に対する Animation Track
    • 右の BoxUnityChan に演技をさせるアニメーションを再生しています
  3. Audio に対する Audio Track
    • 任意のタイミングで SFX を鳴らすためのトラックです
  4. TopBlackBeltImage に対する Animation Track
    • 画面上部の黒い帯を徐々に出現させ、そして徐々に消すアニメーションを再生しています
  5. BottomBlackBeltImage に対する Animation Track
    • 画面下部の黒い帯を徐々に出現させ、そして徐々に消すアニメーションを再生しています

シーン ”3D with Timeline” では、キャラクターに近づくと StartTimelinePoint オブジェクトにアタッチされている GoalController がそれを検出し、Timeline を再生しています。

やってみましょう

自分の作っているゲームの演出を作るのが一番勉強になります。手始めに簡単な事を試してみたい場合は、このプロジェクトに対して以下のようなことをやってみるとよいでしょう。

  1. カットシーンに Cinemachine Track を追加し、場面ごとにカメラを切り替える

参考資料

検索すると日本語の記事はたくさんあるので、いろいろと調べてみるとよいでしょう。ただし古いバージョンの Timeline について書いたものは、現在の Timeline と違う場合があります。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です