UI Breakdown: Hyper Light Drifter

Heart Machines Debut title Hyper Light Drifter

“Echoes of a dark and violent past resonate throughout a savage land, steeped in treasure and blood. Hyper Light Drifter is an action adventure RPG in the vein of the best 16­bit classics, with modernized mechanics and designs on a much grander scale.” — HeartMachine

Studio Heart Machines debut title really does stand out in the varied field of independent titles with its visually striking action RPG Hyper Light Drifter. You control the Drifter, a character that has access to technology that has long been lost by the inhabitants in this mysterious world and who are all now suffering from an unspecified illness. What really catches the eye about Hyper Light Drifter is the great use of bold colourful pixel art style that while contemporary still harkens back to titles of the 16 bit era. In this breakdown piece we are going to get in-depth with Hyper Light Drifter’s art direction and how it informs the UI style and form. From the contemporary use of colour to how nostalgia for old 16 bit titles reflects in the design. So let’s begin and breakdown the art direction !

Art Direction

With its neon fantasy aesthetic Hyper Light Drifter’s beautifully rendered introduction sequence does a fantastic job of establishing many aspects of its art direction. You can see the bold use of very bright colours that help set it out side the normality of the usual action RPG fare. Regular Action RPG’s would have green trees, grey rock etc but Hyper Light Drifter turns that on its head with deep blues for the grass and Neon red leaves. You can also see the rhombus motif playing an integral role to the aesthetic early on too (we will examine the motif further).

Unique colour use for the world of Hyper light Drifter

Creator/Designer Alex Preston for Hyper Light Drifter has referred to Super Brother’s IOS title Sword and Sorcery as a big inspiration for the style of Hyper Light Drifter. Sword and Sorcery’s approach to using flat colour as the basis of their look and feel (and then overlaying large gradients or a vignette on top) introduces very subtle complexity to the games visuals, this is something Hyper Light Drifter uses extremely well. This cleverly adds a more variety and fidelity to the games aesthetic without adding a lot more work to the artists schedule.

L: Delphines Software 1994 title Another World R Supergiants Sword and sorcery

There is also some strong links from Sword and Sorcery and Hyper light Drifters look and feel that can be seen in a 16 bit era title called Another world By Delphine Sofware. This game at the time was cutting edge using unique roto scoping techniques to create the animations of the main character who was rendered in pixel art style. What is also interesting about Hyper Light Drifter, Sword and Sorcery, and Another World is the minimalist approach to storytelling and the feeling of loneliness that you feel as you explore all three game’s alien worlds. In all three cases these alien worlds were brought to life using big sections of flat colour then small details etched on top. Very similar to the pixel art techniques used in Hyper light Drifter and Sword and Sorcery. Pixel art style games are quite prevalent in the indie game scene, for a few reasons.

1: Simplicity

Indie developer’s projects tend to consist of very small teams working on less visually complex titles that normally makes up top ten charts. Assassins Creed , Call of Duty and Uncharted typically have hundreds of people working on them. In order to create something in this vein you would need a team of very specialised programmers such as having a separate engine, graphics and sound programmer for example. A smaller team means you have to make compromises and one of the more complex expensive aspects in games development is graphics and that brings us to our next point.

2: Expense

You don’t need teams of artist with expensive sophisticated 3D pipelines to sit down and create environments and characters with pixel art. You can have one artist knock up pixel art with Photoshop or free software such as Gimp without needing a lot of technical assistance putting the art in the game. With 3D there is a sophisticated process (pipeline) to make sure the 3d model, texture, shaders and animation all make it into the game as they were intended.

3: Nostalgia

This plays another part in the indie game scenes use of pixel art, nearly all games from the 16 bit era used the pixel art style because of technical restraints at the time. A lot of developers and older gamers still have a deep fondness for titles of that era, in Hyper Light Drifters case its closest 16 bit era equivalent is possibly Nintendo's Legend Of Zelda Link to the past. It can also legitimise an indie title in veteran gamers eyes as in this modern era of sophisticated 3D worlds and characters they can remember when pixel art was the peak of technical achievement back in the day. You can see how Hyper light drifters developers are embracing the nostalgic elements of there title with the special 16 bit cartridge release of hyper light drifter.

SNES Cartridge merchandise sold with the Special Edition of Hyper Light Drifter… very nostalgic!

Motif

Throughout the game from the title screen to the environments you can see heavy use of this rhombus form, going so far as to create the make up of the actual level structure. At one point you can see the four main areas of the game at different ends of the rhombus shape.

Virtually any still captured from the game you can find examples of the rhombus motif. Going as far as the title screen artwork and gaming merchandise such as the vinyl soundtrack cover or event shirts adorning the drifter character.

Various merchandise showing the rhombus motif

It’s prevalence though out the game design is very strong, it does start to build a real bond between all the different elements of the world.

User Interface

The bright neon aesthetic is pushed into every corner of Hyper Light Drifter and the User Interface is no exception to this rule. From the bright flat colour blocks that make up the Drifters energy bar to the icon design for the drifters weapons, its visually very consistent. One aspect for usability reasons I suspect that lacks these bright colours is the map screen, as In order to see the way point marks and other map related widgets the background has to be more mute in order for these elements to pop.

Nearly monochromatic map screen with bright neon icons layered on top

Virtually the only time text actually appears in HLD is during game system sections of the UI, such as pause menu, settings pages etc. Additional text pops up momentarily to let you know controls during the tutorial flow at the beginning of the game or explains a button command when a new feature is being unlocked. Being an action RPG game where story plays a big role in the experience how do they convey plot ?

Example of the In speech bubble illustrations

There is a story to Hyper Light Drifter and that is entirely told through images (excluding a few cut scenes) set inside speech bubbles, these appear as and when you interact with NPC’s. After this interaction the game will quite often then immediately transition to the world map screen and then you can see a marker placed on the map. Effectively cutting the need for NPC dialogue expelling to you whats going on and where to go. Bold and shrewd move by heart machine as there would be little need for localisation in this design as it’s visually universal.

Upgrade screen

You can see the in the above upgrade screen elements of the games glyph design occurring in the flourishes of menu panels. The glyphs add a increased sense of mystery in the games world. This is exemplified by having a game with no actual dialogue or written narrative but various environmental elements and UI adorned with this mysterious glyph design. When a game has little, or next to no text all these small flourishes are paid more mind and thus drawing a player further into its world.

Effectiveness

We have touched upon the nature of Hyper Light Drifter’s minimalist style choices regarding conveying story and other information to the player, and this can lead to a little confusion when using some systems. The leveling system is a bit confusing, as its completely visual with no guide on how to use it. You collect small yellow blocks that look like coins and when you get to four you unlock an upgrade point. It did take a while to get my head around this, perhaps because the icons looked a little like money? It did start to click with me after a few goes but I was wandering around without actively being aware of what these icons did. That being said the majority of the game is very easy to get to grips with even though the minimalism of the game design can leave you wondering whats going on sometimes.

HLD Character Stats page, with upgrade points shown.

Final thoughts

Hyper light drifter is a pleasure to explore, and as I battle my way throughout the game (its quite difficult!) the whole experience really does feel contemporary and yet has nostalgic undertones. There is that sense of loneliness you get from 16 bit titles like Another World and Super Metroid, but with the unique visual style it really feels fresh. Full disclosure here, I am still battling my way through the game and will definitely return to do an update on any new visual experiences I have with the game.