# Cinematic in 2D games

I am searching for a way to create and integrate cinematic in a simple 2D game with XNA for Windows Phone. I don't know if the best way is to create an animation with sprite and commonly process to animate them... or Is it possible to create the animation with an external tool and read it from the code.

• When you say "an animation" do you mean as in a frame-based sprite animation, or do you mean simple translation/rotation/scale events over time (and how to define that), or do you mean some kind of 2d skeletal animation? – Tetrad Feb 17 '12 at 18:14
• I mean frame based animation. It is to explain story before the game and before each chapter of it. – Xstahef Feb 18 '12 at 9:59

I'm going to look at how some pre-existing implementations work (that I have actually used) - and hopefully that will give you some ideas on how to integrate it with your game engine.

# Operation Flashpoint

Operation Flashpoint (original release) has a command and control system for entities. This is essentially a list of commands that entities had to perform - the AI system would be responsible for carrying out the commands. Entities could be anything: an enemy, the camera, the player, etc. All the entities had to exist 'before the fact' (but there is nothing stopping you from making a 'create entity' command). Let's take the example of two people meeting, having a conversation, getting into a car and driving off.

• Entity1: ignore player
• Entity2: ignore player
• Camera: Track Entity1
• Entity1: move to Alpha
• Entity2: run to Alpha
• Entity1: start talking, play 'sound1.ogg' when: Entity1 at Alpha when: Entity2 at Alpha
• Entity1: move to and enter Car1 (driver) when: 'sound1.ogg' complete
• Entity2: move to and enter Car1 (passenger) when: 'sound1.ogg' complete
• Entity1: move to Charlie when: Entity1 in Car1 when: Entity2 in Car1
• Camera: restore, Entity1: restore player aggression, Entity2: restore player aggression when: Car1 enters Area1

This system did have some bugs (very rarely cut-scenes that never ended because of border cases like where the AI didn't choose a predictable route) - but resulted in very 'natural' looking sequences because people were not following straight paths etc.

# XAML

XAML uses a story-board system. This is basically a list of animations that need to play - it is essentially the same as the Operation Flashpoint example except the timings are used instead of 'waiting on things' and entities move along predetermined paths. Again, using the above example:

• Entity1: move from Alpha to Charlie at 0s taking 5s this will be a straight line
• Entity2: move from Bravo to Charlie at 0s taking 5s
• Camera1: move to Delta at 0s taking 1s
• Camera1: move target from (Start) to Charlie at 0s taking 5s
• Entity1: start talking animation at 5s
• Sound: play 'sound1.ogg' at 5s originating from Charlie
• Entity1: move to Echo at 10s taking 5s
• Entity2: move to Echo at 10s taking 5s
• Entity1: get in Car1 (driver) at 15s
• Entity2: get in Car1 (driver) at 15s
• Car1: move to Foxtrot at 16s taking 30s
• Camera: restore at 19s

There are two problems with this (I prefer it less):

• Things could move unnaturally fast or slow
• If you want to change the cut-scene you will need to go and adjust all the timings.

# How to do it in XNA

After you have chosen a way to describe cut-scenes you will likely have an some form a file from your editor (possibly an XML file). You would then create a content processor and add your cut-scene to your content project. At runtime you would then call something along the lines of CutSceneComponent.Execute(Content.Load<CutScene>("CutScenes\\Level3")).