Live2Dの透明度とテクスチャカラー変更

# 開発環境
・Live2D_SDK_Unity_2.1.00_beta_8_jp
・Unity 5.0.1f1

# UCL
この記事は『[ユニティちゃんライセンス](http://unity-chan.com/contents/license_jp/)』に基づいて公開しています。
![imageLicenseLogo.png](https://qiita-image-store.s3.amazonaws.com/0/15028/facb7a6e-4b82-2788-eb08-a0b48a9e87f3.png)

# テクスチャカラーの変更
Live2Dプログラミング部で「テクスチャ色を変えられるよ！」と聞いたのでやり方をまとめてみました。
　→　[Live2Dプログラミング部の活動報告](http://staff.live2d.com/archives/55248501.html)

やり方としては、OnRenderObject()に以下のコードを追加でＯＫ！
`live2DModel.setTextureColor (テクスチャ番号[0,1...], Red[0.0～1.0f], Green[0.0～1.0f], Blue[0.0～1.0f]);`

Live2D Unity SDKのSimpleプロジェクトをカスタムし、Unityちゃんモデルに変えてみました。
（sample\Simple\Assets\Scene\Sample.unity）

実行してスライダーをいじるとこんな感じです。
![01.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/98fe02fb-afae-840b-afbe-76e2d800eaa2.gif)
ただ、目部分はSDK2.1からの新機能「クリッピングマスク」を使ってるせいかカラーが変わらない...。
![02.png](https://qiita-image-store.s3.amazonaws.com/0/15028/cf13221d-e5fc-48b4-db22-0aecb092eb64.png)
目も変えたい場合は、Live2DのレンダーモードをL2D_RENDER_DRAW_MESHを使うと解決できます！
　→　[複数Live2Dモデルの描画順を制御する](http://qiita.com/naotaro0123/items/7835138c6ab59921fec8)の「２．描画モードを変更しZ値で制御する」
![03.png](https://qiita-image-store.s3.amazonaws.com/0/15028/7765e6cf-e6e6-5820-2600-ad43bb8eacbe.png)

テクスチャごとに色が変えられるのでこれでシーンに合わせた良い絵が作れますね。

**2015/09/17追記**
**Live2D Unity SDK2.1からクリッピングマスク使用モデルの場合は[live2DModel.updateのタイミングが変更](http://sites.cybernoids.jp/cubism-sdk2/2-1-sdk-updated)**
# テクスチャカラー変更のソースコード

```csharp:SimpleModel.cs
using UnityEngine;
using System;
using System.Collections;
using live2d;

[ExecuteInEditMode]
public class SimpleModel : MonoBehaviour 
{
	public TextAsset mocFile ;
	public Texture2D[] textureFiles ;
	[Range(0.0f, 1.0f)]
	public float Color_Red = 1.0f;	// Add
	[Range(0.0f, 1.0f)]
	public float Color_Green = 1.0f;// Add
	[Range(0.0f, 1.0f)]
	public float Color_Blue = 1.0f;	// Add

	private Live2DModelUnity live2DModel;
    private Matrix4x4 live2DCanvasPos;
	
	void Start () 
	{
		Live2D.init();
		
		live2DModel = Live2DModelUnity.loadModel(mocFile.bytes);
        for (int i = 0; i < textureFiles.Length; i++)
		{
            live2DModel.setTexture(i, textureFiles[i]);
		}
		
		float modelWidth = live2DModel.getCanvasWidth();
        live2DCanvasPos = Matrix4x4.Ortho(0, modelWidth, modelWidth, 0, -50.0f, 50.0f);
	}
	
	
	void OnRenderObject()
	{
        if (live2DModel == null) return;
        live2DModel.setMatrix(transform.localToWorldMatrix * live2DCanvasPos);

        if (!Application.isPlaying)
        {
            live2DModel.update();
            live2DModel.draw();
            return;
        }

		// Add Start
		for (int i = 0; i < textureFiles.Length; i++)
		{
			live2DModel.setTextureColor(i, Color_Red, Color_Green, Color_Blue);
		}
		// Add End

		double t = (UtSystem.getUserTimeMSec()/1000.0) * 2 * Math.PI  ;
		live2DModel.setParamFloat( "PARAM_ANGLE_X" , (float) (30 * Math.Sin( t/3.0 )) ) ;
		
		live2DModel.update();
		live2DModel.draw();
	}
}
```

**2016/03/16追記**
以下のコードだとモデル描画の際、全体に掛け合わされる色設定ができます(引数はA,R,G,Bの順)

```csharp:
live2DModel.getDrawParam().setBaseColor(1.0f, 1.0f, 1.0f, 1.0f);
```

# 透明度の変更
[Live2D APIリファレンス](http://doc.live2d.com/api/core/cpp2.0j/)見たらパーツの透明度を変更もできるので、以下のコードで試してみました。

```csharp:SimpleModel.cs
public class SimpleModel : MonoBehaviour
{
	.
	[Range(0.0f, 1.0f)]
	public float modelOpacity = 1.0f; // 透明度の調整
	.

	void OnRenderObject(){
		.
		.
		// 全てのパーツの透明度調整
		var partList = live2DModel.getModelImpl().getPartsDataList();
		foreach (var item in partList) {
			live2DModel.setPartsOpacity(item.getPartsDataID().ToString(), modelOpacity);
		}
		.
		.
	}
}
```
ただ、これだとパーツの重なり部分が見えちゃいます
![04.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/18e134ec-6112-f4da-7064-00cfa25c2b6a.gif)

# RenderTextureで透明度を変更
Live2Dマニュアルには、オフスクリーン(RenderTexture)で半透明できると書いてありました。
　[・Q. Live2Dのモデルを半透明に表示させることはできますか?](http://sites.cybernoids.jp/cubism2/faq/develop/unity#Q08)
　[・オフスクリーンによる半透明](http://sites.cybernoids.jp/cubism2/sdk_tutorial/platform/android/ofusukurinniyoru-ban-tou-ming)

RenderTextureはUnity5からFreeでも使えて、先ほどのUnityちゃん画像の水面もRenderTextureです。
（[Assets]-[Import Package]-[Enviroment]でWaterプレパブ追加すると簡単に水面ができます）

[・Unity Documentation - レンダーテクスチャ](http://docs.unity3d.com/ja/current/Manual/class-RenderTexture.html)
[・RenderTexture(Pro専用)を使って、別カメラの映像をテクスチャに描画する](http://blog.be-style.jpn.com/article/54251664.html)

Live2D Unity SDKのRenderTextureプロジェクトなら、3Dオブジェクトとして透明度を変えられるので試してみました。
（sample\RenderTexture\Assets\Scene\Sample.unity）

HierarchyのPlaneオブジェクトがRenderTextureの描画先ですが、デフォルトでは透明度が変えられない。
なのでShaderをUI/Defaultに変えます。
（デフォルトのUnlit/Transparentだと、ライトの影響を受けずに原画そのまま表示できるらしい）
![05.png](https://qiita-image-store.s3.amazonaws.com/0/15028/fff45e41-156c-35f3-487f-fa7a18118349.png)
Tintのカラーをクリックし、アルファをいじると透明度を変更できるし、カラーも変えられます。
![06.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/c7b8b91b-bc1f-dd80-22dd-114b01de0efe.gif)
ちなみにShaderはSprites/Defaultでもいけたけど、UI/DefaultだとColorMaskもいじれます。
![07.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/458877a0-6a2d-4a2e-9dab-fa74836ecddb.gif)
※ [Sprites/Default](http://docs.unity3d.com/ja/current/Manual/class-SpriteRenderer.html) ＝ アルファブレンドされたシェーダー。Unity ライティングとは連携しません。

**2015/12/09追記**
**Unity5.3からUI/Defaultの仕様が変わったのでSprites/Defaultを使って下さい（[Upgrading to Unity 5.3](http://docs.unity3d.com/Manual/UpgradeGuide53.html)より）**

ただ、Unityちゃんのようなクリッピングマスク機能付きだとかわいそうになるので、Unlit/Textureがおススメ
（現在は透明度を抜く事ができないので、透明度を抜く場合はクリッピングを使わないモデルが望ましい）
**※ Live2D Unity SDK2.1からこの問題も解決しました**
![08.png](https://qiita-image-store.s3.amazonaws.com/0/15028/77302c7b-0e13-792b-ccb1-f652071d4e32.png) ![09.png](https://qiita-image-store.s3.amazonaws.com/0/15028/9d99274e-a9e9-d95d-45f9-0b00f6ba2647.png)

また、ShaderをStandardにするとライトの影響も受けるので色々と遊べます(Directional lightが必要)
![10.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/205a62de-8bdf-b58f-edac-79e21a3ddebd.gif)

今回の検証でわかったのは、Live2Dモデルをフェードイン・フェードアウトさせるにはRenderTexture使う方法のみっぽい。