Overview

Undertale for Android is a port of the video game Undertale from PC and consoles to Android mobile devices. This exercise is a design challenge to reproduce a corresponding user interface and controls scheme on a vastly different platform while matching an existing design aesthetic.

Undertale for Android aims to redesign a new control scheme for movement in the overworld, UI for the game’s menus, and battle controls and interface. All of these game mechanics require new solutions to accommodate for smartphones touchscreens and lack of tactile inputs.

Just here for pretty pics?

My Role

UI Design

Tools Used

Figma

Timeline

2 Weeks

Design Brief

“Select any existing video game from the last 40 years that has a duration of at least 1 hour and poses a challenge to the player. Avoid interactive story-based experiences, thought experiments, post-modernist non-games, or any game that can be played with fewer than 4 distinct inputs. The port should be non-trivial.

You must select a specific existing platform and use its specifications form controls, inputs, and
display resolution. Don’t port for VR, port for Oculus.

Your HUD and UI is expected to match modern fidelity and conventions, so you may have to
rebuild UI assets from the original game, or use them as inspiration. The HUD should match the
control scheme and sizes of the new platform.”

Project Objectives

01 / Redesign Movement for Touch

Improve the wayfinding experience for students on campus.

02 / Redesign Game Menus for Touch

Using reviews and usage data, build a knowledge base of quality tested wayfinding information.

03 / Redesign Battling for Touch

Using reviews and usage data, build a knowledge base of quality tested wayfinding information.

Undertale Overview

Undertale is a single player, indie, 2D, RPG game developed and published by Toby Fox on PC, Mac, and Linux, and developed by Toby Fox and published by 8-4, Ltd. on PS4, PSVita, Nintendo Switch, and Xbox One. Players control the protagonist, who while climbing Mt. Ebott, accidentally falls into the world of the underground: a land inhabited by mostly friendly, sometimes frightening, and oftentimes hilarious monsters. Players navigate the underground with the goal of finding a way to return to their life on the surface, making friends and sometimes enemies along the way.

Mechanics

Battling

One of the game’s most important mechanics is the battle mechanic. A mechanic some players might find reminiscent of the Pokémon series, players will encounter random interactions with monsters while traveling through the underground that they must engage with. While a very very small number of monsters can be fled from, the large majority must be either killed, or pacified and then spared before the encounter can end.

Bullet Board

Part of this mechanic is the game’s bullet hell feature where players gain spatial control over a representation of their character’s SOUL, bound inside a rectangular box/board, avoiding attacks from opponents which cause damage. Once the short bullet hell period is over, the opponent’s turn ends and the player is able to choose another action during their turn.

Sparing

Should the players decide they do not wish to FIGHT or kill an opponent, they can choose to spare them by selecting the correct action in the ACT menu, and then surviving until their next turn where they can then select “spare” from the MERCY menu to end the encounter peacefully.

Morality

Baked into the game’s story and battle mechanics are moral choices the player must make from the very beginning of the game. Early on, players are informed that they are not required to kill any enemies in the game, and from the player’s first movements, the game, its story, and its characters begin responding to these choices.

Port Changes

In designing a port for Undertale, a number of changes were made to fill in gaps for lack of physical button input. Despite being available for platforms that do have touch capability, no version of Undertale makes use of device touch capability.

Increasing Space for Touch Controls

One of the most frequent changes made to the game’s user interface in this port was increasing the space allocated for on screen objects because of both small screen size, and the need for touch control.

Menus

Game menus, usually tight and compact because of button selection, were expanded and made larger to accommodate for smaller screen size, as well as touch functionality.

Original Undertale
Original Undertale Menu
Undertale for Android
Undertale for Android Menu

Given the size of contemporary smartphones, and the fact that players wouldn’t be using buttons to select menu items, the margins between menu items were increased. This allowed for more space between items, reducing the possibility of players mis-tapping the wrong item. Menu items were also given a border, increasing the touch target size for each menu item and allowing items to be clicked on their right side and much of their text to still be seen while tapping. Since Undertale’s overworld is paused when the menu is active, the menu size was increased to afford this additional space.

Previously, due to the nature of button selection, a menu item is highlighted at all times (fig. 1 in the left image this is indicated by the grey “ITEM” text and the heart next to the “Say Hello” item in the submenu). This isn’t the case with touch controls as players don’t always have their fingers on screen; because of this, the heart icon was removed. Now, selected items like the “CELL” menu in the image on the right, are highlighted in yellow.

Overworld

In Undertale for platforms like PS4, Xbox One, Nintendo Switch and Playstation Vita, because of the ratio of the screens they’re played on in comparison to the game’s display area ratio, the game often has large black bars on the left and right side of the display area (highlighted in red below). In the game’s settings, this can been remedied with patterned frames, but the display area remains the same ratio.

Original Undertale
Original Undertale Ratio
Undertale for Android
Undertale for Android Ratio

In Undertale for Android, The game’s display area is stretched to fill more of the screen creating smaller black bars and utilizing more of the device’s screen as playable area. Again, this was done to make it easier for players to select exactly where they want to move their character and select which object in the world they wish to select, aiming to reduce mis-taps.

Bullet Board

The bullet board is where much of the game’s challenge takes place and is a mostly static, but sometimes dynamic and moving play area dependent on the opponent and their abilities.

Original Undertale
Original Undertale Battle Board
Undertale for Android
Undertale for Android Battle Board

Again, to accommodate for Undertale for Android’s port to a typically smaller screen size, and now tap and drag control of the character’s SOUL, more space was created for movement as the player must now navigate their soul around the bullet board with their finger as opposed to fine button or joystick controls. On top of this they also must do so while likely covering their view of their SOUL with their finger. The expansion of the bullet board was done to balance the challenge added by adapting to the touch interface. To do so, the opponent’s character sprite was moved higher on the screen, and the aesthetic background patterns disappear while attacking, returning after the bullet hell period.

While rotating the screen to portrait orientation for bullet hell segments was considered to create more space, this was thought to be too tedious to ask players to do repeatedly and may cause issues with players’ screen orientation settings.

Player Movement

Undertale for Android
Undertale for Android Player Movement
Animal Crossing: Pocket Camp
Animal Crossing: Pocket Camp Player Movement

Destination Tap or Drag

With no button input available via joystick or directional keys, Undertale for Android uses a destination tap or drag system of movement. Reminiscent of games like Animal Crossing: Pocket Camp, players can tap the location they’d like their character to move to, and the game will respond by moving character there after the tap, taking the straightest path possible. If players place their finger on a location on the map and drag it in a particular direction, the character will follow to the tap location, and continue to follow if the character proceeds to continue dragging their finger.

This was considered a viable solution because while Undertale’s bullet board segments require fine control of placement, they are very few places in the game’s overworld that require very fine control over player location where this system is not appropriate. The situations that do (e.g. the Undyne chase segments), require user testing and evaluation.

Bullet Board Tap or Drag

The Bullet Board mechanic will make use of a similar system of movement, where players must first place and hold their finger on their SOUL before the bullet hell projectiles start, and drag their finger around the board area to avoid projectiles. Should they release their finger over the SOUL icon, it will remain in place.

Menu Access

With no buttons, therefore no dedicated menu button, players navigating the overworld must select the menu button from the top right corner of overworld screens to open the game menu and make selections. Tapping off of the menu or submenu closes the corresponding menu.

Solutions

New Game UI and HUD

New Game Menu

Undertale for Android: New Game Menus

New Control Scheme

Undertale for Android: New Control Scheme

Prototype

To help illustrate these changes to the interface and many interactions, I created a very short prototype as examples of these interactions.

Related Projects

A material design UI Design exercise aimed at fostering urban connectedness allowing users browse, review and enhance trips by putting their geo-location to use.

The UX design behind a smart navigation app helping U of T students customize their wayfinding experience on campus by tapping into campus specific knowledge.