Should I create my own Inspector Pane for my custom game engine, or use the one from Babylon.js Inspector?

Questions
1

Hello Everyone,

I am currently building my own custom game engine using Babylon.js to build games. I need something like the Inspector Pane for my engine to modify properties such as position, size, etc., of my box or sphere.

Screenshot from 2024-09-17 19-34-51
Screenshot from 2024-09-17 19-34-51287Ă—629 23.9 KB

Q1) Should I create one myself, or would it be better to use the Babylon.js Inspector?

Q2) And is the changes made by the Babylonjs Inspector is permanent or not?

I am really confuse. :smiling_face_with_tear:

2

I can’t find it, but I’m pretty sure I’ve seen a few months ago here on the forum, a project where someone was working on a custom scene inspector. Maybe you’ll find it :slight_smile:

Changes will be deleted if you reload the page. If you want it persistent, you need to add yourself a layer of save + load.

Also, FYI, if you want to tweak some params and then copy them in your code to make them persistent, here are 2 tools I added to the inspector a few months ago :

  • The copy icon you can find on the right of each param copies a line of JS code which sets this param to this value. For example :
    globalThis.debugNode.position = new BABYLON.Vector3(0, 1, 0);// (debugNode as BABYLON.Mesh)
  • Each time you select a node (in the previous example, a mesh), the global variable globalThis.debugNode is set to this node. So that you can now use it in the debug console, to directly work on it, without stuggling to programmatically retreive it uppon the scene hierarchy

++ :slight_smile:
Tricotou

1 Like
3

Thank you so much for this very useful information :partying_face::partying_face:

One thing I wanted to ask should i create my own Inspector Pane or use the one from Inspector?? :melting_face::melting_face:

4

I would say it’s up to you !
Either you use the official inspector, but it will be purely “BabylonJS” based. Nothing related to your specific “Game Engine”. Either you want it perfectly customized, and then you can recode another UI, and bind it to the specific params you want the user to be able to modify… :slight_smile:

5

okay so i will gonna used the original Inspector because my custom game engine will only differ in the game logics, multiplayer and spawing of 3D assests.

And also building the same thing like inspector on my own is going to be hard :laughing::laughing:.

6

You can extend the Inspector with custom properties and panes:

https://doc.babylonjs.com/toolsAndResources/inspector#extensibility

1 Like
7

What I want to say is that the Inspector package is very large

8

Okay Thanks for this. Hey do you know how can i add the layer of load + save in Inspector as Tricotou says above.

Changes will be deleted if you reload the page. If you want it persistent, you need to add yourself a layer of save + load.

9

Yess. It’s good if i can use it in my project otherwise to add all the functionality present in the Inspector would be quite challenging :smiling_face_with_tear:

10

Can you please tell little bit more about how can i add this save + load layer? Any reference or starting point …?

11

Hello :slight_smile:

Well, there are many ways. It’s hard to tell since I don’t know exactly was is the level of achievement already done in your project, when you say :

If you are buidling a Game Engine, I guess you have something in mind for saving the current game project, right ?

If not, here is the way I would go (but again, many many ways exist)

  • I would send the user actions (modifying a mesh position and/or param) to the server
  • Save on the server the current project in a JSON-based DataBase
  • On user reload, send the JSON from server to client
  • Code a custom loadScene function on client side, which would rebuild the current project programmatically, based on the params found in the JSON data
  • etc…

Is it what you have in mind ? :slight_smile:

1 Like
12

For right now I am thinking of exporting the scene from the Inspector and save it somewhere and from there i can fetch it and load it out in the engine.

Will this step be correct? :melting_face:

13

Sure it will be a good starting point !

Then, depending on the features you plan to add on your “game engine”, you might need more that a Babylon scene file to handle all the gameplay stuffs… :slight_smile:

14

Okay i will keep that in mind. :upside_down_face:

But if i use the inspector in my project and so later whatever i made any changes using the inspector how that’s changed data will i get to store in json or in any other way? Should i have to deep dive into the code?

Can this discussion help me in my issue of saving the state by Inspector?? :point_right::point_right:Saving changes from inspector?



And is there any way to make my own custom screen inspector (just curious to know) 🤗