UnityのuGUI上で表示することは可能ですか？

tetya_ · 4月 2016

ゲームのインフォメーションを喋ってくれるようなキャラとして表示しようと思っています。uGUIの一部として（Rect Transformを持ったGameObjectとして）モデルを表示することは可能でしょうか？

試してみたところ無理だったのでダメだとは思うのですが、一応確認しておきたくて質問させていただきました。ご存知のことありましたら、ご教示のほど宜しくお願いします。

naotaro · 4月 2016

こちらはRenderTextureを使い、uGUIのRawImageにテクスチャ指定する事でできますね。

Live2D Unity SDKサンプルのRenderTextureプロジェクトを使ってみて下さい。
合わせてこちらの方に記事も参考にしてみて下さい。

Qiita - Live2DのモデルをuGUIで表示する

tetya_ · 4月 2016

いつも丁寧な対応大変ありがとうございます。できることが分かりとても嬉しいです。教えていただいた資料を参考に取り組んでみたいと思います！

tetya_ · 4月 2016

RenderTextureを使うのが初めてだったので、手探りでやってみました。幾つか質問お願いします。

①教えていただいたやり方は、「モデルを撮影するカメラを用意し、そのカメラのTarget TextureをRender Textureとする方法」でしょうか？当初は、カメラを介さずに直接表示できるのかと思っていたので…。

②Live2D Unity SDKサンプルのRenderTextureを元に、Canvasに背景となるピンクのImageを用意した上でRaw Imageを表示したところ、透過領域がうっすらと暗く視認できてしまう状態でした。RenderTextureのColor Formatを弄ってみたところARGB4444とARGB2101010の場合綺麗に表示されました。綺麗に表示するやり方としてはこれで合っているのでしょうか？

お手数ですが、引き続きお知恵をお借りしたく存じます。よろしくお願いします。

naotaro · 4月 2016

①教えていただいたやり方は、「モデルを撮影するカメラを用意し、そのカメラのTarget TextureをRender Textureとする方法」でしょうか？

以下のスクリプトでカメラ1つのみでRenderTextureを使う事はできます。
(SDKサンプルのSimpleをカスタムしたものです)

・SimpleModel.cs

using UnityEngine;
using System;
using System.Collections;
using live2d;

//[ExecuteInEditMode]
public class SimpleModel : MonoBehaviour{
public TextAsset mocFile ;
public Texture2D[] textureFiles ;

private Live2DModelUnity live2DModel;
private Matrix4x4 live2DCanvasPos;

private RenderTexture renderTex; // Live2Dを映すRenderTexture
private GameObject Live2D_Quad; // Live2D描画用(TextureはRenderTexture)
private Renderer Quad_render; // Quadのレンダリング設定
private Camera Maincam; // メインカメラ

void Start (){
if (live2DModel != null) return;
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);
// メインカメラを取得
Maincam =Camera.main;
}

void Update(){
if (live2DModel == null) return;
live2DModel.setMatrix(transform.localToWorldMatrix * live2DCanvasPos);

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

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

live2DModel.update();

// この位置で作成しないと、実行停止してもQuadオブジェクトがHierarchyに残ってしまう
if(Live2D_Quad == null)CreateQuad();
}

///

/// Quadオブジェクト作成処理
///

void CreateQuad(){
// RenderTextureを生成
renderTex = RenderTexture.GetTemporary(Screen.width, Screen.height, 16/*depth*/, RenderTextureFormat.ARGB32);
// Quad生成(RenderTexture描画用)
Live2D_Quad = GameObject.CreatePrimitive(PrimitiveType.Quad);
// Live2Dモデルの座標とスケール設定
Live2D_Quad.transform.position = new Vector3(0.0f, 0.0f, 0.0f);
Live2D_Quad.transform.localScale = new Vector3(2.0f, 2.0f, 2.0f);

// Quadの設定
Quad_render = Live2D_Quad.GetComponent();
// シェーダーは透過処理できるものにする
Quad_render.material.shader = Shader.Find("Sprites/Default");
// テクスチャにrenderTextureを設定
Quad_render.material.SetTexture("_MainTex", renderTex);
// Quadオブジェクトの名前
Quad_render.name = gameObject.name + "_Quad";
}

void OnRenderObject(){
if (live2DModel == null) return;

//***** アクティブのフレームバッファを切り替える *****//
RenderTexture.active = renderTex;
// フレームバッファをクリア
GL.Clear (true, true, new Color ( 1.0f, 1.0f, 1.0f, 0.0f));

// Live2D描画
live2DModel.draw();

//***** アクティブのフレームバッファをデフォルトに戻す *****//
RenderTexture.active = null;
}
}

ただ、以下の点で開発がしずらいため、個人的にはあまりオススメしていないです。

１）ExecuteInEditModeをコメントアウトしないで、実行するとGameViewとSceneViewのヘッダが消える。
　→　ExecuteInEditModeを使わない事で、実行時しかLive2Dモデルが描画できない
　　

２）HierarchyでMain Camera選択状態でないとGameViewに描画されない。
　→　SceneViewで描画してなければ問題ないので、たぶんiphoneなど書き出し時も問題ない

３）画面サイズによってLive2Dモデルの縦横比がおかしくなる
　→　GameObjectのscaleやCameraのViewport Rect(W,H)で調整する必要がある
　　

②Live2D Unity SDKサンプルのRenderTextureを元に、Canvasに背景となるピンクのImageを用意した上でRaw Imageを表示したところ、透過領域がうっすらと暗く視認できてしまう状態でした

ARGB4444やARGB2101010について詳しくないですが、アルファを含むフォーマットらしいのでおそらくその指定で問題無いと思います。
AndroidやiOS向きに最適かはちょっと把握できてないので、もし問題があればUnity社に聞いてみて下さい。

私の場合は、SubCameraのBackgroundColorのalphaを0にする事で対処していますね（ここの設定がOpenGLなどのglClearColorと同じ動作）

naotaro · 4月 2016

あとカメラ2つ方式の方はsetPassが2倍になりますが、以下の方法で描画を回数を減らせば問題ないかと思います。

【小ネタ】Live2Dの描画処理を軽くする http://goo.gl/q9jT3f

※　RenderTextureプロジェクトの場合は、if条件がMainCamera以外の場合に描画するになる

tetya_ · 4月 2016

回答ありがとうございます！透過の件は、SDKサンプルRenderTextureプロジェクトのカメラのBackgroundColorのalphaが5であることが原因でした。0にしたところ、Color Formatを変更しなくても綺麗に透過されました。

カメラの件も、細かく教えてくださり大変ありがとうございます。カメラを中継させる方法がスタンダードであることが分かりましたので、このやり方を軸に引き続き頑張ろうと思います。

丁寧な対応ありがとうございました！