Filling entire screen with a background image while maintaining aspect ratio?

Solar2D General Questions/Discussion
#1

Perhaps I’m being dense but I can’t figure this out. I’m using the modern ultimate config.lua found here. It works great except I’m not sure how to make a background image fill up the entire screen while keeping the aspect ratio. I understand that some parts of the image will have to bleed off of the edges depending on the device, which is fine.

If I use

local bgImage = display.newImageRect("filename.png", display.actualContentWidth, display.actualContentHeight)

then it takes up the entire screen, but the image will be squished or stretched based on the aspect ratio of the device. What am I missing here?

#2

The width and height is the width/height of the image, not the screen.

I generally add 3 background images of @1x, @2x, and @4x sizes that is a bit larger than the screen so that there are no black borders.

–john

#3

Thanks john, would you mind posting some code? Are you saying that if I create an image that’s 540x960, then I should use those dimensions?

#4

Personally i use the 1080x1920 simulator and make my background 1080x1920 … But when i add it into the code i do this…

local BG = display.newImageRect( "imgs/BG.png", 320, 570 )

And it fits it perfectly on the screen 

Good Luck!

#5

Vince,

I create 3 images… bg.png, bg@2x.png, and bg@4x.png for example.

Looking at one of my apps now, bg@4x.png is 1536x2200.  I then scale down 50% for the 2x image, then scale down again 50% for the 1x image and use the following call:

local bg = display.newImageRect("bg.png", 384, 550)

384x550 is the size of the 1x image.  Corona will use the correct image, depending on the device resolution.

Hope this helps.

–john

#6

@John, thanks I think I get what you’re saying. What content width and height are you using in config.lua though? Is 384x550 bigger than the width and height you specify in config.lua?

#7

On our side, depending on the app we are building the quality of the image is not always an issue, therefore we use any image source size we see fit with the following code :

local img = display.newImage( imgPath ) local scale = math.max(display.contentWidth / img.width, display.contentHeight / img.height) img:scale(scale, scale)

PS: You can also mix this with display.newImageRect to still support a few sizes of the image. 

#8

Vince,

In the app I was using as an example, my width/height in config.lua is 320x480.  You basically need to have a background image a bit larger so that you do not have any black borders.

It is also up to you to determine if you want to use @2x and @4x images.  I wanted my backgrounds to be high-res so I opted to include those images.  That does make the final package a bit larger, but in this particular case, I chose to include them.  I have another project where I only included 1x and @2x since the background wasn’t vital to game play.

–john

#9

your config file should be:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), scale = "letterBox", -- scale= "adaptive", fps = 60, imageSuffix = { ["@2X"] = 1.5, ["@4X"] = 3.0, }, }, }

then to have a background that fits on all devices you need 3 files:

background.jpg (360x570)

background@2X.jpg (720x1140)

background@4X.jpg (1440x2280)

thats it, you dont have to worry about backgrounds anymore.

ps. to create the background use display.newImageRect

#10

The width and height is the width/height of the image, not the screen.

I generally add 3 background images of @1x, @2x, and @4x sizes that is a bit larger than the screen so that there are no black borders.

–john

#11

Thanks john, would you mind posting some code? Are you saying that if I create an image that’s 540x960, then I should use those dimensions?

#12

Personally i use the 1080x1920 simulator and make my background 1080x1920 … But when i add it into the code i do this…

local BG = display.newImageRect( "imgs/BG.png", 320, 570 )

And it fits it perfectly on the screen 

Good Luck!

#13

Vince,

I create 3 images… bg.png, bg@2x.png, and bg@4x.png for example.

Looking at one of my apps now, bg@4x.png is 1536x2200.  I then scale down 50% for the 2x image, then scale down again 50% for the 1x image and use the following call:

local bg = display.newImageRect("bg.png", 384, 550)

384x550 is the size of the 1x image.  Corona will use the correct image, depending on the device resolution.

Hope this helps.

–john

#14

@John, thanks I think I get what you’re saying. What content width and height are you using in config.lua though? Is 384x550 bigger than the width and height you specify in config.lua?

#15

On our side, depending on the app we are building the quality of the image is not always an issue, therefore we use any image source size we see fit with the following code :

local img = display.newImage( imgPath ) local scale = math.max(display.contentWidth / img.width, display.contentHeight / img.height) img:scale(scale, scale)

PS: You can also mix this with display.newImageRect to still support a few sizes of the image. 

#16

Vince,

In the app I was using as an example, my width/height in config.lua is 320x480.  You basically need to have a background image a bit larger so that you do not have any black borders.

It is also up to you to determine if you want to use @2x and @4x images.  I wanted my backgrounds to be high-res so I opted to include those images.  That does make the final package a bit larger, but in this particular case, I chose to include them.  I have another project where I only included 1x and @2x since the background wasn’t vital to game play.

–john

#17

your config file should be:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), scale = "letterBox", -- scale= "adaptive", fps = 60, imageSuffix = { ["@2X"] = 1.5, ["@4X"] = 3.0, }, }, }

then to have a background that fits on all devices you need 3 files:

background.jpg (360x570)

background@2X.jpg (720x1140)

background@4X.jpg (1440x2280)

thats it, you dont have to worry about backgrounds anymore.

ps. to create the background use display.newImageRect