二次元イラストがぬるぬる動く！ Live2DでWebGLアドベンチャーゲームを作ろう

ぬるぬる動くアドベンチャーゲームを作ってみよう

1）ティラノスクリプトとは

　ティラノスクリプトとは、HTML5製のアドベンチャーゲーム製作キットです。下記のような特徴があります。

• プログラミング知識がなくても簡単にゲームが作る
• 無料で利用できて商用利用の制限がない
• マルチプラットフォームに対応している
• KAG3／吉里吉里などアドベンチャーゲーム開発キットと高い互換性を持つ

　本記事の執筆にあたって、読者の方にLive2Dの魅力を知ってもらいたいと思い、この度、ティラノスクリプトのLive2Dプラグインを開発しました。その簡単な使い方をご紹介します。

2）Live2Dプラグインの導入

　まず、ティラノスクリプトのLive2Dプラグインをダウンロードします。

ティラノスクリプトのLive2Dプラグインページ

　Live2Dプラグインのフォルダ構成は「ティラノスクリプトのフォルダ構成」に従い以下のようになっています。

ティラノスクリプトのフォルダ構成

live2dplugin
│
├─data
│  │
│  ├─bgimage・・・背景画像の格納フォルダ
│  │
│  ├─image・・・その他の画像格納フォルダ
│  │
│  ├─others・・・その他汎用的なファイルの格納フォルダ
│  │  │
│  │  └─live2d・・・Live2Dのライブラリ本体フォルダ
│  │      │  Live2Dmodel.js・・・Live2Dモデルパス定義ファイル
│  │      │  Live2Dtyrano.js・・・Live2Dをtyrano連携するためのス
│  │      │
│  │      ├─assets・・・Live2Dモデル格納フォルダ
│  │      │
│  │      ├─framework
│  │      │    Live2DFramework.js・・・Live2Dを簡単に操作するフムワーク
│  │      │
│  │      └─lib
│  │            [live2d.min.js]・・・Live2DのメインライブラリはCmSDKからコピーしてくる
│  │
│  ├─scenario・・・シナリオの格納フォルダ
│  │  │
│  │  └─live2d
│  │        live2d.ks・・・Live2Dのマクロ定義ファイル
│  │
│  └─system・・・ティラノスクリプトの基本動作設定フォルダ
│
└─tyrano・・・ティラノスクリプトのライブラリ本体フォルダ

　Live2d.min.jsは、Cubism SDKからコピーして、libフォルダ配下にペーストします。

コピー元のCubism SDKのフォルダ

コピー先のlive2dpluginのフォルダ

　正常に動作することを確認するため、index.htmlを選択してライブプレビューボタンを押下します。

live2dプラグインの実行結果

3）キャラクターを差し替える

　Live2Dモデルは、サンプルデータ集から「いずみ」モデルをダウンロードしてきます。

　解凍したらizumiフォルダごとコピーし「live2dplugin¥data¥others¥live2d¥assets」配下にペーストします。

コピー元のizumiのフォルダ

コピー先のlive2dpluginのフォルダ

　モデルのファイルパス定義に以下を追加します。

　ファイルパス定義は「live2dplugin¥data¥others¥live2d¥Live2Dmodel.js」にあります。モーションと音声を紐付けたい場合は、以下のように"file"の後に"sound"を指定して下さい。

Live2Dモデルのファイルパス定義（Live2Dmodel.js）

LIVE2D_MODEL['izumi'] = {
    "name":"izumi",
    "model":"data/others/live2d/assets/izumi/runtime/izumi_illust.moc",
    "textures":[
        "data/others/live2d/assets/izumi/runtime/izumi_illust.1024/texture_00.png",
        "data/others/live2d/assets/izumi/runtime/izumi_illust.1024/texture_01.png",
        "data/others/live2d/assets/izumi/runtime/izumi_illust.1024/texture_02.png",
        "data/others/live2d/assets/izumi/runtime/izumi_illust.1024/texture_03.png",
    ],
    "motions":[
        {"file" :"data/others/live2d/assets/izumi/runtime/motions/idle_01.mtn"},
        {
        "file" :"data/others/live2d/assets/izumi/runtime/motions/izumi_01.mtn",
        "sound":"data/others/live2d/assets/izumi/runtime/sounds/izumi_01.mp3"
        }
    ]
};