2014年の夏に行った勉強会の資料です

1. 勉 強 会

2. まずはソフトをインストールしよう！
Cubisum Editor 2.0
Live2D Viewer 2.0

3. 今日のスケジュール
13:00 ～ 16:00 Live2Dの基本操作ハンズオン
16:00 ～ 17:20 もくもくとLive2Dを触る
17:20 ～ 17:30 作品の発表や感想など（未完成でもOK）
※ SDKを使ってプログラミングもOK

4. ハンズオンでやること
・サンプルを動かしてみよう！
・Live2Dの基礎知識
・PSDのパーツ切り分けルール
・テンプレ機能で簡単モデリング
・テンプレなしでモデリング
・揺れものアニメーション付け

5. サンプルを動かしてみよう！
Modelerのメニューから
[ヘルプ]-[サンプルモデル]を選択しよう

6. Live2Dの基礎知識(1/6)
Live2Dは、主に3つのソフトで構成されます
１）Cubisum Modeler ・・・モデリングソフト
２）Cubisum Animator・・・アニメ付けソフト
３）Live2D Viewer・・・・・動作確認ツール

7. Live2Dの基礎知識(2/6)
Live2Dのワークフロー
Modeler（cmoxファイル）
書き出し
Animator（canxファイル）
書き出し
Viewer
※ SDKもmocとmtn使用
インポート
参照
参照
参照
書き出し
PNG, JSONも書き出し可
連番PNG, GIF, 動画も書き出し可
物理演算(髪揺れなど)を
付けて書き出し可

8. Live2Dの基礎知識(3/6)
Live2D用語について
・ポリゴン → テクスチャに割り当てた点
・描画オブジェクト → ポリゴンを割り当てたパーツ
・デフォーマ → 描画オブジェクトをまとめて動かす要素
・変形パス → 描画オブジェクトをパスで動かす要素

9. Live2Dの基礎知識(4/6)
Modelerの基本操作
操 作内 容
マウスホイール
キャンバスパレット上で表示拡大・縮小
（拡大・縮小・全体・中心・原寸ボタンでも調整可能）
スペースキー ＋ マウスドラッグキャンバスパレット上で表示の移動
描画オブジェクト上で左クリック
（またはデフォーマ上）
描画オブジェクトの選択
（またはデフォーマの選択）
モード切替
（描画オブジェクト編集／デフォーマ編集モード）
描画オブジェクト編集モード
デフォーマ編集モード
※ Fキーで1つ前のモードと切り替える事も可能
Altキー ＋ 描画オブジェクトの赤い外枠をドラッグ
描画オブジェクトの拡大・縮小
（中心を起点）
Shiftキー ＋ 描画オブジェクトの赤い外枠をドラッグ
描画オブジェクトの拡大・縮小
（縦横サイズ比を保ったまま）

10. Live2Dの基礎知識(5/6)
Animatorの基本操作
操 作内 容
マウスホイール
キャンバスパレット上では表示拡大・縮小
（拡大・縮小・全体・中心・原寸ボタンでも調整可能）
タイムラインパレッド上ではワークエリアの表示拡大・縮小
スペースキー ＋ マウスドラッグキャンバスパレット上で表示の移動
Live2Dモデル上で左クリックモデルの選択
Live2Dモデルの赤い外枠をドラッグ
Live2Dモデルの拡大・縮小
（縦横サイズ比を保ったまま中心を起点）
Shiftキー ＋ Live2Dモデルの赤い外枠をドラッグ
Live2Dモデルの拡大・縮小
（縦横サイズ比を保たない）
Enterキーアニメーションの再生／停止
Ctrlキー ＋ クリックキーフレームの挿入
キーフレーム選択しDeleteキーキーフレームの削除

11. Live2Dの基礎知識(6/6)
Live2D Viewerの基本操作
操 作内 容
マウスホイールLive2Dモデルの拡大・縮小
スペースキー ＋ マウスドラッグLive2Dモデルの移動
マウスドラッグLive2Dモデルがマウスを追いかけます
髪揺れの物理演算も簡単に付けられるよ
サンプルモデルのmotionsフォルダを
ドラッグ＆ドロップしておけば簡単に動くよ♪

12. PSDのパーツ切り分けルール(1/2)
原画パーツ切り分け後
顔の輪郭パーツを
半透明で表示した所
動くと見えてくるパーツを切り分けて塗り足します

13. PSDのパーツ切り分けルール(2/2)
レイヤー名は自由
線画と塗りレイヤーの結合を忘れずに。結合する
Photoshopプラグインも提供してるよ！
切り分けルールの詳細は、以下のページを見てね
http://goo.gl/GSBGOJ

14. テンプレ機能で簡単モデリング（1/4）
PSDをドラッグ＆ドロップするだけでパーツの配置OK！

15. テンプレ機能で簡単モデリング（2/4）
テンプレート機能を使えば簡単にモデリング完了！

16. テンプレ機能で簡単モデリング（3/4）
Modelerのメニューから[ツール]でViewerを開けます！
（Macは未対応なので、出力されたJSONをViewerにドラッグ＆ドロップ）

17. テンプレ機能で簡単モデリング（4/4）
Animatorにモデルとモーションファイルを
ドラッグ＆ドロップするだけ！

18. テンプレなしでモデリング（1/4）
テンプレートを使わないでモデリングしよう

19. テンプレなしでモデリング（2/4）
ポリゴンを覚えよう

20. テンプレなしでモデリング（3/4）
変形パスを覚えよう

21. テンプレなしでモデリング（4/4）
曲面デフォーマ回転デフォーマ
デフォーマを覚えよう

22. 揺れものアニメーション付け（1/2）
カーブエディタを覚えよう

23. 揺れものアニメーション付け（2/2）
カーブエディタで髪揺れさせてみる

24. お知らせ
http://www.live2d.com/cubism2_release_contest
Cubism Editor 2 PRO (15万円相当)を5名に！