Design Thinking: Reverse Engineering Spyro the Dragon
Challenge Activity: Reverse Engineering Spyro The Dragon - Rapid Ideation & Prototyping
Figure One - Spyro and Sparx Gif - by myself (Hanni Bow, 2021)
The Task:
One of the best ways to hone your prototyping skills is to reverse engineer the finished work of other practitioners you admire. This allows you to practise with the various tools and unpack the design theory behind the work in question.
To complete this activity, identify an artefact you feel is particularly interesting. This could be anything from an inventory system UI for a game to a museum website that utilises AR or VR. The more experimental and interactive the artefact you choose, the more challenging this prototyping activity will be.
Select one or two of the prototyping methods outlined this week and build quick prototypal representations of your chosen artefact. Note down any interesting characteristics of the artefact. Perhaps, you notice the colour palette is used in a certain way or the layout follows a standard grid system. Depending on your chosen artefact, you might want to annotate the dimensions and analyse the padding and spacing used. If you are creating a storyboard for a cutscene in a game, you could identify key components of the narrative arc or highlight various camera shots and how they are used to create drama.
This is an extremely open brief designed to allow you the freedom to choose an artefact you will find enjoyable to reverse engineer. We want you to dive in and have some fun. Donât take the task too seriously â instead, enjoy trying to get inside the minds of other creative practitioners.
My Process
In my most recent blog, I went into the brief history of Spyro the Dragon and delved a little deeper into how the creative team behind such an iconic game brought a little purple dragon to life.
For the challenge activity, I focused on unpacking fundamental designs and the dynamics and mechanics which run throughout the game, with consideration of how the landscape and surrounding environment help develop the narrative.
I wanted to explore in more depth how these foundations enable interaction for the player and how they assist in gameplay. I started the process by using the mindmap ideation technique to note down all of my discoveries and thoughts from my research period. I also incorporated notes that Iâd written from playing the game and any key points of interest which I wanted to develop upon. I knew specifically that I wanted to look further into the dynamics and mechanics of the game.
Initially, the terminology baffled me, surely dynamics and mechanics are one and the same thing? After a little more digging I found an explanation that worked for me.
âTo bring some clarity around the difference in these terms, game mechanics are the various actions, behaviors, and control mechanisms that are used to âgamifyâ an activity â when combined, they create a compelling and engaging user experience. The motivational nature of the gamified experience then results in the game dynamics that surround the interaction with the game mechanics. People have fundamental needs and desires â the desire for reward, status, achievement, self-expression, competition, among others.â (Denton,2021)
From this, I discovered key dynamics within the game which Iâd taken for granted. I'm not really considered how some of the key mechanics shaped the dynamics within the game, and I was surprised at the volume of mechanics used. I decided to break these down, which you can see in the table below.
Dynamics Mechanics
Progression >>> Worlds and Mini Worlds
Achievements >>> Challenges
Rewards >>> Dragons, Gems & Eggs
Collection >>> Dragons, Gems, Eggs, Fireworks & Keys
Discovery >>> Open World
I discovered that these key dynamics (gameplay) were set out by using key mechanics (rules) within the game. By exploring different worlds and mini-worlds, accessed via the balloonist or portals you were able to progress through the worlds and achieve a certain status, getting you one step closer to defeating Gnasty Gnorc.
The collection of dragons, gems, and eggs allows the player to collect to gain certain rewards. By collecting a certain amount of items and depending on the world/level youâre on you can progress quickly in the game, without completing all the mini levels.
Spyro also has some not-so-obvious dynamics. Discovery is the main undercurrent throughout this game, whether itâs by jumping on stones to unlock secret portals or seeing a sparkling gem far off in the distance. This open-world mechanic is fundamental to the game's replay and success.
âActually just exploring the world was fun, that was gameplay in itself. That was our big epiphany, taking the player into another world, one that theyâve never imagined and letting them explore, discover it on their own. That could be an unforgettable experience.â (Hastings,2018)
Sketching
After organising my thoughts a little more via the mindmap ideation technique and looking through the course prototyping toolkit examples, I decided to use two prototyping techniques to reverse engineer this game. The first technique I chose was to sketch the visual elements within the game. I broke these down into screens within the first world and a mini world opening scene.
As I sketched and played I realised that a hidden menu appears at the top of the screen when you release a dragon or collect an item. When collecting or releasing, a menu pops up to show you the amount of gems youâve collected so far, the total dragons released and the amount of lives you have left. These visual indicators of achievement are a brilliant tool and something Iâd never really noticed or considered before.
âSketching is generally thought of as the bread and butter of design ideation. With their ambiguous nature sketches allow designers to interpret both their own and someone elseâs sketch as something different than what was first intended, thereby setting the ideation on a new path. This is known as re-interpretation.â (Ekströmer & Wever, 2019)
Iâve broken down some of the key design concepts which you can see in the sketches below. I annotated each sketch for a broader description and to highlight relevant visual/non visual rules and how these contribute to the dynamics within the game.
Figure 2: Crystal Dragon Gif - by myself (Hanni Bow, 2021)
Sketching Prototype - Spyro The Dragon
Opening Scene - Spyro The Dragon
Freeing Nestor Scene - Spyro The Dragon
Opening Scene
Wide Horizontal View / 3D open world
Camera focused behind Spyro and Sparx
Top bar menu flashes and then is hidden from view
Bright, vivid colour pallet
Obvious action (includes path to dragon)
Happy, joyful soundtrack
Set at mid -day
Medieval castle garden setting
Easily see gems, portals, dragons, enemies and paths to explore from 1st screen
Key landmarks such as castle in the distance
Boundaries concealed by scenery and landscape
Freeing Nestor
Stepping on dragon platform activated cut scene animation
Music changes to crackle and sparkle
Bright light flashes across screen to reveal Nestor accompanied by subtitles âRescued Nestorâ
Audio is triggered where Nestor introduces world, sets task and tells you how to progress to the next world (via balloonist)
Spyro and Sparx interact with Nestor
Camera Angles change throughout, pan out for dragon reveal, close up for dragon character details, pan out for full world view with dragon from Spyroâs view and then to Spyro from Nestors view. Then back to behind Spyro when cut scene has ended.
Dragon flys off and is replaced by a fairy who zaps you to save the game
Maze & Minions Scene - Spyro The Dragon
View From The Hill Artisanâs - Spyro The Dragon
Maze & Minions
This is an open-world game so part of the gameplay dynamics is discovery, itâs clear to see that from the world you can roam freely and explore different routes
Around you, there are key landmarks that help you navigate the world
Enemies in this world run away from you but in various locations leading you to explore the world more
Gems glint and sparkle to catch your eye
Portals are visible from the peninsular above which give access to mini-worlds
A dragon can also be seen from a first glance around
Boundaries seem nonexistent but they are cleverly encased by the architecture and landscape (castle garden walls)
Land is split into sub-sections containing portals such as Tunnels and turrets leading to Town Square. Maze which leads to Dark Hollow and the dragon head which conceals the boss level
Colors remain consistent across the world
Always remains mid-day even when you revisit
View From The Hill - Artisans
The world is expansive features landmarks and transitional elements such as the Maze, Peninsular, Tunnel, and Castle to provide navigation and for ease of transition from area to area
Each area represents the portal mini-world eg. Dark Hollow which is sections within the maze of the main world
Fodder is mixed into the landscape and roams freely
The mixture of geographical landmarks adds to the storytelling and narrative behind the game and provides separate areas of play even though open
There is another castle door that remains locked this gives you a clear idea of which way youâre supposed to progress
Gems are littered around leading you to various areas
The camera remains behind the character
Dark Hollow Entrance - Spyro The Dragon
Entrance To Toasty - Spyro The Dragon
Entrance To Toasty
Plain meadow scene with dragon
When releasing the dragon cut scene activated
Subtitles appear with âReleased Argusâ
Argus tells you that you have to complete another mini-world before you can enter Toasty (the boss level)
Dragon head when opening is interactive with smoke billowing from the nose
When the dragon cut scene finishes top menu pops up with a number of found dragons, gem count, and lives left
This space feels more enclosed with fixed boundaries
Entrance to Toasty meadow is semi-hidden and is hard to see as it has a small opening
Portal follows the same functions as other mini-world portals , however, itâs just in the mouth of the dragon head
Chests are littered around the area which contains gems these can be flamed or charged to reveal items.
Sparx collects gems. When Sparx is gone (due to health) you have to walk over gems directly to collect them
Dark Hollow Entrance
Dramatic difference in atmosphere
Castle garden/library at night with candle lighting
Lots more detail boundaries are shaped hedges (dragons/enemies)
Full Moon
Music changes, more mystical/creepy
Fodder are frogs and you can hear them croak
Enemies now attack some have metal armor
The play area seems smaller but is extended via the clever use of platforms to create space
The atmosphere also has tiny fireflies scattered in the scene
Enemies interact with Spyro (banging their chests, pulling faces)
Narrative Prototyping
âStorytelling plays a large role in our job as UX professionals. A story captures attention, provides clarity, and inspires teams and stakeholders to take action.â
( Krause,2018)
I also choose to explore narrative prototyping as I feel that Spyro does this well via verbal and nonverbal cues. One of the main reasons I fell in love with Spyro as a child was because of its story. The game utilises cutscenes and character conversation to emphasise the storyline, giving the player hints and tips, to keep you engaged in the end goal. Defeating Gnasty Gnorc.
However, whilst researching I was struck by the sheer amount of nonaudio cues which give greater depth and involve you in a truly magical, rich sense of the world. The narrative is written within the visual motifs throughout the world. From the diverse range of geographical locations, depicting alpine ridges, glaciers, and volcanic craters. To the medieval architecture of cranulated turrets and decorative buttresses.
âThe thing we always thought about when we were designing levels was having a really cool opening view, having that signature view. That even when you started itâs almost like looking at a painting. It was something that invited you into it.â (Allgeier, 2018)
When entering each world you're shown a panoramic view with detailed theming, geography, colour palette and ambiance represented thoughtfully via the soundtrack. The atmosphere is key in maintaining awe and creating that magical element that makes Spyro so beloved.
Each world is heavily detailed, with the lighting adding a more intense element, such as using candlelight to give interiors a glow and exterior lighting which softly mimics the full moon. This level of detail creates drama and gives a sense of narrative which resonates deeply throughout the game.
Below I did a quick storyboard of the cutscene from the beginning of Spyro with some brief annotations on the audio dialogue.
I found the process of narrative prototyping tricky to get my head around at first as it was a new concept to me. By researching further I gained more insight into the fundamentals of narrative prototyping. I think as Iâm a more visual person it really helped to break it down into storyboard screens to plan out the implementation of the key shots with the storyline dialogue and overarching narrative.
I also found this amazing video of Jamie Antonisse (Disney) speaking from the games narrative summit. It was an enlightening watch and helped me wrap my head around certain theories such as âthe player is the heroâ where game designers try and create an association with an avatar and player. (Antonisse, DNK)
My Thoughts
As we continue this rapid ideation sprint Iâm keen to use higher fidelity prototypes in programs such as Figma and Adobe XD to practice and develop my technical skills further. I feel that using more simplistic paper prototyping techniques such as storyboarding, sketching and narrative prototyping has helped me slow down and really focus on the core elements and concepts within the design. This style of prototyping is also a cheap and effective way of dealing with new information to gain deeper insights into the user and designerâs intentions.
My peer group has been invaluable in sharing their ideas with me and by getting me to consider fundamental ideas and questions I had not considered before, their feedback has really helped shape my progress so far. Having our own pod study group every Monday, where we share our ideas, working progress, and struggles throughout the week has been brilliant for support, but also accountability.
I found myself working over the weekend to get initial ideas and concepts to the pod group for feedback which has provided me helpful insights and further reading materials.
The Kanban process is also really helping my workflow and keeping my limited working hours efficient and productive.
We were encouraged to work as individuals for this project, I found this ideal for helping me determine my own workflow and enabling me to experiment with new ideation techniques so that I could work out what suits me in terms of methods. This reminded me of a hypothesis by Goncalo & Staw in their journal âIndividualismâcollectivism and Group Creativity. They hypothesize that individuals are more creative than groups. They believe this is due to people conforming to group ideas and editing themselves in order to fit in with their peers. They determine that individualistic values may be beneficial, especially when creativity is a primary goal. (Goncalo & Staw, 2006).
âCollectivistic values may extinguish the spark necessary for creativity in groups. We also found that barriers to creativity in collectivistic groups cannot easily be surmounted by simple demands for creativity. Therefore, while individualistic groups may at times appear to be divisive and even unruly, such a cultural orientation may actually help groups meet the requirements of innovation in the workplace.â (Goncalo & Staw, 2006).
As someone who classes themselves as a creative individual, I do notice that I often edit myself in group situations or in front of bosses and peers who I know wonât see value in my more outlandish ideas. Although I enjoy working with others, and itâs nice to have other peopleâs opinions and ideas to bounce off. I personally find there is often more freedom when working alone on creative projects, especially in the ideation phase. However, no (wo)man is an island and it takes a village to execute ideas, especially well. Itâs important to have someone critique your ideas to enable growth both personally and professionally.
References
Allgeier, Brian,2018. âSpyro: Reigniting a Legend Panel at San Diego Comic Con 2018 | Spyro Reignited Trilogy.â [Online] Available at <https://www.youtube.com/watch?v=qCyGbeyPrgM/> Accessed on (June 16th 2021)
Antonisse, Jamie, DNK. âPaper Tales: A Guide to Narrative Prototypingâ [online] Available at <https://www.gdcvault.com/play/1020509/Paper-Tales-A-Guide-to/>Accessed on (June 16th, 2021)
Denton, Mitchell, 2021 âGame Mechanics & Game Dynamics: Gamification 101â [Online] Available at: <https://www.gamify.com/gamification-blog/gamification-101-game-mechanics-game-dynamics/> Accessed on (June 16th 2021)
Ekströmer, Philip and Renee Wever. 2019. âAh, I See What You Didnât Meanâ Exploring Computer Aided Design Tools for Design Ideationâ. The Design journal 22(sup1), 1883â97. [Online] Available at <https://www.tandfonline.com/doi/abs/10.1080/14606925.2019.1595031> Accessed on (8th August, 2021)
Goncalo, Jack A and Barry M Staw 2006. âIndividualismâcollectivism and Group Creativityâ. Organizational behavior and human decision processes 100(1), 96â109. [Online} Available At <https://www.sciencedirect.com/science/article/pii/S0749597805001378?via%3Dihub> Accessesd on (8th August, 2021)
Hastings, Brian, 2018 âSpyro: Reigniting a Legend Panel at San Diego Comic Con 2018 | Spyro Reignited Trilogyâ [online] Available at <https://www.youtube.com/watch?v=qCyGbeyPrgM/> Accessed on (June 16th, 2021)
Krause, Rachel, 2018 âStoryboards Help Visualize UX Ideas.â [online] Availble at <https://www.nngroup.com/articles/storyboards-visualize-ideas/> Accessed on (June 16th,2021)
Figure 3: Spyro Treasure Box Gif - by myself (Hanni Bow, 2021)
Figures
Figure 1
Bow, Hanni. 2021. âSpyro and Sparx Gifâ Created on 1st June 2021
Figure 2
Bow, Hanni. 2021. âCrystal Dragon Gifâ Created on 1st June 2021
Figure 3
Bow, Hanni. 2021. âSpyro treasure Boxâ Created on 1st June 2021
