Dynamic Image scale

Solar2D Lua Language
#1

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

#2

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

#3

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

#4

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

#5

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