Regina Yang
UX designer | UX reseacher
​Hollow Knight
Case Study | Game Design
Hollow Knight is a classic 2D action adventure game, requiring the players to explore twisting caverns, ancient cities and deadly wastes; battle tainted creatures and bizarre bugs; and solve ancient mysteries at the kingdom's heart.
​
I ported the game from PC to iPhone 8 by redesigning the HUD screen user interface and Inventory Menu screen user interface.
​
​This is a course deliverable for the course INF2164 Game Design.
​
​Type
​Role
​Tools
​Time
​Location
​Solo Project
Game designer
UI designer
​
​2 weeks
Figma
Photoshop​
​Toronto, ON
​IDENTIFY
​Game Mechanic
-
Genre: adventure, action, indie
-
Platform: Microsoft Windows, macOS, Nintendo Switch, Playstation 4, and Xbox One
-
Camera: third-person 2D game-controlled
-
Controls: keyboard, mouse, Nintendo Switch controller, PS4 controller
-
Character: the Knight and NPCs
-
​Time: turn-based game
​Game Loop
​Game Pillars
#1
​Exploration
It is a story in a forsaken, decaying, and majestic world with many creatures and mysterious ruins. Players are able to go any areas they wish whenever they wish.
#2
Story
​Hollow Knight has a rich and linear narrative that focuses on the Knight's story. At the same time, players' action will affect the final outcomes.
#3
Sound
​The sound also makes the game unique. The orchestral music goes from epic grandeur to intimacy and does that by complimenting what the visual art tells us.
#4
Combat
​There are a lot of strange creatures that the Knight would encounter while exploring, many of them are hostile and must be defeated.
​Game User Interface
I chose HUD screen and Inventory Menu screen to redesign the user interfaces that can be ported to mobile platform. Before redesigning, I analyzed the current user interfaces on PC to identify the core elements.
​*Click to enlarge the image
HUD User Interface
​Hollow Knight has a minimal user interface design. In terms of UI components, the HUD only contains Health, SOUL, and collected currency for players to view the information or the current condition. The more minimal HUD is, the immersive experience game offers. Meanwhile, it reduces the users' learning cost while playing the game.
Inventory Menu User Interface
​The inventory menu contains several areas that show different inventories. Players use the mouse to click the ones they are looking for.
​Redesign
​What have been changed?
-
Control Scheme: PC game is controlled by the keyboard and mouse. Clicking or holding different keys will have different actions. Players are allowed to change the control scheme based on their use habits.
-
Screen Dimension: screen dimension on PC game is 1920 x 1080 pixels and I ported to iPhone 8 1334 x 750 pixels.
​
​
​HUD Screen - Mobile
To design the movement control, I followed the “Gamer Stance” where players hold the gaming device with two hands using both thumbs as controllers. I also realized that there are relative tracking area where players can press with ease and where they are hard to reach. As a result, I designed the touch control that matches the players ability. There are many buttons to trigger different actions, for example, jump, dash, attack, heal, etc, which are placed on the right corner of the screen. All buttons are appropriately sized for iPhone 8 screen dimensions (1334 x 750 pixels). At last, I used some classic or essential icons from PC platform to be the buttons in the mobile platform for players to check inventory, journal, map, and setting, these are placed on the right top corner.
Inventory Menu Screen - Mobile
The inventory menu has three components, including Equipments, Items, and Charms. If the component is selected, then the component is highlighted with color. For example, “Items” is selected, then “Items” is highlighted, which provides feedback to players. Once reaching the list of “Items”, players can use digits to swipe down in order to look more. Also, players can use digits to select the item and the description for that selected item will be shown on the right side.
Different State of Buttons - Mobile
​Jump
“Jump” button is being tapped and it is highlighted with the aureole. Meanwhile, the Knight is jumping from left to right, therefore, the right arrow in the movement control is hightlighted. Also, it is a day time HUD where everything is same as the night time HUD except for the color of buttons slightly lighter than the ones in night time HUD.
​Heal
The Knight is healing itself by players tapping the “Focus” button. After tapping the “Focus” button, it takes two seconds to complete the healing process. Therefore, the progress circle is around the “Focus” button.​
​Super Attack
The Knight is performing the Super Attack to defeat the enemies, which is triggered by holding and dragging up the “Attack” button. Performing Super Attack requires players to gather the energy for 2 seconds (charge attack).
​Cast
The Knight is doing Cast where the “Cast” button is holded and drgged upward. When “Cast” button is holded and dragged upward, the Knight will perform a blast foes with screaming SOUL. If the “Cast” button is holded and dragged downward, the Kinght will strike the ground with a concentrated force of SOUL.