高機能で制限なし!PRO版が ¥1480 で販売中

Live2Dを使ったゲーム制作にチャレンジしよう

【重要】
このページはティラノビルダーV184以上を対象にした解説です。Cubism3で作られたモデルに対応。
Cubism2で作られたモデルを使用したい場合は、V183以下のバージョンを使用してください。

ティラノビルダーでCubism2 を使用する解説は>>こちらのページ


最近、ノベルゲームに新しい技術が登場して話題になっています。
Live2Dという技術で、2Dのイラストを簡単にアニメーションさせることができる技術です

その威力は実際に見て頂けるとわかりやすいと思うので、以下に簡単なデモを用意しました。



いかがでしょう。新しい可能性を感じますね。

ティラノビルダーでは、この技術を使ったノベルゲームの開発をサポートしています。
さらに、Live2D社と正式に協力し技術的なバックアップを頂いています。

ぜひ、ノベルゲームの新時代を体感して下さい!


最初の準備

ティラノビルダーでLive2Dを利用するための準備をしていきます。

まず、メニューから [プロジェクト]-[拡張コンポーネント]をクリックします


次に、Live2Dコンポーネントにチェックを入れます

その際、利用規約の確認画面が表示されますので、規約を確認して下さい



編集画面の左側にLive2Dコンポーネントが追加されていれば成功です。



Live2Dモデルを追加しよう

今回は予め用意されているLive2Dのモデルを利用してみたいと思います。
以下のURLから、Live2Dモデルをダウンロードして下さい。

【Live2Dモデルのダウンロード】
>>クリックしてLive2Dモデルをダウンロード

このLive2Dモデルについては、Live2Dのガイドラインに準拠して使用することができます。

【ガイドライン】 https://docs.live2d.com/cubism-editor-manual/sample-model/

ダウンロードしたファイルを展開すると3つのモデルが含まれています。
今回は「Haru」というモデルをつかってみます。



Live2Dモデルを登場させよう

★この手順でLive2Dモデルが表示されない場合、DirectXがインストールされていない可能性があります。
以下のフォーラムを確認して下さい

>>ティラノビルダーにLive2Dモデルがうつらない対応について

さて、Live2Dをゲームに表示する準備は整いました。

まずは、先ほどダウンロードしたLive2Dモデルをプロジェクトに読み込みます

画面右上のLive2Dボタンをクリックして下さい



「Live2D追加」ボタンをクリックして、先ほどダウンロードしたフォルダの中にある
model3.jsonファイルを選択してください

Haru/Haru.model3.json ファイルを選択します。

成功するとLive2Dモデルとモーションファイルなどが自動的に反映されます。
モーションファイルを選択すると、実際にモーションも確認することができます。



*ワンポイント*
画面に表示されたモデルをドラッグ&ドロップで移動したり、マウスのホイールで拡大縮小させることができます。


次に 左エリアから「Live2Dロード」をドラッグ&ドロップで追加します
パラメータのモデルから、先ほど追加した「Haru」を選択します。



次に 左エリアから「Live2D表示」をドラッグ&ドロップで、先程の「Live2Dロード」のうしろに追加します
パラメータのモデルから「Haru」を選択します。



さらに、その下にあるLive2Dポジションボタンをクリックすると、ドラッグ&ドロップで立ち位置を設定できるので非常に便利です。
モデルの表示倍率もマウスのスクロールで簡単に調整することができます。

保存して、プレビューして下さい



Live2Dのモデルが表示されました!
非常に簡単ですね。

ちなみに「Live2Dロード」はモデルをゲームに表示させるための準備を行います。「Live2D表示」で実際に画面に表示されます。
Live2Dロードのタイミングで読み込みが発生するので、実際にはシナリオの先頭などで予め実施しておくとスムーズです。


モーションを再生しよう

好きなタイミングでキャラクターのモーションを再生する事ができます。
たとえば、ストーリーにあわせてキャラクターが怒ったり、照れたりすることで ゲームがより、魅力的になりますね。

ティラノビルダーで好きなタイミングでモーションさせる事は非常に簡単です。

左エリアから「Live2Dモーション」をドラッグ&ドロップで追加します。
そして、自動的に再生可能なモーションが表示されますので選択するだけです。

モーション選択ツールを使うと実際にモーションを確認しながら配置することも可能です



保存してプレビューして下さい。
モーションが再生されましたね


その他にも、キャラクターを退場させるときは「Live2D消去」位置を移動させるときは「Live2D移動」コンポーネントが便利です。



口パクを設定する

Cubism3モデルで、リップ設定があるモデルの場合、 ゲームで該当するキャラクターが話しているタイミングで口を動かすことができます。

まず「Live2Dロード」のときに「リップを有効にする」にチェックを入れてください。
続いて、リップと紐付ける名前の部分にゲームで使用するモデル名を入力します。

今回の場合「ハル」とします。


あとは、通常の会話シーンで、名前欄に指定するところで「#ハル」のように記述します。


これで、通常通りゲームを進めるとキャラが口パクしてくれます。

口パクの速度を変更したい場合は、口の時間を小さく指定します。 小さくするほど、すばやく口が動きます。


動作を軽くするコツ

Live2Dは通常の画像を表示するより、メモリやCPUを消費します。
なので、何も考えずにLive2Dモデルを10体くらい、ロードして使用すると 非常に重くなってしまい、最悪ゲームが落ちてしまうこともあります。

もちろん、PCのスペックによって変わってくるのですが、軽く作っておくに越したことはないでしょう。

そこで大事なのは 必要なときだけ「Live2Dロード」を行い。こまめに「Live2Dリセット」することです



Live2Dロードをすると、ゲームで使用するためにメモリを使います。
これをすべて開放するのが「Live2Dリセットです」

あまり、神経質になる必要はありませんが 例えばシーンや場面が切り替わる最後に「Live2Dリセット」を配置しておくのがよいでしょう。

「Live2Dリセット」を行なったあとは、再度「Live2Dロード」でモデルを読み込む必要があります。