Corona SDK Quick Tip: Create a Screen Capture Utility

In this tutorial, you’ll learn how to take a screenshot of your application and review it in the device photo library.

Application Overview

Using the Corona display class and the captureScreen() method, we’ll capture the current screen, save it, and then review it in the photo library.

Select Target Device

The first thing you have to do is select the platform you want to run your app, this way you’ll be able to choose the size for the images you will use.

The iOS platform has these characteristics:

• iPad: 1024x768px, 132 ppi
• iPhone/iPod Touch: 320x480px, 163 ppi
• iPhone 4: 960x640px, 326 ppi

Because Android is an open platform, there are many different devices and resolutions. A few of the more common screen characteristics are:

• Nexus One: 480x800px, 254 ppi
• Droid: 854x480px, 265 ppi
• HTC Legend: 320x480px, 180 ppi

In this tutorial we’ll be focusing on the iOS platform, specifically developing for distribution to an iPhone/iPod touch.

Interface

A simple interface featuring a single button will be used. This button will be linked to a function that will be performed when tapped.

Exporting PNG’s

Depending on the device you have selected you will need to export the graphics in the recommended PPI, you can do that in your favorite image editor.

I used the Adjust Size… function in the Preview app in Mac OS X.

Remember to give the images a descriptive name and to save them in your project folder.

Code!

Time to write our application!

Open your prefered Lua editor (any Text Editor will work, but you won’t have syntax highlighting) and prepare to write your awesome app.

Hide Status Bar

First, we hide the status bar, this is the bar on top of the screen that shows the time, signal and other indicators.

display.setStatusBar(display.HiddenStatusBar)

Add Background

Now we add the background:

local background = display.newImage('background.png')

This line creates the local variable background and uses the display API to add the specified image to the stage. By default, the image is added to 0,0 using the top left corner as the reference point.

Place Screenshot Button

The following lines add the Capture button to the screen and place it in the center.

local captureButton = display.newImage('captureButton.png')
captureButton:setReferencePoint(display.CenterReferencePoint)
captureButton.x = display.contentWidth * 0.5
captureButton.y = display.contentHeight * 0.5

Capture Screen Function

This function will run when the capture button is activated, it responds to a tap event.

function captureButton:tap(e)
end

We’ll add the listener later in the code.

Capture Screen

The screenshot code.

It declares a variable named screenshot that will hold the image information in case you want to make aditional manipulations to it.

local screenshot = display.captureScreen(true)

A parameter is used in the captureScreen method, a boolean to indicate if the image will be saved to the device photo library.

Open Photo Library

With your screenshot already stored, it’s time to open the photo library to check what it looks like.

media.show(media.PhotoLibrary)

This will open the Photo Library to let you browse through your pictures and find your screenshot.

Listener

The next line adds the required listener to the capture button.

captureButton:addEventListener('tap', captureButton)

Icon

If everything is working as expected, we are almost ready to build our app for device testing. Just one more thing, our application icon.

Using the graphics you created before you can create a nice and good looking icon, the icon size for the iPhone icons is 57x57px, but the iTunes store uses a 512x512px so it’s better to create your icon in this size.

It doesn’t need to have the rounded corners or the transparent glare, iTunes and the iPhone will do that for you.

Conclusion

Use this example application and try adding features of your own.

Thanks for reading this tutorial, I hope you’ve found it useful!