【Unity】UIEffectを使ったuGUIのディゾルブ

忘年会シーズン

コロナ禍で唯一良かったこと言えば社内の無駄な飲み会が無くなったという事なのに突然社長がオンラインで忘年会をやろうと言い出して連休明けの憂鬱な気分が更に憂鬱になった皆さんこんにちは。絶対地獄やん、勘弁してください。

UIEffect

さて、世の中には才能があるのに度量も優れている方がいるようで、かなり便利なアセット群がストア販売ではなくGithub等で無料で公開されています。

「UIEffect」もその一つで、このアセットをUnityプロジェクトに導入することでuGUIに対する17種類以上のシェーダが使用できるようになります

github.com

上記リンクからunitypackageファイルをダウンロードし、UnityのメニューからAssets→Import Package→Custom PackageよりUnityプロジェクトに導入することができます。

ディゾルブ

"Dissolve"というのは「溶解する」という意味ですが、その意味通り表面が溶けて燃え落ちているような演出をディゾルブと呼びます。

Unityでは3Dモデルに対するディゾルブのシェーダーがアセットストアで販売されていますが、UIEffectではPanelやImageといったuGUIに対してディゾルブの演出を行うことができます。

使い方は簡単でディゾルブ効果を付与したいuGUIオブジェクトに対してUIDissolveのコンポーネントをアタッチするだけ。

ディゾルブパターンや縁取りの色などをInspectorで設定します。

項目	内容
Effect Factor	効果の強さ
Width	縁の太さ
Softness	縁のぼかしの強さ
Color	縁の色
Color Mode	縁の色のブレンドモード
Noise Texture	ノイズテクスチャ

ディゾルブパターンはNoise Texture欄に白黒画像のTextureを指定します。

この指定した画像に準じてuGUIが「溶けていく」＝「消えていく」ことになりますが、逆に消えている状態から表示したい場合はEffectFactor欄の値を「1」に設定し、Reverseの欄をチェックします。

 スクリプトから実行

ディゾルブ演出を実行するにはスクリプトでUIDissolveのPlayメソッドをコールします。

using Coffee.UIExtensions;

public GameObject dissolvePanel;

public void PlayDissolve()
{

    UIDissolve panelDisolve = dissolvePanel.GetComponent<UIDissolve>();
    
    panelDisolve.Play();
    
}

このuGUIに対するディゾルブは全面表示のPanelに適用することで場面展開などの演出に使えます。

現在作成中の脱出ゲームでは制限時間切れによるゲームオーバーの場面で使っています。

ホラーゲームではないのですがちょっとホラーっぽくなりました。

【Unity】破壊系ツール「RayFire」を使ってみよう

急に

11月に入り朝夕の冷え込みが厳しくなってこのまま寒い冬へ突入していくのかなぁと思っていたら、季節が戻ったかのような急な温かさで戸惑っている皆さんこんにちは。私の人生もそうあって欲しいものです。

独身の日セール

さて、11月11日は中国では「独身の日」だそうで、それに併せてUnityのアセットストアでは中国だけなく日本を含むアジア圏で大幅なセールが行われていました。

数多くのアセットが50％オフ、70％オフで出品されておりセールというよりは投げ売りに近い状態、中国さん有難う、日本人は中国の歴史も文化も料理も大好きです、ただ、共産党が嫌いなだけです。

というわけで、前から欲しかったけど高額で手が出なかったアセットを幾つか購入したのですが、今回はその中でも最も高価だった「RayFire」のご紹介

RayFireとは

元々、3DCGの分野では破壊系ツールとして比較的有名だったようで、映画、映像の分野で頻繁に使用されており、実際に「RayFire」をキーに検索してみると3dsMaxでの使い方を紹介するページが数多く検索されます。そしてそのUnity版が「RayFire for Unity」となります。

assetstore.unity.com

オブジェクトの破壊や粉砕、崩壊などのシミュレーションを簡単に行うことができるツールで、わざわざメッシュ分割したモデルを用意しなくてもこのツールを使えば破壊によるメッシュ分割から物理演算による破片の飛散まで実装することができます。

まぁ、お値段はそれなり($170.0)にするのですが、今回はそれが70％オフ＝6,000円ぐらいで購入できるということで、本当に中国さん有難う、日本人は中国の歴史も文化も料理も大好きです、ただ、共産党が・・・

使ってみよう

ゲーム内のオブジェクトを破壊するには、RayFireを使って事前にオブジェクトを破壊(メッシュ分割した)したオブジェクトを作成しておくパターンと、ゲーム実行中にRayFireを使ってリアルタイムに破壊するパターンがあります。

どちらもそれを行うには当然ながらそれなりの設定が必要なのですが、今回は事前に破壊(メッシュ分割)したオブジェクトを作成するパターンを紹介します。

1.オブジェクトを用意する

今回は壁っぽいCUBEのオブジェクトを使用します。

このオブジェクトにRayfire Shatterコンポーネントをアタッチ、

「Fragment」ボタンを押すとこのオブジェクトを元にメッシュ分割したオブジェクトが新しく生成されます。

 こんな感じに分割されたオブジェクトが作成されます。

このメッシュ分割されるパターンは先程のInspector内のFragments Typeから選択でき、

こんな感じや

こんな感じにも分割できます。(他にもパターンがあります)

2.Rigidコンポーネントをアタッチ

メッシュ分割したオブジェクトが作成出来たら、そのオブジェクトにRayFire Rigidコンポーネントをアタッチし、ObjectTypeに「Mesh Root」を指定します。

これにより子オブジェクトとして配置されている分割オブジェクトに物理演算が適用され、RayFireコンポーネントがアタッチされたオブジェクト同士の接触判定が行われるようになります。
 

通常、Unityでこのような動作を行う場合、分割オブジェクトそれぞれにColiderとRigidbodyのアタッチと設定を行う必要がありますが、RayFireでは親オブジェクトにRayFire Rigidコンポーネントをアタッチするのみで、子オブジェクトにColiderとRigidbodyをアタッチする必要はありません。

3.初期化モードを決める

次に初期化モード(Initialization)を決めます。

これはRayFire Rigidの動作をゲーム開始直後から適用させるのか(At Start)、Script側からメソッドをコールすることで適用開始とするのか(By Method)、のモードで例えばゲーム内のイベントを発火点にオブジェクトの破壊を有効にしたい場合は動作開始モードに「By Method」を指定します。

4.シミュレーションタイプを決める

最後にSimulation Typeの設定でRayFire Rigidの動作が適用となった後、実際に物理演算を働かせる着火点を決めます。

直ぐにでも物理演算を有効にするには「Dynamic」を、弾丸等の他のオブジェクトとの接触後に有効にする場合は「Sleeping」を指定します。(他にもいくつか設定があります)

 ここまでの設定を行うと準備完了です。実際に動作させるとこんな感じになります。

(初期化モードには「At Start」を指定)

・シミュレーションタイプがDynamicの場合

 

ゲーム開始と同時に自重によって壁が崩れ落ちます。

・シミュレーションタイプがSleepingの場合

落下物との衝突で壁が崩れるようになります。

どちらもかなりリアルな破壊挙動になっていると思います。

RayFireではこれ以外にも爆風による破壊シミュレーション等色々な処理を行うことが出来るみたいなので、また詳しい事が分かったらこのブログで取り上げたいと思います。

【Unity】メッシュに沿ってパーティクルを放出する

よもやよもやだ

先週は月曜日もお休みして4連休だったので今話題の鬼滅の刃の映画を観に行ったら本編より先にドラえもんの予告編で泣きそうになった皆さんこんにちは。なんならポケモンの予告編でも泣きそうになった。

まるで橋田壽賀子ドラマのようにキャラクターが一から十まで状況と心情を事細かく説明することで誰にでもわかりやすくなっており、それに(性格的に)完全無欠の主人公と涙を誘うストーリーが相まって、子供から老人まで人気のあるコンテンツになっているのだと思いました。

一昔前のジャンプなら善逸のようなキャラクター(普段弱くて覚醒すると強い)を主人公に据えそうなのに、どこまでも真っすぐで優しい炭治郎を主人公としたのは英断だったと思います。

メッシュパーティクルエミッター

Unityではパーティクルを放出するモジュールの形状(Shape)を幾つか選択することが出来ます。

その中でMesh/Mesh Renderer/Skinned Mesh Rendererを選択すると指定した3Dモデルの周囲からパーティクルが放出されるようになります。

 

これはゲーム内ではキャラクターの周りで発せられるオーラや武器のエンチャントを表現する手法として使われることが多く、その様な目的用のアセットも販売されています。

剣のモデルを使用したアセット

今回はこれを利用してなにか面白い演出とならないか試行錯誤したお話。

消えるモデル

3Dモデルの周囲からパーティクルが放出できるという事はモデルの周りに速度が0のパーティクルを大量に放出すればパーティクルがモデル表面を覆うため、パーティクルだけでモデルの形状を表すことが出来そうです。その状態でパーティクルを停止すれば雲が消えるような感じでモデルが消えて見えるのではないか、そう思ったわけです。

早速、下のモデルに対してパーティクルを放出してみます。

実行！

 ん～・・・モデルの後ろからパーティクルが放出しているように見える。

 どうやら3Dモデルのシェーダによってはパーティクルより後に描画されることがあるみたい。

描画順はRender Queueによって指定できますが、現在のシェーダでは変更できないのでこれをUnlitに変更

実行！

おぉ、なんかキモくていい感じ！

さらにもう一つ同じようなShapeにマスクのメッシュをしてしたパーティクルを用意して、そちらにはGravity Modifierで重力が影響するようにします。
これを表面を覆うパーティクルの停止と同時に開始→数秒後に停止を行うと・・・

霧散するって感じになりました。

利用する

折角作ったので現在制作中の脱出ゲームの中で使ってみることにしました。

結構面白い演出になったのではないかと思います。

【Unity】影シェーダーを使ってみる

意外な結果

去年から出勤で歩く距離を増やしたり、食後に軽い運動をしたりと、色々頑張っていたのに健康診断に行ってみると体重もウエストも去年より増加していた皆さんこんにちは。食べる量が増えた記憶はないんですが、振り返ってみると週一ペースでポテチ食ってた。以後禁止します。

さて、Voodooのランゲームコンテストが終わったと思ったら、次は講談社のゲームクリエイターラボの応募が締め切り間近となっています。

daysneo.com

こちらは必ずしもプロトタイプのリリースが必要なわけでなくて企画書のみでも応募可能です。

ゲームクリエイターラボのメンバーに選ばれると、少なくとも2年間は制作支援(制作資金、作業スペース提供、宣伝広告等)が受けられるようなので、私のような名もない開発者には有難い企画ですね。まぁ相当な数の応募があるでしょうが。

影を表示する

以前までは開発のターゲットをスマホゲームにしていたので、負荷の大きい"影"については極力表示しない方向で制作を進めていました。

しかし、先日のVoodooランゲームコンテスト用のゲームでは、ジャンプしながら移動するという仕様上、プレイヤーがジャンプ中の自機の位置を見失ってしまう恐れがあったため、地面に自機の影が落ちるようにしました。

で、やっぱり影があったほうがゲーム画面が映えるなぁ、と思ったわけです。

とは言えリアルタイムに影を表示するのはスマホでは高負荷には変わりないので、できるだけ軽く実装できる方法はないのか探っていました。

影シェーダー

github.com

上記はGitHubで公開されているシェーダーで、3Dモデルを影のように表示する事ができるシェーダーです。

「影のように表示する」とはどういう事かというと、Directional LightからY座標0の位置にオブジェクトを投影させて描く、という意味です。

つまりこのシェーダーを適用したオブジェクトはY座標0の平面に投影図として表示されることになります。

ザックリとした説明図

このため使い方としては、影を表示させいオブジェクトと全く同じオブジェクトを子オブジェクトとして配置して、そのオブジェクトにこのシェーダー(Custom/PlanarShadow)を適用します。

上の動画では恐竜のオブジェクトに影用の恐竜オブジェクトが子オブジェクトとして配置されています。

 この影は通常の影のように地面に描かれているわけでなく、単にオブジェクトを投影図として表示しているだけなので負荷を低く抑えることができます。

ただ、投影するY座標はシェーダーのプロパティによって変更可能ですが、あくまで平面に対する投影図となる事は注意が必要です。

ただし、影を反映させる平面オブジェクトは必要ないため、地面の下が透けてみるような絵を簡単に作ることができます。

こんな感じのやつ、これをベースイメージとしてゲームクリエイターラボ向けの企画書を一つ作ろうかと思っています。

【Unity】小ネタ：スクリプトでテクスチャ座標を動かす

私はロボットではありません

Googleの「私はロボットではありません」のチェックの後に続く写真の選択問題が絶妙に難しいと感じている皆さんこんにちは。

「横断歩道を全て選べ」って、左端に小さくかすっているのは選ばなくても大丈夫ですよね？ああ、選ばないとダメなんですか、ごめんなさい。

そういえば前回の記事で「応募までの作業が難しくてエントリーできないかも」と書いていましたが、無事なんとかエントリーまでこぎつける事ができました。

ただ、もう一回同じ作業をしろと言われたら無理ですが。

スクロール

例えばこんな

水のブロックなどについてテクスチャがスクロールできれば水が流れるような表現ができそうです。

こんな場合はMaterialのmainTextureOffsetを使ってテクスチャの座標をずらしていくことでスクロールさせます。

void Update() 
{        
        float offsetX = Time.time * scrollSpeed_X;
        float offsetY = Time.time * scrollSpeed_Y;
        this.GetComponent<Renderer>().material.mainTextureOffset = new Vector2(offsetX, offsetY);
}

実際に動かしてみるとこんな感じになります。

【雑記】Voodooランゲームコンテストの応募ハードルが高すぎた話

欲しいもの

これだけ世間で話題になりキャラクターの名前や、柱や下弦上弦などのワードを把握していても本編は一分も見たことない皆さんこんにちは。今週末から映画版が公開らしく、TVでダイジェスト版が放送されてたりしましたが、FIFA21をやっていたら放送時間過ぎてた。

ファンの人から話を聞くと面白そうで見たら自分もハマりそうなんですが、なんせ今秋はOculus Quest2が発売されるし、Pixel5も発売されるし、PS5も発売されるし欲しいものだらけで、これでアニメにハマるとなるとゲーム制作の時間が無くなりそうなので自重しています。

Voodooランゲームコンテスト

さて以前、このブログでも紹介しましたが、Voodooのランゲームコンテストが開催されています。

■概要
・iOSでプロトタイプを提出
・ランゲーム＆物理演算を利用したゲーム
・賞金 100,000ドル

以前のブログでは10/12締め切りと記載していましたが、実際は10/16が締め切りでした。

ただし、応募には事前にVoodooのPublishing Programへ登録が必要で、この登録が申請から承認されるまで一日ぐらい要します。

また、Publishing Programが完了してもランゲームコンテストの応募までにはアレコレと作業が必要で、私も現在(10/13)時点でゲームは出来上がっているものの、コンテストの応募までには至っていません。

今日はそのお話。

ちなみにこんな感じのゲームです。

事前作業

まず、前述のようにPublishing Programへの登録が必要ですが、その際に応募するゲームのゲームプレイ動画を公開しているアドレスを求められます。つまり事前にプレイ動画を作成し、Youtube等にアップしておく必要があります。

また、自身の作品等を紹介するようなサイト(Portfolio link)やSkypeのIDも求められます。私はSkypeのIDは持っていないので「No ID」と入力しましたが、特に問題なかったようです。

これらを入力して送信すると、一日後ぐらいにVoodoo側からPublishing ProgramにアクセスするURL付きのメールが送られてくるので、そのURLからPublishing Programにアクセスしてランゲームコンテストへの応募が可能となります。

応募に至るまでのハードル

私の勝手なイメージとしてはunityroomのようにUnityからビルドしたXcode Porjectをどこかのサーバにアップするのかな、と考えていたのですが、実際には以下のような幾つもの作業を完了させて応募完了となるようです。

• FaceBookのビジネスアカウントと広告アカウントを作成する
• 広告アカウントの管理者にVoodooが指定するuserを追加する
• 応募ゲームにGameAnalyticsを導入する(←今ココ)
• アップルストアに応募ゲームを登録申請する
• ゲームのテスタとしてVoodooを申請

つまり応募前にXcode Porjectの作成までは終えていても、GameAnalyticsのプラグインを導入＆設定して再ビルドする必要があるし、そのプロジェクトをアップルストアに登録申請する必要があります。

GameAnalyticsの導入自体はUnityにそれ用のアセットがあるので、ダウンロードとしてImportすればよいのですが、現在は設定の仕方に手間取っている感じです。

また、設定を終えても動作確認を行う必要があるのでアップルストアに登録申請するまで時間が掛かるし、仮に順調に動作確認を終えたとしても、アップルストアへの申請にはアイコンやスクリーンショットを複数種類用意したりと色々と面倒(幸い開発者アカウントはあります)で、締め切りの10/16までにすべての作業を終えられる気がしない。。。

ちなみにVoodooの応募用ページには上記の手順について、絵付きで丁寧に操作＆設定手順が載せられているので、英語が読める方なら難なく応募までの作業を終えられると思います。

もっと早くから準備すべきだったなぁ・・・

【Unity】DOOffsetCharを使って文字を円状に配置

衣替え

今年も早いもので衣替えのシーズンとなってきましたが、夏場に購入した制汗シートが未だに消費しきれず、無理に使って風邪をひきそうになった皆さんこんにちは。秋なのに"氷結"タイプとか何の修行だよ。

DOTweenPro

さて、以前記事でも紹介しましたが、近頃DOTweenProがアップデートされてTextMeshに対して文字単位にアニメーションを行えるようになりました。

www.karvan1230.com

この文字単位のアニメーションには当然ながら平行移動(DOOffsetChar)の機能も含まれているので、これを使用すれば文字を好きな位置へ移動させることが出来ます。

なので、これまでは編集した画像を用意するしかなかった「円状に並んだ文字列」というUIもDOOffsetCharを使えば動的に実装できるかもしない、そう考えたわけです。

円状に配置させるには

各文字の円周上の座標は、文字列の中心を原点とすれば簡単に算出することができるので、各文字の位置から円周上の位置への移動ベクトル(オフセット量)を計算できれば文字を円状に配置させることができます。

この移動ベクトルは「文字列の中心から円周上の位置へのベクトル」と「文字列の中心から文字の位置へのベクトル」との差分となります。

しかし、「文字列の中心から文字の位置へのベクトル」に関しては正確なベクトルを得るすべは現在のところありません。

最初はGetCharOffsetメソッドで取得できるかと思っていたのですが、これは「各文字の初期位置からのオフセット量」を取得するメソッドらしく、文字列の中心位置からのオフセット量が取得できるわけではありませんでした。

よって暫定としてTextMeshのRecttransformからTextMeshの幅を文字数で割ったものを基準として算出します。

このためTextMeshの幅は文字列が一列で表示できるギリギリの幅を設定しておく必要があります。

まぁ、そのように設定してもフォントによっては各文字の幅は均等でないため、必ずしも正確な「文字列の中心から文字の位置へのベクトル」が算出できるわけではありません。あくまで暫定のベクトルになります。

 まぁ、それなりに・・・

実際に実装してみた結果はこんな感じになります。奇麗な円ではありませんが、それなりに表示させることはできました。

ソースはこんな感じ、Y座標最高点を開始位置にして時計回りに配置したかったので円周位置は90度から減算させて計算しています。また、移動に合わせてDORotateCharを使って文字を回転させています。

    private List<Vector3> GetCirclePosList(float cirRad, int chNum)
    {
        List<Vector3> retList = new List<Vector3>();

        float radInc = 360.0f / (float)chNum;

        for (int iCnt = 0; iCnt < chNum; iCnt++)
        {
            float curShita = 90.0f - (radInc * iCnt);

            float modx = cirRad * Mathf.Cos(curShita * Mathf.Deg2Rad);
            float mody = cirRad * Mathf.Sin(curShita * Mathf.Deg2Rad);

            retList.Add(new Vector3(modx, mody, 0));
        }

        return retList;
    }

    public void CircleTextAnim()
    {
        RectTransform TargeTextRect = TargeTextMesh.GetComponent<RectTransform>();
        float TextMeshWidh = TargeTextRect.sizeDelta.x;

        DOTweenTMPAnimator tmproAnimator = new DOTweenTMPAnimator(TargeTextMesh);

        int chNum = tmproAnimator.textInfo.characterCount;
        float radInc = 360.0f / (float)chNum;

        List<Vector3> cirOffsetList = GetCirclePosList(CircleRadius, chNum);

        int halfIndex = chNum / 2;
        float wordInt = (TextMeshWidh / 2.0f) / halfIndex;

        for (int i = 0; i < tmproAnimator.textInfo.characterCount; ++i)
        {
            float xOffset = 0.0f;
            if (i <= halfIndex)
            {
                xOffset = -1 * (halfIndex - (i + 0.5f)) * wordInt;
            }
            else
            {
                xOffset = ((i - halfIndex) + 0.5f) * wordInt;
            }

            // X方向のオフセット
            Vector3 currCharOffset = new Vector3(xOffset, 0.0f, 0.0f);

            // 円周位置
            Vector3 cirOffset = cirOffsetList[i];

            // オフセットベクトル取得
            Vector3 modOffset = cirOffset - currCharOffset;

            // 文字単位のオフセット
            tmproAnimator.DOOffsetChar(i, modOffset, 2.0f);

            // 文字単位の回転
            tmproAnimator.DORotateChar(i, new Vector3(0.0f, 0.0f, -1 * radInc * i), 2.0f);
        }
    }

ちなみに円状に配置した後にDOOffsetCharでオフセット量にゼロ(＝Vector3.zero)を指定すると元の位置へ戻すことができます。DORotateCharも同様にします。