チュートリアル


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


用意するもの
  • Unity Pro (Plugin機構を使うため Unity Pro が必須)
  • Live2D SDK (ダウンロードしたLive2D SDK の「lib」フォルダと「script」フォルダ)
  • Live2D のリソース
本来は、Live2Dのリソースは作成するモデルに応じてそれぞれ準備します。
ここではサンプルプロジェクトの「しずく」のリソースを使って説明をしていきます。

sample_project/Assets/Scripts
  • LAppModelWrapper_Shizuku.cs
  • LAppAnimation_Shizuku.cs

sample_project/Assets/Resources
  • Models
  • Motions
  • Textures



◆OpenGL で Unity 起動(Windows の場合)

MacOSX の場合は必要ありません。

Unity のショートカットに「-force-opengl」を付けて OpenGLで起動するようにしておきます。




Unity のウィンドウに <OpenGL> と表示されていればOKです。





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

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

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




シーンを保存しておきます。ここではSceneフォルダ内に「01」と名前を付けて保存しました。





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

「Plugins」フォルダに Live2D SDK の 「lib」 内のファイルをドラッグアンドドロップします。



「Scripts」フォルダに Live2D SDK の「script」内のファイルをドラッグアンドドロップします。



続けて「Scripts」フォルダに「LAppModelWrapper_Shizuku.cs」「LAppAnimation_Shizuku.cs」をドラッグアンドドロップします。



「Resoures」フォルダに「Models」「Motions」「Textures」フォルダをドラッグアンドドロップします。



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




◆Live2Dモデルを表示する平面の作成

ヒエラルキービューで「Create」 → 「Plane」で平面を作成する。



名前を変更しておきます。ここでは 「Plane_Model1 」とします。



インスペクタービューで Transform に下記の値を入れて、平面がカメラを向くようにします。

 XYZ
Position000
Rotation901800
Scale111



シーンビューとゲームビューはこのようになっています。




◆RenderTargetTexture の設定変更

プロジェクトビューで「Resources/Textures」にある renderTargetTexture をクリックして選択して、インスペクタービューで画像の設定を変更します。



次のように各項目を設定します。

Texture TypeAdvanced
Read/Write EnabledYES(チェックを入れる)
Generate Mip MapsNO(チェックを外す)
FormatARGB 32 bit

最後に「Apply」ボタンを押して設定を適用します。



「renderTargetTexture」を先ほど作成した「Plane_Model1」にドラッグアンドドロップして、テクスチャに設定します。



「Plane_Model1」をクリックして選択して、テクスチャ設定欄の「Shader」の設定を「Unlit/Transparent」に変更します。
これで透明部分が透過されるようになります。



Shader の設定を変更したとき「Resources」フォルダ内に「Materials」フォルダが自動的に作成され、その中に renderTargetTexture のマテリアルが作成されています。



シーンビューとゲームビューはこのようになっています。



◆ModelWrapper の設定

LAppModelWrapper_Shizuku を「Plane_Model1」にドラッグアンドドロップしてコンポーネントに追加します。



LAppModelWrapper_Shizuku の空欄を埋めて行きます。

RenderTargetTexture → renderTargetTexture をドラッグアンドドロップ
Model Moc File → shizuku.moc をドラッグアンドドロップ
Textures Size → テクスチャーの数を入力 しずくは 4



Textures の Element の番号とテクスチャの番号を対応させて、それぞれドラッグアンドドロップしていきます。



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




◆Tips◆

iPhone など実機に書き出したときにテクスチャの画像が圧縮されて汚くなってしまうことがあります。

これを回避するにはテクスチャ画像を選択して、インスペクタービューで Format を「Compressed」から「Truecolr」に変更します。
これで圧縮されずにそのままの画像を使用するようになります。



Comments