A new package feature of Babylon.js Editor 4.1.0

Questions
1

Hi @julien-moreau,
I’m trying to use Editor 4.1.0 and found a new feature “package”.
I could understand the feature compress current editor project as a zip file.

I have a small question regarding the feature.

The screenshot shows a “Project Packer” screen of Third person shooter template.

20220402_BJSEditor4.1.0_packages
20220402_BJSEditor4.1.0_packages2846×2048 272 KB

If I’d like to publish the items in a server, what are minimum items?

I guess that I only have to select “dist”, “index.html”, and “scenes”, is it right?
It is the same as what you kindly told me previously.

Let me have another questions. Since 4.1.0, it seems that I don’t have to modify “index.html” Is it also right?

I modified the index.html like this.

  <!-- <script src="./node_modules/cannon/build/cannon.js" type="text/javascript"></script> -->
    <script src="./cannon.js" type="text/javascript"></script>

Currently I’m trying to write an article for the new feature. If you allow me, I can also add documentation.

Sorry for taking your time.

2 Likes
2

Hi @Limes2018 !
Sorry for the delay !

I agree that “dist”, “index.html”, and “scenes” folders are the minimum to select in order to deploy the game. I agree also that they should be checked by default. i’m adding that feature now!

From 4.1.0, templates have been improved to have physics engines injected using BabylonFileLoaderConfiguration.LoaderInjectedPhysicsEngine. In other words, cannonjs link in the html file is not required anymore

In the src/index.ts file, you can import cannonjs and set its reference like:

import * as CANNON from "cannon";

...

export class Game {
    ...

    private async _loadScene(): Promise<void> {
        BabylonFileLoaderConfiguration.LoaderInjectedPhysicsEngine = CANNON;
        ...
    }

    ...
}
4 Likes
3

Hi @julien-moreau

Thanks for your reply while you’re busy.
I’m relieved my understanding is correct.

The following article shows the package feature. Recently more Japanese developer start to have interested in BJS then I wrote it in Japanese.

Babylon.js Editor 4.1.0で追加されたPackge機能について - CrossRoad (crossroad-tech.com)](Babylon.js Editor 4.1.0で追加されたPackge機能について - CrossRoad)

4

Hi @Limes2018 !
Excellent ! I translated to English
Thanks for writing these articles again :slight_smile:

Concerning the error « sampler2DShadow », please try to update the version of BabylonJS in your editor project from 4.2.0 to 4.2.1. It should fix the issue

5

Hi @julien-moreau !

Thanks for your kind reply.

I updated editor project from 4.2.0 to 4.21, but I got a new error when the editor execute “Run > Run in your browser (HTTP)”

20220410_BJSv420
20220410_BJSv4202994×1802 293 KB

The error messages:

index.ts:54 
        
       Unable to load from ./scenes/_assets/../scene/scene.babylon: loadAssets of scene.babylon from Babylon.JS Editor version: v4.1.0, exporter version: v4.2.1
	Lights:
		Name: sun, type: Directional
	Materials:
		Name: default material
(匿名) @ index.ts:54
index.ts:41 
        
       Uncaught Error: No camera defined in the scene. Please add at least one camera in the project or create one yourself in the code.
    at Observer.callback (index.ts:41:27)
    at Observable.notifyObservers (observable.js:288:1)
    at Scene._checkIsReady (scene.js:1646:1)
    at scene.js:1626:1

What I did :

  • Open my editor project by VSCode.
  • Open terminal and execute the command “install @babylonjs/core@4.2.1”
  • Open the editor project in Babylon.js Editor (v.4.1.0)

I guess my wrong operation caused the issue. Any advice or comment would be useful for me.

Sorry for taking your time again.

1 Like
6

Hey @Limes2018

Did you check the version of other babylonjs packages? Like @babylonjs/materials? You can manually open the package.json file located in your workspace folder and update the version of all these @babylonjs dependencies to 4.2.1 and run npm install in the terminal.

7

Hi @ZzMarmot
Thanks for your precise comment! I think you’re right!
I’ll try it tomorrow.

8

Hey @Limes2018 was your issue fixed?
Else I’ll take a look, if you can send me your project so I can reproduce. Thanks a lot !

2 Likes
9

Hi @julien-moreau !

Sorry for my lack of reply. I should tell you two info.

(1) I could solved my issue on BJS Editor v4.1.0

  • Open my editor project by VSCode.
  • Open terminal and execute the following commands
$ npm install @babylonjs/core@4.2.1
$ npm install @babylonjs/gui@4.2.1
$ npm install @babylonjs/loaders@4.2.1
$ npm install @babylonjs/materials@4.2.1
$ npm install @babylonjs/post-processes@4.2.1
$ npm install @babylonjs/procedural-textures@4.2.1
  • Open the editor project in Babylon.js Editor (v.4.1.0)
  • Execute “Run > Run in your browser (HTTP)”

Scene successfully was showed with no error.

(2) I confirmed no error happens on BJS Editor v4.2.0

I also modified section 4 of my blog post.

【2022/5/9 エラー問題の対処方法を追記】Babylon.js Editor 4.1.0で追加されたPackge機能について - CrossRoad (crossroad-tech.com)

1 Like
10

Had the same issue with editor v4.6.0, which i was making game a react component following https://forum.babylonjs.com/t/how-to-integrate-the-project-exported-from-babylon-editor-into-react/26119/3, switching to v4.2.0 fix the issue

1 Like
11

Hi @Felix22 !
Are you talking about the error “Uncaught Error: No camera defined in the scene.” ?
Would love to help