Dyestributor Custom Levels

Component Overview

I designed an in-game custom level editor for my game Dyestributor to promote player-developer interaction, put creative tools in the players' hands, and allow easy sharing through Steam Workshop.

Initial Goal

Since Dyestributor has a simple and easy-to-create-for puzzle system, I thought a custom level editor would be a great opportunity for players to engage with the game and create and share their own levels.

Design Pillars

Enable creativity first and foremost with very low limits to player options.
Keep UI/UX simple, allow customization, and ensure that creating isn't hard.
Encourage sharing by allowing easy uploading/updating to Steam Workshop.

An in-game screenshot of Dyestributor showing a list of custom levels

Early Ideation

An in-game screenshot of Dyestributor showing the creation of a custom level

Early Design Challenges

During playtesting, several different pain points became clear across the entire custom editor experience:

UI: Early UI versions had nested menus for more complex interactions like adjusting the grid shape of a custom level, leading to confusion and lowering ease of use with no benefit.
Steam: Early Steam Workshop integration had no options for level tags and poor integration made editing after first uploading a level very difficult.
UX: A lack of tutorial tooltips, low visual polish, UI inconsistency, and more small details subtracted heavily from the overall user experience.

Iteration Process

Making Improvements

Through multiple iterative passes, I was able to clean up the following areas into a much more usable state:

UI: Separating major features by tab and localizing all menus to stay within one screen helped players learn faster and build more efficiently with mastery.
Steam: Automatically applied tags, allowing updating of uploaded levels, and extra back end polish improved the quality of Steam integration while giving players more tools to search for specific types of levels when downloading from the Steam Workshop.
UX: The addition of a first-time user walkthrough tutorial and a perpetual info bar that shows info about the element you're currently hovering over massively reduced user confusion. Combined with the implementation of customizable key binds and editor specific settings, the user experience became much more personalized.

An in-game screenshot of Dyestributor within the custom level editor

Results & Reflection

A video showcase exemplifying how a player would build and playtest a level

Final Design Results

The custom level editor takes the mechanics of Dyestributor, and puts them neatly into the player's hands to craft levels as they desire.
By the end of development, the process of creating, iterating, testing, and publishing a custom level became extremely streamlined
Additionally, visual polish and small action feedback made every action within the editor satisfying, helping to build a positive user experience.

Key Takeaways

Learned how important and effective simplistic design can be to give players a large range of possibilities very quickly.
Gained experience designing creative tools to be simple, efficient, and customizable for a broad user audience.
Understood the value of visual feedback, especially for small player actions, to ensure that the player has fun interacting with game systems.
Participated in the Steam Workshop community, learning how people used the tool I made, and having a good time creating with others.

< Back to main code documentation page

Page updated

Google Sites

Report abuse