uGUIでカットイン画面を作る（静止画、カメラ映像、動画）

必殺技とか出す時にカットインあるとかっこいいですよね。
UnityのGUIシステムで実践してみました。

枠とカットイン画像を配置する

下のような入れ子構造で、シーンにGUIを配置します。

画像は前回作ったやつ。

Panelはちょっと傾けてます。
さらに、Panelに Mask コンポーネントを追加。

こうすることで、Panelの子要素の表示が、PanelのImage範囲のみに限定されます。

ImageコンポーネントのTransformをアニメーションで動かす

メニューから Window > Animation と選択し、Animation ウインドウ を開きます。
シーンのImageを選択した状態で、Createボタンを押します。

ダイアログが表示されるので、適当な場所に保存。このファイルにカットインのアニメーションの動き（キーフレーム）を書き込んでいきます。

Animation ウインドウの AddProperty ボタン から、Anchord Position の＋ボタンを押し、キーフレームを追加。

下画像のようにキーフレームを追加します。

実行すると、こんなかんじでカットインします。

ただ、これだと静止画しか使えないですね。

別なカメラで写している内容をカットインさせる

シーン内に別なカメラを用意し、その内容をカットインさせてみます。
RenderTexture を使いましょう。

Projectウインドウで右クリックし、Create > RenderTexture

次にシーンにCameraを配置し、 TargetTexture の欄に作成したRenderTexture を指定します。

さらにMaterialを作成し、シェーダーを Unlit/Texture にして、テクスチャにRenderTextureを設定します。

このMaterialをImageコンポーネントのMaterial欄に設定すれば完了。

動画をカットイン

あらかじめ mp4 などで動画を用意しておけば、ムービーテクスチャで再生させつつカットイン可能です。

まず動画ファイルをUnityにドラッグしてインポート。 .mov、 .mpg、 .mpeg、 .mp4、 .avi、 .asf 　に対応しているようです。

インポートすると通常のテクスチャのように使えるので、Materialに設定します。

このマテリアルをImageに設定します。

動画の再生は自動では始まらないので、下のようなスクリプトをImageにアタッチしておきませう。

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

public class StartMovie : MonoBehaviour {

    void Start () {
    // 動画を再生
    ((MovieTexture)GetComponent<Image>().material.mainTexture).Play();
    }
    
}

枠の形を変えたい場合

下のような画像を用意し

Panelの背景画像（Image）に設定すれば、枠も自由自在。