【Live2D】TwitterツイートにLive2Dを埋め込む方法［Cubism SDK］

2020 8/20

2020.06.21 2020.08.20

すいみん

こちらのCGメソッドの記事では「TwitterツイートにLive2Dを埋め込む方法」を紹介します！SDKの基本的な使い方を理解できるので、是非挑戦してみてください！

TwitterでのLive2D +WebGL表示のテスト。

※読み込みに数秒待つとLive2Dが表示されます。
※ドラッグで視線変化、タップで表情変化。https://t.co/NmVv5c6SKO #Live2D

— すいみん💤 (@cg_method) June 21, 2020

TwitterツイートにLive2Dを埋め込む方法（Live2D公式のチュートリアル）

基本はLive2D公式のチュートリアルを見ましょう
とはいえ、流れを追いにくいとおもいますので本記事で流れを把握しつつ、試したい人は両方見ながら試すことをおすすめします！

ポイント

今回のチュートリアルはコードは書かないとはいえ、Unityの基本操作は必要です！
Unityを触ったこと人は、初心者の「ひよこ本」等で基本操作を覚えておいたほうが、理解はスムーズです。

Unity2019入門　最新開発環境による簡単3D＆2Dゲーム制作

商品レビュー・口コミを見る

note（ノート）

Cubism 4 SDK for Unity お試しガイド(1/4)｜Live2D｜note おかげさまで、先日公開しました「Cubism WebAR お試しガイド」は大変好評となっております。そして次は…みなさんのTwitterのツイートにもLive2Dを埋め込んでみま...

note（ノート）

Cubism 4 SDK for Unity お試しガイド (2/4)｜Live2D｜note ←前の記事：Cubism 4 SDK for Unity お試しガイド (1/4) →次の記事：Cubism 4 SDK for Unity お試しガイド (3/4) 前回はUnityをインストールし、プロジェクトにCubism...

note（ノート）

Cubism 4 SDK for Unity お試しガイド (3/4)｜Live2D｜note ←前の記事：Cubism 4 SDK for Unity お試しガイド (2/4) →次の記事：Cubism 4 SDK for Unity お試しガイド (4/4) Twitterのツイート上に表示させるためには、WebGL用に...

note（ノート）

Cubism 4 SDK for Unity お試しガイド (4/4)｜Live2D｜note ←前の記事：Cubism 4 SDK for Unity お試しガイド (3/4) 前回まででプロジェクトの作成は完了しました。そのプロジェクトをサーバへアップロードします。ここまでき...

↑目次へ戻る

TwitterツイートにLive2Dを埋め込む方法：Live2Dでの作業

当たり判定の作成

モデリング＞アートメッシュ＞当たり判定用アートメッシュを生成からキャラ全体を囲う透明のメッシュを設定しましょう。

テクスチャアトラスの整理

モデリング＞テクスチャ＞テクスチャアトラスの編集から
今回は1024 x 1024px1枚に収めました。
※当たり判定のテクスチャもいれておくこと！

モデルの書き出し

最後にモデルデータを書き出しましょう

注意

3系などの古いデータは下記をチェックして最新の状態にしておきましょう
・パラメータを3系に
・SDKを4.0に
・物理演算のパネルを開いて最新に更新

ファイル＞組み込み用ファイル書き出し＞moc3ファイル書き出し

Cubism Viewerで当たり判定の名前付け

これをやっておかないと、タップした時にアニメーション（Action）されません。

Cubism Viewerを起動
「モデル名.moc3」をドラッグ&ドロップ
hitAreaのBodyを選択してHit Area 名の項目に「Body」という名前をつける
ファイル＞書き出し＞モデル設定(model3.json)で元のファイルを上書きします

待機とアクションのモーション作成

待機アニメーション用の「Idle」
タップ時にアニメーションする「Action」
のアニメーションを作成します。

※シーンのターゲット設定は「SDK（Unity）」にしておきましょう

アニメーションの書き出し

「animation」フォルダを作成して下記の階層に書き出ししておきましょう。

「animation」フォルダに中に「Action.motion3.json」と「Idle.motion3.json」

※同階層に配置するとUnityインポート時に「モデル名.fadeMotionList」がうまく生成されなくなります。

表情のモーションの書き出し

必要であれば、表情モーションも書き出しておきます。

Cubism Viewerを起動
「モデル名.moc3」をドラッグ&ドロップ
ファイル＞追加＞表情を押して、表情の名前を入力「shy」
作成した表情を選択してパラメータを設定。
最後にファイル＞書き出し＞全ての表情モーションを選択。
「animation」フォルダに書き出しましょう「shy.exp3.json」

↑目次へ戻る

TwitterツイートにLive2Dを埋め込む方法：Unityでの作業

Unity（2019.3系）のインストール

Unity HubからUnity（2019.3系）をインストール。できるだけ公式チュートリアルと近いバージョンにしていきます。
※ ついでにUnityのモジュール「WebGL Build Support」もインストールしておきましょう。PC用に書き出す（ビルド）する時に必要です。

SDKのインポート

下記のURLからSDK（CubismSdkForUnity-x-x.x.unitypackage）をダウンロードします。

Live2D Cubism

Cubism SDK for Unity ダウンロード | Live2D CubismCubism SDK for Unityをダウンロードできます。使用許諾契約をお読みいただき、同意してからご利用ください。

注意

SDKを入れたらUnityを再起動しましょう！
でないとインポート時エラーが出ます。

Unityに書き出したLive2Dデータをインポート

Live2D > Cubism > OriginalWorkflow > Should Import As Original Workflowにチェックを入れておきます。
プレファブ（青いアイコン）をHierarchyに突っ込んで、再生ボタンを押します。
※ここでエラーが起きたら、書き出したモデルデータに不具合がある可能性が高いので修正しておきましょう。
※英語ですが、エラー文をよく見れば原因がわかります。（ちなみに本記事では物理演算データでエラーが起きました）

フェードモーションのコンポーネントの設定

Live2DのPrefabを選択
「Cubism Fade Controller」のコンポーネントを追加
「Cubism Fade Motion List」の項目に「モデル名.fadeMotionList」を設定
※Live2Dデータの中にある「モデル名.fadeMotionList」

視線追従のコンポーネントの設定

Live2DのPrefabを選択
「Cubism Look Controller」のコンポーネントを追加
「Cubism Look Target」のコンポーネントを追加
「Cubism Look Controller」のTargetにLive2DのPrefabを設定
追従するパラメーターを全て選択して、「Cubism Look Parameter」のコンポーネントを追加
・ParamAngleX
・ParamAngleY
・ParamEyeBallX
・ParamEyeBallY

設定後、再生ボタンを押してマウスをクリックするとその方向に顔と目が向くようになります。

モーション再生のコンポーネントの設定

Live2DのPrefabを選択
「Cubism Sample Controller」のコンポーネントを追加
※Cubism Motion Controllerコンポーネント、Cubism Raycasterコンポーネントが自動的に追加されます。
「Body Animation」に「Idle」のモーションを設定
「Tap Body Motions」のSizeを「1」にして「Action」のモーションを設定
※ちなみに複数設定するとランダム再生されます。