先月、米国Microsoftによるテクニカルカンファレンス「Build2020」がオンライン開催されました。
この中では、Babylon.jsを使って簡単なゲームを作る方法の講演がありました。Babylon.jsでゲームを作る方法についてはあまり情報がないのと、この講演自体が英語のため、今回は講演で紹介されたコードを解説しながら、Babylon.jsでゲームを作るときの方法を解説します。
- 1. Build2020とは？
- 2. Babylon.jsで開発されたミニゲーム「SnakeVR」について
- 3. SnakeVRのリポジトリを読んでみる
- 4. キーボード入力機能を追加してみる
- 5. おわりに
1. Build2020とは？
Microsoftが年１回開催する技術関連に特化したカンファレンスです。例年は5月初旬にアメリカのシアトルで開催されていましたが、今回はオンライン開催となりました。
公式ブログによる紹介は以下を参照ください。
以下は日本語記事の例です。
Babylon.jsに関する講演では、SnakeVRという簡単なミニゲームのGithubリポジトリが紹介されていました。
2. Babylon.jsで開発されたミニゲーム「SnakeVR」について
このようなゲームです。
Githubリポジトリは以下の通りです。
3. SnakeVRのリポジトリを読んでみる
3.1 開発環境はTypeScript＋Webpack
ソースコードの拡張子が.tsとなっており、このリポジトリはTypeScriptで書かれています。
TypeScriptは、JavaScriptに似た言語でJavaScriptにトランスパイル (JavaScriptの言語にコンパイル)できます。TypeScriptの特徴はいろいろありますが、最大の特徴は公式ページトップにあるように変数にnumber, stringなどの型をつけられることだと思います。
引用元：TypeScript - JavaScript that scales.
Babylon.jsの公式HPではTypeScriptで書く方法も紹介されています。ただし、ほとんどの情報はJavaScriptベースです。
ES6 - Babylon.js Documentation
Webpackとは複数のJavaScriptを1つにまとめるための仕組みです。このように複数の.tsファイルの依存関係を解決しながら、1つのindex.jsにすることができます。
具体的な書き方などは以下の記事やリポジトリにあるので、ご参考ください。
3.2 ソースコードの構成を確認する
ソースコードは以下のとおりです。 まず、ここにあるフォルダを説明します。
| # | フォルダ名称 | 役割 |
|---|---|---|
| 1 | d.ts | TypeScriptで定義した型の情報が入っています。デバッグ時以外は不要です |
| 2 | dist | TypeScriptをトランスパイルしたJavaScriptファイルをはじめ、実際にブラウザで動作させる時のファイル一式が入っています |
| 3 | node_modules | npmを使ってインストール (配置) したJavaScriptのパッケージ一式が入っています。自動生成され、通常は中身を意識することはありません |
| 4 | src | TypeScriptで書かれたファイルが入っています。実際のコーディングは主にこの中で行います |
| 5 | src/assets | ゲームに使われる.babylon形式の3Dモデルが入っています |
| 6 | steps | このリポジトリを学習用として使うときのinstructionが書かれたMarkdownファイルが入っています |
私の知る限りでは、d.ts、dist、srcフォルダは他のTypeScriptプロジェクトでもよく使われる印象です。
次に各種設定ファイルについてです。
| # | ファイル名称 | 役割 |
|---|---|---|
| 1 | package-lock.json | npmでインストールした各種パッケージのバージョン、他のパッケージとの依存関係が細かく書かれています |
| 2 | package.json | リポジトリの作者名、ライセンス、スクリプトコマンドのエイリアス定義、自分で指定してインストールしたパッケージ名称が記載されます |
| 3 | tsconfig.json | TypeScriptをトランスパイルする設定などが書かれています |
| 4 | webpack.config.js | Webpack (JavasScript)に関する設定書かれています |
続いて、実際のゲームの処理が書いてあるsrcフォルダをみてみます。
| # | ファイル名称 | 役割 |
|---|---|---|
| 1 | envBox.ts | ステージを作っているソースです |
| 2 | index.ts | シーン作成、VR機能有効化、コントローラ操作によるSnakeの移動、ゲーム開始などの処理が書いてあります |
| 3 | noms.ts | ゲーム中のフルーツを表示しています。ちなみに、nomsは英語で「もぐもぐ食べる」のような意味の動詞です |
| 4 | particles.ts | Snakeがフルーツを取ったとき、Snakeが壁にぶつかったときのエフェクトを生成します |
| 5 | score.ts | Snakeがフルーツを取ったときにスコアを１点incrementする処理が書いてあります |
| 6 | snake.ts | snakeのモデルを生成します |
次は、ゲームを作る上でよく使いそうな機能として、キャラクターの移動方法、衝突判定についてもう少し詳しく説明します。
3.3 キャラクターの移動方法
今回紹介されている方法は、Babylon.jsのAnimation機能を使ったものです。公式HPでの説明は以下の通りです。
Animations - Babylon.js Documentation
このように、CreateAndStartAnimationを使って、コントローラの入力があったときにSnakeを動かしています。
ここでは一度アニメーションが発動すると、スピード100で new Vector3(0, 0, 100) 方向に等速運動し続けます。 (今回は、都度別の方向に操作しなおすというゲーム性を作るため、こうなっていると思われます)
キーを入力したときだけ移動、キーを入力し続ければ移動し続ける、という処理を作りたい場合、例えば以下のようにtranslateメソッドを使います。
3.4 オブジェクトの衝突判定
衝突判定にはOnIntersectionEnterTriggerを使います。これを使うには、Babylon.jsのActionManagerを使います。
ActionManagerとは、オブジェクトに対するアクションを制御する仕組みです。クリックしたら〜する、衝突したら〜する、という処理を作ることができます。
以下のコード例をご確認ください。
ActionManagerについて詳しくは公式ドキュメントをご確認ください。
Use Actions - Babylon.js Documentation
4. キーボード入力機能を追加してみる
今回参考にしたSnakeVRリポジトリは、ゲーム開始も操作も全てがVRコントローラを前提に作られています。そのため、ちょっと確認したいときにVRヘッドセットをつける必要があり、個人的には調査がしづらいという問題がありました。
キーボード入力でオブジェクトを操作する機能を探したのですが、公式ドキュメントやフォーラムでそれっぽいものを見つけられませんでした。
そこで、オリジナルのSnakeVRにはなかったキーボード入力機能を追加しました。以下のように書くことでSnakeをWASDキーで操作できます。
5. おわりに
今回紹介したSnakeVRのリポジトリを元に、日本語のコメント、およびキーボード入力対応を追加したリポジトリを下記にあげました。
Babylon.jsで何か作りたい方の参考になれば幸いです。
