Is there a way to make published BabylonJS editor files more portable?

Hey, everyone! I’ve recently been trying to decide between using ThreeJS and BabylonJS for web development with the intention of publishing the products on itch.io. I love ThreeJS’ editor, and it gets results very quickly, but BabylonJS’ physics and animation blending are much more accessible.

The problem is that when publishing a game from the BabylonJS editor, the game itself becomes very bloated with all of the Node modules it requires, so much so that the product cannot be uploaded to itch.io which has a strict 500 file limit. My back up plan is to simply deal with it and in order to keep file count down stay 100% in code, however I really do love the feature of attaching scripts to objects in a visual sense as well as the what you see is what you get of the material editor.

My question is, for people who are trying to keep their Babylon project as small and portable as possible, what kind of workflow do you use? Even with class separation with Typescript, it seems like a pretty daunting task to stick with only code.

I thought it would be do-able using the playground and simply adding onto it there and running the code as I’m going along, but what about accessing external models and things like that?

How can I keep the simplicity of only a couple of files and develop it in a way where I can see what’s going on as I’m going along? I would love to hear about your workflows.

Thanks in advance!

I write multiplayer games whose serverside is in nodejs, and I reuse code between my game clients and my game servers, so all of my code ends up following the pattern of using require(‘somemodule’) whenever I include code from another file.

In the end, on the clientside, webpack turns this into a single javascript file.

On the server I don’t care how many files are in the node_modules, but if I did I would seek to package up the server in pretty much the same way as the client… using either webpack, or a build script that combines all of the files together. There are a few libs around that claim to do this, and if deploying something to become a desktop app I believe the common ways of doing this also do bundle all of the javascript into one file.

All of my sounds / models / textures are separate files so far.

I don’t really use any visual tools, and I barely use any third party libraries. I can’t super recommend this… and it is only vaguely justified by the fact that most of my code is heavy game logic, network code that wouldn’t work with most physics/animation libs, or generated maps + characters. If I had to actually lay out an elaborate level or make many animations this code-heavy approach would suffer a lot. My visual tools are limited to drawing programs and debug stuff added to the game itself.

Adding @julien-moreau

Hey @SometimesIMakeThings!
I guess that you used the editor and exported a project template which generates the final scene file (with textures, sounds, etc.) and a game.ts file. Right?

As @timetocode said, webpack could be useful for you as all the .js files may be packed together.
If the service you would like to use (itch.io) doesn’t allow you more than 500 files including the scene files, you could use the GLB file format while exporting your project template.

By default, when you export your project template, the only needed file is “editor.extensions.js” which contains the extensions used to attach the scripts etc. SystemJS or whatever are just here for the boilerplate so you are able to run your game directly. If you find a good configuration with webpack, I would be happy to add this configuration as an option in the editor while you export you project template

1 Like

Thank you for the tips I appreciate it! I might still go that route at some point, but actually the 100% code route is working very well so far. Keeping the scripts small and separated is actually more manageable than I originally thought, as is placing the objects and sorting their materials. It’s not nearly as overwhelming as I had imagined it to be.

Thank you very much for your response, and I will try webpack if I end up needing the editor!