★お知らせ(2023/12/27)
いつもLive2D公式コミュニティをご利用いただき誠にありがとうございます。
本コミュニティは2023年12月27日 11:00をもって閉鎖いたしました。
今後の運営はすべて新Live2D公式クリエイターズフォーラムに移行します。
閉鎖に伴い、以下機能は利用不可となります。
・アカウントの新規作成
・トピック投稿、返信
たくさんのご利用誠にありがとうございました。

新Live2D公式クリエイターズフォーラムは以下バナーよりご利用いただけます。
Live2D公式クリエイターズフォーラム

なお、本コミュニティに投稿されたトピックはすべて残りますが、今後削除する可能性がございますので予めご了承ください。
閉鎖に関するお問い合わせにつきましてはLive2D公式クリエイターズフォーラムへご連絡ください。

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

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

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

コメント

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

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


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

  • tetya_tetya_
    いつも丁寧な対応大変ありがとうございます。できることが分かりとても嬉しいです。教えていただいた資料を参考に取り組んでみたいと思います！
  • tetya_tetya_
    編集済： April 2016
    RenderTextureを使うのが初めてだったので、手探りでやってみました。幾つか質問お願いします。

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

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

    お手数ですが、引き続きお知恵をお借りしたく存じます。よろしくお願いします。
  • naotaronaotaro
    ①教えていただいたやり方は、 「モデルを撮影するカメラを用意し、そのカメラの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と同じ動作）
  • naotaronaotaro
    あとカメラ2つ方式の方はsetPassが2倍になりますが、以下の方法で描画を回数を減らせば問題ないかと思います。

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

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

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

    丁寧な対応ありがとうございました！
コメントするにはサインインまたは登録して下さい。