Level Creator – Electron App

     I am developing a level creator program with Babylon.JS, Electron, and Typescript. I am of course using Electron to make it into a desktop application. It is still under development but the first version should be out soon. It will have two modes. The first will let you place normal models and get their positional data while the second mode will be a voxel mode. In the voxel mode, you can build voxel structures and export them.

     I am making this because I wanted an easy-to-use tool to build my games and there was not really one available that was game engine agnostic. This export the data as just plain JSON with which you can do whatever you want.

Some cool technical notes about the program.

State Machines

     I programmed state machines to handle the complex interaction with the UI and the data itself. Essentially I needed a way to tie together the events from the UI with the manipulation of the data and make sure that nothing happens that is not supposed to such as writing and reading values that may be deleted or changed.

Multiple Contexts

     The program has two separate windows. One is just for editing the data associated with the nodes and structures as well as importing the assets. While the other is just for building the structures.

Infinite Scroll For Node Display

     On the left-hand side of the structure editor is the node display. This is where the user can select all the nodes in the scene. A node in this case is a 3d model or another pre-defined object with associated data properties.

     The display needed to handle the potential for 100k  – 1 million nodes. But it is not very practical to have that many HTML elements at a time. So, I developed a system that adds and removes nodes as the user scrolls. In order for this to work first though I had to build a Doubly Linked List. I combined it with a hash map so instead of using a reference to the before and after nodes I used a string ID which I could then use elsewhere to get associated data quickly. The node display is also a drag and drop system so the Doubly Linked List was also a great choice because of how fast it is to take things out and remove them.

Built From Scratch

     I am not developing this with a front-end framework. Though I did take inspiration from Angular on how to structure the program a bit. I decided not to use a framework because I found them to be too limiting and I would have to work a lot around them to get the performance I need. Everything for the UI is made in the JS code. I do not have any static HTML loaded at all. For styling though I chose to use SASS because it makes it so much easier.