Level Generation


Hey everybody! We have greatly sped up our Level Design workflow and I wanted to share some of our process with you. Maybe it can give you some inspiration for your own projects.

Our upgraded level editor tool is based on the one by Brackeys, who was inspired by Quill 18. We use Photoshop and Unity, but this approach would work with other image editors or engines as well.

The tool reads out colors from a pixel map which is basically a low res image to place assets inside a Unity scene. We use it for our game Weaving Tides, which is an isometric adventure whereas Brackey and Quill 18 use it for 2D platformers.

In Photoshop we paint the different floor variations on separate layers and then we have one layer for assets including obstacles, decoration and even interactive elements. Each painted pixel is an asset.

different colors stand for different assets. the yellow grid is our woven ground

We also used to have separate layers with different layer styles per asset type, which allowed us to quickly distinguish between asset types within Photoshop. On the one hand this approach was pretty useful, because larger assets like trees had a bigger radius which made it easier to stay aware of their size in Unity although we just paint a single pixel.

using the layer styles "stroke" and "color overlay" made it easier to read the pixel map

But on the other hand these separate asset layers slowed down iterating on the level design significantly. For example if we wanted to move the position of a small area including different assets, we would have to select each layer. Doesn't sound like much, but if you do it several times it costs a lot of time. So we went back to use as little asset layers as possible. We're still using layer styles to increase the contrast between the assets and the ground layers.

now there are separate asset layers only for e.g. specific puzzle elements, which will be hidden later

You might think layer styles wouldn’t be handy because they change the color of nearby pixels, so you need to turn them off by hand before exporting the pixel map - true! But: we set up a Photoshop action which disables all layer styles, exports two separate layers directly into the Unity project and then turns the layer styles back on. Like this we just have to press the F2 key, Photoshop exports the low res images, we switch to Unity and press “Generate” on our LevelGeneration prefab and voilá, we got our pixels turned into assets in no time! 😄

The floors are an important element for our weaving mechanic, that's why we have not one but several floor layers. Since the ground in Weaving Tides is made of individual fabric strips and pieces we also use layer masks so we can paint in the floors without having to paint every strip individually.

In Unity the assets also get randomly rotated and scaled by a margin we can set for each asset type.

BTW we block out our levels using the almost same tool, but in a larger scale which leads to a greybox like this:

In Photoshop we also made an action which goes through the specific colors of our greybox and converts the large environment blocks to the final floors and assets.

the Photoshop action that converts our greybox uses "smooth selection" to turn our giant pixels into nicely curved level borders

And that's about it. Let us know what you think on Twitter or Facebook!