Overview

When I was searching for different methods of creating tile sets for adding to the level editor made for Stream of Consciousness, I struggled to find the easiest and fastest way to allow designers to create their own “brushes.” This method that I landed on uses a method proposed by Oskar Stålberg (Townscaper, Bad North) in tandem with a drag and drop implementation within the Godot inspector.

Problem

Oftentimes, level design palettes will benefit from having tile sets that have an understanding of their centers, corners, edges, etc. Neighbors and adjacency. However, setting up the rules for how they read these rules can be cumbersome or unintuitive.

This work is part of the Level Editor project.

Context

In the Godot Engine, there is a feature known as GridMaps, which allows designers to create maps using their own manually registered meshes (with additional data for things such as collision). Pretty performant! But it lacks some features that I believe are required for smooth and intuitive level editing.

One of these features is the ability for cells to be aware of the cells surrounding them. What do I mean by this? Well here’s an example:

You see this singular grass block? Well, this may appear to be a single mesh. But if we look closer, it would actually be 3:

1. Center

2. Corner

3. and Side

I mark these in image 2.

As for why we do this? Imagine if the cell state were even a little more complex. We would be able to reuse the same 3 meshes.

With more complexity, it requires more states to be considered.

I won’t get too much further into this, as this is primarily about the method in which designers set up adjacency rules. For additional information, I would recommend you take a peep at this video.

Iterations

At first, I wanted to use a method very heavily inspired by Unity’s Rule Tiles.

For context, I am placing image from their tutorial here. Basically, you drag and drop the sprites you want to use and then place arrows to represent “connections” and crosses to represent “edges.”

The first thing I wanted to change was to make it easy to reuse assets. With their method, there was no way to rotate the asset using the tool. You would just have to create a new sprite/model for every orientation rather than rotating the asset by 90/180/270 degrees. Not the worst thing in the world, but not ideal.

With this method, I allowed designers to have multiple orientations and rules for any given mesh. The rules would be read from top to bottom, stopping at the first valid result. However, I still wasn’t satisfied. This method still required a significant amount of clicks anytime a new brush was desired.

A Revelation

It was then that I realized that, given the video I linked above, there was an easy way to create an editor that allowed designers to drag and drop into an area with the fewest amount of assets possible and then rotate them into place.

Borrowing from this 15-piece tileset layout, I sought out to create an editor that allowed designers to drag and drop directly into the cells and then click on each cell to rotate the piece into place. You can think of it as a very simple puzzle. No more arrows or crosses.

Final Design

The design that I landed on was as clean as possible, featuring a 4x4 grid that takes in the designer’s desired assets using a familiar drag-and-drop method. When the asset is dropped, it will be in a default rotation, but can be rotated 90 degrees by left clicking. The designer is able to use a different asset for different sides, or they can use the same asset for all four sides. The same goes for any corners or inner corners.

Demonstration

I believe in this final implementation, and I wanted to show you in real time how quick it is to create a new brush.

Outcomes

As mentioned previously, this tool is just a small part of a bigger picture. This enables us to create many “smart” brushes quickly, and ultimately become embedded in our level editor shown here.

I’ve personally observed designers being able to create these brushes faster than ever, and I believe this enables them to get iterating more quickly without dreading the burden of initial setup. I think a method like this, using a shape matching puzzle to select assets is a promising one that I will be using again in the future, and I look forward to what other options this may afford for our team.