【Unity】EasyMakingTransitionを使って、画面遷移のアニメーションを作ってみた
ゲームを作ってるときって、画面遷移するときにアニメーションがほしくなりますよね。パッと切り替わるのは味気ないんで、なにかアニメーションしてほしい。
えー、そんなわけで、こんなものを作ってみました。
石油王になれる可能性は、なきにしもアラブじゃ。 pic.twitter.com/IfruJWPnjP
— ホーリー (@gevvoihorry) 2017年4月28日
ツイッターに動画を載せたんですが、こんな感じですね。グルグル回りながら画面遷移しています。
これ、EasyMakingTransitionっていうアセットを使って作ったんです。生まれて初めて、アセットストアなるところで買い物をしてみましたよ。
このEasyMakingTransitionには、画面遷移のアニメーションが40種類揃っています。
またそのアニメーションスピードを変えたりと、色々カスタム出来るようになってますので、色んなことが出来ますね。
画面遷移する際には、当分これを使おうと思います。
☆☆☆
そもそもこれの存在を知ったのは、この本を読んだからでした。
Unity5 3D/2Dゲーム開発実践入門 作りながら覚えるスマートフォンゲーム開発
- 作者: 吉谷幹人
- 出版社/メーカー: ソシム
- 発売日: 2015/07/24
- メディア: 単行本
- この商品を含むブログ (2件) を見る
この本の最後の方に「アセットストアの利用」って章があるんですけど、そこで著者の方のおすすめアセットとして、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);
}
}
これゲームのタイトル画面なんですが、そこに新しいCanvas、CanvasTransitionを作り、EasyMakingTransitionを、その中に作ります。
ついでに、トランジション(画面遷移のアニメーション)を管理する、TransitionManagerも作りました。空のオブジェクトって言うのかな?まあそれです。
それで上記のコードファイルを、TransitionManagerに付けます。まあこれで最初の準備はOK。
てかもう終わりです。そんなに説明出来ることがないなw
えー、あれだ。Canvas内にあるEasyMakingTransitionは、ストレッチみたいなことにして、画面サイズに合わせました。
その他のEasyMakingTransitionの設定はこんな感じ。
Textureに画像をセットしてるのは、キャンバスごと消えるコードを書いてるので、その背景を出しておきたくて、設定しました。
これタイトル画面の画像と全く同じなんですけどね。EasyMakingTransitionのアニメーションを、キャンバスの上に表示するのが分からなかったんで、こうした次第です。
上記のコードは、DEMOのそれをちょっとイジってまして、画面遷移のコードを付け加えました。
なんかもっといいやり方がありそうなんですが、現状はこんな感じです。
あとそうそう。これ遷移する先にも、アニメーションを実装しないといけないんですよ。
上記したツイッターの動画では、グルグル回って遷移したあと、また反対にグルグル回ってるじゃないですか。グルグル2回。
これは、遷移先のシーンにもEasyMakingTransitionをセットしています。
実装方法は上記のそれと同じですね。反対のグルグルになるので、トランジションカーブってやつを逆にしています。Flipってボタンを押して。
実装したことは、このくらいです。
しかしEasyMakingTransitionいいですよ。これがあることで、ゲーム作りが今まで以上に楽しくなった気がします。
あんまりUnityのこと分かってない僕でも実装出来たので、初心者の方にもおすすめですね。