Live2Dプログラミング部

Transcript

• 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. 以上で、初級編は終了です。 ありがとうございました！