FC2ブログ
    07 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.» 09

    ハルシオンシステムの気ままBlog

    株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

     

    【ハルシオンブログ】UnityのuGUIでトランジション 画面遷移とかを少しリッチに! 

    こんにちは。毎日暑いっすね。
    トイレいくだけで汗かきそうです。坂内っす。


    Unityでトランジションをする方法を過去に書いたのですが、今はまたちょっと違うやり方をやっているので、ちょっと書いておきます。

    【Unity】テラシュールさんのuGUI対応トランジションがうまく動かず、某めるくまさんが解決方法考えてくれたので、自分の手柄としてブログにかいときますね!

    上記方法でやった場合は、ちょっと画像がジャギっちゃうらしい??

    さて、とても古い記事ですが、今現在もトランジション自体は使っています。
    コードも上記とちょっと違うだけで、ふつうに使えてますので、紹介です。

    つばきさんのこちらのFadeCamera2を使います。
    https://github.com/tsubaki/FadeCamera2

    実際に使うのはこの中のほんの一部ですが。

    まずはこんな感じの土台を作ります。



    ここにトランジションしたいサイズのImageオブジェクトを置きます。



    上記で生成したオブジェクトからImageコンポーネントを外し、FadeImageコンポーネントをつけます。



    この状態で、FadeImageのCutout Rangeを動かすとトランジションが動くのがわかります。



    あとはFadeImageのMaskTextureにルール画像をつければ、好きな感じのトランジションが出来上がります。




    それと、FadeImageのMaterialに「UI-Fade-Cutout」がついていますが、これを「UI-Mask」に変更すると、ジャギってるのがなくなりアルファ値が反映するようになります。



    もちろん画面全体の遷移の時は全画面に上記処理を行えばいいですよね。

    Fadeの中に「FadeCanvas」というのがあるので、それ使えば早そうですね。



    デフォルトだとFadeImageのMaterialに「UI-Fade-Alpha」が入ってますが、うまく動かないので「UI-Fade-Cutout」か「UI-Mask」にしてあげましょう。

    あとはルール画像を決めて、FadeImageのColorを変えればトランジションの色も変わるので、変えたりするとこんな感じに動くようになりました。



    という感じでトランジションが動きます。

    ゲームの画面遷移とかで使うとちょっとリッチな感じになりますよね。

    是非使ってみてください。

    では、あでゅ~ノシ

    Category: 開発日記(Unity)

    tb 0 : cm 0   

    コメント

    コメントの投稿

    Secret

    トラックバック

    トラックバックURL
    →http://halcyonsystemblog.jp/tb.php/908-882ac4b1
    この記事にトラックバックする(FC2ブログユーザー)