News

Create a user interface

Learn how to use letterbox scaling and ghost graphics in the user interface of your Corona SDK game

MAC RS39103_DSC_7102

When you’re creating images to use in your app, keep in mind that Android screens come in all shapes and sides. Are your graphics going to display correctly across all these different devices?

In order to help you support multiple screens, Corona provides various scaling options. In this tutorial, we’ll use letterbox as it scales your content to fill the screen while preserving the width and height ratio.

For the best results with letterbox scaling, create a background graphic and a game over graphic that are both 380 x 570. You’ll also need a graphic that represents the falling objects the user needs to tap. We’ll be using a ghost graphic, but you can use whatever image you want.

To help keep things organised, create a new Images folder inside your project directory and then place your three different graphic files inside.

To properly support Corona’s letterbox scaling, you’ll need to make some changes to your project’s config.lua file. So, find config.lua in the project directory and open it in Sublime Text.

corona_tutorial3_step1_mac

1. Configure scaling

Delete the text in config.lua, replace it with this code. Every slash indicates a new line and isn’t part of the code: application = / { / content = / { / width = 320, / height = 480, scale = / “letterbox” / } / }. Save and close config.lua.

corona_tutorial3_step2_mac

2. Add your background

Open main.lua and delete any text. Set your background and centre with: background = display.newImage( “images/background.jpg”) / background.x = display.contentWidth / 2. Followed by: background.y = display.contentHeight / 2.

corona_tutorial3_step3_mac

3. Add a ghost image

Check your handiwork in the Corona Simulator. Next, you’ll need to create a ghost object. Defi ne what image you want to use by adding: local ghost = display.newImage( “images/ ghost.png”). How do we make this image move?

corona_tutorial3_step4_mac

4. x and y coordinates

Define the ghost’s start by expanding the line: local ghost = display.newImage( “images/ghost.png”, startX, -300). This is the initial x and y coordinates. The x coordinate looks odd, but will make sense once we define startX.

corona_tutorial3_step5_mac

5. Import physics engine

Our ghost still isn’t an object, but this transformation is simple. In your ghost block of code, add: physics.addBody( ghost ). At the beginning of main.lua add: local physics = require( “physics” ) / physics.start(). Now it’s an object!

×