Cubism SDK‎ > ‎プラットフォーム‎ > ‎Unity‎ > ‎Cs版‎ > ‎

プロジェクトの作成

ここでは、Unity のプロジェクト作成から Live2D モデルが表示されるまでの手順を説明します。

SDK サンプルを利用したチュートリアルは こちら を参照してください。

用意するもの
  • Unity Unity Pro でなくても構いません
  • Live2D ライブラリ (ダウンロードしたLive2D SDK の「lib」フォルダにある「Live2DUnity.dll」、及び「Resources」フォルダ
  • Live2D のリソース
本来は、Live2Dのリソースは作成するモデルに応じてそれぞれ準備します。
ここではサンプルプロジェクトの「ハル」のリソースを使って説明をしていきます。

simple/Assets/Resources/
  • haru.moc.bytes
  • haru.1024/texture_00.png
  • haru.1024/texture_01.png
  • haru.1024/texture_02.png



◆プロジェクトの作成と下準備

新規プロジェクトを作成して、プロジェクトビューにフォルダを作成していきます。

プロジェクトビューで「Create」 → 「Folder」でフォルダを4つ作り、「Live2D」、「Resources」、「Scene」、「Scripts」とそれぞれ名前を変更します。




◆Live2D SDK とリソースのインポート

※注意
以下の説明では、SDK付属のモデルなどを使用しますが、
自身で作成なされたモデルなどを利用する際は、
Unityの仕様により、以下の拡張子のファイルは、最後に".bytes"という拡張子をつけてください。
XXX.moc    →    XXX.moc.bytes
XXX.json    →    XXX.json.bytes
XXX.mtn    →    XXX.mtn.bytes

テクスチャー(.pngファイル)には必要ありません。
".bytes"という拡張子は、Unityエディターにインポートした際には表示されません。
ファイルを指定するパスも".bytes"は不要です。

※Unityエディター上で変更しても、元のファイルの拡張子は変更されないため、
この操作はUnityエディター上では行わなず、必ずエクスプローラーもしくはファインダーから行ってください。



「Live2D」フォルダに、 Live2D SDK の「lib」 フォルダにある 「Live2DUnity.dll」 と、
シェーダファイルの入った、「shader」をドラッグアンドドロップします。
ここで追加したシェーダはライブラリの内部から参照されるため、プロジェクト中でユーザが設定を行う必要はありません。





「Resoures」フォルダに、 テクスチャの入った 「haru.1024」 フォルダと「haru.moc.bytes」 をドラッグアンドドロップします。






「Scripts」 フォルダを選択し、右クリックから 
Create > C# Script を選んで作成します。
その後名前を変更しておきます。ここでは 「main 」 とします。




プロジェクトビューはこのようになります。







◆Live2Dモデルを表示するゲームオブジェクトの作成


メニューバーの 「GameObject>Create Empty」 で、空のゲームオブジェクトを作成します。





◆スクリプトの設定

以下でLive2Dを表示させるためのスクリプトを設定していきます。
各設定の具体的な詳細はドキュメントを参照してください。


「main」 を 「GameObject」 にドラッグアンドドロップします。





次に 「main」 を開き、以下のように変数を追加します。

  1. using UnityEngine;
  2. using System;
  3. using System.Collections;
  4. using live2d;
  5.  
  6. public class main : MonoBehaviour {
  7.         public TextAsset mocFile;
  8.         public Texture2D[] textures;
  9.        
  10.         private Live2DModelUnity live2DModel;
  11.        
  12.        
  13.         // Use this for initialization
  14.         void Start () {
  15.                
  16.         }
  17.                
  18.         // Update is called once per frame
  19.         void Update () {
  20.             
  21.         }
  22. }


Unityでは、publicを指定した変数はUnityエディターのInspectorに表示され、UnityのGUI上でその変数に入れる値や
オブジェクトを指定することができます。

「main」 をセットした GameObject を選択し、Inspector タブのスクリプトの項目にある、「MocFile」 に 「haru.moc」 を、
「Textures」 に 「texture_00」 ~ 「texture_02」 をドラッグアンドドロップします。
最後に、 「GameObject」 の位置(Position)を、 X:-7 , Y:8 , Z:0 に設定します。





「main」 を再度開き、Start() 関数で Live2D のモデルの初期化を行います。

  1.         void Start () {
  2.                
  3.                 Live2D.init ();
  4.                
  5.                 live2DModel = Live2DModelUnity.loadModel(mocFile.bytes);
  6.                
  7.                 for(int i = 0; i<textures.Length; i++)
  8.                 {
  9.                         live2DModel.setTexture(i, textures[i]);
  10.                 }
  11.         }
  12.        



次に、モデルを表示する位置やサイズの設定をUpdate()内で行います。

  1.         void Update()
  2.         {
  3.                 float modelWidth = live2DModel.getCanvasWidth();
  4.                 Matrix4x4 m1=Matrix4x4.Ortho(
  5.                         0, modelWidth, modelWidth,
  6.                         0-50.0f, 50.0f);
  7.                 Matrix4x4 m2 = transform.localToWorldMatrix;
  8.                 Matrix4x4 m3 = m2*m1;
  9.                
  10.                 live2DModel.setMatrix(m3);
  11.                 live2DModel.update();
  12.         }


最後に OnRenderObject() というメソッドを作成し、この中にモデルの描画命令を追加します。

  1.         void OnRenderObject()
  2.         {
  3.                 live2DModel.draw();
  4.         }

※:
Unity では、毎フレーム呼び出される基本的な関数として Update() が用意されていますが、
Live2Dのデフォルトで指定されている描画方式の仕様により、OnRenderObject() からLive2Dの
描画を呼び出してください。
Live2Dの更新はUpdate()からで構いません。
詳細は 描画モードの設定について を参照してください。



最終的なコードは以下のようになります。

  1. using UnityEngine;
  2. using System;
  3. using System.Collections;
  4. using live2d;
  5.  
  6. public class main : MonoBehaviour {
  7.         public TextAsset mocFile;
  8.         public Texture2D[] textures;
  9.  
  10.         private Live2DModelUnity live2DModel;
  11.  
  12.  
  13.         // Use this for initialization
  14.         void Start () {
  15.  
  16.                 Live2D.init ();
  17.  
  18.                 live2DModel = Live2DModelUnity.loadModel(mocFile.bytes);
  19.  
  20.                 for(int i = 0; i<textures.Length; i++)
  21.                 {
  22.                         live2DModel.setTexture(i, textures[i]);
  23.                 }
  24.         }
  25.  
  26.         // Update is called once per frame
  27.         void Update () {
  28.                 float modelWidth = live2DModel.getCanvasWidth();
  29.                 Matrix4x4 m1=Matrix4x4.Ortho(
  30.                         0, modelWidth, modelWidth,
  31.                         0-50.0f, 50.0f);
  32.                 Matrix4x4 m2 = transform.localToWorldMatrix;
  33.                 Matrix4x4 m3 = m2*m1;
  34.  
  35.                 live2DModel.setMatrix(m3);
  36.                 live2DModel.update();
  37.         }
  38.  
  39.         void OnRenderObject()
  40.         {
  41.                 live2DModel.draw();
  42.         }
  43. }

再生ボタンをクリックして、モデルが表示されれば完了です!


Comments