There are a lot of methods for developing 3DCG based applications. Unity and Unreal Engine are good tools for applications on Windows, MacOS, Linux, iOS, Android and so on. three.js and a-frame are also useful frameworks on web applications. I think Babylon.js is well known as the same as useful frameworks but Babylon.js Editor is not famous even in web developers.
The post shows the editor and basic usages with a sample game repository.
- 1. What is Babylon.js?
- 2. Babylon.js Editor
- 3. How to make environment of Babylon.js Editor v4.0
- 4. Basic usages
- 5. A simple game sample repository
- 6. Typescript usages on the editor
- 7. Conclusion
- Reference
1. What is Babylon.js?
Babylon.js is a strong and fantastic framework for WebGL.
Here are games developed on Babylon.js.
FINAL FANTASY DIGITAL CARD GAME
Microsoft employees are the main contributors. They introduce the framework on their official blogs.
Game Development - Babylon.js: Building a Basic Game for the Web | Microsoft Docs
Adding WebVR support to a 3D Babylon.js game - UWP applications | Microsoft Docs
It is typical that 3DCG and XR (AR/VR/MR) applications are developed by Unity or Unreal Engine.
Basically, WebGL framework applications are developed on text editors. Unity or Unreal Engine are more efficient to develop such applications than only text editors.
Babylon.js provides useful IDE (Integrated Development Environment) as Babylon.js Editor.
2. Babylon.js Editor
Babylon.js Editor is an useful IDE for developing applications based on Babylon.js.
Other frameworks provide similar one but these can not manage script files.
| # | tool | align 3DCG objects | export scene | manage by script | URL |
|---|---|---|---|---|---|
| 1 | three.js editor | OK | OK | - | three.js / editor |
| 2 | a-frame inspector | OK | OK | - | Example Scene |
| 3 | Babylon.js Editor | OK | OK | OK | Babylon.js Editor |
With managing scripts, developers can use Babylon.js Editor as Unity. They can attach scripts on each objects.
As of October 2020, v3.1.2 is an official release version. It works on your web browser via Internet.
Babylon.js Editor
v4 beta is also provided. It is a strong updated version. I highly recommend to use v4 even though it is beta.
There are two environments for Babylon.js Editor. One is an electron based application running on Windows, MacOS and Linux. The other is running on web browser. Official documents recommends the electron based application.
Note: It is highly recommended to use the desktop app as you'll get access to the local file system to save your projects.
ref : Getting Started - Babylon.js Documentation
3. How to make environment of Babylon.js Editor v4.0
As of October 2020, you should get electron based apps from the repo below.
BabylonJS Editor v4.0.0 beta · BabylonJS/Editor Wiki · GitHub
Of course you can get source code and build it by yourself.
GitHub - BabylonJS/Editor at release/4.0.0
4. Basic usages
Babylon.js Editor v4 provides kindly documentations and sample projects.
Editor/doc.md at release/4.0.0 · BabylonJS/Editor · GitHub
If you are a Unity developer, the name rule below will be useful.
| # | Babylon.js Editor | Unity |
|---|---|---|
| 1 | New Workspace | New Project |
| 2 | New Project | New Scene |
The editor v4 provides feature of adding mesh, light, skybox and sound. Typescript based scripts are also available.
Usage of scripts on Babylon.js Editor v4
Here is the script template. "onInitialize", "onStart" and "onUpdate" are similar to Unity scripts.
5. A simple game sample repository
I think you'd like to know more about how to use the editor v4.
Don't worry! I introduce a simple ping pong game repo developed the editor v4.
Environment : Babylon.js Editor v4 beta7 or later
6. Typescript usages on the editor
6.1 keyboard operation
"@onKeyboardEvent" decorator is a key point of keyboard operation. The above code runs like this.
You can also use like this.
gist.github.com
6.2 physics and collision detection
If you'd like to attach physics on objects, use "PhysicsImpostor". "applyImpulse" method adds force to objects.
gist.github.com
"registerOnPhysicsCollide" and "unregisterOnPhysicsCollide" provides collision detection.
gist.github.com
6.3 GUI
The editor (v4 beta7) does not support GUI at the moment. It means that you need create your GUI via attached scripts. Text and image are showed as the following code.
You can also refer the following official links.
Game GUI - Babylon.js Documentation
Use the Babylon GUI - Babylon.js Documentation
6.4 Calling other class's method
The editor's scripts configuration are similar to UnityScripts. Import other class as "import" sentence, call other class's public method.
6.5 running your workspace on your server
The editor (v4 beta7) does not support exporting workspaces as final productions. I think it'll be supported soon.
You can choose the following folder on your workspace top directory.
- index.html
- scenes (folder)
- dist (folder)
Modify 1 line of index.html because "cannon.js" is loaded from "node_modules".
You can live server plugin if you use visual studio code.
If you're an AWS master, it may be helpful for you.
7. Conclusion
Babylon.js is a powerful framework and Babylon.js Editor v4 has a strong potential.
Babylon.js is also compatible with WebXR standardization. The framework is also useful for XR developers. I'd like to contribute combination of Babylon.js Editor and WebXR.
Let's enjoy Babylon.js life!
Reference
The blog post is based on the following posts in Japanese.
【2020/10/4追記】UnityのようにBabylon.jsコンテンツが作れる「Babylon.js Editor」が大幅アップデートしていたので使い方を調べてみました - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.1（ステージ作成、操作） - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.2（物理エンジン） - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.3（衝突判定） - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.4（GUIの追加） - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.5（得点加算、ライフ変更、テキスト表示） - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.6（サーバに格納して実行） - CrossRoad
