SKYLANDERS: SPYRO'S ADVENTURE

UI LEAD ARTIST - Nintendo 3DS (2011)

When Activision studio Toys For Bob developed the first Skylanders console game, Vicarious Visions was tasked with creating a handheld version. This required clever solutions all around: a new way to connect a portal and bring Skylanders into the game (you can read more about that here); an alternate kind of platforming gameplay; a different UI to interact with these new systems; a different gameplay camera with considerations for 3D; and exploring how to layer a HUD over a 3D view. On top of that, we still needed to develop a fun, engaging game.

These assets and Photoshop layer effects were subsequently used by developer Toys For Bob as the basis of Skylanders Giants' UI.

Players have 3 slots where they can save their progress.

The top screen shows stats for the selected save file; on the lower screen, each slot is distinguished by a large icon of macro game progress reinforced by a granular collection count and elapsed playtime.

Slots can be selected for play, or deleted to make room.

On the lower screen, players choose a level within an area. Most parts of the game have a series of 5 levels, alternating between platforming (large blocks) and arena levels (small blocks). Dimmed, grayed blocks are not yet playable.

The upper screen shows a checklist for the selected level, outlining objectives (which will earn crystals) and elemental requirements for specific challenges.

Level load allows room for character and world building, through dialog and lore.

Players browse their assortment of heroes here.

Tabs across the top jump to Skylanders of a specific element. Tabs glowing a color indicate the player has Skylanders of that type.

The central buttons show Skylanders within that element; those dimmed gray are locked, while those in full color are part of the player's collection. Tapping a color Skylander lets the player view more info about them.

The lower buttons allow paging and exit.

Here, players view more information about their collected Skylander.

The view is composed of multiple sub-screens, including an upgrade tracker, move breakdown, etc.

The lower buttons allow paging and exit.

While not literally true of our game, a red-blue anaglyph is a fitting symbol for our project both for its 3D nature and because red and blue sum to purple, like our central dragon hero.

< PREVIOUS PROJECT

NEXT PROJECT >