はじめに
前回は、Live2Dのオリジナルモデルを表示し、動かすまでをやりました。今回は、Live2Dのモデルを使って、ブラウザで動くノベルゲームを作成するまでを紹介したいと思います。
使用するのは、TyranoBuilderという非常にわかりやすくて、素晴らしい優秀なゲーム開発アプリです。
しかし、今回も公式マニュアルが非常に充実しており、あまり説明することはありませんが、それでもハマりやすそうなポイントなどもあるので、それを紹介します。
TyranoBuilderでブラウザゲームを作成し、公開するまでの手順
TyranoBuilderをダウンロードし、解凍します。そして、中にある実行ファイルを開きます
これだけでサンプルゲームがプレビューできるようになっています。今回は、これを少しずつ加工していくことになります。まずは、Live2Dを表示するまでの手順として、メニューから
[プロジェクト]-[拡張コンポーネント]
を選択します。
シナリオが作成できたら、ブラウザゲームとして出力するわけですが、メニューバーから
[プロジェクト] - [ゲームを書き出す]
を選択してください出力されたディレクトリを開くと
index.html
があると思いますが、このディレクトリをWebサーバーにアップロードすることで、ブラウザゲームが動作します。動作確認の方法ですが、いくつか方法があります。その一つがTyranoScriptをダウンロード、解凍して、中にある実行ファイルを先ほどブラウザゲームを出力したディレクトリに置いて、実行することです。
また、インターネットブラウザのGoogle Chromeを使用しても動作確認ができます。ただし、オプションを付けての起動になります。以下の様なコマンドを実行して、
index.html
をChromeにドラッグアンドドロップすれば、ゲームがプレイできます。
$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
- 通常は、出力されたディレクトリをWebサーバーに置けば動作するはずですが、動作しないサーバーも多く、私の場合、ここでハマりました。具体的には、GitHub Pagesのuser.github.ioでは動作しませんでした。Bitbucket Pagesのuser.bitbucket.orgでは動作しました。HTMLはこんな感じで載せます。
<iframe src="http://username.bitbucket.org/sample/index.html" style="width:672px;height:448px"></iframe>
以下のページにアクセスするとサンプルゲームができます。始まりは遅いですが、1分くらい待てば始められます。