【Unity】動画再生｜クロマキーで背景透過を演出

2024.01.232025.05.03

当サイトで紹介する商品・サービス等の外部リンクは、アフィリエイト広告を含む場合があります。

本記事を読むと以下の実行ができます

タイマーストップの時間に応じて、表示される動画を変える。

ゲーム内で動画を使う場面は、オープニングやエンディングのカットシーン、チュートリアルの説明、プレイヤーの進捗や成績を示すグラフィックスなど多岐に渡って利用します。

また、アニメ―ションやエフェクトを作成するとUnity内やBlenderで作る必要があるので、プログラミング以外にもタスクが増えて作品完成までの道のりが遠くなってしまいます。

Unityで動画再生し、演出を動画で補えば完成度の高いゲームに仕上がります。

本記事はUnityの標準Video Playerの使い方とクロマキーで透過動画の作り方を紹介します。

本記事は次の人におすすめ

Unityで動画を再生したい。
Video Playerの使い方を知りたい。
動画の背景透過をしたい。

Udemyで学習する

Udemy 公式サイト

UnityのVideo Player
- Raw Image
- Render Texture
Unityでクロマキー（動画を透過）
ビデオをスクリプトで制御

UnityのVideo Player

Unityで動画を再生するためのcomponent「Video Player」があります。
「VideoPlayerコンポーネント」と「VideoPlayerスクリプト」を使うことで高度な動画の制御が可能になります。

Raw Image

ゲームオブジェクトを用意する必要があります。

空オブジェクトでもよいですが、動画の比率調整がしやすい「RawImage」をおすすめします。
Hierarchyウィンドウのプラスから「UI>Raw Image」を選択します。

Inspectorウィンドウの「Rect Transform」でPos(xyz)を0にして、Width(幅)、Height(高さ)を動画のサイズと合わせてください。

動画がゲーム枠に収まらない場合は、Gameビューの項目からサイズ変更をしてください。

Unityの画面のサイズを変更方法を紹介しています。

【Unity】画面サイズの変更、合わせる設定とおすすめの比率

「RawImage」のInspectorウィンドウ下部にcomponentの項目があるので、
「Video Player」を追加してください。

「Video Clip」に動画をアタッチしてゲームを再生しても動画が再生されません。
原因は、RawImageに「Texture」が存在しないからです。

Render Texture

次にprojectウィンドウのプラスから「Render Texture」を追加して、
RawImageにアタッチすると、動画をgameビューに表示できます。

動画の比率はTextureのsizeに依存するので、動画の幅（Raw Image）と同じにしてください。
以上までの工程を進めて、動画を表示することができます。

Unityでクロマキー（動画を透過）

動画をアニメーションや演出、エフェクトとして使いたい場合は、映像から背景の色を分離（クロマキー）する必要があります。

Unityは、Shaderを使うことでクロマキーが可能です。
projectウィンドウから「Shader>Standard Surface Shader」と「Material」を追加してください。

Shaderをクリックして、デフォルトから次のコードに編集してください。

Shader "Custom/ChromaKeyShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _ChromaKeyColor ("Chroma Key Color", Color) = (1,1,1,1)
        _Threshold ("Threshold", Range(0, 1)) = 0.1
    }
    SubShader
    {
        Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            float4 _ChromaKeyColor;
            float _Threshold;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                if (distance(col.rgb, _ChromaKeyColor.rgb) < _Threshold)
                {
                    discard;
                }
                return col;
            }
            ENDCG
        }
    }
}

MaterialのInspectorウィンドウからShaderを紐づけます。

Shaderの項目のPassは、上記のコードの先頭になります。
要するに、「”Custom/ChromaKeyShader”」を選択して下さい。