Designing Titan Quest on mobiles and tablets

How to adapt Titan Quest, a hack ’n slash classic beloved by an entire generation of PC players, to mobile and tablet? I had just arrived at DotEmu and this was the question I needed to answer. But more than a question, it was a challenge – one that required almost 20 months of reflection, iteration, and development in order to properly reboot this amazing title for its army of fans!

Everything needed to be (re)built, but the team and I were incredibly motivated to conquer the difficulties and compromises that inevitably arose. Not once did we doubt that Titan Quest would be a great mobile game and that it deserved its place on the mobile platform.

I couldn’t alter the original game, and yet many elements needed to evolve so that a mobile version could be realized. The task before me was formidable…

UX: SIMPLIFY THE CONTROLS, STRAIGHT TO THE POINT

How to get from this (fig.1) to this (fig.2)?

Regardless of which hack ’n slash you play, you always expect to see lots of elements around the game window: spells, potions, weapons, pets, etc. – in a word, all the cool stuff that this game genre provides. The fact is that throughout the journey, each button has an important, clear-cut role. However, there is some complexity involved, since each player can customize his “buttons deck” depending on his character’s class and evolution. This is simple to do on a PC – the mouse moves the character and the keyboard keys assign the actions. But on a touchscreen, you only have your fingers! And for comfort’s sake, people typically use their thumbs with their mobile positioned horizontally.

With this in mind, the lower half of the screen is the ideal place for the main action buttons to be grouped, while the upper section contains game information: life and mana bars, the character’s portrait, the map, the pause button, etc.

Also, tapping the screen to move the character is not a valid option for a touchscreen game like Titan Quest, because you don’t want the player’s fingers to hide the action. Instead, the player’s thumbs are constantly glued to the screen, moving the character and triggering actions. The virtual stick was the perfect choice here; it is well-known to players and it is a device we’ve integrated into many of our titles, since it doesn’t require much space. And of course, the HUD must be thin enough to not compromise visibility.

In Titan Quest, the most frequently-used buttons are for spells, weapons, potions, and the teleportation portal, so I arranged these to be easily accessible, and to reduce the length of the necessary fingers movements on the screen.

I placed the teleportation portal button and the pickup/display loot button on the left side, near the virtual stick. This allows the player to hover over items on the ground and easily pick them up. Moreover, disabling this button during a fight prevents the character from picking up objects when he should be attacking. These buttons are not combat-essential, and this setup allows the player to keep his fingers around the virtual stick.

Four spells are always present, and each one can be configured by touching and holding the chosen button for two seconds until a drop-down menu with unlocked spells appears. Tapping your preferred spell allows you to customize the button. Below the action circle is a “spell switch” button. Since Titan Quest contains an impressive number of spells, we didn’t want to limit players to one deck of just four spells. Instead, I created two decks containing four spells each (Deck A has spells 1 – 4 and Deck B has spells 5 – 8). By pressing the spell switch button, the player can switch from Deck A to Deck B.

Regarding spells, we encountered an issue during development: some spells target a single enemy and others target an area. On PC, the player just needs to click the spell shortcut, aim with the cursor, and left-click to cast the spell. Alas, this is not an option for a touchscreen. For example, if in order to cast a spell you had to touch the shortcut and then the enemy/area, how would you cancel the action? So we devised a different approach for spellcasting: the player just drags the spell from the shortcut and “drops” it on the targeted enemy/area. Also, we made it easier to aim by adding a dotted line to show the player exactly where/what he’s aiming at – and since some fights are pretty intense, we added a slow-motion effect while aiming.

“Weapon spell” is the other button beneath the action circle, and it allows the player to assign a permanent spell to his current weapon. This gives the player a continuous weapon spell rather than a basic attack, but at the cost of some mana points. When the mana bar is empty, weapon spell reverts to a basic attack. Above the action circle, on the right side of the screen, are shown the available potions and their quantity. We added a default setting to automatically use potions if the player’s life bar falls below a certain level.

At the bottom of the screen, between the teleportation portal button and the “switch weapon” button (which, just like the PC version, allows the player to switch from weapon 1 to weapon 2), is the experience gauge. This shows the player how close he is to the next level.

BUILD A NEW INTERFACE USING THE ORIGINAL ELEMENTS AND STYLE

When creating all of these new buttons and elements that don’t feature in the PC version, I was inspired by the existing Titan Quest art approach. The colors I used are ocher, sand, and stone, while the forms for the interface resemble ancient arabesques. Some icons have also been reworked for better clarity and quality, such as the weapon switch and teleportation portal buttons.

I also created different icons for the action circle so that the player receives visual feedback from each selected action. It was therefore necessary to not only create an icon for each weapon type (swords, bows, and spell staffs) but also for the two kinds of proposed actions: a pick up/interaction icon and a “dialogue with NPCs” icon. For these last two actions I was inspired by the art of ancient Greece, particularly the human representations on frescoes and bowls, which often times are black characters with an ocher outline.

ADAPTING SCREENS

The inventory, masteries, and quest screens have also been adapted. In the PC version, all of these screens are windowed, and the game doesn’t stop when the player displays them. But for the mobile adaptation, we decided to present these windows in full-screen mode and pause the game in the background. It was thus necessary to readjust the items on every screen, because we wanted to show as much information as the PC screens do. For example, we opted for a drop-down window to display all the player’s statistics; in the PC version, this is done via two separate tabs. For inventory item management, the PC version uses a simple drag ‘n drop to either assign an item as “active equipment” (set 1 or 2), or throw it away. The touchscreen allows the same approach. For discarding an object, I just designed a simple drop box for “trash”.

Another innovation within these screens is the ability to switch from one screen to another without returning to the main screen – so I added three icons from the original game to each screen. It is a simple menu that is displayed in the same place every time, making it easy for players to switch between screens. I redrew these icons to mimic the originals, but in higher resolution.

Finally, for the “masteries” management screen, I adapted a “point” system for the touchscreen because the PC system was too small and difficult to use. By adding a point distribution module at the bottom of the screen, the player can easily increase the level of the spells he wants to use. All masteries-related icons were also reworked in order to better see what is selected and what is not. For the quests screen and the map, a simple readjustment was enough.

A point distribution module was added to the mobile version’s “masteries” screen:

A NEW ICON

Now we come to one of a mobile game’s most important elements: the main icon.

When the Titan Quest PC game was released, the icon was only displayed on the cpu desktop. But in today’s “smart” market, having an easily-visible, quickly-identifiable icon is crucial – mainly for standing out amongst the millions of apps and games that populate virtual storefronts like iTunes and Google Play.

I though the Spartan helmet was a good icon choice, since it matches the PC icon. After multiple iterations, the final look I chose is very similar to the ancient Greek depictions. The helmet is highly stylized, incorporating black on a background that appears as a cracked, damaged bright ocher wall. Also, the icon is highlighted by a border of repeating geometric patterns typical of the historical period.

So what have I learned from my Titan Quest experience? Plenty. I have learned that even though adapting a PC hack ’n slash to a mobile device is a tall order, it’s really exciting. Being immersed in an existing art direction certainly limited my design options, but it also helped push the limits of my creativity, allowing for more precise, substantial results than if I had started from scratch.

I also realized that multiple fresh subtleties and ideas can be infused into a new platform (like mobile), while still maintaining the authentic experience players crave from a well-known title like Titan Quest. Every effort must be made to ensure the gameplay is familiar for players of the PC version, while simultaneously providing a uniquely modern experience for new players.

For everyone at DotEmu, this game has greatly enhanced our collective experience. The fundamental design steps we perfected while porting this title will provide a solid foundation for future PC games that we adapt for mobile devices.

Stéphane Perez, Creative Director at DotEmu