ホーリーのプログラミング日記

ホーリーのプログラミング日記

エキセントリック・スーパーアプリクリエイター / アプリ総DL数 約180万 / 全然分からない 俺は雰囲気でアプリを作ってる / iOS : apple.co/3m3HxSm / Android : bit.ly/3ma0liZ

【Unity】EasyMakingTransitionを使って、画面遷移のアニメーションを作ってみた

 

ゲームを作ってるときって、画面遷移するときにアニメーションがほしくなりますよね。パッと切り替わるのは味気ないんで、なにかアニメーションしてほしい。

 

えー、そんなわけで、こんなものを作ってみました。

 

 

ツイッターに動画を載せたんですが、こんな感じですね。グルグル回りながら画面遷移しています。

 

これ、EasyMakingTransitionっていうアセットを使って作ったんです。生まれて初めて、アセットストアなるところで買い物をしてみましたよ。

Asset Store

 

このEasyMakingTransitionには、画面遷移のアニメーションが40種類揃っています。

またそのアニメーションスピードを変えたりと、色々カスタム出来るようになってますので、色んなことが出来ますね。

画面遷移する際には、当分これを使おうと思います。

 

☆☆☆

 

そもそもこれの存在を知ったのは、この本を読んだからでした。

 

Unity5 3D/2Dゲーム開発実践入門 作りながら覚えるスマートフォンゲーム開発

Unity5 3D/2Dゲーム開発実践入門 作りながら覚えるスマートフォンゲーム開発

 

 

この本の最後の方に「アセットストアの利用」って章があるんですけど、そこで著者の方のおすすめアセットとして、EasyMakingTransitionが紹介されてたんです。

画面遷移といえばこれ、みたいな紹介だったので、安心して購入することが出来ました。紹介がなかったら、アセットってやつにビビって、購入しなかったに違いありませんw

 

ちなみにこの本は3Dゲームがメインの本です。なので、2Dメインの僕にとっては、そこまで参考にはならなかったんですけど、おすすめアセットのことや、アプリのリリース方法については詳しく書いてありました。いまだにUnityでアプリをリリースするときは、この本を見ながらやっています。

あと、2Dゲーム作りの紹介が1個だけあるんですけど、それが横スクロールゲームなんですよ。僕でいうところの泳げおっさんですね。

なので2Dの横スクロールゲームを作りたいって人にはバッチリかもしれません。

 

☆☆☆

 

さて、ここからはEasyMakingTransitionの使い方について、ちょっと書いてみます。

案の定、最初はよく分からなかったんですよ。んで今でもそんなに分かってるわけではないんですが、最低限のことは出来るようになりました。

 

とりあえずEasyMakingTransitionをインストールすると、なんかDEMOがついてるんですよ。作者の方の。なので、とりあえずそれを参考にするといいと思います。

DEMOをイジってるうちに、なんとなくのことは理解出来るかと。

 

あと、参考にしたサイトはこちらです。最低限の基礎知識はここで学びました。

【Unity】トランジション(画面遷移)する方法 Easy Masking Transition - CGメソッド

 

上記のサイトを見ていただければ、分かるんですが、まずはCanvasの中にEasyMakingTransitionを作ります。これ、EasyMakingTransitionをインストールしたあとだと、自動的にその項目が出てきました。

 

んで、ここからあれこれと設定するんですが、まず先に僕のコードを貼っておきましょう。これ多分鈍臭いことになってるとは思うんですが、こんな感じに書きました。

 

using UnityEngine;
using System.Collections;
using UnityEngine.SceneManagement;

public class TransitionManager : MonoBehaviour {

    public EMTransition transition1;
    public GameObject button;
    float delay = 0.5f;
    bool isCloseScene = true;

    string sceneName;
    int changeFlg = 0;

    public void OnTransitionStart()
    {
        if(!button) return;
        if(isCloseScene) {
            button.gameObject.SetActive(false);
        }
    }

    public void OnTransitionComplete()
    {
        if (changeFlg == 1) {
            MoveScene ();
        } else {
            button.gameObject.SetActive (true);
        }
        if(!button) return;
        if(isCloseScene) {
            isCloseScene = false;
            //            Invoke ("OnStartAnimation", delay);
        } else {
            button.gameObject.SetActive(true);
            isCloseScene = true;
        }
    }

    public void OnStartAnimation()
    {
        transition1.Play();
    }

    public void ChangeName(string name){
        sceneName = name;
        changeFlg = 1;
    }

    void MoveScene(){
        SceneManager.LoadScene (sceneName);
    }
}

 

f:id:gevvoihorry:20170428173537p:plain

 

これゲームのタイトル画面なんですが、そこに新しいCanvas、CanvasTransitionを作り、EasyMakingTransitionを、その中に作ります。

ついでに、トランジション(画面遷移のアニメーション)を管理する、TransitionManagerも作りました。空のオブジェクトって言うのかな?まあそれです。

それで上記のコードファイルを、TransitionManagerに付けます。まあこれで最初の準備はOK。

 

てかもう終わりです。そんなに説明出来ることがないなw

 

えー、あれだ。Canvas内にあるEasyMakingTransitionは、ストレッチみたいなことにして、画面サイズに合わせました。

 

f:id:gevvoihorry:20170428173821p:plain

 

その他のEasyMakingTransitionの設定はこんな感じ。

 

f:id:gevvoihorry:20170428173921p:plain

 

f:id:gevvoihorry:20170428173931p:plain

 

Textureに画像をセットしてるのは、キャンバスごと消えるコードを書いてるので、その背景を出しておきたくて、設定しました。

これタイトル画面の画像と全く同じなんですけどね。EasyMakingTransitionのアニメーションを、キャンバスの上に表示するのが分からなかったんで、こうした次第です。

 

上記のコードは、DEMOのそれをちょっとイジってまして、画面遷移のコードを付け加えました。

なんかもっといいやり方がありそうなんですが、現状はこんな感じです。

 

あとそうそう。これ遷移する先にも、アニメーションを実装しないといけないんですよ。

上記したツイッターの動画では、グルグル回って遷移したあと、また反対にグルグル回ってるじゃないですか。グルグル2回。

これは、遷移先のシーンにもEasyMakingTransitionをセットしています。

 

実装方法は上記のそれと同じですね。反対のグルグルになるので、トランジションカーブってやつを逆にしています。Flipってボタンを押して。

実装したことは、このくらいです。

 

しかしEasyMakingTransitionいいですよ。これがあることで、ゲーム作りが今まで以上に楽しくなった気がします。

あんまりUnityのこと分かってない僕でも実装出来たので、初心者の方にもおすすめですね。

Asset Store