[Ebony Spire]: Mobile port progress report: Adapting a keyboard only game for mobile and touch screen

Here’s the thing about me! I hate using the mouse for anything not related to plotting pixels on a canvas. I’m even more weird, I hate using a tablet and pen to draw in gimp/paint.net. I’m just not used to it. So when it came to designing Ebony Spire I wanted to get rid of the mouse all-together. You can read people’s reaction at the first showcase of the game here.

But now that I’m porting the game for mobile phones things get a bit dicey. I have more than 20 keys that can be used in the game. Surely I can’t hack a virtual keyboard in. And I really want to keep all the features. So let’s see what changes I need to do.

The first step in the porting process to mobile has been achieved. The game is now running on android powered mobile phones, albeit not in it’s complete form. For example, the AI is deactivated for now since I need to optimize it a bit more for lower-end phones. However you can play through all the tower levels and portals worlds, pick up items along the way and wreck as much havoc as you want on the denizens. Here’s a small video for those of you who are impatient:

Now, let’s get down to the gritty part: The UI needs to be reworked. In the video above you can see the current status: What used to be a keyboard interface has now been replaced (although you can still attach a keyboard to the device and play it the old way) with on-screen buttons. Since I coded the original game with future controller and alternate controls support replacing the text based interface with tappable button was the easiest thing to do. It was as easy as replacing:
entryName = temp.label:createLabel( )
entryName = temp.button:createButton( )
enteryName:registerButtonFunctionalityOn( _doButtonFunction )

Navigating the game-world will also happen via on-screen controls. In the video above all key functions are mapped to on-screen buttons but this is subject to change. For example the “climb” key (“>“) and “pickup” key (“p“) will be changed to contextual control. What this means that you’ll have to tap on the stairs to go up a level or tap on an object to pick it up while it’s in front of you.

The trickiest part will be the inventory, not because of the complexity of the task but due to screen size restrictions. My plan to tackle it is to replace the text field containing the item name with a button that displays the actual weapon’s icon + effect. This should make the names shorter which in turn will allow me to display all the info on the screen and on a higher font size. Here’s a quick mockup of the buttons I drew up:

Throwing and dropping items is another issue tho’, as adding more buttons won’t solve the problem. One attempt I’m toying with is to throw the currently selected item by swiping up on the screen. To drop it, select the item and swipe down. I need to toy with this controls more to see if it feels right.

To be honest, the cheapest solution so far is to add button mappings to actions such as Use, Throw, Drop (like in the footage above) and make the menu navigable via the direction + turn keys. But, as mentioned, it feels cheap. And clutters the play area. And makes the navigation and interaction buttons smaller in order to fit them all and on a small screen device this can hinder the experience of playing the game.

Another solution would be to refactor the entire inventory system into a classical one where the items are displayed on a 6×4 grid. You could drag and drop them into their pre-defined equipment slot or onto the discard or throw slot. It’s tempting but at this point I was all future additions to the code-base to be backported and compatible with the PC release. A new menu system might require new information stored into the item data and csv that could be used and displayed on the screen. If the previous solutions prove not to be fun I’ll seriously consider this last option.

Minecraft's inventory
Minecraft’s inventory

On the bright side, those that choose to attach a keyboard to the device can switch to the regular (PC/Steam control interface) via an toggle control in the options menu. So the vanilla experience won’t be lost at all!

That’s it for this progress report post! I’ll go into more details as I finish implementing them. But I can say one thing: Ebony Spire’s gameplay is perfectly fit for a mobile experience. I found myself enjoying it quite a bit on the subway ride today and I believe it will feel right at home in your pockets.

Till next time!