The first Skylanders game was released for the Wii console in 2013, marking the first in an iconic series for many childhoods. The games were defined by their innovative use of near-field-communication (NFC) tags, which allow physical circuits to communicate without coming in contact with each other. The series sold action figures with NFC chips inside, which, when placed on the surface of a the "Portal of Power" (a decorated NFC reader), would enter the game and become playable.
The Skylanders figures and games have since been discontinued. However, there is a software project called Dolphin Emulator that allows Wii games to be played on a computer, which can be used to experience the original games. For a long time, this still required physical figures to play, as they are encrypted. Recently, however, the Skylanders figures were cracked to be emulated using Dolphin.
After taking a look at this new feature, I saw that the menu hadn't been fully finished, and broke immersion of gameplay as a result. For example, the game had to be exited to switch figures, and navigating to different figures wasn't intuitive. Since Dolphin is open-source software, I decided to take a look at the code and see if I could improve the experience.
The existing menu looks like this:
It requires the user to know the Skylander they're searching for and is slow to access since the user has to leave the game to open it. To select an existing Skylander file, the user has to navigate through folders and select the right file. I wanted to make this process a bit smoother.
The first step was to define the goal of the new menu. I wanted to put the focus on gameplay, allowing the user to learn and select Skylanders quickly. So I set the goal:
Goal: Load the desired Skylander as quickly as possible.
I drew some initial sketches to see what features could be improved or added for the user experience. From the start I wanted a button in-game that could open the Skylanders menu, so you wouldn't have to exit every time. I also thought of adding filters to quickly navigate through the large list of Skylanders, as well as centralizing the location of .sky (Skylander) files.
After a bit more brainstorming, I decided on several features to accomplish the goal:
Features:
Then I boiled the features down into one prototypical design (this changed greatly later, but was a solid starting point):
Now it was time to code. I downloaded Dolphin's source code from its GitHub page and began reading it. I quickly saw that it used a library called "Qt" to handle its GUI (Graphical User Interface), so I read some of its documentation and started playing around with the portal menu. Once I got familiar, I started on the features.
In Dolphin's code, the game renderer has its own window separate from the rest of the GUI. I put a listener on this render window so that when the mouse is moved, a button appears to open the portal menu.
However, there was a much better solution suggested by other Dolphin developers- add a hotkey to open the portal menu. I implemented this, and this is the approach that was ultimately used.
The Skylander list is generated from a list of Skylanders in Dolphin's code. I categorized every Skylander by "element" (an attribute given to Skylanders) and by the game version when the Skylander was released. Whenever one of these filters is changed, the list is repopulated with Skylanders passing the filter. After the user finds a desired Skylander, it can be loaded by selecting it.
If a desired Skylander doesn't have an existing file, it is created within Dolphin's user directory. The folder containing all Skylander files can be filtered and searched for Skylanders. This allows the user to access Skylander files without having to navigate to them directly each time. A user's collection of .sky files can also be displayed for easy navigation.
Along the way, I implemented several more ideas. Color-coding the Skylander list, for example, made Skylander recognition much easier, since the list contains several hundred Skylanders.
I also added buttons to allow the user to load Skylanders in other ways, such as by manually creating a .sky file or using a file outside the user directory. The default Skylander directory can also be changed for user convenience. The full changes and development history can be viewed on the two GitHub pull requests: Menu Overhaul and Menu Hotkey.
In the end, after review by other developers, the upgraded window looked like this:
Here is a video demonstrating gameplay with the final portal window. It can also be accessed in the latest version of Dolphin.