必殺技を盛り上げるカットイン演出｜SRPG演出の作り方

カットイン演出は、必殺技の爽快感を高めます。

キャラクターのカットインを表示すれば、インパクトが生まれます。

この記事では、実装方法を詳しく解説します。

✨ この記事でわかること

カットイン表示の実装
アニメーション演出の実装
UIレイヤーの構成
エフェクトとの連携
実装例とコード

ゲーム開発講師

カットイン演出は、UIレイヤーから始めましょう。最前面に表示することで、インパクトが高まります。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

ゲームを「遊ぶ側」から「作る側」へ

あなたのオリジナルゲーム、今年こそ完成させませんか？

RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。

Unity入門の森｜永久会員チケット

全講座ラインナップを見てみる

実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。

カットイン表示の実装

カットイン表示は、必殺技を「特別な演出」として印象づけるための基本要素です。

とはいえ、最初から難しい処理を理解する必要はありません。

まずは「画像を表示して、一定時間後に消す」というシンプルな仕組みを作ることが第一歩です。

この章では、初心者でも段階的に理解できるように、実装の考え方とコード例をあわせて解説します。

この実装はどれくらい難しい？

結論から言うと、このカットイン実装はUnity初心者〜初級者向けの内容です。

このコードで使われている要素を分解すると、以下のような知識レベルに分かれます。

まず初心者の段階で押さえておきたいのは、次のポイントです。

Canvas上にUI画像を表示・非表示できる
ImageコンポーネントにSpriteを設定できる
SetActive(true / false)でUIを切り替えられる

ここまで理解できていれば、「カットインが出て消える」最低限の演出は十分に作れます。

一方で、以下の要素は慣れてきてから理解すれば問題ありません。

IEnumeratorとCoroutineの仕組み
Time.deltaTimeを使った時間制御
スケールやアルファ値を使ったアニメーション

最初は「動いている理由が完全に説明できなくてもOK」です。

実際に動かしながら、少しずつ理解を深めていきましょう。

カットインシステムの基本コード

以下は、キャラクター画像とスキル名を表示し、一定時間アニメーションさせるカットインの基本実装例です。

コード量はやや多く見えますが、役割ごとに見ると理解しやすくなります。

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

public class CutinSystem : MonoBehaviour
{
    public GameObject cutinPanel;
    public Image cutinImage;
    public TextMeshProUGUI skillNameText;
    public Canvas cutinCanvas; // 最前面のCanvas
    
    public IEnumerator ShowCutin(Sprite characterImage, string skillName, float duration)
    {
        // カットインを表示
        cutinPanel.SetActive(true);
        cutinImage.sprite = characterImage;
        skillNameText.text = skillName;
        
        // アニメーション
        yield return StartCoroutine(CutinAnimation(duration));
        
        // カットインを非表示
        cutinPanel.SetActive(false);
    }
    
    IEnumerator CutinAnimation(float duration)
    {
        RectTransform rect = cutinImage.rectTransform;
        Vector3 startScale = Vector3.zero;
        Vector3 endScale = Vector3.one;
        
        float elapsed = 0f;
        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            float t = elapsed / duration;
            
            // スケールアニメーション
            rect.localScale = Vector3.Lerp(startScale, endScale, t);
            
            // フェードアニメーション
            Color color = cutinImage.color;
            color.a = t;
            cutinImage.color = color;
            
            yield return null;
        }
        
        // 待機
        yield return new WaitForSeconds(1f);
        
        // フェードアウト
        elapsed = 0f;
        while (elapsed < 0.5f)
        {
            elapsed += Time.deltaTime;
            Color color = cutinImage.color;
            color.a = 1f - (elapsed / 0.5f);
            cutinImage.color = color;
            yield return null;
        }
    }
}

using UnityEngine;

using UnityEngine.UI;

using System.Collections;

public class CutinSystem : MonoBehaviour

{

public GameObject cutinPanel;

public Image cutinImage;

public TextMeshProUGUI skillNameText;

public Canvas cutinCanvas; // 最前面のCanvas

public IEnumerator ShowCutin(Sprite characterImage, string skillName, float duration)

{

// カットインを表示

cutinPanel.SetActive(true);

cutinImage.sprite = characterImage;

skillNameText.text = skillName;

// アニメーション

yield return StartCoroutine(CutinAnimation(duration));

// カットインを非表示

cutinPanel.SetActive(false);

}

IEnumerator CutinAnimation(float duration)

{

RectTransform rect = cutinImage.rectTransform;

Vector3 startScale = Vector3.zero;

Vector3 endScale = Vector3.one;

float elapsed = 0f;

while (elapsed < duration)

{

elapsed += Time.deltaTime;

float t = elapsed / duration;

// スケールアニメーション

rect.localScale = Vector3.Lerp(startScale, endScale, t);

// フェードアニメーション

Color color = cutinImage.color;

color.a = t;

cutinImage.color = color;

yield return null;

}

// 待機

yield return new WaitForSeconds(1f);

// フェードアウト

elapsed = 0f;

while (elapsed < 0.5f)

{

elapsed += Time.deltaTime;

Color color = cutinImage.color;

color.a = 1f - (elapsed / 0.5f);

cutinImage.color = color;

yield return null;

}

このコードを使うことで、キャラクター画像とスキル名を表示し、拡大・フェードイン・フェードアウトを含むカットイン演出を実装できます。

初心者がまず目標にしてほしい到達ライン

最初から完璧な理解を目指す必要はありません。

以下の状態になれば、この章の目的は十分に達成できています。

自分のプロジェクトでカットイン画像が表示できる
表示されてから自動で消えることを確認できる
画像や表示時間を自分で変更できる

ここまでできれば、次の章で紹介するアニメーション演出やエフェクト連携にも無理なく進めるはずです。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

アニメーション演出の実装

アニメーション演出は、カットインを「ただ表示するだけのUI」から「必殺技らしい演出」へ引き上げる重要な要素です。

静止画のままでは演出として弱くなりがちなため、動きを加えることでプレイヤーの視線を一気に引きつけます。

ここでは、SRPGの必殺技演出でよく使われるズームインと揺れ（シェイク）を例に、実装方法と演出意図を整理します。

アニメーション演出の考え方

カットインのアニメーションは、複雑にしすぎないことが重要です。

SRPGでは戦闘テンポが重視されるため、短時間で「派手さ」と「分かりやすさ」を両立する演出が求められます。

基本となる考え方は、次の2点です。

表示された瞬間に拡大して注目を集める
拡大しきったあとに少し戻して安定させる

この動きだけでも、必殺技の特別感は十分に演出できます。

カットインアニメーションシステム

以下は、ズームインと揺れの2種類のアニメーションを制御するクラス例です。

演出ロジックを表示処理と分離することで、後から調整しやすくなります。

public class CutinAnimationSystem : MonoBehaviour
{
    public Image cutinImage;
    public float zoomSpeed = 2f;
    public float shakeIntensity = 10f;
    
    public IEnumerator ZoomInAnimation()
    {
        RectTransform rect = cutinImage.rectTransform;
        Vector3 startScale = Vector3.zero;
        Vector3 endScale = Vector3.one * 1.2f;
        
        float elapsed = 0f;
        float duration = 0.3f;
        
        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            float t = elapsed / duration;
            
            // イージング（easeOut）
            t = 1f - Mathf.Pow(1f - t, 3f);
            
            rect.localScale = Vector3.Lerp(startScale, endScale, t);
            yield return null;
        }
        
        // 少し戻す
        elapsed = 0f;
        duration = 0.1f;
        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            float t = elapsed / duration;
            rect.localScale = Vector3.Lerp(endScale, Vector3.one, t);
            yield return null;
        }
    }
    
    public IEnumerator ShakeAnimation(float duration)
    {
        RectTransform rect = cutinImage.rectTransform;
        Vector3 originalPos = rect.localPosition;
        float elapsed = 0f;
        
        while (elapsed < duration)
        {
            float x = Random.Range(-1f, 1f) * shakeIntensity;
            float y = Random.Range(-1f, 1f) * shakeIntensity;
            rect.localPosition = originalPos + new Vector3(x, y, 0);
            
            elapsed += Time.deltaTime;
            yield return null;
        }
        
        rect.localPosition = originalPos;
    }
}

public class CutinAnimationSystem : MonoBehaviour

{

public Image cutinImage;

public float zoomSpeed = 2f;

public float shakeIntensity = 10f;

public IEnumerator ZoomInAnimation()

{

RectTransform rect = cutinImage.rectTransform;

Vector3 startScale = Vector3.zero;

Vector3 endScale = Vector3.one * 1.2f;

float elapsed = 0f;

float duration = 0.3f;

while (elapsed < duration)

{

elapsed += Time.deltaTime;

float t = elapsed / duration;

// イージング（easeOut）

t = 1f - Mathf.Pow(1f - t, 3f);

rect.localScale = Vector3.Lerp(startScale, endScale, t);

yield return null;

}

// 少し戻す

elapsed = 0f;

duration = 0.1f;

while (elapsed < duration)

{

elapsed += Time.deltaTime;

float t = elapsed / duration;

rect.localScale = Vector3.Lerp(endScale, Vector3.one, t);

yield return null;

}

public IEnumerator ShakeAnimation(float duration)

{

RectTransform rect = cutinImage.rectTransform;

Vector3 originalPos = rect.localPosition;

float elapsed = 0f;

while (elapsed < duration)

{

float x = Random.Range(-1f, 1f) * shakeIntensity;

float y = Random.Range(-1f, 1f) * shakeIntensity;

rect.localPosition = originalPos + new Vector3(x, y, 0);

elapsed += Time.deltaTime;

yield return null;

}

rect.localPosition = originalPos;

}

ズームイン処理では、0.3秒で一気に拡大し、その後0.1秒で元のサイズに戻すことで、「勢い」と「収まり」を両立しています。

また、シェイク演出は必殺技の衝撃を強調したい場面で有効です。ズームインと組み合わせることで、演出のメリハリが生まれます。

どこまで実装できれば十分か

この章で目指す実装レベルは、次の状態です。

カットイン表示時にズームイン演出が入る
演出時間をコード上で調整できる
必要に応じて揺れ演出を追加できる

ここまで実装できていれば、SRPGの必殺技演出としては十分な完成度です。

次の章では、これらの演出を確実に前面表示するためのUIレイヤー構成について解説します。

ゲーム開発講師

カットインアニメーションでは、ズームインを基本に考えましょう。
0.3秒で拡大し、少し戻すだけでも演出の完成度は大きく変わります。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

UIレイヤーの構成

UIレイヤーの構成は、カットイン演出を確実に目立たせるための重要な設計要素です。

どれだけ演出を作り込んでも、他のUIやゲーム画面に埋もれてしまっては意味がありません。

SRPGでは特に、情報量の多い画面構成になりやすいため、レイヤー管理を明確にしておく必要があります。

ここでは、Canvasのソートオーダーを使ってカットインを常に最前面に表示する基本的な構成方法を解説します。

UIレイヤー設計の考え方

UIレイヤーは、「役割ごとに分けて管理する」ことが基本です。

ゲーム画面、通常UI、演出用UIを分離しておくことで、後から仕様を追加・変更する際も混乱しにくくなります。

SRPGのカットイン演出では、次のような役割分担が一般的です。

マップやキャラクターを表示するゲーム画面
HPやコマンドなど常時表示するUI
必殺技演出専用のカットインUI

このようにCanvasを分けておくことで、カットイン表示中でも他のUI制御に影響を与えずに演出できます。

レイヤー構成システム

以下は、Canvasのソートオーダーを管理するためのシンプルな実装例です。

カットイン用Canvasを独立させ、常に最前面に配置します。

public class UILayerManager : MonoBehaviour
{
    public Canvas gameCanvas;      // ゲーム画面
    public Canvas uiCanvas;         // UI要素
    public Canvas cutinCanvas;     // カットイン（最前面）
    
    void Start()
    {
        // Canvasのソートオーダーを設定
        gameCanvas.sortingOrder = 0;
        uiCanvas.sortingOrder = 100;
        cutinCanvas.sortingOrder = 200; // 最前面
    }
    
    public void ShowCutinOnTop()
    {
        // カットインCanvasを最前面に
        cutinCanvas.sortingOrder = 300;
    }
    
    public void HideCutin()
    {
        // カットインCanvasを元の順序に戻す
        cutinCanvas.sortingOrder = 200;
    }
}

public class UILayerManager : MonoBehaviour

{

public Canvas gameCanvas; // ゲーム画面

public Canvas uiCanvas; // UI要素

public Canvas cutinCanvas; // カットイン（最前面）

void Start()

{

// Canvasのソートオーダーを設定

gameCanvas.sortingOrder = 0;

uiCanvas.sortingOrder = 100;

cutinCanvas.sortingOrder = 200; // 最前面

}

public void ShowCutinOnTop()

{

// カットインCanvasを最前面に

cutinCanvas.sortingOrder = 300;

}

public void HideCutin()

{

// カットインCanvasを元の順序に戻す

cutinCanvas.sortingOrder = 200;

}

このスクリプトを使うことで、カットイン用Canvasの表示優先度を明示的に制御できます。

必殺技発動時だけ最前面に引き上げる、といった演出も簡単に実装できます。

レイヤーの優先順位

ここで設定しているソートオーダーの考え方を整理すると、次のようになります。

あらかじめ数値に余裕を持たせておくことで、後からUIを追加する際も調整しやすくなります。

ゲーム画面：ソートオーダー0（最背面）
UI要素：ソートオーダー100（中間）
カットイン：ソートオーダー200以上（最前面）

この優先順位を維持することで、戦闘中にどのような状況でもカットイン演出が確実に画面手前に表示されます。

次の章では、このカットインにエフェクトを組み合わせる方法を解説します。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

エフェクトとの連携

エフェクトとの連携は、カットインと同時にエフェクトを表示します。

連携方法を紹介します。

エフェクト連携システム

public class CutinEffectSystem : MonoBehaviour
{
    public CutinSystem cutinSystem;
    public EffectSystem effectSystem;
    
    public IEnumerator PlayCutinWithEffect(Sprite characterImage, string skillName, GameObject effectPrefab)
    {
        // カットインを表示
        Coroutine cutinCoroutine = StartCoroutine(cutinSystem.ShowCutin(characterImage, skillName, 1f));
        
        // エフェクトを表示
        GameObject effect = Instantiate(effectPrefab, Vector3.zero, Quaternion.identity);
        
        // 両方が完了するまで待機
        yield return cutinCoroutine;
        
        // エフェクトを削除
        Destroy(effect);
    }
    
    public void PlayScreenFlash()
    {
        // 画面フラッシュ
        StartCoroutine(ScreenFlashCoroutine());
    }
    
    IEnumerator ScreenFlashCoroutine()
    {
        Image flashImage = GetComponent<Image>();
        Color color = Color.white;
        color.a = 0.5f;
        flashImage.color = color;
        
        yield return new WaitForSeconds(0.1f);
        
        color.a = 0f;
        flashImage.color = color;
    }
}

public class CutinEffectSystem : MonoBehaviour

{

public CutinSystem cutinSystem;

public EffectSystem effectSystem;

public IEnumerator PlayCutinWithEffect(Sprite characterImage, string skillName, GameObject effectPrefab)

{

// カットインを表示

Coroutine cutinCoroutine = StartCoroutine(cutinSystem.ShowCutin(characterImage, skillName, 1f));

// エフェクトを表示

GameObject effect = Instantiate(effectPrefab, Vector3.zero, Quaternion.identity);

// 両方が完了するまで待機

yield return cutinCoroutine;

// エフェクトを削除

Destroy(effect);

}

public void PlayScreenFlash()

{

// 画面フラッシュ

StartCoroutine(ScreenFlashCoroutine());

}

IEnumerator ScreenFlashCoroutine()

{

Image flashImage = GetComponent<Image>();

Color color = Color.white;

color.a = 0.5f;

flashImage.color = color;

yield return new WaitForSeconds(0.1f);

color.a = 0f;

flashImage.color = color;

}

このコードで、エフェクト連携が実装できます。

カットインと同時にエフェクトを表示できます。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

実装例：完全なカットインシステム

ここまで紹介してきた各要素を組み合わせることで、実戦で使える「完全なカットインシステム」を構築できます。

この章では、表示・アニメーション・UIレイヤー・エフェクトを一つの流れとして制御する実装例を紹介します。

個々の処理自体はシンプルですが、「どの順番で、どのタイミングで呼び出すか」を整理することが重要です。

この統合部分が、演出全体の完成度を左右します。

システム統合の考え方

完全なカットインシステムでは、役割ごとに分けた各クラスをまとめて制御する管理クラスを用意します。

これにより、戦闘処理側は「必殺技カットインを再生する」という高レベルな命令だけを意識すれば済むようになります。

この設計によって、次のようなメリットが生まれます。

演出ロジックと戦闘ロジックを分離できる
演出の差し替えや調整がしやすくなる
複数キャラクター・複数スキルに対応しやすい

完全なカットインシステムの実装例

以下は、必殺技発動時にカットイン演出を一連の流れで再生する実装例です。

これまでに作成した各システムをまとめて制御しています。

using UnityEngine;
using System.Collections;

public class CompleteCutinSystem : MonoBehaviour
{
    [Header("システム")]
    public CutinSystem cutinSystem;
    public CutinAnimationSystem animationSystem;
    public UILayerManager layerManager;
    public CutinEffectSystem effectSystem;
    
    public IEnumerator PlaySkillCutin(Unit unit, SkillData skill)
    {
        // UIレイヤーを最前面に
        layerManager.ShowCutinOnTop();
        
        // カットインを表示
        Sprite characterImage = unit.portrait;
        yield return StartCoroutine(
            cutinSystem.ShowCutin(characterImage, skill.skillName, 1f)
        );
        
        // アニメーションを再生
        yield return StartCoroutine(animationSystem.ZoomInAnimation());
        yield return StartCoroutine(animationSystem.ShakeAnimation(0.2f));
        
        // エフェクトを表示
        effectSystem.PlayScreenFlash();
        
        // UIレイヤーを元に戻す
        layerManager.HideCutin();
    }
}

using UnityEngine;

using System.Collections;

public class CompleteCutinSystem : MonoBehaviour

{

[Header("システム")]

public CutinSystem cutinSystem;

public CutinAnimationSystem animationSystem;

public UILayerManager layerManager;

public CutinEffectSystem effectSystem;

public IEnumerator PlaySkillCutin(Unit unit, SkillData skill)

{

// UIレイヤーを最前面に

layerManager.ShowCutinOnTop();

// カットインを表示

Sprite characterImage = unit.portrait;

yield return StartCoroutine(

cutinSystem.ShowCutin(characterImage, skill.skillName, 1f)

);

// アニメーションを再生

yield return StartCoroutine(animationSystem.ZoomInAnimation());

yield return StartCoroutine(animationSystem.ShakeAnimation(0.2f));

// エフェクトを表示

effectSystem.PlayScreenFlash();

// UIレイヤーを元に戻す

layerManager.HideCutin();

}

このコードでは、必殺技発動時に「レイヤー制御 → カットイン表示 → アニメーション → エフェクト」という一連の演出を順番に実行しています。

この実装例のポイント

重要なのは、各処理が独立した責務を持っている点です。

表示・アニメーション・レイヤー・エフェクトを分離しているため、特定の要素だけを変更しても全体に影響しにくくなっています。

また、すべての処理をCoroutineでつないでいるため、演出の順序や待機時間を直感的に調整できます。

応用・発展のポイント

この構成をベースに、次のような応用が可能です。

単なるサンプルで終わらせず、プロジェクトに合わせて拡張していきましょう。

スキルごとに演出時間やアニメーション内容を変える
複数段階のカットイン（前振り・決めカット）を再生する
スキルの威力やレア度に応じてエフェクトを切り替える
戦闘テンポに合わせて演出をスキップ可能にする

これらの拡張を行うことで、SRPGにおける必殺技演出をより戦略性と演出性の高いものにできます。

次は、よくある質問を通して、実装時につまずきやすいポイントや調整の考え方を整理します。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

よくある質問（FAQ）

Q: カットインの表示時間はどう設定すればいいですか？
A: 1〜2秒が標準です。短すぎると見づらく、長すぎるともっさりします。

Q: アニメーションはどう実装すればいいですか？
A: ズームインが基本です。0.3秒で拡大し、少し戻す動きが効果的です。

Q: UIレイヤーはどう構成すればいいですか？
A: カットインCanvasを最前面（ソートオーダー200以上）に配置しましょう。

Q: エフェクトは必須ですか？
A: 必須ではありませんが、強く推奨します。エフェクトがあることで、インパクトが高まります。

Q: カットインシステムのパフォーマンスはどう最適化すればいいですか？
A: 画像を事前に読み込んでおきましょう。また、アニメーションは軽量にします。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

ゲームを「遊ぶ側」から「作る側」へ

あなたのオリジナルゲーム、今年こそ完成させませんか？

RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。

Unity入門の森｜永久会員チケット

全講座ラインナップを見てみる

まとめ

カットイン演出は、UIレイヤーから始めましょう。

最前面に表示することで、インパクトが高まります。

✅ 今日から始める3ステップ

ステップ1：カットイン表示を実装する（所要2時間）
ステップ2：アニメーション演出を実装する（所要3時間）
ステップ3：UIレイヤーを構成する（所要1時間）

本格的にUnityを学びたい方は、Unity入門の森で実践的なスキルを身につけましょう。

あなたのペースで、少しずつ進めていけば大丈夫です。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる