Drag and Drop

Throughout the course of the game, Space Station Inc. requires the player to move astronauts across various groups in order to perform various duties. For example, an astronaut can be assigned to ‘Maintenance’ in order to reduce the chances of the space station suffering a malfunction. Alternatively, an astronaut with specialist knowledge in the production of a particular commercial good can be assigned to a Production Line and increase its effectiveness. For the purpose of increasing the usability, all of these activities can be performed via a drag and drop operation. In this blog post we’re going to provide a visual tour on how we arrived at the final drag and drop solution used in the game.

As discussed in a previous blog entry, during the first stages of development of Space Station Inc. we worked on a prototype that featured an extremely simple UI. This was a deliberate decision, and there were two reasons behind this approach:

1) We didn’t want to sink too much time in the implementation of a feature that may or may not end up in the final game.

2) We were keen on getting things done quickly so that we could perform regular play testing and decide sooner rather than later if a feature was going to be kept or discarded.

For this particular feature, the first point wasn’t much of an issue, since we already knew that players will definitely have to move astronauts around during the game and that doing so would require some sort of drag and drop system.

That being said, doing a proper implementation of such a system was going to require a lot of time and effort, something that clashed with the second entry from the list above. Thus, we opted for a relatively straightforward solution for the prototype and left the implementation of a full-fledged drag and drop system for later. This is what the system looked like in the prototype:

As you can see, there’s no drag and drop system present whatsoever. Instead, entries are moved from one group to the other by pressing an ‘Assign/Unassign’ button located on each one of them. Moreover, entries are displayed on ‘pages’, which can hold a maximum of five entries at any given time. Players then need to use the ‘Previou Page’ and ‘Next Page’ buttons in order to browse through the pages. This solution worked really well and, except for a few edge cases that had to be considered, the implementation was relatively straightforward. In any case, this approach had a few shortcomings, which made it cumbersome from a usability point of view. It was good enough for a prototype, but we knew we had to do better for the final game 🙂

 

Looking for a solution

As much as I like writing code, every time I need to implement a non-trivial feature I visit the Unity’s Asset Store and browse around for a while in order to find out if there’s a solution out there that either completely fulfils my requirements or provides a starting point that can be adapted to my particular situation. For the drag and drop functionality, I found a great number of ready-made assets but, unfortunately, none of them were exactly what I was looking for. In the end, I chose ‘Simple Drag and Drop’, which is available for free and features a very clean implementation.

According to the subversion log, the initial integration of the ‘Simple Drag and Drop’ asset took place in early October 2016.

The asset includes a very useful test scene named ‘MainScene’, which has five groups of cells and neatly showcases the various types of cells available. Cells from the first and second column can be swapped. Cells from the third group can only be dragged somewhere else. Cells from the fourth group are cloned before the dragging process starts. Lastly, cells from the fifth group can only accept items dragged from other cells.

The functionality provided by this asset was actually more than what we needed in terms of cell types, so it was a great starting point. That being said, we had slightly special functional requirements, such as being able to drop cells in the gap space between two existing cells, or animate that gap with a expanding/shrinking animation as a dragged cell hovers into in or out from it, respectively.

The first thing I did was creating a copy of the ‘MainScene.unity’ file, removed all the cell types that weren’t needed for Space Station Inc. and added initial support for the intermediate gaps between cells. This is a screenshot from revision 853 of our SVN repository, dated from October 11th 2016:

A few more revisions down the line (revision 891, from October 16th 2016), I replaced the panels with two separate scroll views and added a green bar to each group. Items dropped into this green bar were automatically appended to the list. All elements could be swapped with other elements from either the same group or from the other group. Overall, this layout was closer to the one envisioned in the original mock-up screens, though there was still some way to go.

By revision 1116, from December 7th 2016, the assets included with ‘Simple Drag and Drop’ had been replaced by a set of cards made by Mauricio. I also wrote code in order to implement functionality such as the opening and closing animations for the empty gap between cells and for displaying an arrow in all available gaps when starting the drag procedure. This functionality is not strictly required, but I believe all these little details will contribute to make the gameplay experience a lot more pleasant.

During December, I generalized the drag and drop solution so that it could be used with vertical panels. Generalizing a solution is always an interesting exercise, mostly because it usually reveals flaws in the code in areas that were tailored to a particular case. Mauricio also conducted some usability tests with his co-workers, which revealed some minor issues that we proceeded to address. On December 27th, 2016 (SVN revision 1207), our test scene looked as follows:

Some revisions later, the cards from each panel were replaced with a design that more closely resembled the information requirements we have in the game. This also required more tweaking in the code, as integrating the assets for the new cards uncovered some hard-coded bits that only worked with the previous version of these assets.

Once we reached a point where we were happy with the test scene and all the various usability issues had been resolved, I went ahead and started integrating the drag and drop functionality into the game itself by rewriting the ‘Maintenance Management’ screen. The process was relatively straightforward, though once again I had to fix certain bits of the code that were too specific for the test scene.

By the end of January, we had already reached SVN revision number 1322. In this revision, the astronauts cards could be shuffled around between panels and a series of indicators in the middle of the screen updated their values based on the contents of the left panel:

After the end of January we made further improvements to this screen, like animating the various stats in the middle of the screen after moving elements from one panel to the other:

This is the current implementation of this screen and, unless any issues are discovered during the alpha and beta testing sessions, it will probably be the one that will end up shipping with the final game 🙂

 

Conclusion

Implementing the current drag and drop solution for Space Station Inc. took several months of part-time work. The process started with the main sample scene from the ‘Simple Drag and Drop’ asset, which was then heavily modified in order to suit our requirements and incorporate the feedback we got from our usability tests. It was a long journey, but we believe it was worth the effort since it provides an elegant solution to an interaction need that is used by many screens throughout the game.