GameSalad Windows Creator

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. While I was at GameSalad, I helped design GameSalad Creator for Windows from the ground up, doing UI/UX and visual design. The images here are my designs and specifications for different parts of the GameSalad Creator interface. It was a pretty complex beast with lots of moving parts, and I'll go into each section in detail.

I'll start with a couple overview shots of the app. The first image shows the dashboard (much like an Adobe product, we had a dashboard that would act as a starting point for the user when first opening the app), and the second shows the main UI with all of the different panels in context.


Scene Editor

The scene editor 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.




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 later), 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.





In the original GameSalad Creator for Mac, there was no multi-select capability within the scene view - only one actor could be selected at a time. For Windows Creator, I designed and oversaw the implementation of multi-select functionality. Surprisingly, multi-select turned out to be pretty complicated...there are a lot of 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 on how alignment and distribution tools should work, and worked with the engineers on implementing this wonderful feature.



Backstage, Rules, and Behaviors

Backstage is the part of GameSalad's UI 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 basically looks like this: "When [x] happens, do [y], else do [z]," where x is a condition, and y and z are behaviors.

To begin, the state of backstage for an actor that has no behaviors currently added:


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.


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 the 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 accessed from within certain behaviors, and gives access to actor attributes or preset mathematical functions. I worked with engineers to redesign the expression editor from what existed on the Mac, and make 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 spec'd out how auto complete should behave and worked with the engineers to ensure a smooth implementation. This feature was huge for our game developers.



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.