いんでぃーづ

個人でゲーム開発してる上で吸収したモノたち紹介。UnityからGIMPまでなんでも。デザインとかゲーム論まで語っちゃうよ的なアレ。

MENU

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

{スポンサーリンク}
{スポンサーリンク}

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

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

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

f:id:sugar_affordance:20170401142804p:plain

画像は前回作ったやつ。

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

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

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

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

f:id:sugar_affordance:20170401121458j:plain

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

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

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

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

f:id:sugar_affordance:20170401132756g:plain

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

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

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

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

f:id:sugar_affordance:20170407161901j:plain

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

f:id:sugar_affordance:20170407162201p:plain

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

f:id:sugar_affordance:20170407162625j:plain

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

動画をカットイン

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

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

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

f:id:sugar_affordance:20170407164030j:plain

このマテリアルを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();
    }
    
}

枠の形を変えたい場合

下のような画像を用意し

f:id:sugar_affordance:20170401144134p:plain

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

f:id:sugar_affordance:20170401144159g:plain

Amazon.co.jpアソシエイト