melonJS is the result of our enthusiasm and past experiments with Javascript, and came from the feeling that no simple, free and standalone library was available to develop games. melonJS integrates the popular Tiled map format, allowing developers to easily design levels using the Tiled map editor, and to focus on the game features itself.

Latest Media

No images, videos or audio files have been added to this gallery. Join now to share media with the community.

Blog RSS Feed Report abuse Latest News: Master Spy - On Cutscenes

About Master Spy with 0 comments by TurboGun on Dec 9th, 2014

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

Games
Master Spy

Master Spy Master Spy

Updated 2 weeks ago TBD Single Player Stealth

A stealth-based precision platformer with old school cutscenes. You are Master Spy. In a world of corruption and decay, you're not just good at what you...

Pipe Animus

Pipe Animus Pipe Animus

Updated 3 months ago TBD Single Player Role Playing

Pipe Animus will be a full length Indie RPG game that doesn't just appeal to nostalgia. There'll be many, interesting characters, locations and useable...

Vibrant Recycling

Vibrant Recycling Vibrant Recycling

Updated 3 months ago Released Dec 5, 2012 Single Player Educational

Vibrant Recycling is a Ecological and Educative game using HTML5 where you should help fun bins to collect and recycle wastes thrown during various levels...

Neverwell Moor

Neverwell Moor Neverwell Moor

Updated 2 years ago Released Aug 1, 2012 Single Player Role Playing

An entry for the Liberated Pixel Cup 2012. Source code is available under a dual license: MIT and GPL3. Assets are available under CC-BY-SA and GPL3...

Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Company
N/A
Contact
Send Message
Official Page
Melonjs.org
Licence
MIT
Release Date
Released Mar 8, 2011
Engine Watch
Track this engine
Share
Community Rating

Average

9

2 votes submitted.

You Say

-

Ratings closed.

Embed Buttons

Promote melonJS on your homepage or blog by selecting a button and using the embed code provided (more).

melonJS melonJS
melonJS
Statistics
Rank
271 of 679
Last Update
3 months ago
Watchers
6 members
Games
4
News
10