Master Spy employs Turbo Theater Graphic Technology to blend a cinematic story of intrigue, betrayal, and conspiracy with the heart racing action of the stealth-platforming gameplay.
Why Cinematic Cutscenes?
As huge fans of anime, manga, and graphic novels, there’s something enticing about the style that mimics a comic brought to life. Inspired by the likes of Ninja Gaiden and Zero Wing (yes, the “All your base” game), we set out to merge storytelling medium and game play experience in this retro-cinematic fashion.
The Process
We start from the basis of Master Spy’s story script. John takes that and storyboards the particular cutscene out on paper, then scans them into Flash to get a feel for all the parts. From there, he draws and animates each separate moving part in photoshop, and brings those parts into the Flash storyboard to get a quick version of the cutscene up that I can then work off of for creating the cutscene in engine.
I then take the parts John has made and make sure they’re ready for implementation. Sometimes this means taking an animation he’s rendered in photoshop, exporting it to gif, then bringing that gif back in and running a special photoshop action (I found one called layertoanimation.jsx for those curious) that turns the layers into a sprite sheet. It may sound kind of weird, but it works. You can see an example below, compared to how it looks in game:
From there, I lay out the cutscene in code as a “list” (which is in actuality a Javascript Object Literal since Master Spy is written in html5/JS) of what should show up on screen and what fancy things should happen with them. In this “list” we have seven different types of actions - sprites, text, sound effects, music, pause, clear, and special cutscene options - as well as options for each item. This “list” is fed to a cutscene director, which loops through the list and handles the timing and addition of each of these items to the screen.
For this, we’ll take a further look just into the image type item. Each image has options for position, directional movement and speed (for fake panning), animation cues such as loop or specific frames to be played, fade, and z-index, with a few other special options such as bounce (note that since we don’t utilize Mode 7 technology, there is no rotating or scaling of the actor’s sprites).
This allows us to set scenes up with full blown sprite sheets that pan and are layered with multiple other sprite sheets, timed to text and sound effects:
In Game
The script calls for 9 cutscenes Master Spy (some with alternate versions), each about 1-3 minutes in length. We also use the cutscene engine for special mission introductory screens that goes along with each mission. Of course, if cutscenes aren’t your thing, you can always skip them and get straight to the action. And if that's your thing, you should check out the Mission 1 Demo!
Until next time.
-Kris
