メニュー
\ ポイント最大11倍! /詳細を見る

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

eyecatch-live2d-embed-in-tweet

本記事では「TwitterツイートにLive2Dを埋め込む方法」を紹介します!

SDKの基本的な使い方を理解できるので、是非挑戦してみてください!

海外でフリーランスをしているテクニカルアーティスト
ゲーム開発・映像制作・WEB制作等を請け負っています。
当ブログは作業効率化のための技術ブログです。

目次

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

基本はLive2D公式のチュートリアルを見ましょう。

とはいえ、流れを追いにくいとおもいますので本記事で流れを把握しつつ、試したい人は両方見ながら試すことをおすすめします!

今回のチュートリアルはコードは書かないとはいえ、Unityの基本操作は必要です!

Unityを触ったこと人は、初心者の「ひよこ本」等で基本操作を覚えておいたほうが、理解はスムーズです。

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

早速、TwitterツイートにLive2Dを埋め込む方法を紹介します。

まずは Live2Dの作業です。

STEP

当たり判定の作成

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

STEP

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

モデリング>テクスチャ>テクスチャアトラスの編集から今回は1024 x 1024px1枚に収めました。

※当たり判定のテクスチャもいれておくこと!

STEP

モデルの書き出し

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

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

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

STEP

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

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

  1. Cubism Viewerを起動
  2. 「モデル名.moc3」をドラッグ&ドロップ
  3. hitAreaのBodyを選択してHit Area 名の項目に「Body」という名前をつける

ファイル>書き出し>モデル設定(model3.json)で元のファイルを上書きします。

STEP

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

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

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

STEP

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

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

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

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

STEP

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

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

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


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

続いてUnityでの作業です。

STEP

Unity(2019.3系)のインストール

Unity HubからUnity(2019.3系)をインストール。できるだけ公式チュートリアルと近いバージョンにしていきます。

※ ついでにUnityのモジュール「WebGL Build Support」もインストールしておきましょう。PC用に書き出す(ビルド)する時に必要です。

STEP

SDKのインポート

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

SDKを入れたらUnityを再起動しましょう!

でないとインポート時エラーが出ます。

STEP

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

Live2D > Cubism > OriginalWorkflow > Should Import As Original Workflowにチェックを入れておきます。

プレファブ(青いアイコン)をHierarchyに突っ込んで、再生ボタンを押します。

※ここでエラーが起きたら、書き出したモデルデータに不具合がある可能性が高いので修正しておきましょう。

※英語ですが、エラー文をよく見れば原因がわかります。(ちなみに本記事では物理演算データでエラーが起きました)

STEP

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

Live2DのPrefabを選択。

「Cubism Fade Controller」のコンポーネントを追加。

「Cubism Fade Motion List」の項目に「モデル名.fadeMotionList」を設定

※Live2Dデータの中にある「モデル名.fadeMotionList」

STEP

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

Live2DのPrefabを選択。

「Cubism Look Controller」のコンポーネントを追加。

「Cubism Look Target」のコンポーネントを追加。

「Cubism Look Controller」のTargetにLive2DのPrefabを設定。

追従するパラメーターを全て選択して、「Cubism Look Parameter」のコンポーネントを追加。

  1. ParamAngleX
  2. ParamAngleY
  3. ParamEyeBallX
  4. ParamEyeBallY

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

STEP

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

Live2DのPrefabを選択。

「Cubism Sample Controller」のコンポーネントを追加。

※Cubism Motion Controllerコンポーネント、Cubism Raycasterコンポーネントが自動的に追加されます。

「Body Animation」に「Idle」のモーションを設定。

「Tap Body Motions」のSizeを「1」にして「Action」のモーションを設定。

※ちなみに複数設定するとランダム再生されます。

再生してタップするとモーション(Action)が再生されます。

STEP

表情のコンポーネントの設定

Live2DのPrefabを選択。

「Cubism Expression Controller」のコンポーネントを追加。

「Expression List」に「モデル名.expressionList」のモーションを設定(※Viewerで設定・書き出しします。)

STEP

Twitter用サムネイルを作成

スクリーンショットをしてビルドサイズ(512 x 512px)の画像(thumbnail.png)を作成しておきます。

STEP

Unityのデータを書き出し(ビルド)

最後にデータを書き出し(ビルド)しましょう。

  1. Live2Dの表示したシーンを登録
  2. WebGLを選択して、Switch Platform

Player Settingsを開いて下記を設定。

  • Width:512
  • Heght:512
  • WebGL Template:Minimal

最後にBuildボタンを押します。

書き出し場所は「WebGL」というフォルダを作成して、そのフォルダを選択します。

書き出されたデータは下記の通り。

STEP

index.htmlの編集

WebGlフォルダに「index.html」というデータが書き出されます。

Twitter用に情報を足す必要があるので下記のように追記します。

TwitterツイートにLive2Dを埋め込む方法:サーバー(Netlify)での作業

サーバーでの作業です。

STEP

Netlifyへの登録

事前にNetlify(ネトリファイ)にアカウント登録をします。

※無料で使えるサーバーサービスです。

STEP

データの登録

ログインできたら、「WebGL」フォルダごとドラッグ&ドロップするだけでOKです。

STEP

デプロイ

データを入れたらデプロイ(展開)がはじまるので、しばらく待ちましょう

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

最後にTwitterに投稿をします。

STEP

テスト投稿

タイムラインでの表示のテストをします。

下記のURLにアクセスして、サーバーのURLを挿入します。

https://cards-dev.twitter.com/validator

STEP

Twitterに投稿

最後にツイートをします!

TwitterツイートにLive2Dを埋め込む方法まとめ

Unityを使ったことがある人は、結構簡単に感じるのではないでしょうか?

SDKが充実していて、WebGLにビルドするだけで簡単に表示できます。

逆に触ったことない人は、難しいと思いますので、まずはUnityの基本操作を覚えてからチャレンジすることをおすすめします!

全記事一覧

  • URLをコピーしました!

Live2Dに関する参考記事・ツール・書籍のまとめ

Live2Dのソフト購入

Live2Dはイラストを動かすことができるソフトです。安価にVTuberを作ることができます。

Live2D販売サイト「Nizima」の紹介

Nizima(ニジマ)はVtuberを買ったり、売ったりできるマーケットサービスです。

Live2Dの参考書籍

Live2D+FaceRigの書籍を書きました!

著:株式会社サイドランチ, 著:Crico株式会社 癸のずみ, 監修:株式会社Live2D
¥1,456 (2024/03/21 20:34時点 | Amazon調べ)
目次