how to fixed images positions with all devices sccreen size ?

Getting Started Newbie Questions
#1

hi bros…

I am confusing with screen sizes in app. As you now there are a  lot of different screen size of devices in the market,  i read in corona decomation about project configuration https://docs.coronalabs.com/guide/basics/configSettings/index.html

and i have many questions about it:

1- is it always make the height and width of all apps with  this value width = 320, height = 480, ?

2- is the corona smart by it self to get the best assets (images @1x,@2X,3@x) for device or need to declare it by me in the code ?

3- when i dfine width and height of image or imageRect as this example:

local banner =display.newImageRect(“morningBar.png”,display.contentWidth,160)

it apear in the top of screen of samsung S3 in simulator while in htc it take most screen size >>and this accure cause of different pixels number  between devices. so how can maintain the positiion of images keep fixed in all devices ?!

4-same thing about buttons positions between different devices, how can i fixed the positions ?!

#2

  1. There isn’t a right or wrong setup. You have to use what works for you.  320x480 is a common option because it matches up with Apple’s point system and an aspect ratio of 1.5:1 (or 3:2) fits on all screen sizes. Some people like to do 800x1200 or others go for the HDTV size of 1920x1080.

  2. Corona will be smart enough to use @2x, @4x type assets if you define it in config.lua correctly.  But you need to understand what that means. If you use a 320x480 and you say to use @2x assets at a 2x magnification, then it would use those for devices that were 640px and greater. But if you used an 800x1200, the @2x assets would not get used until your device was 1600px or wider.

  3. For Corona to use your dynamic images, you have to use display.newImageRect() and specify the width & height of the image. However, it doesn’t take an X and Y position. You have to manually position them by saying:

banner.x = someValue

banner.y = someValue

If you tell display.newImageRect() to use a size like display.contentWidth it will stretch the image to that size. If you want to keep the original image’s shape, you have to use the size of the image.

  1. Pretty much the same as #3.

Rob

#3

thank you @Rob Miracle 

#4

  1. There isn’t a right or wrong setup. You have to use what works for you.  320x480 is a common option because it matches up with Apple’s point system and an aspect ratio of 1.5:1 (or 3:2) fits on all screen sizes. Some people like to do 800x1200 or others go for the HDTV size of 1920x1080.

  2. Corona will be smart enough to use @2x, @4x type assets if you define it in config.lua correctly.  But you need to understand what that means. If you use a 320x480 and you say to use @2x assets at a 2x magnification, then it would use those for devices that were 640px and greater. But if you used an 800x1200, the @2x assets would not get used until your device was 1600px or wider.

  3. For Corona to use your dynamic images, you have to use display.newImageRect() and specify the width & height of the image. However, it doesn’t take an X and Y position. You have to manually position them by saying:

banner.x = someValue

banner.y = someValue

If you tell display.newImageRect() to use a size like display.contentWidth it will stretch the image to that size. If you want to keep the original image’s shape, you have to use the size of the image.

  1. Pretty much the same as #3.

Rob

#5

thank you @Rob Miracle 

#6

I also need help with understanding how to properly develop the application. My game is like guessing a movie by frame. The picture shows what it will consist of. Do I understand correctly that for my case it is better to use scale = “zoomEven” and an aspect ratio of 16: 9? And to indicate the position of elements in X and Y, use display.contentWidth and display.contentHeight multiplied by some number? The same for size?!

screens|690x485

P.s. working in Corona

#7

I suggest to use for X and Y positioning display.viewableContentWidth and display.viewableContentHeight property values.
https://docs.coronalabs.com/api/library/display/viewableContentWidth.html
https://docs.coronalabs.com/api/library/display/viewableContentHeight.html

1 Like
#8

I understood this fitting part, but I tried to set the position Y of the button using display.viewableContentHeight / 2 and expected that it would be centered. But in the end, it is above the center line. What’s wrong?

#9

Sorry for the late reply.
Could you post your config lua file

#10

I use this configuration:

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",
    fps = 60
},

Which basically keeps me one of the two resolutions (depending on whether the app is landscape or patraiit I have fixed the width or height)
Then I place the game pattern relative to the center, keeping in mind a game area of: 480 * 320
Above and below I put the ui, positioned relative to the top and bottom, in the case of a minimum area, that is: 480 * 320 the UI is inside the playing area.
If you want you can opt for a mini ui in the case.