【Unity】Unityちゃんの注視方向をIKで変化させる

Unityではオブジェクト向きを変えるにはTransform.LookAtメソッドを使います。この場合、体ごとグルっと回ってしまって不自然なことがあります。

ここではIKを使ってUnityちゃんの注視点方向を変える方法を紹介します。

Unityちゃんを配置しする

Unityちゃんのモデルをシーンビューに配置しましょう。WAITアニメを表示するため、UnityChan/Animationフォルダにある「UnityChanLocomotions」をUnityちゃんにドラッグ＆ドロップします。

これで、自動的にUnityちゃんにAnimatorコンポーネントがアタッチされます。実行するとWAITアニメーションが実行されます。

UnityちゃんをIK対応にする

UnityちゃんをIKにしたがって動かすためには、Animator ControllerでUnityちゃんをIKで動くように設定する必要があります。

UnityChanLocomotionsを開いて、画面左のBaseLayerの横の歯車ボタンを押してください。出てくるメニューの一番下にある「IK Pass」にチェックを入れます。

これで、MechanimでIKが使えるようになりました。

マウスの移動をUnityちゃんが追うようにする

最後に、Unityちゃんの視線がマウスを追うように、スクリプトを作成します。プロジェクトビューで右クリックし、Create→Script→C# Scriptを選択して「LookAtController.cs」という名前で保存しましょう。

保存できたら次のスクリプトを入力してください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class LookAtController : MonoBehaviour {

    Animator animator;
    Vector3 targetPos;

    void Start () {
        this.animator = GetComponent<Animator> ();    
        this.targetPos = Camera.main.transform.position;
    }
    
    void Update () {
        if (Input.GetMouseButton (0))
        {
            Vector3 touchPos = Camera.main.ScreenPointToRay (Input.mousePosition).origin;
            touchPos.z = -0.5f;
            targetPos = touchPos;
        }
    }

    private void OnAnimatorIK(int layerIndex)
    {
        this.animator.SetLookAtWeight(1.0f, 0.8f, 1.0f, 0.0f, 0f);
        this.animator.SetLookAtPosition(this.targetPos);
    }
}

ここではSetLookAtWeightメソッドと、SetLookAtPositionメソッドを使ってUnityちゃんの体をIKで動かしています。

SetLookAtWeightは体や頭、目の追従具合（重み）を調整するためのメソッドです。SetLookAtWeightの引数は次のようになります。

変数	意味
weight	全体の重み
bodyWeight	体を動かす重み
headWeight	頭を動かす重み
eyesWeight	目を動かす重み
clampWeight	モーションの制限量

ここでは、第2引数でマウスの動きに対して体がどれだけ追従するかを指定しています。また、第3引数ではマウスの動きに頭がどれだけ追従するかを指定しています。

続けて、ユニティちゃんの注視方向をSetLookAtPositionで指定しています。ここではマウスでクリックしている座標を指定しています。

入力できたら、スクリプトをUnityちゃんにドラッグ＆ドロップしてアタッチしましょう。

実行するとマウスのカーソルをUnityちゃんが追うように体と首を回転させます。

【Unityシェーダ入門】スパイクノイズを作る

スパイクノイズは、ブランドロゴのイントロとかでよく使われる感じのエフェクトです。といっても伝わりにくいので↓のような感じのものを作ります。

スパイクノイズという言葉はもともとは電子回路の言葉で、スイッチをオン・オフしたときに生じるパルスノイズです。チャタリングのようなものですね〜。余談でした（笑）

www.marutsu.co.jp

スパイクノイズのエフェクトを作る

画像を横方向に歪めるエフェクトは非常に簡単で、参照するテクスチャのX座標値をY軸の値をもとにずらすだけです。ずらす量は基本的にはsin関数で良いと思います。

今回は場所によってもう少しランダムなノイズにしたかったので、sin(10*x)*(-(x-1)^2+1)という関数の0〜3の範囲を使います。
この関数はsin関数と二次曲線の値を掛けただけのものですが、これにより山形のノイズが生成できます。

MacではGrapherというアプリ（デフォルトで入っている）を使うと、簡単にグラフが書けるので、「こういう波形が作りたい」というときに重宝しています。

パルスノイズのシェーダを作る

まずはシェーダファイルとマテリアルを作ります。プロジェクトビューで右クリックし、「Create/Shader/Unlit Shader」を選択してください。「PulseNoise.shader」という名前で保存します。このシェーダを設定した「PulseNoiseマテリアル」も作成します。

PulseNoise.shaderに次のプログラムを入力してください。

Shader "UI/PulseNoise"
{
    Properties
    {
        _MainTex ("Sprite Texture", 2D) = "white" {}
        _Amount ("Distort", Float) = 0.0
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag  
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float  _Amount;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                float2 uv = i.uv;
                float x = 2*uv.y;
                uv.x += _Amount*sin(10*x)*(-(x-1)*(x-1)+1);
                fixed4 col = tex2D(_MainTex, uv);
                return col;
            }
            ENDCG
        }
    }
}

フラグメントシェーダで、テクスチャを横方向にずらす処理をしています。テクスチャのy座標の値をもとにx方向にずらす量を計算しています。計算式は上で書いたとおりです。

また、ノイズの強さ自体をインスペクタから操作するため、propertiesブロックに_Amount変数を用意しています。この値を上で計算した値に掛けることで、ノイズ全体の大きさを制御します。

シェーダが書けたら、ノイズをかけたいuGUIのImageのインスペクタのMaterial欄に作成したPulseNoiseマテリアルをドラッグ＆ドロップしてください。

PulseNoiseマテリアルのインスペクタからAmount値を操作するとノイズがかかることが確認できます。

パルスノイズを発生させるスクリプト

いちいち手作業でノイズを発生させるわけにもいかないので、スクリプトからノイズを発生させましょう。

ノイズを一瞬だけ発生させるため、C#スクリプトから_Amount変数の値を操作します。NoiseControllerを作って次のプログラムを入力してください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class NoiseController : MonoBehaviour {

    IEnumerator GeneratePulseNoise()
    {
        for (int i = 0; i <= 180; i += 30)
        {
            GetComponent<Image> ().material.SetFloat ("_Amount", 0.2f * Mathf.Sin (i * Mathf.Deg2Rad));
            yield return null;
        }
    }

    void Update () {
        if (Input.GetMouseButtonDown (0))
        {    
            StartCoroutine (GeneratePulseNoise ());
        }
    }
}

ここではノイズの大きさをsin波で変化させているだけです。もちろん、Animatorから_Amountの値を操作してもOKです。最終的な実行結果は次のようになります。

【Unityシェーダ入門】ポリゴンをポイント（点）で表現する

Unityで3Dモデルを普通に描画するとポリゴンが表示されます。ここではポリゴンの頂点だけをポイントで表示する方法を紹介します。

頂点の表示方法を変えるだけなら、なんと２行のスクリプトだけですみます。それぞれの頂点に異なる色をつける場合はシェーダを使っています。

トポロジをポリゴンからポイントに変更する

3Dモデルの頂点情報はMeshで管理されていて、その頂点をどのように描画するかはMeshTopologyで定義されています。通常は面を描画するためにTrianglesトポロジが選択されています。

MeshTopologyには次のような種類があります。

トポロジ名	形状
Triangles	三角形
Quads	四角形
Lines	線
LineStrip	線分
Points	点

ここでは、頂点をポイントで表示するためにMeshTopology.Pointsを指定します。ワイヤーフレームで表示したい場合はMeshTopology.Linesを選択します。

トポロジを変更してポイントで表示する

トポロジの変更は、スクリプトから簡単に行うことが出来ます。PointControllerという名前でスクリプトを作成し、次のプログラムを入力してください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PointController : MonoBehaviour 
{
	void Start () {
        MeshFilter meshFilter = GetComponent<MeshFilter>();
        meshFilter.mesh.SetIndices(meshFilter.mesh.GetIndices(0),MeshTopology.Points,0);
	}
}

ここではGetComponentを使ってMeshFilterコンポーネントを取得し、メッシュの持つ頂点情報のトポロジをPointsに書き換えて再度保存しています。

スクリプトが入力できたら、作成したスクリプトを3Dモデルにアタッチして実行してみてください。次のように、頂点がポイントで表されたモデルが表示されると思います。

頂点の色をグラデーションで表示する

ポイントごと（頂点ごと）に色を変えたい場合は、シェーダを書く必要があります。ここでは上からしたに向かってグラデーションになるようにポイントごとに色を付けるシェーダを作ってみましょう。

シェーダファイルと対応するマテリアルを作成します。プロジェクトビューで右クリックし、「Create」→「Shader」→「Unlit Shader」を選択してください。名前はGradationにしました。また、それにGaradationシェーダを選択した状態で「Create→Material」を選択し、対応するCustom_Gradationマテリアルも作成します。

シェーダには次のプログラムを入力してください。

Shader "Custom/Gradation" {
    Properties {
        _Color ("Color", Color) = (1, 1, 1, 1)
    }
    SubShader {
        Tags { "RenderType"="Transparent" }
        Cull Off ZWrite On Blend SrcAlpha OneMinusSrcAlpha
        Pass {
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            
            struct v2f {
                float4 pos : SV_POSITION;
                float3 worldPos : TEXCOORD0;
            };
            
            float4 _Color;

            v2f vert(appdata_base v)
            {
                v2f o;
				float3 n = UnityObjectToWorldNormal(v.normal);
                o.pos = UnityObjectToClipPos (v.vertex);
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;   
     
                return o;
            }
            
            half4 frag (v2f i) : COLOR
            {
            	float4 red  = float4(255.0/255,70.0/255,150.0/255,1);
            	float4 blue = float4(90.0/255,90.0/255,250.0/255,1);
                return lerp(red, blue, i.worldPos.y*0.2);
            }
            ENDCG
        }
    } 
    FallBack Off
}

ここではバーテックスシェーダで、処理している頂点のワールド座標を計算しています。フラグメントシェーダではこのワールド座標のy成分に基づいて頂点の色を決定します。うまく青色から赤色にグラデーションになるよう、Lerpメソッドで補間して計算しています。

実行結果は次のようになりました。

頂点を動かして砂が飛び散るエフェクト

頂点を法線方向に動かすことで砂が飛び散るようなエフェクトを作ることも出来ます。バーテックスシェーダを次のように変更してください。

v2f vert(appdata_base v)
{
    v2f o;
    float3 n = UnityObjectToWorldNormal(v.normal);
    o.pos = UnityObjectToClipPos (v.vertex) + float4(n * _Displacement, 0);     
    o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;   
     
    return o;
}

ここでは、ワールド座標系で法線情報を取得し、その方向に_Displacementぶん頂点を外側に動かしています。_Displacementはプロパティブロックで宣言して、インスペクタから操作できるようにしておきました。