5/9のLive2Dプログラミング部のスライドです http://www.zusaar.com/event/12917005

1. Live2Dプログラミング部
2015.05.09

2. 自己紹介
・名前 ： なおたろー
・Twitter ： @naotaro0123
・2014年7月からLive2Dで働いてるサーバー系プログラマ
・Live2D Libraryの管理人をしてます
→ サイトが重いので夏中にリニューアルする予定
・Live2D勉強会や技術ブログを書いて布教活動してます！

3. 自己紹介
javascript、blenderネタが好きなので記事書いたり、LTしてます！
サイトリニューアル担当
blenderは100%趣味LT

4. 今日の内容
・13:00〜13:40 【初級編】SDKを使った簡単なカスタマイズ
JokerScriptやtyranoScriptの紹介など
・（10分休憩）
・13:50〜14:30 Unity SDK Tips集
・（10分休憩）
・14:40〜15:20 Live2D × ???
・15:20〜18:00 もくもくとLive2D SDKで何か作ってみる
・18:00〜19:00 懇親会（任意）
※ 時間は目安なので多少前後します。
懇親会参加する人は受付でお金払って下さいね

5. SDKとプラグイン担当のプログラマーいます！
Unityやcocos2d-x、Androidに詳しいプログラマーいるので、
色々と聞いて下さい！
JokerScript（Unity）やTyranoScript（js）、WebGL SDKは
僕に聞いてくれればOK！

6. Live2D界隈の最近ホットな話題
「あんさんぶるスターズ！」と「バトルガール」
あんスタ アイドル30人から連続告白される バトルガール なでなでムービー

7. 今日話す内容について
【初級編】SDKを使った簡単なカスタマイズ
・Unity SDKの解説とライブコーディング（10分）
→ モーション再生やMecanimと連携
・JokerScriptの紹介とソース解説（10分）
→ プラグイン開発やソース構成について
・TyranoScriptの紹介とソース解説（10分）
→ プラグイン開発やTyranoBuilderについて

8. Unity SDKの解説とライブコーディング
5/1に新しいβ版リリースされました！
主な変更点としては
・クリッピングマスク対応
・ドローコール削減サンプル追加
→ ShoeBoxでLive2Dのドローコールを減らす
コンテストに応募しなくても
私のLive2DモデルをDL
できるよ〜♪

9. Unity SDKの解説とライブコーディング
・Simple
→ 最も単純なLive2Dのパラメータを操作するサンプル
・Motion
→ Live2Dのモーションファイルを再生するサンプル
・Demo
→ 髪の物理演算やマウスを追いかけるサンプル
今回はSimpleとMotionをカスタムしていきます！
入門者にオススメなサンプルプロジェクト

10. Unity SDKの解説とライブコーディング
Modeler(cmoxファイル)
Moc、Texture
出力
Animator(canファイル)
mtn出力
Viewer
インポート
参照
参照
Live2Dのワークフロー
（１）モデリング・モーション付け
物理演算（髪揺れ）を
付けて書き出し
json出力
（２）SDKに組み込んでプログラミング
SDKを使って
組み込み

11. Unity SDKの解説とライブコーディング
１）SimpleのLive2DモデルをUnityちゃんに変えてみる
・mocやjsonはテキストアセットにする必要があるので
Unityのエディタ拡張しましょう！
→ Unityで拡張子を変換するエディタ拡張
※ SampleApp1には、ほぼ同様のスクリプトがあります
（いつか全てのサンプルプロジェクトに入るはず...）

12. Unity SDKの解説とライブコーディング
２）パラメータIDを変えてみる
・パラメータIDはModelerで確認できます。
public変数にする事でリアルタイムに変更できる
→ Unity上でLive2Dモデルのパラメータ制御

13. Unity SDKの解説とライブコーディング
３）モーションを再生してみる
・Mecanimと連携させる事もできます
→ Live2DのモーションをMecanim制御する

14. Unity SDKの解説とライブコーディング
SampleApp1は全機能入りだが難しい・・・。
・クラス関連図っぽいものを書いたので、参考にして下さい
→ Live2DのUnitySDKをコードリーディング
・中級者を目指すならJokerScriptのLive2Dコード、Unity5本の
ソースコードが参考になると思います！
本の中でソース解説はないが、
DLリンクのソースが参考になる

15. JokerScriptの紹介とソース解説
JokerScriptについて
・Unity製ノベルゲーム制作キット
・フリーウェア、商用利用も可（※ 法人利用の場合は要相談）
・プログラミング知識なくてもUnityの使い方わかれば、ノベルゲーム作れる
→ タグ形式で書くだけっ！
Live2Dモデル表示[p]
[live2d_show name=haru]
Live2Dモデル表示[p]
[live2d_show name=Epsilon]
Live2Dモデルのモーション変更１[p]
[live2d_motion name=haru storage=haru_m_02.mtn]
Live2Dモデルのモーション変更２[p]
[live2d_motion name=haru storage=haru_normal_10.mtn]
ぜひ、お試しください[p]

16. JokerScriptの紹介とソース解説
5/6にUnity5にも対応されていましたー！！
つまり、解禁されたUnity PRO機能や新機能が使える♪
→ UnityのImageEffectで遊んでみる

17. JokerScriptの紹介とソース解説
JokerScriptのプラグイン開発
・Live2DとSprite画像の描画順に少し問題があった...(; _)
→ レイヤーやZ軸を変えても、Sprite画像がLive2Dモデルの後ろに表示
（Cubeなど3DオブジェクトはZ軸で描画順を制御できる）
・Live2Dの描画モードには２種類ある
【Live2D.L2D_RENDER_DRAW_MESH_NOW】
・SDKのデフォルト設定
・レイヤーが使えない
・この描画モードなのでOnRenderObject()を使う
【Live2D.L2D_RENDER_DRAW_MESH】
・廃止予定のUnity APIのため非推奨(Unity5.0はOK)
・レイヤーが使える
・この描画モードなら、Update()を使う

18. JokerScriptの紹介とソース解説
JokerScriptのプラグイン開発
・UGUIのImageならLive2Dモデルの前に描画されるので
メッセージウィンドウなどは、UGUIで対応する方向にした
・参考にするプラグインがなくて、JokerScript開発者（シケモクさん）
に8割作ってもらいました（僕はLive2D部分を担当）
UGUIのoverlayモードなら
全ての描画後に配置されるので
Live2Dモデルの前に描画される

19. JokerScriptの紹介とソース解説
JokerScript上でUnitychanを表示する
・JokerScriptとLive2Dプラグイン、Live2D SDKのDLLが必要
Live2D AwardページからUnitychanをDLして、以下の手順で
モデルを表示してみます
→ Live2Dのモデルを画面に表示させよう

20. JokerScriptの紹介とソース解説
Live2D Viewerでmodel.jsonを作る必要がある
１）mocファイルをViewerにドラッグ＆ドロップ
２）mtnフォルダをmotionsにリネームし、フォルダをViewerにドラッグ＆ドロップ
（JokerScriptのツールでフォルダ名がmotionsの必要があるため）
３）unitychan.physics.jsonもViewerにドラッグ＆ドロップ
４）model.jsonを出力
プログラマはモデリングもアニメーションも
できなくてもいいが、モーションチェック用に
Viewerは覚えるべきっ！

21. JokerScriptの紹介とソース解説
Live2D To Unity Toolでファイル変換
・フォルダをキャラ名にリネームし、変換ツールにドラッグ＆ドロップ
・ツールはJokerScritptのLive2Dプラグインの中にあります。
内部では以下の事をやってると思います。
「.bytes拡張子の追加」
「model.jsonのファイルパスにキャラフォルダ名を追加」
フォルダとファイル構成はこのように
すること！！mocファイルが直下で
Model.jsonはキャラ名つける

22. JokerScriptの紹介とソース解説
JokerScriptのフォルダ構成
Live2Dのスクリプトや
リソースがあるフォルダ
シナリオを書くフォルダ。
tallは縦画面用、wideは横画面用
---------- シナリオファイル ----------
Live2Dモデル表示[p]
[live2d_show name=haru]
Live2Dモデル表示[p]
[live2d_show name=Epsilon]
→ ジョーカーのタグリファレンス

23. JokerScriptの紹介とソース解説
Live2Dのソースについて
・ソースコードは1ファイルでコメントもたくさんつけたので、
読みやすいかと思います。自由にカスタムして拡張してみて下さい。
・機能は、モーション再生、物理演算ファイル、ポーズファイル読み込みのみ
なのでマウスタッチの方を見たりリップシンク機能はつけてません

24. JokerScriptの紹介とソース解説
Live2D部分のソース構成について
メインプログラムです。
JokerScript以外にも流用可能です
タグ形式を実現するためのスクリプトですタグ形式を実現するためのスクリプトです

25. TyranoScriptの紹介とソース解説
TyranoScriptについて
・HTML5製アドベンチャーゲーム制作キット
・フリーウェア、商用利用も可
・プログラミング知識なくてもノベルゲーム作れる
→ タグ形式で書くだけっ！
Live2Dモデル表示[p]
[live2d_show name=haru]
Live2Dモデル表示[p]
[live2d_show name=Epsilon]
Live2Dモデルのモーション変更１[p]
[live2d_motion name=haru filenm=haru_m_02.mtn]
Live2Dモデルのモーション変更２[p]
[live2d_motion name=haru filenm=haru_normal_10.mtn]
ねっ、これでLive2Dを使ったゲームも作れるね！[p]

26. TyranoScriptの紹介とソース解説
TyranoScriptのプラグイン開発
WebGL版のSDKが出た時にいつか対応しようと思ってた。
CodeZineに記事を書く時、編集者のススメもあって対応しました

27. TyranoScriptの紹介とソース解説
TyranoScriptのプラグイン開発
TyranoScriptには、既に色々なプラグインがあったので作りやすかった。
「桜を舞い散るプラグイン」がシンプルでとても参考になりました。

28. TyranoScriptの紹介とソース解説
TyranoScriptのプラグイン開発
TyranoScriptは、DOM要素を操作してシーンを構築していくため
Live2Dのプラグインが作りやすかった
（enchant.jsなど1枚のCanvasで全部描画するものだと難しかったかも）
背景画像レイヤー
tyrano_base配下にdivを追加し
z-indexで描画順を制御

29. TyranoScriptの紹介とソース解説
TyranoScriptのプラグイン開発
Live2Dの描画はcanvasを複数追加する方式で実装しています
WebGLの使い方として結構むちゃなので、Canvas複数での同時表示は5体まで
にして下さい
わんころもちサイトをリニューアルする時、
Canvas複数方式したら6匹目でわんこが1匹
消えた・・・。
Canvas1枚に複数モデル表示する方式で解決！

30. TyranoScriptの紹介とソース解説
TyranoScriptのフォルダ構成
メインとなるシナリオ書くファイル。
ここだけ修正して物語を作っていく
→ ティラノのLive2Dタグリファレンス

31. TyranoScriptの紹介とソース解説
TyranoScriptのフォルダ構成
Live2Dモデルをassets配下にいれる
ここでLive2Dモデルのファイルパス定義をしてます。
モデルを追加したらここに追記して下さい。
Live2Dtyrano.jsはLive2Dのメイン処理です。
クラス化して複数モデル表示できるようにしてます

32. TyranoScriptの紹介とソース解説
TyranoBuilderの紹介
JokerScriptもTyranoScriptも難しいよ〜っと言う方には・・・
TyranoBuilderがオススメです！！（5/7にLive2D正式サポート）

33. TyranoScriptの紹介とソース解説
TyranoBuilderとは
直感的な操作でゲームが作れる画期的なアプリケーション！！
Live2Dの導入もチェック入れて
利用規約に同意するだけ！

34. 以上で、初級編は終了です。
ありがとうございました！