Project: UI and design of EmulationStation v2.0 Emulator front-end
To be clear from the start, I did not create EmulationStation, I participate in development as designer and UI developer (usability, interface and theming). But let me start from the beginning.
Early 2013 I got myself a Raspberry Pi (later called RPi in this post), a credit-card sized pc originally intended as a cheap platform to experiment with and develop on – mainly for schools and universities. Because of it’s low price, the RPi became more attractive to a larger audience which used it as thin client, monitoring server, and especially as media player connected to the television.
This was also my reason for buying a Raspberry Pi. I used the WD TV Live media player before, but it wasn’t as flexible as I wanted a media player to be. For instance it wasn’t possible to change the look of the interface, and it was really ugly. Another reason was the lacking support for some video codecs and container formats. With the Raspberry Pi, I was able to use XBMC (originally developed as ‘Xbox Media Player’ for the Xbox) in it’s different flavors, for instance Raspbmc which was specially fitted for the RPi or OpenElec, targeted towards a wider range of devices. The RPi running XBMC was the perfect supplement to my NAS at home to access all the media stored on it on television.
The project trigger
Later in 2013 I came up with the idea of playing the games from the good old times of home video game consoles on the big television screen. I searched the web for suitable options for the RPi and I found RetroPie, a Linux distribution based on Raspbian (Debian for RPi). RetroPie makes use of the popular libretro API along with the reference front-end RetroArch. RetroArch uses so-called libretro cores to provide functionality like emulation of hardware and/or software. For instance there is a SNES emulator called ‘pocketsnes-libretro’. The cores to emulate most of the home video game consoles are already included in RetroPoe. All you need to play are some ROMs of games.
So RetroArch is the executive side of RetroPie, but it also contains a front-end for starting the different emulators called EmulationStation (later called ES in this article). It scans the folders where your game’s ROM files are located and lists them per-system in a scrollable list. With some extra effort it also displays details about the games, like a short description and a image of the original retail box.
And now we get to the point, ES was ugly! Without a theme it was really only some lines of text and a selector bar. Even the only available theme was not very nice looking. But see for yourself:
I thought if I wanted to continue using RetroPie along with ES, it should look pretty. So I decided to make my own theme, and as I am a designer, I started with it by doing a Photoshop mockup. I wanted the look to be very stylish and minimalistic. This is what the first mockup looked like:
I posted this mockup to the ‘Theme System’-thread on the Github page of ES. The reactions to this were very positive! At this time – Aloshi, the creator of ES- was already reworking the theming system. I made some suggestions about how to make the whole system more flexible. Ultimately this led to Alec and me working together to give ES a whole new user interface, additional features like a metadata scraper and an extensive theming system along with a nice stock theme.
With Alec refactoring the project in terms of code, the work on a usability/UI concept started for me. I defined the structure of the whole program, the actions the user could execute, the menu structure and the basic layout of the individual screens. I also had influence on new features of ES, I always discussed suggestions with Alec and usually we found an agreement on how to implement them. A huge ‘Thank you’ to Alec for his patience! I know I have very high standards, but it always was for the best.
After the basic layouts were defined, I started working on Photoshop mockups of the whole on-screen menu system. This part of ES is hardcoded and can’t be changed by a theme. So the requirement for it was to be as neutral as possible and looking nice at the same time. I also had to go sure that the menu layout is working on widescreen as well as fullscreen resolutions. It was very difficult to adapt the layout. ES uses a table-like structure to build menus and dialogs, everything had to be tweaked to have the proper proportions and spacing. Alec did a great job here.
Defining the look of the interface and on-screen menus included defining colors, the font and creating pictograms/symbols. During development of ES Alec embedded functionality to use SVG graphics as format for the pictograms/symbols. As SVG is a vector format, it has the benefit of being resolution-independent so no matter which resolution ES is used with, the pictograms/symbols are always displayed crisp and sharp. It made my work a lot easier because I had to create only the SVG and not a set of files for different resolutions.
ES lacked a logo and as a designer I wanted to change that. A visual identity sticks in the heads of the users, so ES clearly needed one. I made a few drafts and showed them to Alec. The first draft was a bit too techy and the second one had problems with anti-aliasing as the spacing between the individual pixels in the pixelized ‘ES’ started to disappear when scaled. Finally a flat-shadow inspired logo made it.
Theming was a lot of work because I had to do themes for every major computer or video game console from the past. To make the list shorter I excluded the newer ones. I started by creating the assets for the base layout of the theme, like backgrounds and font. But the major work was creating system specific assets like the system’s logo and the background art for the system select screen. And at this point the list of systems counted 45 individual platforms!
For the system logos I had to search for SVG versions of them. For many of them there were already vector graphics available, but they often were inaccurate and poorly engineered so I had to rework them. I also had to build some of the system logos from scratch with Illustrator, including the logo of the popular MAME emulator.
The second system specific part of theming was to search for suitable background art for each system. I decided that for each system a scene from the best selling or most popular game for that particular platform should be displayed as background art. I had to dig up suitable screenshots (in PNG format without compression artifacts) and scale them to full HD (which is the recommended resolution for the theme). I even had to take some of the screenshots myself as there were none in the web. The standard background art is blurred to imitate a look of depth in ES but I also included the unblurred screenshots in the theme. You simply have to change the XML files to point to the unblurred versions to use them.
Final theme ‘simple’
It was over 10 months work but I am very pleased about the result. Alec did a great job in implementing all ideas and features into ES. We often discussed and sometimes argued about certain things, but in the end we can say we did a great job in pushing ES to the next level. I don’t know whose part was the easier job. But it doesn’t matter because in the end the result is what counts.
Alec, I want to say ‘Thank you’ for all your work and I hope we can work together in the future to make ES even better and feature-packed. Having a project like this as a hobby is very special. I hope you can benefit from it in the future!
I put together a release trailer for ES to show off it’s UI and features. I hope you like it.
Official release trailer
Be sure to visit the website of EmulationStation at www.emulationstation.org. Have fun and happy gaming!