Record Starling gameplay video

Opt In Image
Early bird offer on the ANE eBooks

 

Buy any Easy Native Extensions 2nd Edition package and get our $99 iOS + Android ANE Template completely free before the end of June 2015.

 

 

  • step-by-step guide to making your iOS extension in under an hour
  • library for data conversion between ActionScript and native code
  • tutorials
  • infographics
  • code included
In today’s game experience players are much more socially involved than ever before. Even when playing alone you want to record that epic battle with the big bad Boss and later to show it off in the social media. Starling is a great game development framework that can run on desktop and mobile devices, but recording the gameplay on mobile platforms can be a real pain to implement.

In this tutorial you will learn how to use Gameplay Recorder native extension for iOS to capture awesome videos directly from your game’s screen. Any previous knowledge about Starling framework counts as a plus, but if you don’t have any experience with Starling Lee Brimlow’s introductory video is a great place to start.

At the end of this tutorial you will have

StarlingDemoApp
A mobile Starling application which allows the user to start and stop recording what’s happening on the screen and save the recorded video to Camera Roll.

Time

Stopwatch10-15 minutes

Step 1: Project Setup

First we have to create an ActionScript mobile project and set up the basic structure of our app:

NewMobileProject

 

I’ll name my tutorial project GameplayRecorderTestAppStarling:

NewProjectWizard

 

 

Include starling.swc in the project’s libraries (you can download it here):

AddStarlingSWC

 

Add the following three files in your project’s src/ folder:

  • Constants.as
  • Game.as
  • GameplayRecorderTestAppStarling.as

We’ll get into the details of each of these files below.

ProjectTree

 

GameplayRecorderTestAppStarling.as

This file is the entry point of our project, here we will initialize Starling and ….

Constants.as

In the spirit of good coding practices all global constants will be added here instead of being hardcoded in random places in the project.

For now the only two constants are the width and height of the stage in pixels.

Game.as

This file is the main horsepower of the project. All of the game and recording logic will be placed in here, but for now we will leave it with a basic implementation.

Step 2: Sprinkling rectangles

Our game demo will have five rotating quads, four in every corner of the stage and one in the middle. Let’s start by defining some quads in Game.as:

On every ENTER_FRAME event each quad will rotate a little:

Step 3: Initializing Gameplay Recorder

For this step you’ll need to download DiaDrawGameplayRecorder.ane and add it to your project:

AddGameplayRecorderANE

Then initialize the GameplayRecorder

…get ready to start recording by setting up video properties like compression format, resolution, frame rate, etc.

We want to know if everything is going well, so here are some handlers that will notify us when the video file is saved successfully or if any errors raise their ugly heads:

Step 4: Record video

We are almost ready. The only thing left to do is to add the start/stop recording mechanism and to take a bitmap from the screen.

First let’s enable recording by touching any of the quads. If you want to finish recording just tap the quads once again.

The last peace of code is the most important one in this tutorial.
To record a video you have to grab a bitmap from the screen every time a frame is requested. It’s done by a callback function with a predefined signature. A pointer to this function is given to the m_screenRecorder.startRecording() as the fourth argument.

Here is a diagram of how this function is used:

GameplayRecorder_ANE_Diagram

  1. Inside DiaDrawGamepayRecorderANE an event is triggered in accordance with the video’s frame rate (FPS) you have set.
  2. This event causes your screen grab callback to be called with a BitmapData as an argument.
  3. The data you put into this BitmapData is then encoded as a video frame in your screen cast video.

Here is the code for this magic function:

Voilà here are our quads ready to rock and roll:

Credit

Special thanks to the guys at Bacon Bandit Games for their handy post on saving screenshots from Starling and  also thanks to Amos Laber about explaining the nitty gritty details in his post.

FAQ

1. Where can I download the Gameplay Recorder ANE? 

2. Is the source code available for the Gameplay Recorder ANE?

3. How do I set up my Starling app for gameplay recording?

4. What’s performance like when using the ANE?

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">