Babylon.jsでゲームを作ってみよう

こちらの勉強会で発表したスライドです。Babylon.jsで具体的にできることの例としてゲームを作る話を書いてみました。

https://babylonjs.connpass.com/event/354463/

Transcript

1. Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Babylon.jsでゲームを 作ってみよう 2025/5/28 Limes (Microsoft MVP for Mixed Reality)
2. Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 自己紹介 o UnityとVRを中心に活動。2018年頃から Babylon.jsを知って情報発信を継続。最近は Babylon.jsだけでなく、MCPやGitHub Copilotな どのAI関係も発信中 o Babylon.js勉強会の共同主催者 o 3月に3人目が産まれたため、現在コミュニティ活 動の頻度が落ちている o Blog : Cross Road https://www.crossroad-tech.com/ Development Technologies (Unity) : 2016/10-2018/7 Windows Development (Windows Mixed Reality) : 2018/7-2022/8 Mixed Reality (MR Development) : 2022/9-
3. Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Limesの名前について ライムの複数形 「ライムス」 Oculus Riftの”Rift”と同じく「境界」 や「境目」を意味するラテン語の 「リーマス」に由来しています。 現実空間 (Real) 仮想空間 (Virtual) 境界 (limes) ではないです。Not lime!
4. Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Babylon.jsとゲーム https://ericbroberic.itch.io/attack-of-the-killer-bunnies https://poki.com/jp/g/temple-run-2# https://cdn-factory.marketjs.com/en/x-trench-run/index.html 色々なブラウザゲームで採用されている
5. Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 o シューティングっぽいもの o 10秒程度で終わるので簡単に試せる o 移動、キーボード操作、GUI表示などが一通り入っているの で、Babylon.jsの基本操作を確認できる 簡単なゲームを作ってみよう
6. Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 完成イメージ ソースコードの確認、変更もここからできます。 https://playground.babylonjs.com/#9ENN6N#19
7. Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 主な仕様 ・タイトル画面 ・"Let’s Start"ボタンを押すと開始となり、立方体のブロックが積み上がる ・十字キーで移動しつつ"alt"キーを押すと弾が発射される → 弾がブロックに当 たるとスコアが加算さ れる。 ・10 秒で終了し、その時点のスコアが表示される。ここで"Restart"ボタンが表示 される
8. Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 各種機能と対応する関数
9. Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 より詳細な解説 https://techbookfest.org/product/qy2ZdN5z6CLYkdCiVNgn09?productVariantID=msjNiBw2mG7KUMLAsFNJ9E こちらで詳しく解説しております。 今回のゲーム開発の話だけでなく、 three.js, Unityとの違いなども書かれている ので、よろしければぜひご覧ください。