Image Scaling and Content Size

Getting Started Newbie Questions
#1

Hi guys, I’m completely new to Corona and I’m working on my new game. I have already read about the “Ultimate Config Lua” and the “Modernizing The Config Lua”. So my config.lua file looks like this:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.3, }, }, }

And I want to have a background image that covers the whole screen, so I created two images:

background.png =         900x1425

background@2x.png = 1800x2850

But when I change my simulator device to something different than the iPhone 5 I have black borders, and as far as I understood I shouldn’t have them… am I right?

Also the background Image is not covering the whole screen. Why?! 

Also I decided to create the following rectangle:

local centerX, centerY = display.contentCenterX, display.contentCenterY local \_W , \_H = display.contentWidth, display.contentHeight local rectangle2 = display.newRect( centerX, centerY, display.pixelWidth , display.pixelHeight ) rectangle2:setFillColor(1, 0, 0)

And the rectangle is not covering the whole screen. Why?!? I thought it should cover it all. 

Here I have some screenshots to illustrate what I’m seeing, the background.png and background@2x.png are just a yellow solid color and the rectangle2 is a red rectangle.

Can please someone explain me what I’m misunderstanding?

Thanks!!

mapD4IQ.png

  GGBcD16.png

ZZc3W63.png

#2

application =

{

    content =

    {

            width = 320,

            height = 480,

            scale = “letterbox”,

            fps=60,

imageSuffix =

{

["@2x"] = 1.5,

["@4x"] = 4,

},

    },

}

Put that code in config.lua and make sure your backgrounds are:

For 2x - 640x960

For 1x - 320x480

This will fit every size screen at the moment including the iPhone 6 and 6+ 

Have fun! :smiley:

#3

The problem is you’re using display.pixelWidth and display.pixelHeight instead of display.contentWidth and display.contentHeight.

Try:

local rectangle2 = display.newRect( centerX, centerY, display.contentWidth , display.contentHeight )
rectangle2:setFillColor(1, 0, 0)

Also can you show the way you’re loading the image?

Thanks

Rob

#4

Thanks Rob, and longsw…! 

To load the background image I’m doing the following: 

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

Just found out that I have to load the background using newImageRect()

local background = display.newImageRect( "background.png", imageWidth, imageHeight )

The last two numbers, imageWidth and imageHeight, indicate the image’s base “1x” width and height!

Thanks again!!

#5

application =

{

    content =

    {

            width = 320,

            height = 480,

            scale = “letterbox”,

            fps=60,

imageSuffix =

{

["@2x"] = 1.5,

["@4x"] = 4,

},

    },

}

Put that code in config.lua and make sure your backgrounds are:

For 2x - 640x960

For 1x - 320x480

This will fit every size screen at the moment including the iPhone 6 and 6+ 

Have fun! :smiley:

#6

The problem is you’re using display.pixelWidth and display.pixelHeight instead of display.contentWidth and display.contentHeight.

Try:

local rectangle2 = display.newRect( centerX, centerY, display.contentWidth , display.contentHeight )
rectangle2:setFillColor(1, 0, 0)

Also can you show the way you’re loading the image?

Thanks

Rob

#7

Thanks Rob, and longsw…! 

To load the background image I’m doing the following: 

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

Just found out that I have to load the background using newImageRect()

local background = display.newImageRect( "background.png", imageWidth, imageHeight )

The last two numbers, imageWidth and imageHeight, indicate the image’s base “1x” width and height!

Thanks again!!