LoginSignup
19
18

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-05-14

開発環境

・Live2D_SDK_Unity_2.1.00_beta_8_jp
・Unity 5.0.1f1

UCL

この記事は『ユニティちゃんライセンス』に基づいて公開しています。
imageLicenseLogo.png

テクスチャカラーの変更

Live2Dプログラミング部で「テクスチャ色を変えられるよ!」と聞いたのでやり方をまとめてみました。
 → Live2Dプログラミング部の活動報告

やり方としては、OnRenderObject()に以下のコードを追加でOK!
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
ただ、目部分はSDK2.1からの新機能「クリッピングマスク」を使ってるせいかカラーが変わらない...。
02.png
目も変えたい場合は、Live2DのレンダーモードをL2D_RENDER_DRAW_MESHを使うと解決できます!
 → 複数Live2Dモデルの描画順を制御するの「2.描画モードを変更しZ値で制御する」
03.png

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

2015/09/17追記
Live2D Unity SDK2.1からクリッピングマスク使用モデルの場合はlive2DModel.updateのタイミングが変更

テクスチャカラー変更のソースコード

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の順)

live2DModel.getDrawParam().setBaseColor(1.0f, 1.0f, 1.0f, 1.0f);

透明度の変更

Live2D APIリファレンス見たらパーツの透明度を変更もできるので、以下のコードで試してみました。

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

RenderTextureで透明度を変更

Live2Dマニュアルには、オフスクリーン(RenderTexture)で半透明できると書いてありました。
 ・Q. Live2Dのモデルを半透明に表示させることはできますか?
 ・オフスクリーンによる半透明

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

・Unity Documentation - レンダーテクスチャ
・RenderTexture(Pro専用)を使って、別カメラの映像をテクスチャに描画する

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

HierarchyのPlaneオブジェクトがRenderTextureの描画先ですが、デフォルトでは透明度が変えられない。
なのでShaderをUI/Defaultに変えます。
(デフォルトのUnlit/Transparentだと、ライトの影響を受けずに原画そのまま表示できるらしい)
05.png
Tintのカラーをクリックし、アルファをいじると透明度を変更できるし、カラーも変えられます。
06.gif
ちなみにShaderはSprites/Defaultでもいけたけど、UI/DefaultだとColorMaskもいじれます。
07.gif
Sprites/Default = アルファブレンドされたシェーダー。Unity ライティングとは連携しません。

2015/12/09追記
Unity5.3からUI/Defaultの仕様が変わったのでSprites/Defaultを使って下さい(Upgrading to Unity 5.3より)

ただ、Unityちゃんのようなクリッピングマスク機能付きだとかわいそうになるので、Unlit/Textureがおススメ
(現在は透明度を抜く事ができないので、透明度を抜く場合はクリッピングを使わないモデルが望ましい)
※ Live2D Unity SDK2.1からこの問題も解決しました
08.png 09.png

また、ShaderをStandardにするとライトの影響も受けるので色々と遊べます(Directional lightが必要)
10.gif

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

19
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
18