Your SlideShare is downloading. ×
0
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Live2Dでユニティちゃんを微妙に動かしてみた

10,489

Published on

Published in: Technology
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,489
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
29
Comments
0
Likes
19
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Live2Dでユニティちゃんを 微妙に動かしてみた 2014/01/18 noshipu
  • 2. Unityを始めた理由(noshipu脳内調べ) その他(19%) 嫁に会うため(81%)
  • 3. MMDモデルが作られてない 2D嫁を動かしたくない?
  • 4. そんな人に Live2Dをおすすめ!
  • 5. 自己紹介とスライド説明 ★名前★   のしぷ ★Twitter★   @noshipu FF14はHades鯖でやってるよ ★このスライドについて★ Live2Dの勉強記録です。 Live2D初めて1週間ですので、詳しくないですmm このスライドをきっかけに一緒にLive2D始めよう!
  • 6. Live2Dってなに? 魅力あふれるキャラクターや原画が、 2Dのまま立体的に動く!(公式引用) 動画を見ればすごさがわかる!3Dモデルじゃないか疑う →http://www.youtube.com/watch?v=grzAbtw4zdI →http://www.youtube.com/watch?v=YrLnF7CQ8Ac
  • 7. Live2Dってなに? 最近のぬるぬる動く2Dキャラは結構Live2Dだったりする 企業でアドベンチャー作るなら、もはや必須レベル? [導入実績] ・サモンナイト5 ・恋愛リプレイ (^q^)くおえうえーーーるえうおおお ・俺妹 ポータブル  ・ガールフレンド(仮) ・やはりゲームでも俺の青春ラブコメはまちがっている。 ...他多数
  • 8. 今までは 立ち絵       ↓ これからは 動く絵
  • 9. Live2DとUnity 【ニュースリリース】2013/12/20 サイバーノイズ、「Unity」向けの開発ツール 「Live2D Cubism SDK for Unity」の提供を拡大 http://www.live2d.com/news/unity_full_release これにより非営利目的であれば条件付きで、 Unity用のSDKを個人、学生、サークル等で 使用できるように! ※リリースするには別途申請が必要
  • 10. 前置き終わり ここから、実際に作業した過程になります 絵を描き始めてから Unity上で微妙に動くところまでは ざっくり説明しますので、よろしくお願いします 前提条件として Live2Dであつかう素材はCubism Editorという Windowsソフトで作成します(Macは準備中とのこと 1/17現在)。 また、Unityは無償版で動きます
  • 11. 準備
  • 12. 1.Live2Dのツールを取得 Live2D SDK for Uniryのダウンロードに申請が必要 ここから申請 http://www.live2d.com/products/cubism_sdk SDKのダウンロード許可がメールで届くので、 そこからSDKをダウンロード。 また、Cubism Editorの無料版をダウンロード http://www.live2d.com/download
  • 13. 2.とりあえずサンプル Unityのサンプルプロジェクトが2つ 入ってるので、さわってみる sampleApp1   アプリ「しずくの時間」のしずくさんが入ってる   これ起動するだけで感動。Live2Dすごい simple   シンプル構成。   ソースも1ファイルなので、   こっちを参考にしてくのがおすすめ
  • 14. 3.チュートリアル動画みる 公式ドキュメントに使い方が書いてあるので、 動画ともに見て、読んで作業の流れを把握する Live2D Cubism Documents http://sites.cybernoids.jp/cubism/ チュートリアル動画 http://sites.cybernoids.jp/cubism/video/tutorial
  • 15. 4.作るものを決める 作るキャラクターと どのくらい動かすかを決めておく。 自分はせっかくなので、 ユニティちゃんを使うことにした。 動きもあくまで動作確認用なので、 そんなにつけない想定で進めることに。
  • 16. ユニティちゃんって? 知ってる人ばっかだと思うけど、 一応説明・・ Unity公式キャラクター オープンソース系ヒロイン! 今春デビュー
  • 17. 製作
  • 18. おおまかな作業の流れ 絵を準備
  • 19. おおまかな作業の流れ 絵を準備 パーツごとに ポリゴン設定
  • 20. おおまかな作業の流れ 絵を準備 パーツごとに ポリゴン設定 パーツの 回転、動きを 設定
  • 21. おおまかな作業の流れ 絵を準備 パーツごとに ポリゴン設定 パーツの 回転、動きを 設定 Unityで モデルを制御
  • 22. 絵を準備 1.レイヤーごとに絵をかき分ける 頭だけレイヤ分けて書いたら、 ユニティちゃん劣化してしまった ntnyさんごめんなさいorz 2.下絵とパーツテクスチャを作成 ・下絵 ・動かすパーツを集めたテクスチャ 上記の2枚をpngで吐き出す ※無料版だと読み込めるテクスチャが 1024*1024までの1枚だけなので注意 。 ←レイヤー分けする
  • 23. パーツごとにポリゴン設定 1.ポリゴンを設定 Live2D Cubism Modelerを開いて、 下絵とテクスチャを読み込ませる 設定したいパーツを選択して、 テクスチャ編集からポリゴンを設定する 2.下絵に揃えて配置 下絵に綺麗に重なるように配置する ※目など1箇所ずつ作るので、一気にやらないこと (例)両目いっしょに。まゆげ二ついっしょに 顔を設定するで! ポリゴンを いい感じに設定する 1、2を繰り返し パーツを配置し終えた状態
  • 24. パーツの回転、動きを設定 1.デフォーマをつける ポリゴンを動かす面や軸をつけていく デフォーマを作成から作る パーツのポリゴンが全て収まるように設定す る 2.パラメータにそった動きをつける パラメータにキーをおいて動きをつける 中間のパラメータの動きは 自動で補完してくれる ※タイムライン上に、 キーフレームごとに動きをつくる感覚に似てる ※モーションもこのタイミングで別ツール使って、作るみたいですけ ど、ここは今回やれなかったです 目の設定。 一番右側を見ているときの 設定をしている
  • 25. Unityでモデルを制御1 モデルの読み込み、表示 ※さっきまで作ってた modelをmoc形式で吐き出し、 ○○.moc.bytesという名前にして Assetsにいれておく テクスチャもAssetsのどこかにいれておく Start()で // モデルのロード Live2D.init(); live2DModel = Live2DModelUnity.loadModel(”つくったmocファイル”); live2DModel.setTexture( 0, ”つくったテクスチャ” ) ; OnRenderObject()で ※Live2D用の更新メソッド // モデルの描画 live2DModel.update(); live2DModel.draw(); サンプルを参考にして作っていくとわかりやすい
  • 26. Unityでモデルを制御2 パラメータの変更 感覚的にはMecanimのパラメータ変更をする感じ OnRenderObject()で ※Live2D用の更新メソッド // 目のX座標パラメータを動かす live2DModel.setParamFloat( "PARAM_EYE_BALL_X" , touch_point.x ) ; モデル.変更する型(変更するパラメータ, 変更する値); これでかわる
  • 27. とりあえず 前髪と目玉の 2箇所だけ動くように
  • 28. 微妙に動いた! DEMO http://noshipu.mydns.jp/afg/UnityChan/UnityChan.html 前髪はオートで、目はクリックした方向を見るように
  • 29. ざっくり感想
  • 30. ・絵をかけるようになりたい… ・ポリゴンの設定の仕方や、  デフォーマの設定はなれないと大変そう ・オリキャラ描いて  デフォーマがっつり設定したい ・モデルさえ作れれば、  Unityで扱いやすい! ・2D絵はやっぱりかわいい ・ユニティちゃんのリリース楽しみ!
  • 31. ご清聴ありがとう ございました

×