Keep those screenshots looking top notch.

During our development of Wave Crash, we often found that we needed to take in-game screenshots. We discovered two main reasons for needing screenshots of the game: reporting bugs and sharing new content with our fans.

If something goes wrong, we need to make it as easy as possible to snap a picture to share with the team, without having to perform a lot of extra steps. We need to pump out a screenshot directly to a folder on the desktop that can be quickly uploaded to our Trello bug-tracking board. Also, we need clean pictures that we can easily share without any messiness on screen. We might personally care about the frame rate and memory usage of Wave Crash, but for many of our fans that would just be distracting and confusing.

For a while we were just using print screen, but that comes with some undesirable overhead. It shows all of the unnecessary UI, and then you have to paste it somewhere and save it as a format. We wanted a solution that didn.t have these issues.

Starling Screenshot - The hard way This screenshot is taken the normal way: By pausing the game, printing screen, and then cropping the image.

Starling Screenshot Function

First, we.re going to show you the whole thing, and then we.ll break down piece by piece what the code is doing.

A great place to call this function is from an event triggered by a keypress. Simply put a call to the screenshot() method inside an event handler for a keypress. That way your dev team can take quick screenshots with a the push of a button.

private function screenshot():void {
	showNonCriticals(false);
	var bitmap:BitmapData = new BitmapData(Starling.current.stage.stageWidth, Starling.current.stage.stageHeight);
	Starling.current.stage.drawToBitmapData(bitmap);
	var byteArray:ByteArray = PNGEncoder.encode(bitmap);
	var file:FileStream = new FileStream;
	var date:Date = new Date;
	var targetFile:File = File.desktopDirectory.resolvePath("wavecrash-screens/" + String(date.time) + ".png");
	file.open(targetFile, FileMode.WRITE);
	file.writeBytes(byteArray);
	file.close();
	showNonCriticals();
}

Now let’s break out the microscope and see what is happening.

private function screenshot():void {

First we open our function and give it a descriptive name. It’s important to name your functions clearly so that teammates and future you can figure out what the code actually does. There is no question about the intent of a function called “screenshot()”! This is called “self-documenting code” which basically means we embed the comments into our variable and function names. This makes sure we don’t have comments sitting around that become stale as the code changes. This should be part of your coding standards for creating a maintainable code base.

showNonCriticals(false);

Next we temporarily turn off all of our non critical elements, such as our UI and debug code. As described above, this is to get a nice clean picture of the game.

var bitmap:BitmapData = new BitmapData(Starling.current.stage.stageWidth, Starling.current.stage.stageHeight);

In this line, we are creating an object to hold the bitmap data at our specified size. Starling makes it very easy to determine the necessary height and width with it’s current.stage functions.

Starling.current.stage.drawToBitmapData(bitmap);

This function comes built into Starling which is amazingly convenient. This guy does the work of taking what is on screen and rendering it to a texture in memory.

var byteArray:ByteArray = PNGEncoder.encode(bitmap);

Here we take that memory array data and encode it to the PNG format. If you want a different format, potentially something small like a JPG for web, you can choose that instead.

var file:FileStream = new FileStream;

This opens a FileStream object. This type of object is what you can use to actually interface with the files on your computer.

var date:Date = new Date;

And here we are creating a date object. You know…for dates.

var targetFile:File = File.desktopDirectory.resolvePath("wavecrash-screens/" + String(date.time) + ".png");

In this guy we are creating a file object named targetFile and defining a name for our screenshot. Note that we’re using the directory, and then dumping it into a ‘wavecrash-screens’ folder. We’re also using a timestamp to name the file, so that it is easy to find and there are no naming conflicts. Be wary, this method would have naming conflicts for screenshots taken in the same second.

file.open(targetFile, FileMode.WRITE);

Then we open that target file we just created and set the input mode.

file.writeBytes(byteArray);

FINALLY, now we write the encoded information from our memory in the ‘byteArray’ object from earlier into the file object we created 2 steps ago.

file.close();

Go ahead and close that file since we won’t be needing it any more!

showNonCriticals();

Turn the UI and debug info back on.

}

Don’t forget to close your function!

Starling Screenshot - The easy way This screenshot is taken using our custom method: simply by pressing a button to create a clean image.

That’s It!

Quick and easy right? Daniel, the author of Starling, made this whole process very straightforward for us. You can check out Starling HERE, and read more about some of its cool features in their documentation HERE.

Questions or comments? Or having troubles implementing it on your own? Feel free to ask us for help in the comments!

UI Artist by Day, Tech Artist by Night

Diversifying your skill set to improve productivity Continue reading

F2P 101: Acquisition

Published on December 10, 2014

The 10 Hour Work Week

Published on November 16, 2014