Final Space: The Rescue (2022) is a VR game developed in Unreal by Grab Games that features FPS combat and online co-op for groups of up to four. The game is based on the TBS series Final Space as a standalone and officially canonical story. Players can go solo or work together to clear the campaign and experience the world of Final Space in immersive virtual reality. As the sole UI/UX designer, I was tasked with creating all flows for the game and making a UI style that reflects the style of the show but also works in VR.
The above image was composited by me, featuring character illustrations by Rebecca Wu. The logo is based on the logo from the TV series, but remade from scratch for our game.
Wirebox first pass at the UX flow for solo mode.
UX flow using actualized UI elements for starting a game in co-op mode with custom lobbies, either as the lobby host or as a member of a custom lobby. The leads had originally planned on using alphanumeric numbers for Lobby Codes, but I pushed for numeric-only codes because a numpad is much easier to use than a QWERTY keyboard is in VR.
Players can experience the game on their own or online in co-op with up to four friends and/or strangers. (Mock-up made in Illustrator)
Lobby hosts have control over chapter and difficulty selection; other players must wait for the lobby host. (Mock-up made in Illustrator)
Each private co-op lobby is given a unique code that other players can enter to join said lobby. (Mock-up made in Illustrator)
Once a player has selected a character, it is locked to other players. (Mock-up made in Illustrator)
Two of the many flows for the Settings menu in the UI attached to the player's wrist that can be brought up at any time with the touch of a button. Because of the number of buttons and toggles in the Settings menu, I opted to mark them by different tags, differentiated by color, shape, and number. If I had used arrows, these flows would have been completely unreadable. (Mock-up made in Illustrator)
Our art director wanted a glitch effect to occur every few seconds for all buttons, so I took it upon myself to see if there is a way to do it programmatically. Our main technical artist only knew how to do this by manually cutting up the source art outside of Unreal, but I felt that it must be possible to get what we want with materials and code, though I admittedly am not too familiar with materials in Unreal, and spent quite a lot of time watching numerous tutorial videos on materials that can create a displacement effect.
After much trial and error, I was able to create something that generally had the effect we wanted. The aforementioned technical artist took what I made and using that, he made a cleaned up version that could be applied to any button with any source image.
The left images are the final results I got with materials I made on my own, and the right image is using the clean glitch material my coworker created from the fruits of my labor, plus additional effects to create an even more florid glitch effect. (Animations made in Unreal)
Intro animation for menu titles, which plays each time a player clicks into a new screen. The effect was made with widget animations, and uses nodes to change text. (Animations made in Unreal)
A subtle glitch animation on the menu title text, which plays every few seconds to add some additional visual candy to the UI. (Animations made in Unreal)
The Settings menu as seen in game (through the Unreal project file). The beginning of the video features some screens I made for the monitors in the ship for that space adventure mood. Due to time constraints, we were not able to implement the displacement effect I made for buttons as that would require us to replace each existing button with a number of custom buttons, but we were able to add the subtle glitch effect to the headers of each menu.
Concepts for when players hack into computers. (Mock-ups made in Illustrator)
Final animations for the hacking sequence in chapter two’s prison tower. I concepted and designed both animations on the dashboardin Illustrator, then laid them out as materials and animated them as blueprints in Unreal. The latter half of engine work was done with support from George Brauneck.
Animations for screens that appear in the Shooting Gallery area where players can try out some target practice and hone their firearm skills. (Animations made in Unreal)
Introductory video that plays to welcome players in FSVR's setting. (Animations made in Unreal)
Animation that plays when a certain prisoner has been released. (Animations made in Unreal)
A selection of display screens I created in Illustrator that appear on monitors throughout the game. In total there were a couple dozen I made.
A video of the Unreal widget for the Tutorials. All parts of the designs and animations were made by me. This video does not show the additional controller types that are supported in the game.
Promotional and store images I composited using cut scene illustrations by Rebecca Wu & Ashton Johnson and screenshots from the show. The solo character illustrations were originally done in Illustrator, but the fill paint was strangely messy, necessitating me to redo the vectors.
The credits that play at the end after finishing the campaign. I first designed dozens of small “fake UI” elements in Illustrator, pulled them over to After Effects, then started compiling the many different components in the 4+ minute video. The illustrations that appear were drawn by Rebecca Wu and Ashton Johnson. Otherwise, all other elements of the video were created in After Effects by me, including the space background which is made of a variety of particle emitters.