Examples of Multi-file Babylon Projects?

Questions
1

Are there simple examples of how to structure a Babylon project across multiple files?

The Playground keeps everything in 1 file, are there any alternative editors?

I can’t imagine doing a Unity project in one file. It seems like there are many different solutions, what techniques do people use?

2

While it will sound like a cliche, it’s really up to personal preference, which will likely change multiple times during the project life… that said, I hate the answer “personal preference” because it helps literally no one, so here is my very very rough structure, maybe it will give you the starting idea for yours :slight_smile: (I hope!).

I have 3 main sections: client, server and shared.

  • Client is separated into 2 sections - ui & game (I am not sure if you’re interested in UI so I’ll just skip it)
  • Server obviously server data
  • Shared, anything that both client & server need (like constants, helpers etc)

The structure of the game section is roughly as below:

  • cameras // Folder with all cameras used
  • objects // Pretty much the most important folder where all the objects of the scene live
    • characters // Player / enemy bodies and functionality, probably the largest files I have
    • interactive // Interactive objects, for example a bullet mesh has an interactive ray, this is where the ray will be stored, so it’s reusable
    • pickups // Shield / Health / Power pickup meshes
    • shapes // I extended the default MeshBuilder to better suit my needs so all the shapes live here (box, sphere etc)
    • structures // All of the structures that I use are here (walls, desks, doors, everything that is not interactive)
    • weapons // Weapon handlers
  • rooms // The rooms you play in (my scene is separated to rooms, basically every structure I create has a gameRoomId which allows me to easily remove / add meshes based on the room you’re in
  • constants // Folder with different files for the constants used in the actual game (colors, items, sounds, paths, abilities etc.)
  • helpers // Utils folder

Those are the folders and then I also have a state file where I keep a global state, and an init file where I initialise everything, do optimisations, add server listeners etc…

Hope you get something from this.

4 Likes
3

The idea of how you broke that up makes a lot of sense. Is there any example code for how to reference and create objects like that?

I’m looking at using Glitch.com (or are there alternatives?) since I think it will let me set up folders like your describing. Breaking up the program would make working with others so much easier.

Im new to this idea and need a Hello world with how you do all the different kinds of file references your describing. I’m not sure how to even instantiate a second script / object right now. If I figure it out I can make a remixable Glitch example.

4

hi. es6 style helps you organize code. e.g. GitHub - BeardScript/babylonjs-webpack-boilerplate: BabylonJS + Webpack minimal boilerplate for development and production, supporting es6 and/or typescript. you can create any structure, build modules and extend main game component.

5

I think Glitch can handle Webpack Webpack

I’m just a total noob at this and that boilerplate seems really complicated to get started.

It feels like this should be really simple but its really complicated. Or that it could be really simple once a basic demo project is set up with this stuff hidden away behind the hood.

6

I’m not a big fan of boilerplate either so I use ParcelJS. You just have to create your index.html file, add your script (can also be TypeScript, the just us JS as an example) and the call parcel index.html from the command line and it will bundle it all and start a web server for you to test with.
For multiple files all you have to do is add a
require('./path/to/my-file.js')
or
import Object from 'my-file.js
and Parcel will find all the files you referenced and bundle them into one. Super easy to use.