display in Corona depending of the phone

Solar2D General Questions/Discussion
#1

hi, 

I thought that with this code regardless of the phone model display of my background would be adapted for the screen , since I use display.contentWidht and Height

But this is not the case why? When i choose the Iphone6 i have a part of black…

local Background = display.newImageRect("background.png", display.contentWidth,display.contentHeight) Background.x = display.contentWidth\*0.5 Background.y = display.contentHeight\*0.5 Background.xScale = 1 Background.yScale = 1
#2

Hi @bexphones,

You should not be using “display.contentWidth” and “display.contentHeight” as the width and height parameters for “display.newImageRect()”. These values should be the width/height of the root “@1x” image file in your project.

Best regards,

Brent

#3

Thanks Brent, i think it’s referring this post :

http://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

But in my case if i use the display.actualContentHeight and Width for my background i can’t make error because it’s the width and Height of the current phone ?

I don’t see the difference…Can you enlighten me ?

#4

Hi @bexphones,

It’s best to think of the screen not in terms of the actual phone, but in terms of a rectangular area which can (and will) change “physical” size depending on the device (iPhone vs. iPad vs. any one of a million Android models). This is the “content area” and you need to fill that area with your own content… images, shapes, buttons, whatever. In Corona, that area will automatically scale up and down depending on the device it’s running on.

Now when it comes to your image background, you still want to set its width and height to its original @1x pixel dimensions, not the device pixel size. And that background should cover your content area size. So if you have a content area definition of 320x480, make sure your image is at least 320x480 as well (and it should be a little bigger because not all devices are the same 2:3 ratio of width:height).

Here are some links and videos which should help you:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

http://docs.coronalabs.com/api/library/display/newImageRect.html

http://youtu.be/RwVlzJtQWd8

#5

Hi Brent thank you for answering.

By reading this, i understand that i must choose a type of phone in the begin and adapt the content area for the others phones.

So if i choose per example the nexus One (480x800) i write in my config lua  :

application = {     content =     {         width = 480,         height = 800,         scale = "letterBox",         fps = 30,    },

The only thing I would like to have confirmation

with my backgroundit’s better to inform :

local Background = display.newImageRect("background.png", display.actualcontentWidth,display.actualcontentHeight)

than

local Background = display.newImageRect("background.png", 480,800)

while the correct widht and heigt are inform in the config.lua ?

#6

Hi @bexphones,

Almost correct… just that when using “letterbox” mode, display.actualContentWidth and display.actualContentHeight equal the pixel width/height including the letterbox bars area, which would differ from your content area on any device which didn’t have the same 400:800 screen ratio that you defined for your app. See the docs here:

http://docs.coronalabs.com/api/library/display/actualContentWidth.html

http://docs.coronalabs.com/api/library/display/actualContentHeight.html

Instead, try using just display.contentWidth and display.contentHeight.

Take care,

Brent

#7

Hi brent i come back to you :slight_smile:

After reading a lot of tutorial… I would know if the choose of the beginning resolution 320x480 is always a good solution taking into account the evolution of the resolution phone screens ?

I would especially like to develop applications for ios…

#8

Hi @bexphones,

There are many opinions on this, so there’s not one “correct answer”. The most important thing to understand is that 320x480, although seemingly outdated in terms of modern screen resolution, does not mean that your app will actually look outdated or in low-resolution. These values are mostly just a guideline for measurement on the screen. You will still be able to set up crisp, HD images on all devices using the config.lua setup.

I actually suggest that you use 320x480 if you plan to use Corona widgets. Several of these are based around 320x480 in sizing, so if you expect widgets (radio buttons, sliders, checkboxes, etc.) to be properly sized on the device, this is the resolution you should use.

Brent

#9

Hi @bexphones,

You should not be using “display.contentWidth” and “display.contentHeight” as the width and height parameters for “display.newImageRect()”. These values should be the width/height of the root “@1x” image file in your project.

Best regards,

Brent

#10

Thanks Brent, i think it’s referring this post :

http://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

But in my case if i use the display.actualContentHeight and Width for my background i can’t make error because it’s the width and Height of the current phone ?

I don’t see the difference…Can you enlighten me ?

#11

Hi @bexphones,

It’s best to think of the screen not in terms of the actual phone, but in terms of a rectangular area which can (and will) change “physical” size depending on the device (iPhone vs. iPad vs. any one of a million Android models). This is the “content area” and you need to fill that area with your own content… images, shapes, buttons, whatever. In Corona, that area will automatically scale up and down depending on the device it’s running on.

Now when it comes to your image background, you still want to set its width and height to its original @1x pixel dimensions, not the device pixel size. And that background should cover your content area size. So if you have a content area definition of 320x480, make sure your image is at least 320x480 as well (and it should be a little bigger because not all devices are the same 2:3 ratio of width:height).

Here are some links and videos which should help you:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

http://docs.coronalabs.com/api/library/display/newImageRect.html

http://youtu.be/RwVlzJtQWd8

#12

Hi Brent thank you for answering.

By reading this, i understand that i must choose a type of phone in the begin and adapt the content area for the others phones.

So if i choose per example the nexus One (480x800) i write in my config lua  :

application = {     content =     {         width = 480,         height = 800,         scale = "letterBox",         fps = 30,    },

The only thing I would like to have confirmation

with my backgroundit’s better to inform :

local Background = display.newImageRect("background.png", display.actualcontentWidth,display.actualcontentHeight)

than

local Background = display.newImageRect("background.png", 480,800)

while the correct widht and heigt are inform in the config.lua ?

#13

Hi @bexphones,

Almost correct… just that when using “letterbox” mode, display.actualContentWidth and display.actualContentHeight equal the pixel width/height including the letterbox bars area, which would differ from your content area on any device which didn’t have the same 400:800 screen ratio that you defined for your app. See the docs here:

http://docs.coronalabs.com/api/library/display/actualContentWidth.html

http://docs.coronalabs.com/api/library/display/actualContentHeight.html

Instead, try using just display.contentWidth and display.contentHeight.

Take care,

Brent

#14

Hi brent i come back to you :slight_smile:

After reading a lot of tutorial… I would know if the choose of the beginning resolution 320x480 is always a good solution taking into account the evolution of the resolution phone screens ?

I would especially like to develop applications for ios…

#15

Hi @bexphones,

There are many opinions on this, so there’s not one “correct answer”. The most important thing to understand is that 320x480, although seemingly outdated in terms of modern screen resolution, does not mean that your app will actually look outdated or in low-resolution. These values are mostly just a guideline for measurement on the screen. You will still be able to set up crisp, HD images on all devices using the config.lua setup.

I actually suggest that you use 320x480 if you plan to use Corona widgets. Several of these are based around 320x480 in sizing, so if you expect widgets (radio buttons, sliders, checkboxes, etc.) to be properly sized on the device, this is the resolution you should use.

Brent