新しいLive2D公式コミュニティ(日本向け)が公開されました!
ぜひご利用ください!
Live2D公式コミュニティ

■このコミュニティの今後について
このコミュニティ(forum.live2d.com)につきましては、しばらくの間新コミュニティと並行して運営しますが、2023年夏ごろを目処に方針を決定する予定です。
(2022/12/27追記 2022年内を目処に閉鎖 から変更しております)
内容については決定次第お知らせいたします。
海外向けコミュニティについては変更ございません。
Live2Dに関するユーザーのみなさま同士の交流・ご質問・不具合の報告・提案・要望などについて是非お寄せください。
※Live2D公式スタッフからの発言や回答については確約できないことを予めご了承ください。

Live2D ヘルプ

Cubism Editorダウンロード / 動作環境
Cubism SDKダウンロード / 対応表
Cubism 製品利用ライセンス(SDK含)

Cubism 製品のライセンスについてのお問い合わせはこちら
nizima 及び nizima 製品についてのお問い合わせはこちら
【各最新OSの対応状況について】
Cubism Editorは 4.1.02 正式版以降でWindows 11 及び macOS Monterey に対応しております。ぜひ最新版をご利用ください。
※macOSをお使いの方でOSアップデートする際は必ずCubism Editorのライセンスを解除してください。
Cubism EditorをインストールしているmacOSをアップグレードしたい
Cubism SDKについては各SDKのREADMEまたはNOTICEをご確認ください。

【Mac各機種への対応状況について】
現在、Cubism EditorはApple M1チップ搭載機種には対応しておりません。
詳細は 動作環境 をご参照ください。
関連するお問い合わせへの対応はこの文章をもって代えさせていただきます。
Cubism 製品のマニュアル・チュートリアルはこちら
 
Cubism Editorマニュアル    Cubism Editorチュートリアル    Cubism SDKマニュアル    Cubism 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を変更しなくても綺麗に透過されました。

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

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