How to make an image full screen?

[djriffle1]

I was having difficulty using display.contentWidth and Height when trying to build a game today, so I decided to isolate the problem. I went ahead and created a main file with only the three lines of code below. I’m trying to make an image full screen but it seems that when I switch devices the image is either too short or not wide enough. 

 Main.lua

local grass = display.newImageRect("grass.png", display.contentWidth,display.contentHeight) grass.x = display.contentWidth/2 grass.y = display.contentHeight/2

Config.lua

application = { content = { width = 320, height = 480, scale = "letterBox", fps = 30, --[[imageSuffix = { ["@2x"] = 2, ["@4x"] = 4, }, --]] }, }

Screen shot of program being displayed on Iphone 5

What am I doing wrong?

[davebollinger]

use actualContentWidth and actualContentHeight for letterbox dimensions

[bjsorrentino]

I would caution against using dynamic/variable measurement values in the “display.newImageRect()” API. This is because those values may not be the same aspect ratio on different screens. For instance, “display.actualContentWidth” and “display.actualContentHeight” might be a 2:3 ratio on some screens, 1:2 on others, 9:16 on others, etc. That will cause your image to stretch/warp in comparison to its own actual width/height ratio.

If you want to fill the screen with an image, it’s better to make the image larger than any potential screen aspect ratio, then accept some amount of clipping on certain screens when the image goes beyond the edges.

Best regards,

Brent

[ldurniat]

Try

local \_CX = display.contentCenterX local \_CY = display.contentCenterY local imgW = 440 -- width of image local imgH = 623 -- height of image local imgR = imgH / imgW local screenW = display.contentWidth - 2 \* display.screenOriginX local screenH = display.contentHeight - 2 \* display.screenOriginY local screenR = screenH / screenW local factor = imgR \> screenR and screenW / imgW or screenH / imgH local background = display.newImageRect( 'bg.jpg', imgW \* factor, imgH \* factor ) background .x, background .y = \_CX, \_CY

It should  preserve aspect ratio of image.

[rob]

Also keep in mind that the key feature of display.newImageRect() is to use dynamic images (@2x, @4x etc.) to provide high quality based on the screen resolution. Taking an image and stretching it to fit goes against the whole ideal of using the “right sized” image. 

If you want one image and you want to scale it yourself, it’s best to use display.newImage() and calculate the aspect ratio.

But an even better solution would be to make sure your grass.png is big enough to fill a 570x360 screen (though with the S8 and iPhone X we have to revise it. It’s now like 693x360. You know the size of the image so you should provide that for the width and height and have @2x and @4x versions.

Rob

[Blex]

Hey, Rob, so is this the best solution to the new S8 and iPhoneX dilemma?  

[bjsorrentino]

Hi @sdktester15,

What specifically are the “dilemmas” you’re referring to?

Thanks,

Brent

[rob]

If you’re app is based on 320x480, make your background 360x693. Our former advice was 360x570 which worked well for 16:9 devices.  Since the S8 is 2:1, that would require a 320x2 or 640px background. The iPhone X is even taller.  

This graphic is landscape but it shows the various device backgrounds relative to a 1.5:1 (320x480 type) content area:

The green area is the 320x480 “Content Area”. 

The pink represents the screen area for an iPad (360x480)

The blue represents the typical 16:9 phone (320x570)

The yellow represents the S8 screen’s 2:1 (320x640)

The orange represents the iPhone X (320x693).

So by making your background 360x693, you cover all the different screen shapes, knowing that part of the background is going to be cut off on different devices.

Rob

[davebollinger]

use actualContentWidth and actualContentHeight for letterbox dimensions

[bjsorrentino]

I would caution against using dynamic/variable measurement values in the “display.newImageRect()” API. This is because those values may not be the same aspect ratio on different screens. For instance, “display.actualContentWidth” and “display.actualContentHeight” might be a 2:3 ratio on some screens, 1:2 on others, 9:16 on others, etc. That will cause your image to stretch/warp in comparison to its own actual width/height ratio.

If you want to fill the screen with an image, it’s better to make the image larger than any potential screen aspect ratio, then accept some amount of clipping on certain screens when the image goes beyond the edges.

Best regards,

Brent

[ldurniat]

Try

local \_CX = display.contentCenterX local \_CY = display.contentCenterY local imgW = 440 -- width of image local imgH = 623 -- height of image local imgR = imgH / imgW local screenW = display.contentWidth - 2 \* display.screenOriginX local screenH = display.contentHeight - 2 \* display.screenOriginY local screenR = screenH / screenW local factor = imgR \> screenR and screenW / imgW or screenH / imgH local background = display.newImageRect( 'bg.jpg', imgW \* factor, imgH \* factor ) background .x, background .y = \_CX, \_CY

It should  preserve aspect ratio of image.

[rob]

Also keep in mind that the key feature of display.newImageRect() is to use dynamic images (@2x, @4x etc.) to provide high quality based on the screen resolution. Taking an image and stretching it to fit goes against the whole ideal of using the “right sized” image. 

If you want one image and you want to scale it yourself, it’s best to use display.newImage() and calculate the aspect ratio.

But an even better solution would be to make sure your grass.png is big enough to fill a 570x360 screen (though with the S8 and iPhone X we have to revise it. It’s now like 693x360. You know the size of the image so you should provide that for the width and height and have @2x and @4x versions.

Rob

[Blex]

Hey, Rob, so is this the best solution to the new S8 and iPhoneX dilemma?  

[bjsorrentino]

Hi @sdktester15,

What specifically are the “dilemmas” you’re referring to?

Thanks,

Brent

[rob]

If you’re app is based on 320x480, make your background 360x693. Our former advice was 360x570 which worked well for 16:9 devices.  Since the S8 is 2:1, that would require a 320x2 or 640px background. The iPhone X is even taller.  

This graphic is landscape but it shows the various device backgrounds relative to a 1.5:1 (320x480 type) content area:

The green area is the 320x480 “Content Area”. 

The pink represents the screen area for an iPad (360x480)

The blue represents the typical 16:9 phone (320x570)

The yellow represents the S8 screen’s 2:1 (320x640)

The orange represents the iPhone X (320x693).

So by making your background 360x693, you cover all the different screen shapes, knowing that part of the background is going to be cut off on different devices.

Rob