GameSalad

2011 - 2012

GameSalad is a game creation tool that enables game developers to easily create games for desktop and mobile devices using a simple drag and drop interface. The product’s goal is to empower people without traditional programming skills to make games. While I was at GameSalad, I helped design GameSalad Creator for Windows from the ground up. It was a complex product with lots of moving parts, and I'll talk about my designs for each part of the GameSalad Creator interface in detail.

Scene Editor

The scene editor is the part of GameSalad’s interface that shows a preview of what a game will actually display when it's played. It contains "actors" (the moving components of a game), background images, camera tools, and tools for positioning and aligning different actors with each other.

Library

The library panel is where users manage the assets in a game project. It contains tabs for scenes, layers, actors, images and audio files, game logic blocks (also known as "behaviors" - more detail on those in a bit), and table data.

Attribute Editor

The attribute editor is where users can manage the attributes of specific actors in their scenes. Attributes include things like color, size, position, and rotation.

Multi-select

In the original Mac version of GameSalad, there was no multi-select capability within the scene view - only one actor could be selected at a time. For the Windows version of GameSalad, I designed and oversaw the implementation of multi-select functionality. Surprisingly, multi-select turned out to be pretty complicated...there were several use cases to account for.

Alignment and Distribution Tools

Another missing component from the original GameSalad Creator was alignment and distribution tools. I created detailed specs for how alignment and distribution tools should work, and worked with engineers to implement this feature.

Backstage, Rules, and Behaviors

Backstage is the part of GameSalad's interface where game logic can be added, removed, and manipulated to make the game actually do things. It's the heart and soul of GameSalad, a place where normally inanimate objects can be made to move and interact with each other. Templated blocks of game logic called "behaviors" can be added to specific actors in a game scene. For example, you might have a behavior called "Move" that makes an actor move in a certain direction at a certain speed. Multiple behaviors can be pieced together to create a larger and more meaningful whole. Behaviors live inside containers called Rules, which specify triggering conditions for activating behaviors. A rule would look like this: "When [x] happens, do [y], else do [z]," where x is a condition, and y and z are behaviors.

Here is the state of backstage for an actor that has no behaviors currently added:

And here are some specifications showing how behaviors look stacked on top of one another, as well as how behaviors can be collapsed and dragged to new locations:

An actor tab would appear in backstage when the actor was selected in the scene view - this meant that deselecting the actor would cause the tab to be removed. We decided to introduce pinnable backstage tabs, so we could keep actors open in backstage at all times, as well as have multiple actors open at the same time.

Here are some of the basic states for rule blocks, rule conditions, and behaviors inside of rules:

In addition to rules and behaviors, notes could also be added to the game logic stack. Notes were simply meant to act as comments for game developers.

Expression Editor

The expression editor is a widget that allows users to create complex mathematical equations to perform more advanced game logic operations. It is accessible from within certain behaviors, and makes use of actor attributes or preset mathematical functions. I worked with engineers to redesign the expression editor from the pre-existing Mac application, with the goal of making it faster and more intuitive for users.

Auto Complete

Auto complete was a new feature that we implemented inside the backstage panel. It allows users to enter behaviors into their logic stack by typing the name of the behavior to be added. I designed how auto complete should behave, and worked with the engineers to ensure a smooth implementation. This feature was a huge time saver for our game developers.

Dashboard

The dashboard is the first thing users see when opening GameSalad. It provides access to pre-made game templates, recent project files, and tutorials on using GameSalad.

Conclusion

GameSalad Creator for Windows significantly improved on the existing version of GameSalad for Mac. I spent a lot of time trying to understand the needs of game developers using the platform, and rethinking the tool’s UI so that it would be as intuitive and user-friendly as possible. In the process, I was also able to work with product managers and engineers to design and develop some new features that were extremely helpful for game developer workflows. It was extremely rewarding to design a product that became a tool for others to express their creativity, and to attempt to streamline the game development process for people who didn’t have any programming experience. Overall, I’m very happy with the work that we did on this project, and I still consider it one of the most fun products I’ve ever worked on.