Backgrounds with no black borders on Apple/Android devices

NEW: Updated to work with the iPad 3rd generation.

One of the issues with cross-platform development on mobile devices is how to handle the diversity of screen-sizes in a visually pleasing way.

Corona handles this elegantly with its dynamic sizing, but how to get rid of those pesky black borders? Nobody likes those right?

Some app stores will even reject your app if it doesn’t fill the screen. Save yourself from a headache by following these simple steps.

After reading Matthew Pringle’s post I was inspired to write a small app that demos a way to handle this issue.

You can get the source here.

The way it works is by creating an oversized image with a bleed-zone that will cover all devices.

The base images including bleed-zones are as follows:

• 610×420 (iPhone, iPod Touch)
• 1220×840 (iPhone 4 and iPod Touch 4G (retina), iPad 1 & 2)
• 2440×1680 (iPad 3 (retina))

(See the sample images from the source above to get a better understanding)

-- config.lua
-- the following @2x extensions follow the Apple naming conventions.
 
application =
{
	content =
	{
		width = 320,
		height = 480,
		scale = "letterbox",
 
		imageSuffix = 
		{
			["@2x"] = 1.6,
			["@2x~ipad"] = 3.6
		}
	},
}

The config.lua will inform Corona about the base-size of your canvas, and how to handle the scaling between devices. You only specify the size of your base screen without the bleed-zones.

The main.lua is very simple:

-- main.lua
-- 
 
display.setStatusBar(display.HiddenStatusBar);	
 
-- get the usable coordinates for the device
local screen = 
{
	left = display.screenOriginX,
	top = display.screenOriginY,
	right = display.contentWidth - display.screenOriginX,
	bottom = display.contentHeight - display.screenOriginY
};
 
-- get the background image
-- please note that the reference-point is in the center of the image,
-- by putting the image in the center of the screen the bleed-zones will only be
-- displayed on devices with different aspect ratios than the base device.
local bg = display.newImageRect("blob.png", 610, 420);
bg.x = display.contentWidth / 2;
bg.y = display.contentHeight / 2;
 
-- show usable coordinates
display.newText("left: "..tostring(screen.left), 10, 10, native.systemFont, 14);
display.newText("top: "..tostring(screen.top), 10, 25, native.systemFont, 14);
display.newText("right: "..tostring(screen.right), 10, 40, native.systemFont, 14);
display.newText("bottom: "..tostring(screen.bottom), 10, 55, native.systemFont, 14);

This code will display your background image on any device without any annoying black borders.
Try it in the simulator and change the device type to see the beauty of it all… oh yeah

You can also use the screen table to make use of the bleed area and know where it’s safe to put your objects and still be visible on the screen.