Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20200629 web xr_techtokyo_1_min

160 views

Published on

WebXR Tech Tokyo #1で発表した資料です。

イベントURL
https://vrtokyo.connpass.com/event/178319/

この発表に関する詳細を書いたブログ記事
https://www.crossroad-tech.com/entry/babylonjs-build2020-snakevr-tips

Published in: Technology
  • Be the first to comment

  • Be the first to like this

20200629 web xr_techtokyo_1_min

  1. 1. 2020/6/29 cluster Limes (@WheetTweet) Unityを知っている⼈がBabylon.jsを 使ったゲームを作るためのTips紹介
  2. 2. 本⽇の概要 ・Babylon.jsで開発されたゲームの例 ・Babylon.jsでゲームを作るための基本的 な開発⽅法
  3. 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. 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. 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. 6. Build2020で紹介されたゲーム︓SnakeVR フルーツ スネーク スネークを操作して、フルーツをとる。フルーツをとるとスネークは ⻑くなって1点加算。 ステージは箱の中。スネークが箱の内側に触れたらゲームオーバー。
  7. 7. このようなゲームを作るため、Babylon.js での基本的な開発⽅法を紹介します。 SnakeVRリポジトリ (公式) https://github.com/cassieview/SnakeVR SnakeVRリポジトリ (公式をベースにキーボード対応、⽇本語の補⾜説明を追加したもの) https://github.com/flushpot1125/SnakeVR-build2020-explanation
  8. 8. ゲームの作り⽅︓環境構築 (1) index.html、テクスチャ、モデルなどを準備 (2) npmパッケージ をインストール(コマンド⼊⼒) 「インストール」≠ 「レジストリ書き換え」 ︓jsなどのファイルを 配置すること。
  9. 9. ゲームの作り⽅︓ステージを作る CubeとPlaneメッシュで作成 Plane CubeCube メッシュ作成 参考︓src/envBox.ts
  10. 10. ゲームの作り⽅︓VR対応 1⾏追加するだけ 参考︓src/index.ts
  11. 11. ゲームの作り⽅︓衝突判定 OnInterasectionEnterTriggerクラスを使⽤ 参考︓src/envBox.ts このゲームでは衝突時に パーティクルを発⽣ snakeがTriggerで衝突判定 衝突したら実⾏される ・パーティクル 発⽣ ・stopGame()でゲーム終了
  12. 12. ゲームの作り⽅︓移動 Animationクラスを使⽤ (UnityのCharacterControllerのようなものはない) 他の⽅向の処理が続く 最後のオプションで 等速移動し続ける 参考︓src/index.ts
  13. 13. ゲームの作り⽅︓得点を加算 1⾏追加するだけ 参考︓src/score.ts UnityのuGUIのようなもの snakeとfruitsの衝突判定時 に呼んでもらう
  14. 14. 細かい説明はブログで公開済みのため、 本⽇はこれで終わります ブログ記事 https://www.crossroad-tech.com/entry/babylonjs-build2020- snakevr-tips
  15. 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

×