動きに目を奪われちゃう!ティラノビルダーでlive2Dを動かす方法

スポンサーリンク
スポンサーリンク

ルイ
ルイ

こんにちは!ルイです!

ティラノビルダーでは、live2Dを取り入れて動かすことが出来ます!

サクッと設定方法をご説明していきまっす!

 

ティラノビルダーの基本的な操作はご説明しませんので、ご注意ください
基本操作は、公式チュートリアルが丁寧なので勉強してね♪

 

スポンサーリンク
スポンサーリンク

ティラノビルダーでlive2Dを使う方法

まず、live2Dの動きを設定するソフト「Cubism Editor」で口パク・まばたきの設定してきます。

 

Cubism Editorで設定する

まずは、Cubism Editorを起動し、ティラノビルダーに使いたいモデルを読み込んでください。

 

まばたき・口パク設定

  1. パラメータパネルにある部分のハンバーガーボタンを押し
  2. まばたき・リップシンク設定

を押してください。

 

設定画面が出てきます。

リップシンク・口パクのチェック

まばたきと、リップシンクの部分にチェックを入れていきます。

各パラメータに対応している部分に、チェックを入れてください。

 

例えば私の場合。

まばたきは、「左眼の開閉」「右眼の開閉」のパラメータを設定しているので、まばたきの欄に2つチェックを入れています。

口の動きは、「口 開閉」のパラメータに設定しているので、リップシンクの欄に1つチェックを入れています。

 

もし、「口 変形」「口 開閉」2つにパラメータ設定している場合は、リップシンクの欄に2つチェックを入れてください。

 

ルイ
ルイ

ちなみに、この設定一覧…

デフォルトでは、幅が広すぎてちょっとチェックを入れにくいです(汗)

なので、幅を狭めてあげると、チェックを入れやすくなりますよ!

幅を縮める

 

OKを押したら、完了です!

あとは、ファイルを保存してください。

 

一応、保存方法を書いておきます。

  1. ファイル
  2. 組み込み用ファイル書き出し
  3. moc3ファイル書き出し
  4. (書き出しバージョンはSDK4.0(最新バージョン)が良いかも)OK

 

ティラノビルダーでlive2Dを読み込む

次は、ティラノビルダーを起動してください。

そして、live2Dを使いたいプロジェクトを開いてください。

 

次は、

ティラノビルダー設定

  1. プロジェクト
  2. 拡張コンポーネント

の順番で開いてください。

 

拡張コンポーネント

  1. 拡張コンポーネントのポップアップが出てきますので、「live2Dコンポーネント」のチェックを入れて
  2. 利用規約を読んで、同意したら「OK」を押してください(同意できない場合は利用できません)
  3. しばらく時間が経って「成功しました」と出たらOK!

あとは、ポップアップを閉じてOKです!

 

そして、右上を見てみてください。

見慣れないアイコンが出ているはずです。これがlive2D設定用のアイコンです。

live2Dを読み込む

  1. そのアイコンを押して
  2. live2D追加

を押して、さきほど設定してきたlive2Dを読み込みます。

ルイ
ルイ

「〇〇(live2Dモデル名).model3.Json」

ファイルを選んでくださいね!

 

無事に読み込めれば、右側に読み込めたモデルが表示されます。

もうすでに、まばたきをしているはず!

モデル読み込み完了

ルイ
ルイ

モーション、表情をつけている場合は、それぞれモデル名の下にある場所に表示されます

今回は「まばたき」と「口パク」設定だけなので、表示されていません

 

読み込みはコレで完了です!

次は、実際にノベルの世界に登場させてみます!

 

口パクの設定をする

左側(初期設定)の、コンポーネントを見てみてください。

live2Dの項目がひっそりと追加されています!

live2Dコンポーネント

コレを使ってlive2Dを扱っていきます!

 

live2Dの詳細設定

  1. まずは「live2Dロード」を本編の中に、ドラッグ・アンド・ドロップしてください。これは、live2Dを読み込む命令みたいなものです。一番最初に置いて大丈夫です!
  2. 右側にある「モデル」部分に、先程読み込んだlive2Dを選択してください
  3. その下にある「リップを有効にする」にチェックを入れてください。これで口パクしてくれます!ただし、↓の設定も必要です
  4. 「リップと紐付ける名前」にテキスト名に使う名前を入力して、「決定」を押してください。(決定を押さないと保存されません…)これで口パクのリンクが完了します!

はい、live2Dロードの設定はコレで完了です!

 

live2Dを表示させる

ただ、これだけだとまだ本編には表示されません。

次は、live2Dモデルを、実際に表示させる命令を出しましょう。

 

live2Dを表示させる設定

  1. 左側のコンポーネントから、「live2D表示」を本編にドラッグ・アンド・ドロップしてください。live2Dロードの下に入れてくださいね
  2. 右側のモデル欄を、先ほどロード部分で選んだlive2Dと同じものを選んでください

これで、live2Dが表示される設定が完了しました!

 

live2Dの配置を変える

次は、live2Dの位置を動かします。

なぜか変な位置に配置されていることがあるからです。

右側のlive2Dの表示から「live2Dポジション」をクリックしてください。

別画面が開きますので、任意の場所にlive2Dをぐい~んと動かしてあげてください。あとはOKを押せば大丈夫です。

 

テキストを入力する

はい、最後はセリフを喋らせて、口パクさせてみましょう。

適当にテキストを入力してください。

私は「こんにちは!ルイです!口パクのテスト中です!」と入力しますね。

 

この際に忘れてはいけないのが、名前です。

先程「live2Dロード」の部分で、入力した名前と同じ名前を入れてください。

同じ名前

じゃないと、live2Dが口パクしてくれません(汗)

ルイ
ルイ

『リップと紐づける名前』には

「#」を入れなくて大丈夫だよ!

 

これで再生してみると…?

live2Dの口パクリンク

ルイ
ルイ

はい、口パクしてくれました~♪

 

1枚絵ももちろんステキですが、やっぱり口パクしていたり、まばたきするとリッチさが増します!

今回は基本的な「まばたき・口パク」を設定しましたが、表情などを変えることなども、もちろん出来ますよ!

live2Dを用意できる方は、ぜひ試してみてね♪

 

知識0から作る!初心者のためのノベルゲーム制作【もくじ】

ティラノビルダーお役立ち知識

ルイが作った「オリジナルノベル」一覧

 

▼もう悩まない!超初心者さんが楽しく学べる♪

イラスト・創作をもっと楽しみたいアナタへ!

このブログでは、

  • もっとイラストの道を極めたい!
  • イラストを使って遊び(動かすなど)たい!
  • イラストでいろんな創作をしたい!

といったことを、

初心者さんもわかるようにご紹介しています!

 

イラスト関係の色んな役立ち記事

がありますので、

ぜひ、楽しんでいってくださいね♪