トゥイーンアニメーション作成を補助するツール [Unity]

画面遷移のアニメーションを作成する時など、トゥイーンさせるオブジェクトが大量にあると意外と大変なので、そういう場合にちょっとでもコード量を減らしてラクにできないかなと思い、ツールを作ってみました。
※別途DOTweenのインポートが必要です。

TweenAssistance - GitHub

下の画像のみたいにインスペクタを使ってラクしようというツールです。
個人的にはPositionのトゥイーンはけっこう使える気がします。

後、トゥイーン開始時はアクティブ状態がオンになり、トゥイーン終了時にインスペクタで設定したStartの値になっていればアクティブ状態がオフになるので、そこもラクできるポイントです。

ProgressionのSceneライクな画面遷移フレームワーク [Unity]

AS3のコンテンツを作っていた時にはProgressionをよく使っていたのですが、UnityでもProgressionのSceneのような仕組みで画面遷移ができると便利だなと思ったので作ってみました。

Succession - GitHub

詳しくは上記ページに書いていますが、Progressionのような大規模なものではなく、ProgressionのSceneの仕組み部分に特化しています。
ざっくりというとProgressionのSceneObjectのように「ロード処理」「開始処理」「終了処理」「アンロード処理」の関数を準備しておけば、後の移動の進行管理はライブラリ側が勝手に進めてくれるという部分です。

名前はProgressionをそのまま使うわけにもいかないので、響きが似ていて「連続するもの」という意味のSuccessionにしました。

使いどころとしては、ゲームコンテンツでは使いどころは少ないかもしれませんが、ツリー構造で情報が整理された情報コンテンツでは使えるのではないかと思います。

インスペクターでの参照登録をスクリプトで行う [Unity]

インスペクターから連番ファイル名のスプライト等を大量に参照登録する際、スクリプトでfor文を回して登録した方が早いなーと思ったので今回試みてみました。

上画像のようにインスペクターにスプライトを今回は3つ参照登録してみます。
※配列SpritesのSizeに3と入力して要素を3つ準備しておきます。

登録するのは”Assets/EditAssister/Image/”内にある ball1 ~ 3.png です。

[MenuItem] を使って、下画像のようにメインメニューから実行できるようにします。

下のコードを「EditAssister.cs」というファイル名で保存して、Assets内のどこかに「Editor」フォルダを作ってそこに入れるとメインメニューから実行できるようになります。

using UnityEngine;
using UnityEngine.UI;
using UnityEditor;

public class EditAssister
{
    [MenuItem("CustomTools/Assist1")]
    private static void Assist1()
    {
        for (int i = 0; i < 3; i++)
        {
            GameObject.Find("SceneManager").GetComponent<EditAssisterScene>().sprites[i] =
                AssetDatabase.LoadAssetAtPath<Sprite>("Assets/EditAssister/Image/ball" + (i+1).ToString() + ".png");
        }
    }
}

他には下のコードのように、HogeというMonoBehaviourを継承したクラスを複数のGameObjectにコンポーネント登録して、さらにそのクラスにIDをふるようなことも出来ます。

for (int i = 0; i < 3; i++)
{
    var hoge = GameObject.Find("Canvas/Image" + (i + 1).ToString()).AddComponent<Hoge>();
    hoge.Fuga = i + 1;
}

あと、GameObjectのTransformをいじったりもできるので、物量のあるプロジェクトでももう安心です!

2枚の画像を乗算で合成するShader [Unity]

ひとつのマテリアルに2枚の画像を登録して、その画像どうしを乗算で合成したかったので、そういう機能をもったシェーダーを作ってみました。

ベースにしたのはUnlit/Textureシェーダーで、以前の記事「画像をゆらゆらさせるシェーダー」の時と同じようにUnityのダウンロードページから現在使っている Unity2018.2.14 のビルトインシェーダーをダウンロードして、そこに入っていた「DefaultResourcesExtra/Unlit/Unlit-Normal.shader」を元に実装しました。

上の画像は今回作ったシェーダーのInspector画面です。まず Base と OverLayTexture にテクスチャを設定します。Blend Mode は Normal だと OverLayTexture に乗算が掛かっておらず、ただ Base画像の上に OverLayTexture画像を被せているだけの状態になるので、Base画像は完全に隠れてしまいます。

Strength を0.5に設定すると、OverLayTextureの強さ(アルファ)が0.5になります。

乗算で合成する場合は、Blend Mode を Multiplyにします。

スクリーンで合成する場合は、Blend Mode を Screenにします。

以下、シェーダーのコードです「Unlit-Normal-Overlay.shader」という名前で保存してAssets内の適当な場所に置いています。
赤字部分が編集した箇所なので、他のビルトインシェーダーでも同じように編集すれば動くかと思います。

Shader "Unlit/Texture-Overlay" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
        _OverlayTex ("Overlay Texture", 2D) = "white" {}
        [KeywordEnum(Normal,Multiply,Screen)] _BlendMode ("Blend Mode", Float) = 0
        _Strength("Strength", Range(0, 1)) = 1
    }

    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass {
            CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag
                #pragma target 2.0
                #pragma multi_compile_fog
                #pragma multi_compile _BLENDMODE_NORMAL _BLENDMODE_MULTIPLY  _BLENDMODE_SCREEN

                #include "UnityCG.cginc"

                struct appdata_t {
                    float4 vertex : POSITION;
                    float2 texcoord : TEXCOORD0;
                    UNITY_VERTEX_INPUT_INSTANCE_ID
                };

                struct v2f {
                    float4 vertex : SV_POSITION;
                    float2 texcoord : TEXCOORD0;
                    UNITY_FOG_COORDS(1)
                    UNITY_VERTEX_OUTPUT_STEREO
                };

                sampler2D _MainTex;
                float4 _MainTex_ST;
                sampler2D _OverlayTex;
                float _Strength;

                v2f vert (appdata_t v)
                {
                    v2f o;
                    UNITY_SETUP_INSTANCE_ID(v);
                    UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                    o.vertex = UnityObjectToClipPos(v.vertex);
                    o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
                    UNITY_TRANSFER_FOG(o,o.vertex);
                    return o;
                }

                fixed4 frag (v2f i) : SV_Target
                {
                    fixed4 col = tex2D(_MainTex, i.texcoord);

                    fixed4 overlayCol  = tex2D (_OverlayTex, i.texcoord);

                    #ifdef _BLENDMODE_NORMAL
                        col.r +=  (overlayCol.r - col.r) *  _Strength;
                        col.g +=   (overlayCol.g - col.g) *  _Strength;
                        col.b +=   (overlayCol.b - col.b) *  _Strength;
                    #elif _BLENDMODE_MULTIPLY
                        col.r *= 1 - (1 - overlayCol.r) * _Strength;
                        col.g *= 1 - (1 - overlayCol.g) * _Strength;
                        col.b *= 1 - (1 - overlayCol.b) * _Strength;
                    #elif _BLENDMODE_SCREEN
                        col.r = 1 - (1-col.r ) * (1 - overlayCol.r * _Strength);
                        col.g = 1 - (1-col.g ) * (1 - overlayCol.g * _Strength);
                        col.b = 1 - (1-col.b ) * (1 - overlayCol.b * _Strength);
                    #endif

                    UNITY_APPLY_FOG(i.fogCoord, col);
                    UNITY_OPAQUE_ALPHA(col.a);
                    return col;
                }
            ENDCG
        }
    }

}

UnityとWebSocket

ここ数日、UnityでWebSocketを使ってみたので分かったことを箇条書きメモとしてまとめておきます。

  • WebSocketはTCP上で動くのでコネクションが接続された、または切断されたという情報を、サーバー側、クライアント側でそれぞれ受け取れる。
  • Unityで使う場合は、「websocket-sharp」というC#用のライブラリを使うと良さそう。
  • 「websocket-sharp」ではバイナリデータも送れるみたい。

Unityで「websocket-sharp」を使って試したこと。

  • Unityから書き出したアプリが、WebSocketサーバーとしても使える。(そうするとNode.jsも必要なくなる)
  • 上記のUnity製WebSocketサーバーはPC用スタンドアローンでも、Androidアプリでも動いた。(iPhoneは試してない)
  • Unity製のWebSocketクライアントも、PC用スタンドアローンでも、Androidアプリでも動いた。(iPhoneは試してない)
  • Node.jsのサーバーと、Unity製のWebSocketクライアントも接続確認できた。

これは使える!

1 2 3 4 5 6 ... 13