狠狠撸

狠狠撸Share a Scribd company logo
2020/6/29 cluster
Limes (@WheetTweet)
Unityを知っている?がBabylon.jsを
使ったゲームを作るためのTips紹介
本?の概要
?Babylon.jsで開発されたゲームの例
?Babylon.jsでゲームを作るための基本的
な開発?法
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)
Babylon.jsで開発されたゲームの例
[1] /KatsushiSuzuki/javascriptwebgl3d-3d-babylonjsbishamon-webgl
[2] https://games.yahoo-net.jp/title/casual/752490904
編隊少? フォーメーションガールズ [1]
(株式会社アイオウプラス)
FINAL FANTASY DIGITAL CARD GAME [2]
(SQUARE ENIX)
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]
Build2020で紹介されたゲーム?SnakeVR
フルーツ
スネーク
スネークを操作して、フルーツをとる。フルーツをとるとスネークは
?くなって1点加算。
ステージは箱の中。スネークが箱の内側に触れたらゲームオーバー。
このようなゲームを作るため、Babylon.js
での基本的な開発?法を紹介します。
SnakeVRリポジトリ (公式)
https://github.com/cassieview/SnakeVR
SnakeVRリポジトリ (公式をベースにキーボード対応、?本語の補?説明を追加したもの)
https://github.com/flushpot1125/SnakeVR-build2020-explanation
ゲームの作り??環境構築
(1) index.html、テクスチャ、モデルなどを準備
(2) npmパッケージ
をインストール(コマンド??)
「インストール」≠
「レジストリ書き換え」
?jsなどのファイルを
配置すること。
ゲームの作り??ステージを作る
CubeとPlaneメッシュで作成
Plane
CubeCube
メッシュ作成
参考?src/envBox.ts
ゲームの作り??VR対応
1?追加するだけ 参考?src/index.ts
ゲームの作り??衝突判定
OnInterasectionEnterTriggerクラスを使? 参考?src/envBox.ts
このゲームでは衝突時に
パーティクルを発?
snakeがTriggerで衝突判定
衝突したら実?される
?パーティクル 発?
?stopGame()でゲーム終了
ゲームの作り??移動
Animationクラスを使?
(UnityのCharacterControllerのようなものはない)
他の?向の処理が続く
最後のオプションで
等速移動し続ける
参考?src/index.ts
ゲームの作り??得点を加算
1?追加するだけ 参考?src/score.ts
UnityのuGUIのようなもの
snakeとfruitsの衝突判定時
に呼んでもらう
細かい説明はブログで公開済みのため、
本?はこれで終わります
ブログ記事
https://www.crossroad-tech.com/entry/babylonjs-build2020-
snakevr-tips
参考
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

More Related Content

20200629 web xr_techtokyo_1_min