Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.6（サーバに格納して実行）

前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。

今回は、サーバにプログラムをアップロードして実行する方法です。

使用した環境

・Mac OS 10.15.6
・Node.js 12.16.3
・Visual Studio Code 1.48.1
・Babylon.js Editor v4.0.0 beta2

1. v4.0.0 beta2時点ではサーバ向けにpublishする方法はまだ提供されていない

フォーラムに聞いてみましたが、開発した結果をpublishする方法はまだ入っていないようです。しかし、Babylon.js Editorで作ったプロジェクトデータに含まれる一部を取り出してサーバに置くことで、publishと同じことができます。

Babylon.js Editorで生成されたプロジェクトのうち、scenes/、dist/、index.htmlだけを別のフォルダにコピーします。

次に、./node_modules/cannon/build/cannon.jsにあるcannon.jsを先ほどと同じフォルダにコピーします。

次は、index.htmlを少し書き換えます。具体的にはcannon.jsの呼び出し元です。

フォルダの配置はこのようになります。

先ほどのフォルダを指定してVisual Studio Codeを開き、Live Serverというプラグインを入れておくと、サーバとして起動させることができます。
Live Serverとして起動させる場合、http://127.0.0.1:5500 でブラウザにアクセスすると確認できます。

Live Serverは以下のリンクで確認できます。
marketplace.visualstudio.com

Live Serverの使い方はいくつか記事があるので、そちらをご確認ください。以下は例です。

以前書いたこちらの記事の「3. node.jsでサーバ起動設定を行う」以降を実行します。ただ、Visual Studio CodeのLive Serverでも実質同じことができるので、Live Serverでも良いかもしれません。

フォーラムで教えていただきました。はっきり書いていませんが、Babylon.js Editor v4.0以降であることは必要そうです。

現在はglbフォーマットのモデルのみ対応しているそうです。私はAWSを使ってないので試せてないのですが、興味ある方はお試しください。

これまで紹介した内容をGitHubにあげました。それぞれのコードの書き方は過去記事をご参考ください。

2020/9/19 追記

Babylon.js Editorの製作者であるjulien-moreauさんにプルリクエストをいただきました。
プルリクを反映したことで、このブログとはコードの記述が一部変わっています。ブログの記述を確認したい場合、以下のコミットIDでご確認ください。

39e4d2ca144f0f0cf7e9ecaae94eb3fba6d7e21b

Babylon.js Editorを使ったゲーム作りについては、いったん完了です。このゲームを改良するか、別のゲームにするかは決まっていませんが、新しいBabylon.js Editorはとても興味深いのでまた使い方を紹介していく予定です。