Devblog – How to adapt Titan Quest to mobile and tablet?

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!

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.

“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.

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.

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.