Unity初心者が伝えるゲーム開発における演出の備忘録

こんにちは、流です。

私がメインプログラマーとして携わったインディーズゲーム制作で使用した演出を備忘録として、脱初心者に向けてまとめていきます。

ぜひご参考にしてください。

今回紹介する演出を使用したインディーズゲーム「発進！オルターボ」

UIのアニメーション

UIのアニメーションを作成するにあたって、「LeanTween」というアセットを使用させていただきました。

UnityAssetStore　LeanTween

LeanTweenは補間曲線を使ったアニメーションを簡単に作成することができるアセットです。

位置を1から10まで10秒で移動するアニメーションは通常1秒で1づつ位置が移動する（等速）アニメーションになりますが、

補間曲線を使用したアニメーションでは、位置を1から8まで移動するのに4秒
8から10まで移動するのに6秒というように等速ではない動きを作ることができます。

実際に作成した以下のアニメーションを例にLeanTweenを使うためのスクリプトを解説していきます。

LeanTween.moveLocalY(_howToPlay, 0.0f, 1.0f)
    .setEase(LeanTweenType.easeInOutBack);

「moveLocalY」というのは、Y座標をアニメーションさせるという意味です。

「moveLocalY」以外にもX座標をアニメーションさせる「moveLocalX」

大きさをアニメーションさせる「scale」などたくさん用意されています。

アニメーションさせたいものに合わせて設定してください。

引数には

第一引数に「アニメーションさせる対象のオブジェクト」
第二引数に「アニメーションで向かうY座標」
第三引数に「アニメーションにかける時間」

を設定します。

今回の場合は
「_howToPlay（オブジェクト）, 0.0f（Y座標）, 1.0f（時間）」ですので、

_howToPlayオブジェクトを、Y座標0.0fへ向けて1.0秒かけてアニメーションさせるという意味になります。

「setEase」は補間曲線を設定しています。

引数の(LeanTweenType.easeInOutBack)が使用する補間曲線です。

どの補間曲線がどういう動きになるかは「ease curve」で検索または

UnityのProjectビューの
「Aseets>LeanTween>Examples>Scenes>GeneralEasingTypesシーン」で確認することができます。

次にLeanTweenの便利な機能を紹介します。

以下のアニメーションを例にスクリプトを解説していきます。

LeanTween.moveLocalX(_sortieText, 0.0f, 1.0f)
    .setEase(LeanTweenType.easeOutCirc)
    .setOnComplete(() =>
    {
        LeanTween.moveLocalX(_sortieText, -1000.0f, 1.0f)
        .setEase(LeanTweenType.easeInCirc);
    });

先ほど解説したスクリプトとは違い「setOnComplete」を使用しています。

「setOnComplete」はアニメーションが終了した後にラムダ式の処理を行うことができます。

ラムダ式についてはこちら

ですので、moveLocalX(_sortieText, 0.0f, 1.0f)

_sortieTextオブジェクトをX座標0.0ｆに向けて1.0秒かけてアニメーション（右から中央へ）した後に

moveLocalX(_sortieText, -1000.0f, 1.0f)

_sortieTextオブジェクトをX座標-1000.0ｆに向けて1.0秒かけてアニメーション（中央から左へ）というスクリプトになります。

等速ではなく補間曲線を使用したアニメーションにするだけで、ゲームの見た目がぐっと豪華になります。

画面切り替え効果

画面切り替え効果を作るにあたって、以下のサイトで配布されているものを使用させていただきました。

【Unity】Unityでトランジションを使用した綺麗な場面転換（uGUI対応版）

画面切り替え効果の設定の仕方、使い方を解説していきます。

まずサイトからダウンロードした「FadeCamera2.unitypackage」を起動します。
起動すると以下の画面がUnity上に表示されます。

Importを押します。

ProjectビューにFadeフォルダができていれば導入成功です。

次に使用したいマスク画像（ルール画像）の設定をしていきます。

マスク画像をProjectビューで選択しInspectorビューを開きます。

Texture TypeをSprite（2D and UI）からSingle Channelに変更します。

Alpha SourceをInput Texture AlphaからFrom Gray Scaleに変更します。

最後にApplyを押してマスク画像の設定完了です。

次にマスク画像を使った画面切り替え効果を実際に使う設定をしていきます。

「Aseets>Fade>FadeCanvas」をHierarchyビューにドラッグ＆ドロップします。

HierarchyビューでFadeCanvasを選択しInspectorビューを開きます。

Mask Textureに先ほどのマスク画像を設定します。

CutOut Rangeを変えることでフェードを確認することができます。

次にフェードを行うスクリプトを解説していきます。

フェードを行うのはとても簡単でFadeCanvasについているFadeコンポーネントを使用します。

Fadeコンポーネントを取得し、今回は「_fade」変数に格納したというスクリプトになります。

_fade.FadeIn(1.0f);

「FadeIn」メソッドでフェードインすることができます。

引数にはフェードにかける時間を設定します。

_fade.FadeOut(1.0f);

「FadeOut」メソッドでフェードアウトすることができます。

引数には「FadeIn」と同様にフェードにかける時間を設定します。

また以下のように「FadeIn」「FadeOut」ともにラムダ式でフェード終了後に行う処理を設定することもできます。

_fade.FadeIn(fadeTime, (() =>
    {
        //処理
    }));

まとめ

インディーズゲーム作成で使用した演出の作り方を紹介してきました。

ゲームを豪華にする演出として以下のことを覚えていっていただければ嬉しいです。

補間曲線を使ったアニメーション
LeanTweenの使い方
画面切り替え効果の設定・使い方

今回紹介した演出を使ったゲーム「発進！オルターボ」とこの記事が今後のゲーム制作でなにかの参考になれば幸いです。

（Written by 流）

目次

UIのアニメーション

画面切り替え効果

まとめ