Nullから始めるlive2 d初心者講座

ﾌﾞﾀｻﾝ工房

Nullから始めるLive2D初心者講座Nullから始めるLive2D初心者講座

Live2Dの知識を不定値から初期化するだけのお話Live2Dの知識を不定値から初期化するだけのお話


本日の内容本日の内容

� Live2Dって何？(Live2Dの説明

� Live2D Viewerで遊ぼう！(Live2DViewerの説明と使い方

/*----休憩----*/

� モデルの作り方(psdテンプレートを利用した簡単モデリング

� コラム(おまけ説明

� Live2Dって何？(Live2Dの説明

� Live2D Viewerで遊ぼう！(Live2DViewerの説明と使い方

/*----休憩----*/

� モデルの作り方(psdテンプレートを利用した簡単モデリング

� コラム(おまけ説明


Live2Dって何？Live2Dって何？

� 株式会社Live2Dが提供する、イラストを動かして、ヌルヌルと動かすツールのこと

� 作者が作ったもの→

� 株式会社Live2Dが提供する、イラストを動かして、ヌルヌルと動かすツールのこと

� 作者が作ったもの→


現在あるツール現在あるツール

� Live2D CubismEditor 2.0 (2015/06/19時点では2.1betaが最新)

Modeler：動かすイラストを作成するツール

Animator：イラストにアニメーションさせるツール

� Live2DViewer

動かすイラストをモリモリ動かせるツール

� Cubism SDK 2.0

ゲームエンジンや各種プラットフォームに組み込むためのSDK

� Live2D CubismEditor 2.0 (2015/06/19時点では2.1betaが最新)

Modeler：動かすイラストを作成するツール

Animator：イラストにアニメーションさせるツール

� Live2DViewer

動かすイラストをモリモリ動かせるツール

� Cubism SDK 2.0

ゲームエンジンや各種プラットフォームに組み込むためのSDK


制作事例制作事例

� 乖離性ミリオンアーサー

� ナナシス

� サモンナイト5

� バトルガールハイスクール

etc…

� 乖離性ミリオンアーサー

� ナナシス

� サモンナイト5

� バトルガールハイスクール

etc…


Live2D Viewerで遊ぼう！Live2D Viewerで遊ぼう！

� 持っていない人は「Live2D Viewer」で検索してVer2.0のものを落とそう！

� ※Adobe Airで開発されてるので、そっちをインストールしてない人は併せて

� 持っていない人は「Live2D Viewer」で検索してVer2.0のものを落とそう！

� ※Adobe Airで開発されてるので、そっちをインストールしてない人は併せて


Viewerで表示するキャラクターDLViewerで表示するキャラクターDL

� ここでは主に公式で配布されてる「しずく」を例に使っていきます

(直リンクは怖いので「Live2D サンプルデータ」で検索してください

� 「しずくー組み込みファイル」をDLし、解凍します

� ここでは主に公式で配布されてる「しずく」を例に使っていきます

(直リンクは怖いので「Live2D サンプルデータ」で検索してください

� 「しずくー組み込みファイル」をDLし、解凍します


Viewerで表示するViewerで表示する

� Live2DViewerを開き、mocファイルを入れる

�poseファイルはイラストと一緒に出たファイルスペースに入れる

� Live2DViewerを開き、mocファイルを入れる

�poseファイルはイラストと一緒に出たファイルスペースに入れる


グリグリ動かしてみよう！グリグリ動かしてみよう！

� ドラッグ操作でキャラがその方向に向いてくれる！すごい！

� poseファイルと同じように「motions」フォルダをドラッグ&ドロップするとアニメーションしてくれる！

導入後、motionsフォルダ内のファイルをダブルクリックするとモーション再生できる！

� ドラッグ操作でキャラがその方向に向いてくれる！すごい！

� poseファイルと同じように「motions」フォルダをドラッグ&ドロップするとアニメーションしてくれる！

導入後、motionsフォルダ内のファイルをダブルクリックするとモーション再生できる！


もう少し遊ぶもう少し遊ぶ

� キャンパスウィンドウを非表示にすればデスクトップマスコットのように振舞える！カーソルを近づければその方向を向いてくれる� キャンパスウィンドウを非表示にすればデスクトップマスコットのように振舞える！カーソルを近づければその方向を向いてくれる


さらにもう少し遊ぶさらにもう少し遊ぶ

� 「プロジェクト」->「追加」->「リップシンク」を追加してマイク設定をすればマイクからの声と口パクを合わせられる� 「プロジェクト」->「追加」->「リップシンク」を追加してマイク設定をすればマイクからの声と口パクを合わせられる


もっと他の作品を見たい人はもっと他の作品を見たい人は

� “Live2D Library”へGO！

公式や、公式以外で公開されてるデータが集まる場所

� “Live2D Library”へGO！

公式や、公式以外で公開されてるデータが集まる場所


休憩休憩


モデルの作り方モデルの作り方

� 簡単な方法

動かす為の素材を描きます

↓

psdデータにしてファイルインポートします

↓

テンプレートを調整後、適用

↓

最後に違和感のある場所を手直ししておしまい

� 簡単な方法

動かす為の素材を描きます

↓

psdデータにしてファイルインポートします

↓

テンプレートを調整後、適用

↓

最後に違和感のある場所を手直ししておしまい


実際、何時間かかるの？実際、何時間かかるの？

� 作成例：ととみ(うちの子)

� 素材の作成時間約5時間

� テンプレート適用・手直し約6時間

� その他ミスなどで捨てた時間約15時間

� 合計約26時間

実際しんどかった

� 作成例：ととみ(うちの子)

� 素材の作成時間約5時間

� テンプレート適用・手直し約6時間

� その他ミスなどで捨てた時間約15時間

� 合計約26時間

実際しんどかった


本当に簡単なものなら本当に簡単なものなら

� 作成例ブタサン

� 素材の作成時間約10分

� テンプレート適用・手直し約40分

� その他ミスなどで捨てた時間なし

� 合計約50分

� 作成例ブタサン

� 素材の作成時間約10分

� テンプレート適用・手直し約40分

� その他ミスなどで捨てた時間なし

� 合計約50分


一緒に作っていく一緒に作っていく

� 一緒に動かしながらやってみましょう！� 一緒に動かしながらやってみましょう！


素材を作る素材を作る

� パーツをモリモリ分けて作る

詳しくやる時間無いので詳しくは

http://sites.cybernoids.jp/cubism2/lets-do-it/quick-modeling

へ、どうぞ！

� パーツをモリモリ分けて作る

詳しくやる時間無いので詳しくは

http://sites.cybernoids.jp/cubism2/lets-do-it/quick-modeling

へ、どうぞ！


素材が無いよ素材が無いよ

� http://sites.cybernoids.jp/cubism2/lets-do-it/quick-modeling/01

このサイトからPSDサンプルをダウンロードしてください

� http://sites.cybernoids.jp/cubism2/lets-do-it/quick-modeling/01

このサイトからPSDサンプルをダウンロードしてください


PsdデータにしてインポートPsdデータにしてインポート

� 動かしたい状態で、かつ表示させたいものを表示してPsdデータにする

//上記はオリジナル素材持ってる人用

� Live2DModelerを起動し、[ファイル]->[PSDファイルをインポート]

� 作ったデータを読み込み[OK]を押せばインポート完了！

� 動かしたい状態で、かつ表示させたいものを表示してPsdデータにする

//上記はオリジナル素材持ってる人用

� Live2DModelerを起動し、[ファイル]->[PSDファイルをインポート]

� 作ったデータを読み込み[OK]を押せばインポート完了！


テンプレートデータ適用テンプレートデータ適用

� [ファイル]->[テンプレート適用]を押す

� ここでは「イプシロン」を使います

� 選択後は、このような画面になります

� ここで多きさを合わせていきます

顎から合わせるといいっぽい

� [ファイル]->[テンプレート適用]を押す

� ここでは「イプシロン」を使います

� 選択後は、このような画面になります

� ここで多きさを合わせていきます

顎から合わせるといいっぽい


テンプレートデータ適用02テンプレートデータ適用02

� テンプレート適用プレビューでは動きを確認したり、対応させるパーツを設定します

� もし対応を変えたいのなら選択後、もう一方と対応させたいパーツを選択し「選択要素を対応つけ」押せばOK！

� これでいいと思ったら下の「OK」ボタンを押して適用処理終了

� テンプレート適用プレビューでは動きを確認したり、対応させるパーツを設定します

� もし対応を変えたいのなら選択後、もう一方と対応させたいパーツを選択し「選択要素を対応つけ」押せばOK！

� これでいいと思ったら下の「OK」ボタンを押して適用処理終了


手直し手直し

� 変な場所・もっと良くしたい場合は手直しが必要になってくる

場合によってはパーツのモーションを消去してからやる場合も出てくる

� 変な場所・もっと良くしたい場合は手直しが必要になってくる

場合によってはパーツのモーションを消去してからやる場合も出てくる


コラム… … Unityへ導入コラム… … Unityへ導入

� http://sites.cybernoids.jp/cubism2/lets-do-it/my-first-lapp

� 上のURLを参考にコラム紹介

� 公式が.DLLやスクリプトを配信してるのでそれを活用する

� 単純にDLはできない。申請が必要になる

� 申請して送られてきたリンクに飛んでDLします

� http://sites.cybernoids.jp/cubism2/lets-do-it/my-first-lapp

� 上のURLを参考にコラム紹介

� 公式が.DLLやスクリプトを配信してるのでそれを活用する

� 単純にDLはできない。申請が必要になる

� 申請して送られてきたリンクに飛んでDLします


Unityへ導入02Unityへ導入02

� Live2DModelerから.Cmoxファイルを開いて[ファイル]->[mocファイル書き出し]を使ってデータを書き出す

� .mocファイルを.moc.byteにリネーム

� DLしたSDK内部のSample.Unityを開いて、データを[Resources]に入れる

� mocファイルとテクスチャファイルをスクリプトに適用し実行

� Live2DModelerから.Cmoxファイルを開いて[ファイル]->[mocファイル書き出し]を使ってデータを書き出す

� .mocファイルを.moc.byteにリネーム

� DLしたSDK内部のSample.Unityを開いて、データを[Resources]に入れる

� mocファイルとテクスチャファイルをスクリプトに適用し実行

Nullから始めるlive2 d初心者講座

Art & Photos

Transcript of Nullから始めるlive2 d初心者講座