Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Live2D勉強会

3,721 views

Published on

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

Published in: Education
  • Be the first to comment

Live2D勉強会

  1. 1.  勉 強 会
  2. 2. まずはソフトをインストールしよう! Cubisum Editor 2.0 Live2D Viewer 2.0
  3. 3. 今日のスケジュール 13:00 ~ 16:00 Live2Dの基本操作ハンズオン 16:00 ~ 17:20 もくもくとLive2Dを触る 17:20 ~ 17:30 作品の発表や感想など(未完成でもOK) ※ SDKを使ってプログラミングもOK 
  4. 4. ハンズオンでやること ・サンプルを動かしてみよう! ・Live2Dの基礎知識 ・PSDのパーツ切り分けルール ・テンプレ機能で簡単モデリング ・テンプレなしでモデリング ・揺れものアニメーション付け
  5. 5. サンプルを動かしてみよう! Modelerのメニューから [ヘルプ]-[サンプルモデル]を選択しよう
  6. 6. Live2Dの基礎知識(1/6) Live2Dは、主に3つのソフトで構成されます  1)Cubisum Modeler ・・・モデリングソフト  2)Cubisum Animator・・・アニメ付けソフト  3)Live2D Viewer・・・・・動作確認ツール
  7. 7. Live2Dの基礎知識(2/6) Live2Dのワークフロー Modeler(cmoxファイル) 書き出し Animator(canxファイル) 書き出し Viewer ※ SDKもmocとmtn使用 インポート 参照 参照 参照 書き出し PNG, JSONも書き出し可 連番PNG, GIF, 動画も書き出し可 物理演算(髪揺れなど)を 付けて書き出し可
  8. 8. Live2Dの基礎知識(3/6) Live2D用語について ・ポリゴン → テクスチャに割り当てた点 ・描画オブジェクト → ポリゴンを割り当てたパーツ    ・デフォーマ → 描画オブジェクトをまとめて動かす要素  ・変形パス → 描画オブジェクトをパスで動かす要素 
  9. 9. Live2Dの基礎知識(4/6) Modelerの基本操作 操 作内 容 マウスホイール キャンバスパレット上で表示拡大・縮小 (拡大・縮小・全体・中心・原寸ボタンでも調整可能) スペースキー + マウスドラッグキャンバスパレット上で表示の移動 描画オブジェクト上で左クリック (またはデフォーマ上) 描画オブジェクトの選択 (またはデフォーマの選択) モード切替 (描画オブジェクト編集/デフォーマ編集モード)     描画オブジェクト編集モード     デフォーマ編集モード   ※ Fキーで1つ前のモードと切り替える事も可能 Altキー + 描画オブジェクトの赤い外枠をドラッグ 描画オブジェクトの拡大・縮小 (中心を起点) Shiftキー + 描画オブジェクトの赤い外枠をドラッグ 描画オブジェクトの拡大・縮小 (縦横サイズ比を保ったまま)
  10. 10. Live2Dの基礎知識(5/6) Animatorの基本操作 操 作内 容 マウスホイール キャンバスパレット上では表示拡大・縮小 (拡大・縮小・全体・中心・原寸ボタンでも調整可能) タイムラインパレッド上ではワークエリアの表示拡大・縮小 スペースキー + マウスドラッグキャンバスパレット上で表示の移動 Live2Dモデル上で左クリックモデルの選択 Live2Dモデルの赤い外枠をドラッグ Live2Dモデルの拡大・縮小 (縦横サイズ比を保ったまま中心を起点) Shiftキー + Live2Dモデルの赤い外枠をドラッグ Live2Dモデルの拡大・縮小 (縦横サイズ比を保たない) Enterキーアニメーションの再生/停止 Ctrlキー + クリックキーフレームの挿入 キーフレーム選択しDeleteキーキーフレームの削除
  11. 11. Live2Dの基礎知識(6/6) Live2D Viewerの基本操作 操 作内 容 マウスホイールLive2Dモデルの拡大・縮小 スペースキー + マウスドラッグLive2Dモデルの移動 マウスドラッグLive2Dモデルがマウスを追いかけます 髪揺れの物理演算も簡単に付けられるよ サンプルモデルのmotionsフォルダを ドラッグ&ドロップしておけば簡単に動くよ♪
  12. 12. PSDのパーツ切り分けルール(1/2) 原画パーツ切り分け後 顔の輪郭パーツを 半透明で表示した所 動くと見えてくるパーツを切り分けて塗り足します
  13. 13. PSDのパーツ切り分けルール(2/2) レイヤー名は自由  線画と塗りレイヤーの結合を忘れずに。結合する Photoshopプラグインも提供してるよ!  切り分けルールの詳細は、以下のページを見てね  http://goo.gl/GSBGOJ
  14. 14. テンプレ機能で簡単モデリング(1/4) PSDをドラッグ&ドロップするだけでパーツの配置OK!
  15. 15. テンプレ機能で簡単モデリング(2/4) テンプレート機能を使えば簡単にモデリング完了!
  16. 16. テンプレ機能で簡単モデリング(3/4) Modelerのメニューから[ツール]でViewerを開けます! (Macは未対応なので、出力されたJSONをViewerにドラッグ&ドロップ)
  17. 17. テンプレ機能で簡単モデリング(4/4) Animatorにモデルとモーションファイルを ドラッグ&ドロップするだけ!
  18. 18. テンプレなしでモデリング(1/4) テンプレートを使わないでモデリングしよう
  19. 19. テンプレなしでモデリング(2/4) ポリゴンを覚えよう
  20. 20. テンプレなしでモデリング(3/4) 変形パスを覚えよう
  21. 21. テンプレなしでモデリング(4/4) 曲面デフォーマ回転デフォーマ デフォーマを覚えよう
  22. 22. 揺れものアニメーション付け(1/2) カーブエディタを覚えよう
  23. 23. 揺れものアニメーション付け(2/2) カーブエディタで髪揺れさせてみる
  24. 24. お知らせ http://www.live2d.com/cubism2_release_contest Cubism Editor 2 PRO (15万円相当)を5名に!

×