The Level Editor

I’ve been working on a tool that is designed to help making “platformer” game levels. I was heavily influenced to create something that looked and felt like Blender, but with an emphasis on level design.

Why create a specialized tool when you can use a 3D editor like Blender? I wanted to make a tool that works on any browser without needing download or learn Blender. All Boxel games that I’ve developed come with a level editor, and are packed with features that help content creators share their ideas with the world. The most amazing levels come from brilliant players from the community, and it is exciting to see what they come up with each day.

To help envision this level editor, I designed the UI in a 640×360 canvas. I wanted to make sure the editor looked good in small windows before expanding to wider screens.

This little prototype helped me feel more comfortable about building this giant idea. I regularly ignored the inner voice that kept asking “can you even develop this?” and continued adding features that I felt the editor needed.

Previous level editors I have built include the basic ability to add/delete items, but it is very frustration to modify multiple objects. Here are what the editors looked like in the past.

Here are a list of items I knew I wanted for this editor:

• A select box for selecting multiple objects
• A “settings” UI for showing the current properties of the selected object(s)
• A “tools” UI for showing which tool you current have selected
• A “layers” view for showing all the objects in text format
• Shortcuts for quick modifications

To get the ball rolling, I initialized a Vite project with vanilla Javascript and began developing the core environment using Three.js as the 3D framework. Three.js comes packed with “helpers” that make it possible to interact with 3D objects. For example, if you want to click-and-drag an object, you can use the TransformControls library. If you want to move the camera, you can use the OrbitControls library. Need to select multiple objects in the frustum? No problem, there’s the SelectionBox library.

After a few months of getting the Three.js functionality working, I was finally ready to start working on the user interface. I originally thought I was going to make the UI using jQuery, but there was something tempting about Vue.js that caught my eye. Like other “reactive” frameworks, these API’s provide solutions for binding HTML elements to abstract or primitive variable types. This means I can bind an input field to a 3D object, and “reactively” update the HTML value when the object values are changed.

Up until about a month ago, I had never used a front-end templating framework like Vue, React, or Angular. Why choose Vue? I experimented with Vue first because it was the default system for Vite projects, and it also looked like it could accomplish what I needed.

Since my project was using “import” function to compile a single file application, it made since to use Vue’s latest “Composition API” to organize the UI elements with the current source code structure.

I feel like I unlocked a new way of thinking throughout the development of this application. I started reading a book called Design Patterns by Grady Booch, and I feel like my approach to coding has completely evolved. The more I learn and test out new libraries or programming patterns, the more predictable my applications become.

I think the next step is to observe where the application is, and consider where I want it to be. I must admit, I am very exhausted with working on this project almost every morning before my 8-hour web developer job. I’m tempted to pause this project and work on something else with my new found skills, but I’m also anxious to see where this project could land.

Did I accomplish my goal with this project? Not yet, but I feel incredibly successful with what I have extracted so far.