In 2014, we worked with BioWare to create the ISS: an interactive, animated cinematic of a player’s history in the first two games of the Dragon Age series, narrated by one of the characters, Varric.
When we first met with BioWare’s online team to discuss the Interactive Story Summary, we were floored. It’s always a privilege to work with one of the best game development companies in the world, and the ISS presented a challenge that was perfectly suited with some of the tech we have been focused on for the last few years. The goal of the ISS is to summarize the complex narrative and decisions that players have made in previous games in the series, and give them control of those choices leading into their latest chapter, Dragon Age: Inquisition.
For the last few years, we have worked with Adobe to launch and refine a Flash Pro-to-browser workflow that supports a majority of the animation capabilities of the Flash Player. Initially called the “Toolkit for CreateJS”, this process is now the official HTML Canvas document in Flash CC. Our animators (friends and frequent collaborators, Pulp Studios) are able to work in Flash Pro – a mature, familiar tool – and export animations directly to CreateJS.
Testing & Performance
As animations were being produced, we wanted to give the animators a really easy way to preview and tweak, as well as ensure they met performance requirements. A testing harness was developed that would play back the animation in the browser, with some power-features such as:
- Quickly pause and resume, or step forward and backward a frame-at-a-time
- Immediately preview the intro, outro, any choice, or even a specific range of frames using keyframes in Flash Pro
- Watch the animation of an entire module (which represents a choice) with a specific decision, to see it in context
- Run a performance test, and see problem areas that should be optimized
The animations in Flash Pro are created to accompany English audio, but the ISS is localized into multiple languages. To combat variable length voice-over, we programatically determine the length of the audio files, and run the corresponding animation at the necessary frame-rate to sync properly. Because we don’t want animations to run too slowly or quickly, we lock the frame-rate within acceptable bounds, and provide our animators the ability to specify “hold” frames, where looping animation (like a flickering torch) can run indefinitely while the playhead pauses and the narration plays through.
A Responsive Camera
The vector output format provides an awesomely compact animation file, comparable to the swf format. This means we can play high quality, full-screen animation on a tiny low-res handheld screen or a huge 4k display.
The varied sizes and aspect ratios provided another challenge: how to display content on a widescreen monitor, that would also look great on a portrait mobile device. We solved this by developing a virtual camera for our animators, which they could manipulate directly in Flash Pro. The camera empowered our animators to produce more cinematic animations using zoom and pan effects, while also dynamically adjusting to aspect ratios between 1:1 and 2:1.
The World State
The Tapestry in the Dragon Age Keep is an easy way to configure the player’s history, and control the choices their character makes. Similarly, as the player watches their story play out in the ISS, they are able to edit in-game decisions immediately, and watch the resulting outcome.
While our animators worked in Flash CC, our developers built out a framework using CreateJS that manages the preloading and playback of the modules. The framework handled duties such as:
- Loading and saving world-state data from the Keep
- Determining which assets needed to load to play back a single choice, based on world state data and locale
- Determining playback speeds to match voice-over in various languages
- Displaying the “Edit Decision” button at the appropriate time, and managing the UI that allowed the player to modify their choices
- Determining which choices are possible based on the user’s previous decisions
- Playing voice-over, background music, and displaying localized closed captions
The framework wrapped up all the ISS functionality, and provided a simple API so it could be managed from inside the Dragon Age Keep.
If you haven’t checked out Dragon Age: Inquisition, it is a fantastic game. If you have, or plan on doing it in the future, we highly recommend heading over to the Keep, setting up your character’s history, and letting us know what you think of the ISS.
We are super proud of our work with BioWare and Pulp Studios, and hope the ISS provides a benchmark on what is possible with Flash CC and CreateJS.
Dragon Age™ images and artwork used with permission from BioWare®