Porting a Hit Online Game to Mobile
Porting a game from the desktop to mobile devices can be a challenging balancing act. The tension comes in that to create a great mobile version of a desktop game, certain alterations need to be made to the game. However, with each alteration to the game, you run the risk of tweaking its balance or even worse—losing the very fun that the desktop version was able to create and alienating its fans.
We recently have had the blessing and pleasure of partnering with the Flash game developer JackSmack (www.jacksmack.com) to port the hit online game, Globs, to iOS, Android, and Nook Color. Globs has had over 70 million plays online since its release. The last couple weeks we have worked on bring this game to mobile and we would like to share with you some of the challenges and design considerations we worked through in the process of porting Globs.
Touch Changes the Game
This may be a painfully obvious statement, but the way you interact with your computer is much different than the way you interact with your mobile devices. On a computer where a mouse and keyboard drive your interactions it makes sense to have UI (user interface) elements like navigation and buttons at the top of the screen. This is largely due to the fact that in the western world we read from top to bottom and left to right. So we put the important stuff at the top and left sides of the screen. On a mobile device those conventions don’t work as well though because you are holding the device. Have you noticed on your device that there are a lot more navigation bars at the bottom of your screen? Don’t feel bad if you haven’t noticed, it took a while for my brain to actually catch that fact because intuitively it just made sense to my hands. Why is that? Some people have coined this the rule of the thumb. Because we hold these devices in our hands while interacting with them our thumbs become the main drivers. From typing on the keyboard to clicking on links, your thumbs do the majority of the heavy lifting on mobile devices—which brings us back to Globs.
From the screenshots above you can see that game controls were flipped from being anchored to the top of the screen in the desktop version to being anchored to the bottom of the screen in the mobile version. The desktop version gave players freedom to choose how they wanted to play by either clicking on the globs in the control area or to pressing the corresponding keys on the keyboard. On the mobile version we did not have such freedoms. We obeyed the rule of the thumb and kept the buttons within thumbs reach. We also had to take into account that the most popular smart phones have abandoned keyboards all together in favor of full sized touch screens. We increased the size of the buttons to accommodate thumb presses and tried to give as much room between them as we could to minimize accidental button presses.
Smaller Screen Sizes
Out of necessity mobile screens are considerably smaller than computer monitors. Its true that smart phone displays are starting to catch up to their desktop cousins in terms of resolutions, but mobile screens will always be relatively small in comparison. To accommodate smaller screen sizes certain concessions need to be made when porting a game to mobile devices. In the case of Globs we tried simplifying the game to its core gameplay elements. You can see from the screen shots that we removed the busy tiled background and went with a solid blue. The look of the game board also had to be simplified, so a solid off-white colored board was chosen to help the globs pop on smaller screens.
When designing for smaller screens its important that the elements in your design pop. Increase the contrast in the graphics from the desktop version so elements are easily distinguishable at the smaller sizes. This might be weird to designers from other mediums, such as print and web, but for games its better to error on the side of overly contrasty bright bold graphics. In Globs, bright saturated colors were chosen and highlights and shadows were added to all the elements through the game. Readability can also be an issue on smaller screens so we went with with text and black drop shadows for the hud (need to explain the same way you explained UI) elements and white text with black outlines and drop shadows for popup elements. Through the colors and treatments chosen we were able to give the game a visual hierarchy where the white board has prominence while the black bar of buttons at the bottom and the hud weigh in second and third.
As I mentioned at the beginning, when porting a game over to mobile you don’t want to change the core experience of the game. Glob’s square grid system is one of its core game elements and we quickly realized that any changes to this system would need to be handled with gloves. Because the mobile version of Globs is in portrait orientation, we toyed with the idea of changing the proportions of the board to better fit the space. After some discussion we came to the realization that moving away from a square grid would actually change the strategy of the game. To remain true to the original version we had to keep the square grid, however, to accommodate the smaller screen size and to simplify the experience for new players, we opted to start the game with a 6×6 grid instead of the 9×9 grid. We feel that this makes it easier for new players to quickly understand the game and gives them a chance to ease into it, while keeping the core game play experience intact for existing fans.
Shorter Play Times
If I’m like most mobile gamers, my play times are considerably shorter than when I’m on my computer or console. My typical usage pattern is a few minutes here and there when I have some down time. Mobile games should be built with these short play sessions in mind and not penalize players for needing to quit. In the mobile version of Globs we always allow you to continue from where you left off, no matter which mode you were playing. If you loose a level you can simply retry the level. As a gamer, one of my top frustrations is investing a good amount of time into a game and then being forced to start completely over from the beginning upon losing. We made it a point to constantly save the players progress to make it easy to resume play and encourage player to pick up the game again and again.
It’s yet to be seen how well Globs does in the mobile space, but we have worked very hard to preserve fun experience JackSmack created in the online version of Globs and we have done our best to improve the experience where we could. I believe there are great opportunities for mobile developers who are willing to work with flash game developers to port their games to mobile. This is especially true since Flash has still not been able to match the performance for mobile as other platforms such as Corona SDK.
You can play the original version of the game at www.jacksmack.com/games/550/globs.html
If you’re interested in playing the mobile versions of the game you can download from the Apple Appstore and Android Marketplace below.