WebXR Tech Tokyo #1で発表した資料です。 イベントURL https://vrtokyo.connpass.com/event/178319/ この発表に関する詳細を書いたブログ記事 https://www.crossroad-tech.com/entry/babylonjs-build2020-snakevr-tips

1. 2020/6/29 cluster
Limes (@WheetTweet)
Unityを知っている⼈がBabylon.jsを
使ったゲームを作るためのTips紹介

2. 本⽇の概要
・Babylon.jsで開発されたゲームの例
・Babylon.jsでゲームを作るための基本的
な開発⽅法

3. Babylon.jsとは︖
■ Webブラウザで3DCGを描画するためのフレームワーク
■ PBRが使えるなど、表現⼒が⾼い
■ WebXRへの対応が進んでいる
(1) https://campusalbano.se/view/2rU8PVbbXWgeQ0sko0yOQA/open
(2)https://www.babylonjs.com/
(3) https://www.davrous.com/2017/07/07/from-zero-to-hero-creating-
webvr-experiences-with-babylon-js-on-all-platforms/
(1) (2) (3)

4. Babylon.jsで開発されたゲームの例
[1] https://www.slideshare.net/KatsushiSuzuki/javascriptwebgl3d-3d-babylonjsbishamon-webgl
[2] https://games.yahoo-net.jp/title/casual/752490904
編隊少⼥ フォーメーションガールズ [1]
(株式会社アイオウプラス)
FINAL FANTASY DIGITAL CARD GAME [2]
(SQUARE ENIX)

5. Babylon.jsで開発されたゲームの例
(少しインディー寄り?)
[1] https://www.bigredbox.nl//BrilliantMan/index.html
[2] https://vtange.github.io/boxgun/
[3] https://simple-3d-fps-game.herokuapp.com/
[4] https://battlechoc.com/
[1] [2] [3]
[4]

6. Build2020で紹介されたゲーム︓SnakeVR
フルーツ
スネーク
スネークを操作して、フルーツをとる。フルーツをとるとスネークは
⻑くなって１点加算。
ステージは箱の中。スネークが箱の内側に触れたらゲームオーバー。

7. このようなゲームを作るため、Babylon.js
での基本的な開発⽅法を紹介します。
SnakeVRリポジトリ (公式)
https://github.com/cassieview/SnakeVR
SnakeVRリポジトリ (公式をベースにキーボード対応、⽇本語の補⾜説明を追加したもの)
https://github.com/flushpot1125/SnakeVR-build2020-explanation

8. ゲームの作り⽅︓環境構築
(1) index.html、テクスチャ、モデルなどを準備
(2) npmパッケージ
をインストール(コマンド⼊⼒)
「インストール」≠
「レジストリ書き換え」
︓jsなどのファイルを
配置すること。

9. ゲームの作り⽅︓ステージを作る
CubeとPlaneメッシュで作成
Plane
CubeCube
メッシュ作成
参考︓src/envBox.ts

10. ゲームの作り⽅︓VR対応
１⾏追加するだけ 参考︓src/index.ts

11. ゲームの作り⽅︓衝突判定
OnInterasectionEnterTriggerクラスを使⽤ 参考︓src/envBox.ts
このゲームでは衝突時に
パーティクルを発⽣
snakeがTriggerで衝突判定
衝突したら実⾏される
・パーティクル 発⽣
・stopGame()でゲーム終了

12. ゲームの作り⽅︓移動
Animationクラスを使⽤
(UnityのCharacterControllerのようなものはない)
他の⽅向の処理が続く
最後のオプションで
等速移動し続ける
参考︓src/index.ts

13. ゲームの作り⽅︓得点を加算
１⾏追加するだけ 参考︓src/score.ts
UnityのuGUIのようなもの
snakeとfruitsの衝突判定時
に呼んでもらう

14. 細かい説明はブログで公開済みのため、
本⽇はこれで終わります
ブログ記事
https://www.crossroad-tech.com/entry/babylonjs-build2020-
snakevr-tips

15. 参考
Build 2020 : Microsoft が⽶国時間2020/5/19-20で開催した
カンファレンス
https://mybuild.microsoft.com/
今回参考にさせていただいた講演 (講演録画あり)
︓Build a Virtual Reality Game with JavaScript!
https://mybuild.microsoft.com/sessions/a49fba45-8c7c-41be-
9261-4005d7c0f1d2?source=sessions