editor BabylonJS Editor V2

[julien-moreau]

Hello awsome community!

The BabylonJS Editor V2 is now available and online! It comes with a web version and a native desktop application (Electron)!

From the V1, this new editor comes with a better user interface and more tools to write less, less, less lines of code

Demo

This demo video shows a project 100% made inside the editor. It includes custom scripts written using TypeScript, path finding, custom post-process and custom animations

Features

• Create and edit particle systems
• Create and edit animations
• Create and edit lens flares systems
• Create and edit physics states on meshes
• Create and edit materials (including materials library)
• Add and edit sounds
• Add and edit textures (including render target textures & procedural textures)
• Save projects on OneDrive / local with Electron
• Deploy project template on OneDrive / local with Electron
• Scene graph view
• Create and edit custom post-process
• Create and edit custom materials
• Attach custom scripts (JavaScript and TypeScript) to your objects
• Test your scenes with debug support

Video tutorials

The documentation is available in the BabylonJS Documentation but now comes with videos to illustrate the written documentation: https://www.youtube.com/channel/UCNogU8tcA5IegFvMwE2Rckw/playlists

Some links

Full documentation: http://doc.babylonjs.com/resources/

Editor: http://editor.babylonjs.com/

Desktop Application: http://doc.babylonjs.com/resources/getting_started

Git Repository: https://github.com/BabylonJS/Editor

Conclusion

If you encounter a bug, don't hesitate to report in the forum and I'll make my best to resolve it.

Thanks for being BabylonJS users. Hope you'll like using this editor

[Sebavan]

F... Yeahhhhh !!!

[satguru]

Great.

Very polished.

Like the desktop option.

Question: How do you now focus camera on an item and rotate camera around it?.
This was there in the previous version. Hope we didn't remove that

[julien-moreau]

Hey @satguru hopefully not! I got enough feedbacks to set the free camera as the default one. Anyway you can change the camera type in the preview panel (Cameras -> Arc Rotate) and it’ll be saved in your project.

Hope to see one of your projects made using the editor ! =D

[V!nc3r]

First great point of a desktop app: you will not be annoyed anymore with a miss-click mouse 5 button ?

[satguru]

@Luaacro, 

Right now the ArcRotate camera just rotates about itself. It does not rotate about the object selected.

Is there a shortcut key to focus on an object?

Sometime double clicking an object shifts focus to it. But that seems to be buggy. It does not work most of the time. Also after focusing, if you left click, hold and drag the mouse the screen remains unresponsive and  if you let go off the mouse the mouse goes into free look.

[julien-moreau]

Good catch! Will fix asap

[julien-moreau]

@satguru

Just fixed!

[satguru]

@Luaacro 
Nice . Much better now. Thx.
You should also add a  keyboard shortcut  and a button with an icon like a magnifying glass to focus. Double click works but only if you double click very fast.

[julien-moreau]

What do you suggest for the shortcut to focus un object ? Just « f » for example ?

[satguru]

Yes "f" is fine.

Another request   ,  is it possible for you to share the demo scene shown in the video with us?

[julien-moreau]

Done!

Sure it is planned! I'm just making the demo coherent with the tutorials. I'll share ASP

[satguru]

@Luaacro

Nice.

Few other issues.

1) Under menu item "Project", the  "Clean Project" does not seem to work. The same project is displayed again but this time I am unable to select anything.

2) Instead of "Clean Project" maybe it should be called "New Project" ? Thats what most other  editors have.

3) I find the "Project" menu confusing.

We have
"Import Project", "Export Project", "Save Project as."
and
"Download Scene", "Export Scene As"

Not sure about the difference between
Export Project and Save Project
or
Download Scene and Export Scene. (what about import Scene?)

Also Project options and Scene options should be clubbed together under the Project menu?

4)  Anyway to select , edit or delete GUI Items in the screen?

[julien-moreau]

@satguru

 

Done 1) and 3) !

2) New Project with empty scene?

4) If you mean BabylonJS GUI, it is planned but not now because GUI is not yet serializable and it requires lot of work to implement serialization

[satguru]

@Luaacro

That was fast.
Much cleaner now.

"Import Project" does not seem to be working.
I see following error in console
Uncaught (in promise) TypeError: Cannot read property 'name' of undefined
    at Editor.eval (editor.js:1)
    at step (editor.js:1)
    at Object.eval [as next] (editor.js:1)
    at eval (editor.js:1)
    at new Promise (<anonymous>)
    at __awaiter (editor.js:1)
    at dialogCallback (editor.js:1)
    at eval (editor.js:1)
    at Object.eval [as callBack] (editor.js:1)
    at HTMLButtonElement.<anonymous> (w2ui.min.js:7)

 

"2) New Project with empty scene?" 
Is there any other way to create an empty scene?
Is there a way to delete everything in the scene in one stroke?
I tried deleting each item in the scene one at a time but wasn't able to delete any of the GUI elements.
So yes a new Project with empty scene would help

What is "Export Template"?
Is it a way to publish my scene?
When I do that it tries to log me into some Microsoft account. 
Why? 
What if i do not have or want a a Microsoft account?
It should allow me to save it to my disk

 

 

 

 

 

 

[julien-moreau]

@satguru

Oups! It works on my side, can you share the scene you are importing? Thanks!

2) ok for empty scene, just added, will be available ASAP

For the export template I have to update the doc to explain. The template contains a project for developers with the final scene and a minimalist typescript code to load the game you are developing (in mean index.html, scene, libraries etc) so you are able to develop your game as you can do without using the editor directly. Will update the doc and make a video to explain

Anyway, please use the electron version to export template or save your project. The web version of the editor will try to save files using OneDrive

[satguru]

Sorry,  the error happens when you do "Reload ..".  

[julien-moreau]

@satguru done! Checking the error you mentionned

[neuromage]

How within the realm of possibility is it to get a native linux version of the editor? Or is it possible to self host in the browser by downloading files? My main computer uses ubuntu. Still exploring the git repo.

[neuromage]

nevermind. I figured out how to run it with npm. Still wouldn't mind a native snap for this in ubuntu. But I'm not sure if its worth it.

Quote

 

 

[neuromage]

export template seems to just bring up something from live.com and I don't know how to generate a scene in html and javascript from this yet. will check out documentation more. Seems like a cool tool.

[julien-moreau]

Hey @neuromage!

thanks for trying the Linux build. I’ll try to build one for Linux as well and will send you in order to test if everything works fine

for the export template, I’m updating the documentation so I’ll share you ASAP how it works

[julien-moreau]

Hey @neuromage,

Can you try this Linux build and tell us if it works? (Ubuntu): http://editor.babylonjs.com/BabylonJS Editor.zip

Thanks!

[Dad72]

Hello Luuacro,

She is nice this version 2. Good job. I was wondering how you made the splashScreen we see in this picture below. I would like to create something like that, but I have no idea where to start. If you have a PG example, it would be great.

Thank you and continue, your editor looks great.

[Edite] : I ask the question in question/answer and I got an answer. Sorry for the inconvenience.

[julien-moreau]

Hey @Dad72 just saw your message! =O

Thanks! For the blood screen, will you create a post-process for that? Or use the Babylon GUI ?