How to Live2D@SDK2.0Kanazawa Unity Part3 2/22

T.M @tmka77

>>whoamiT.M @tmka77・大学院生 ・専門: Web, サーバ関連

・趣味, 興味: ゲーム開発, Oculus

Oculus Game Jam 2014@nifty会場

Global Game Jam 2015@JAIST 他各種勉強会, カンファレンス(CEDECとか)など

Live2D

・2Dモデルを立体的に見せる事が出来る

　技術・関連するツールの総称(及び会社名)

・2006年度下期未踏プロジェクトが発端

・数年前からスマートフォン向けアプリを

中心に多く見かけるように

Live2D

・デザイナーの得意分野が2Dだった

・SDKが無償で利用可能 ・純粋に興味があった

Why Live2D?

Live2D 開発フロー

Cubism Editor

Cubism SDK

Unity,Cocos,DirectX..

Cubism Editor

・ModelerとAnimatorから成る

Modeler…モデルを作成するソフト

Animator…アニメーションをつけるソフト

・Pro版とFree版があり、Freeではパーツの数やテクスチャ枚数の制限などが存在 →試用版, 学生価格ライセンスあります

Editor - Modeler・実際にコンテンツ内で使うモデルを

作成するソフトウェア

・事前にキャラクターのテクスチャ画像を

　用意しておく(福笑い化)

・テクスチャ画像から各種パーツを割振り　モデルを作成していく

原画 テクスチャ画像

Freeモデル

・Live2D素材サイト

http://www.live2d.jp/member/list/ ・Live2D社が用意したサンプルモデル有

http://sites.cybernoids.jp/cubism/samples(年間売上1000万円以下なら商用利用可能) ・原画からテクスチャ画像化するという手間はかかるが、フリーの2D素材を使うのも手

・生成したモデルを各種ゲームエンジン等で使うようにするためのソフトウェア群 ・対応プラットフォーム

Unity,Cocos-2dx,DirectX,OpenGL … etc(現時点でUE4は未対応)

・1.x系列と2.x系では大幅に違うので注意

・個人,小規模事業者なら無料利用可

Live2D SDK

・Editorは主にデザイナーの領域なので

　詳細は公式ドキュメントを見て下さい

　(一週間もあれば基本は学べるらしいです)

・以降は実際にSDK(Unity)を使って開発した 　事例や開発にあたっての技術的な話

Live2D Editor

・実際にLive2D SDKを用いてゲームを作成

・環境: Unity 4.6.1 (Pro)

Live2D SDK v2.0.02 SAI, PhotoShop・役職: プログラマー*3, デザイナー*1 ・登場する全てのキャラクターに対して利用

Global Game Jam 2015

Global Game Jam 2015

http://tmka.net/ggj2015/

Global Game Jam 2015

http://tmka.net/ggj2015/

・Animator,Mechanimの知識無しで

　2Dアニメーションが実装可能　 ・スプライト画像を用意しなくても良い ・モデルに対して比較的自由な動きが可能 ・(Live2Dの基本的な使い方を学べた)

Global Game Jam 2015良かった点

・公式Documentの通りにモデルを読み込むと場合によっては上手く読み込めなかった…

→SDK付属のプロジェクトを一部流用 ・デザイナーの負担が少々大きくなる ・そもそもキャラクターが小さかった為、説明するまでキャラが動いていることを知らない人が殆どだった

Global Game Jam 2015困った点・改善点

・現時点での公式動作確認Verは4.5.5

→4.6.1で動作確認OK

・SDK付属のサンプルプロジェクトを参考に

　すると良い

ex . Simple … 単純なLive2Dモデル読み込み

　　RenderTexture … UnityのRenderTexture

を利用したサンプル

Live2D SDK on UnityUnityで開発するにあたっての知識

モデル読み込みusing live2d;~~~~~~~~~~~~//宣言private Live2DModelUnity live2DModel;public TextAsset mocFile;public Texture2D[] textureFiles;private Live2DModelUnity live2Dmodel;//初期化・モデル読み込みLive2D.init(); //initializelive2DModel = Live2DModelUnity.loadModel(mocFile.bytes);for(int i=0; i< textureFiles.Length; i++){ live2DModel.setTexture(i, textureFiles[i]);}void OnRenderObject(){ live2DModel.Update(); //Model update live2DModel.draw(); //Model draw}

* Live2D 公式Documentより抜粋(表示の関係上一部省略)

・モデルの更新はUpdate()内ではなく

　OnRenderObject()内で行うようにする

・モデルは.mocファイル,

　モーションは.mtnファイルに定義

・仕様上, Live2Dの関連ファイルは.bytesを

　末尾につける必要有(SDK同梱のtoolが便利) ・描画に最低限必要な物 1. mocファイル

2. textureファイル

モデル描画

・Live2Dには二種類のモデル描画方法*1がある

1. L2D_RENDER_DRAW_MESH_NOWデフォルトの描画方法 2. L2D_RENDER_DRAW_MESH 過去に使われていた描画方法 !

基本的には1の方法で問題ないが…

モデル描画方法

*1 http://sites.cybernoids.jp/cubism/sdk_tutorial/platform-setting/unity/csharp/render-mode

・DRAW_MESH_NOWの出来ないこと

1. レイヤー設定不可

2. 半透明のオブジェクトをカメラとの間に　設置するとモデル描画に不具合が起きる 3. 照明の影響を受けることが出来ない

モデル描画方法

・なぜDRAW_MESHじゃないのか？

1. DRAW_MESHの描画方法は

　現在のUnityでは非推奨の描画方法

2. カメラに対して垂直にオブジェクトを設置

　する必要がある。(Z値をずらして描画している)

私の環境では過去の描画モードにて一部モデルの描画が正常に行えなかった為, NOWで実装

モデル描画方法

・DRAW_NOWの問題への対処法

1. レイヤーが設定出来ない

→モデルを描画したい順にモデル描画をしていけば良い(DrawManagerとかを作ると吉)

2. 半透明のオブジェクトを重ねたい

→UnityProであればRender Textureを利用

　そうでないのならCameraを複数用意後

　CameraのDepthパラメータで制御

モデル描画方法

・Live2Dではパーツの透明度を変更することで

　フェードイン・フェードアウトが出来る→どうもモデル全体には対応していないらしい RenderTexture(Pro)を使えば行けるらしいが

　 Freeでは不可能か

・RENDER_NOWの描画周りがまだ完璧に

　理解しきれていません…　場合によっては描画順制御がうまい具合に行かない

分かりません！

→ ご存じの方は@tmka77まで

モーション再生(Live2D)//モーションマネージャのインスタンス化MotionQueueManager motionManager = new MotionQueueManager(); //モーションファイル読み込み path=mtnファイルの場所Live2DMotion motion = Live2DMotion.loadMotion(path);//モーションの再生, 第二引数はtrueなら再生終了時にmotionのインスタンスをDelmotionManager.startMotion( motion, false );!!

http://sites.cybernoids.jp/cubism/sdk_tutorial/live2d_library/load_to_play_motion/set_motion

・Unity内でアニメーションを遷移させる際に

　使われるアニメーションシステム(v.4.x以降)

・Live2Dのモーションを切り替える際には

　原則、Mechanimは使用しない

・モーションを切り替える際には指定の

　モーションの.mocファイルLoad→Update

Mechanim

・モデルの描画の仕方 ・モーションの再生の仕方 ・描画方式の違い などを簡単に解説

!

→これだけ知っていれば簡単なアプリは作れる！(はず)

(デスクトップマスコット, スマートフォンアプリなど)

!

まとめ

・Live2D 公式サイト

http://www.live2d.com/ ・Live2D公式Document

http://sites.cybernoids.jp/cubism/ ・Live2D公式Forum

http://forum.live2d.com/ ・Live2D 描画エンジン APIリファレンス v2.0

http://doc.live2d.com/api/core/cpp2.0j/

Thanks!