Spyro Reignited Trilogy

Toys For BOB
Senior UI Artist, UX Designer

Russell Vaccaro

This was the studios first game created using the Unreal Engine, with a one-year development time for all three games. I was responsible for the oversite of the UI from beginning to end, working with a UI engineer.
We created one UI for all three games, to help with the usability from game to game. The challenge was to make the usability similar while making them visually stand out. We achieved this by creating a color palette for each game and adding watermark logo to all the menu backgrounds. The UI is the one area that changed the most in the remake, utilizing 20 years of usability advancements and consolidating a look that could be used for all three games.

Click here to view

MOVIE EXAMPLES

Game Save Screen

This is a fun icon of Spyro running used as an overlay in the lower right of the screen each time the game saves. Example of the animation can be found below.

Placeholder Picture

Game Loading Screen

This is an image (based on the box art) that appears prior to the game loading.

Placeholder Picture

Save Slot Screen

The player is directed to this screen starting the game for the first time. This screen was created as a call back to how games used to have multiple save files instead of one per player profile. The save slots have four percentage totals, one for each game and one for all combined.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Title Screen

Created all the art and effects of the background, which is used throughout the game’s screens.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Game Select Screen

This screen was created to select one of the three games. The Spyro poses are based on the original box cover art titles. (Examples are shown below in the Gallery Screens). Each game has its own menu color palette. The backdrop images reflect the most recent level played.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Loading Screens

This game has three types of loading screens which are based on the original games. The first one keeps the focus on Spyro transitioning between levels for a seamless experience. The second one starts with Spyro flying on a black screen to reveal a short text message when coming from a menu screen. The third reveals a portrait image the boss Spyro is about to battle.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Level HUD

The HUD was created so that all three games felt similar while also be distinguishable at a glance. This was accomplished by changing the menu and gem colors. Each game also has a unique center icon.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Boss HUD

The boss HUDs where created to reflect the original game layout and style. Here are some varying examples.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Mini Maps

Mini maps where added to all three games even though they were not in all the original version. We did not have an automated way to make these mini maps. The process required paint overs of top-down screenshots which required a lot of back-and-forth work in game to make sure all the elements fit correctly. These were worth the work because the maps are so helpful in the overall gameplay experience.

Placeholder Picture

Pause Menus

The background shows a Spyro pose and game logo unique to each game. These are added in addition to the different menu colors to help communicate which game is being played. Screens were created to view varying bits of information (per game) in roughly the same areas.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Options Screens

Here are some examples options screens from all three games.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Move List Screens

Examples below show how the screen was used to show varying degrees of information per game.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Guidebook Screens

This is the most useful screen in the game, allowing the player to view game totals, level totals and fast travel with ease. Each game had its own version (Inventory, Guidebook and Atlas), which needed to be redesigned so that one layout worked for all three. It is easily accessible from pressing the back button on controllers while in a level or from the pause menu. A couple highlights, we were able to reduce the page depth from several pages to one and added fast travel, both helped the usability of gameplay tremendously.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Skill Point Screens

Skill Points were created as a chase for the players prior to the console Achievements. Screens where created to show varying degrees of information, per game. The last page shows updated info on Art Gallery progression.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Art Gallery Screens

The original games showed retrospective screenshots of the characters after the game was completed. These images where replaced with concept art for the remakes. Here are some examples of those pages. The images below were recreations of the original box art. I helped the marketing team oversee the creation of these images.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Flight Screens

Examples of the Flight HUD and screens.

Placeholder Picture
Placeholder Picture
Placeholder Picture

In-Game Screens

Examples of in-game button and dialog containers.

Placeholder Picture
Placeholder Picture
Placeholder Picture

3D Text

Modeled the 3D letters and created a golden metal material that included the alternating bouncing animation. Worked with engineers in creating these level labels.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Game Logo

Worked with marketing team in creation of the game’s logo.

Placeholder Picture

Icons

Portrait, Talisman and Orb icons.

Placeholder Picture

Icons

Flight and Objective icons.

Placeholder Picture

Animated Icons

Gems, Dragon Egg and Spyro Portrait

Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture

Animated Icons

Save Game Icon

Placeholder Picture

Crash 4 It's About Time

Skylanders Imaginators