Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Dynamic Image scale
Started by andrea_corte May 08 2018 01:44 AM

- - - - -
2 replies to this topic

Best Answer Rob Miracle , 08 May 2018 - 07:15 AM

Both the iPhone 4 and 5 families are 640 pixel wide devices. You're defining your content area to be 320 points wide. 640/320 is 2.0.  But this isn't the problem you're running into. You're running into the fact that the devices are a different aspect ratios.  When you define your content area, you're creating your virtual screen and by default that virtual screen is centered (in your case vertically).  A 320 x 480 content area is an exact fit for an iPhone 4/4s but for the iPhone 5, 6, 7 and 8 families as well as many modern Android phones are taller with a 16:9 aspect ratio instead of the 3:2 aspect ratio of the iPhone 4 family and you're defined content area.

 

But that's okay, you can always position objects outside of your content area to fill the screen.  Consider this graphic:

 

The green area is your content area. The blue area is the typical 16:9 phone (16:9 in landscape mode is the typical TV screen, computer monitor, etc.) The yellow is the Samsung Galaxy S8 (and probably the S9 as well). The iPhone X is even taller. The pink area is the iPad screen and is typical of some Android tablets as well.

 

The only space that's guaranteed to be visible on all screens is the green area. You can easily position objects into the blue area, but on the iPhone 4/4s and the iPads, the top and bottom will be cut off. 

If you want to fill the screen, you have to detect if the actual content area (display.actualContentHeight) is greater than the defined content height (display.contentHeight) and either spread things out or add additional items to the larger screen.

 

Rob

 

 

[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

andrea_corte

[GLOBAL: userInfoPane.html]
andrea_corte
  • Observer

  • 26 posts
  • Corona SDK

Good evening

 

I have confused ideas I'm not very experienced
I'm creating an App and I want to use the dynamic image scale
The app must work on all devices
I want to insert a button on the bottom of the screen and changing the phone I want the button to see the same point on all the screens.
I calculated the scale factor with:
 
display.pixelHeight / display.actualContentHeight
 
but both on iphone 4s and iphone 5 always returns me 2 then the button located at the bottom on iphone 5 on iphone 4s is not seen.
I attach the code of my config:
 
application = {
content = {
width = 320,
height = 480, 
scale = "letterbox",
fps = 30,
 
 
       -- imageSuffix = {
--   ["@2x"] = 2,
--}
 
},
 
    --[[
    -- Push notifications
 
    notification =
    {
        iphone =
        {
            types =
            {
                "badge", "sound", "alert", "newsstand"
            }
        }
    }
    --]]    
}
 
I have read the various documents but have not been able to solve the problem
 
Thank you very much to those who help me and apologize for the English

Attached Files



[TOPIC: post.html]
#2

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 23,753 posts
  • Corona Staff

  Best Answer

Both the iPhone 4 and 5 families are 640 pixel wide devices. You're defining your content area to be 320 points wide. 640/320 is 2.0.  But this isn't the problem you're running into. You're running into the fact that the devices are a different aspect ratios.  When you define your content area, you're creating your virtual screen and by default that virtual screen is centered (in your case vertically).  A 320 x 480 content area is an exact fit for an iPhone 4/4s but for the iPhone 5, 6, 7 and 8 families as well as many modern Android phones are taller with a 16:9 aspect ratio instead of the 3:2 aspect ratio of the iPhone 4 family and you're defined content area.

 

But that's okay, you can always position objects outside of your content area to fill the screen.  Consider this graphic:

Attached File  apspectratiosS8portrait.jpg   48.01KB   0 downloads

 

The green area is your content area. The blue area is the typical 16:9 phone (16:9 in landscape mode is the typical TV screen, computer monitor, etc.) The yellow is the Samsung Galaxy S8 (and probably the S9 as well). The iPhone X is even taller. The pink area is the iPad screen and is typical of some Android tablets as well.

 

The only space that's guaranteed to be visible on all screens is the green area. You can easily position objects into the blue area, but on the iPhone 4/4s and the iPads, the top and bottom will be cut off. 

If you want to fill the screen, you have to detect if the actual content area (display.actualContentHeight) is greater than the defined content height (display.contentHeight) and either spread things out or add additional items to the larger screen.

 

Rob

 

 



[TOPIC: post.html]
#3

andrea_corte

[GLOBAL: userInfoPane.html]
andrea_corte
  • Observer

  • 26 posts
  • Corona SDK

Thank you so much for the explanation
 
It seems that I managed to solve by doing as you explained to me.
 
Thanks again for the help
 
Best regards



[topic_controls]
[/topic_controls]