質問は基本的に1スレッドにつき1つの内容でお願いします。
また、お問い合わせの際は下記の情報を明記をお願いいたします。

▼ソフトウェアに関するご質問の場合
・【問題が発生したソフトウェア名とバージョン】(例:Cubism Editor 3.1.02、Euclid Editor 1.2.0 など)
・【ご利用のPC環境】例:Windows10、macOS HighSierra など
・【機種名】:MacBookPro 2017 など
・【グラフィックボード】例:GeForce GTX 950M など
・【メモリ】例:8GB
・【原画(イラスト)を制作したソフトウェア】例:Photoshop , CLIP STUDIO , SAI など
・【問い合わせ内容がわかるスクリーンショットまたは動画】例:パーツの表示状態など、お問い合わせ内容がわかる画像をご用意ください
---------------------------
▼SDKに関するご質問の場合
・現象の再現を行い検証させていただきますので、再現する最小のプロジェクトのご提供か、再現するまでの手順
・使用したSDKのバージョン

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

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

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

コメント

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

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


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

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

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

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

    お手数ですが、引き続きお知恵をお借りしたく存じます。よろしくお願いします。
  • ①教えていただいたやり方は、 「モデルを撮影するカメラを用意し、そのカメラの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;
    }
    }

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

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

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

    3)画面サイズによって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と同じ動作)
  • あとカメラ2つ方式の方はsetPassが2倍になりますが、以下の方法で描画を回数を減らせば問題ないかと思います。

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

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

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

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