CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

Babylon.jsで作られたサンプルプロジェクトやゲームの紹介

これは「Babylon.js アドベントカレンダー2024」の3日目です。

qiita.com

今回は、Babylon.js forumで紹介されているサンプルプロジェクトやゲームを紹介します。

1. サンプルプロジェクトを探せるサイト

まずはBabylon.jsの公式サイトです。下の方にスクロールすると、BABYLON.JS COMMUNITY DEMOS というコーナーがあります。ここで色々見られます。
www.babylonjs.com

ただし、不定期にリンク切れがあるので、見られなかったら別のデモをご覧ください。

次は、Babylon.js 公式フォーラムの "Demos and projects"というタグのページです。コミュニティ参加者が色々なデモやサンプルプロジェクトを紹介しています。本格的なゲームもあれば、新機能を試してみた、など粒度はばらばらです。
forum.babylonjs.com

あとは、コミュニティのコアメンバーが選定した様々なBabylon.jsのTipsを紹介するGitHubリポジトリがあります。

github.com

ここには、Babylon.jsに関する情報、出版された書籍(英語のみ)、サンプルコード、デモ、関係しそうなリンクなどなど、多数の情報が書かれています。

かなり長いですが、スクロールして「Playground」という見出しを見ていただくと、多数のサンプルコードが確認できます。主に機能が確認できるものが多いです。

「Demos」を見ると大小様々なデモを確認できます。あとは、「Projects」を見ると、サンプルコード付きで色々と確認できます。

2. サンプルプロジェクトの例

2.1 Space Shooter

3人称視点のシューティングゲームです。宇宙船を操作して移動し、敵を倒していきます。

SpaceShooter-BuildOnBabylon.js

WASDキーで移動、マウスの左クリックで弾を発射します。SHIFTキーを押しながらだと少し早く移動できます。

音楽はSuno.comにより生成されたようです。かっこいいので、サウンドOnでのプレイ推奨です。

ここで紹介されています。

forum.babylonjs.com

ソースコードはこちらです。

github.com

ここから試すことができます。 SpaceShooter

2.2 Space Invaders

あの有名なスペースインベーダを元にしたゲームです。敵が弾を飛ばす時の方向が変わるなど、オリジナルと多少の変更点はありますが基本的には同じです。

十字キーで左右に移動、スペースキーで弾を発射します。

SpaceInvaders_BuildOn_Babylon.js

ソースコードはこちらです。 github.com

ここから試すことができます。
spaceinvaders.viperfish.com.au

2.3 Barkanoid

ブロック崩しゲームです。なぜか冒頭にかっこいい部屋が映り、装置にある「START」を押すと視点が移動してブロック崩しゲームが開始されます。

あと、ブロック崩しの効果音や光の演出がかっこいいです。

十字キーで左右に移動、スペースキーで弾を発射します。

Barkanoid build on Babylon.js

ソースコードはこちらです。 github.com

ここから試すことができます。 bArkanoid

3. おわりに

ここにあげた以外にも多数のサンプルプロジェクトがあります。よかったら、ぜひ1で紹介したサイトを元に調べてみてください。