Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Image Scaling
Started by veracode Oct 03 2019 01:09 PM

9 replies to this topic

Best Answer Rob Miracle , 04 October 2019 - 12:11 PM

Okay, let me try to provide a little more clarity and what's tripping you up. 

 

Let's start with an assumption (probably a bad one that's hung on since iPhone 3/4 days). The most commonly defined content area has an aspect ratio of 1:1.5.  In the old days (and this still holds true for a lot of things today), a phone was 320px wide and 480px high. 480 / 320 = 1.5, so the content area is 50% taller than it is wide (I'm doing everything in portrait). To this day, Apple still considered phones to be 320 points wide. Web Browsers treat all portrait phones at 320px wide. Ad provider banner ads are 320x50px even though the physical devices have much higher resolutions. These virtual points will be with us for a very long time. But I digress. The common content definition is usually 1.5x bigger than the width.

 

Why that value? Well it fits on both tablets which tend to be more square and it fits on phones which are more taller and thinner. The area outside of the content area is known as the "letterbox" area. On phones, you will have more pixels on the top and bottom. On iPads the extra space is on the sides. There is a very important tutorial that you need to read that helps explain this part more in depth:  https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/

 

I'm not going to repeat the stuff in the tutorial. I want to stay focused on dynamic images and programming the config.lua and creating your images.

 

You are using the Samsung S5 skin (1080x1920) and the iPad Pro (2048x2732).  If you look at the width, the iPad Pro is 1.89 x the Samsung's screen. The iPad is a more square tablet, so instead of comparing widths to get the scale difference, Corona uses the height, in this case 2732/1920 = 1.42x. The content area is going to scale to fit the iPad based on the height, the phone based on the width. This is a weird quirk, but it makes sense when you consider trying to make your defined shape fit different shaped screens.

Since the tablet vs. phone is in effect here. If you used the 1.5 value as I suggested above, then it's not going to work because of this issue. If you adjust the config.lua to 1.4 instead of 1.5 it will work as it should.

 

Consider this:

--
-- For more information on config.lua see the Project Configuration Guide at:
-- https://docs.coronalabs.com/guide/basics/configSettings
--

application =
{
	content =
	{
		width = 1080,
		height = 1920,
		scale = "letterbox",
		fps = 60,
		
		imageSuffix =
		{
			    ["@2x"] = 1.4,
		},
	},
}

And our main.lua:

-- Your code here

local title = display.newImageRect("title.png", 540, 120)
title.x = display.contentCenterX
title.y = 150

I created two title images - title@2x.png that's 1080x240 (2x the base)

and title.png that's 540x120:

 

Each image is labeled as being normal or @2x so you can visually change it.

 

With all this information, conduct two experiments. Set the content area to 1.5x of the width or 1620. This will cause the scaling to be more like 2048/1620 or 1.68x. Now change your suffix setting in config.lua between 1.6 and 1.7 and you can see in one case it will load the @2x image on the iPad and in the other it wont. Since you're content area is much taller (1.7888 aspect ratio), you have to divide the 2732/1920 is 1.42x, so if you want the @2x images to load on the iPad Pro, you have to set the scale to 1.4 in config.lua. Try changing it between 1.4 and 1.5 and see the difference.

 

Why did I make the 1x image 540px wide? Well that's half of 1080, so the title will take up 50% of the screen, which feels right for a title. But on the iPad, you have that extra letterbox area (2048 - 1080 = 968 extra pixels) so even the @2x image is going to look small.

 

There is no "right" or "wrong" way to setup up the config.lua. You set it up to work for you. But if I would make one recommendation if you want to support both iPads and tall phones is to make that content area closer to 1.5x instead of 1.788x. In other words, width 1080, height 1620. and use the tutorial I linked to above to help you deal with positioning things into the areas outside of the defined content area.

 

Rob

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

veracode

[GLOBAL: userInfoPane.html]
veracode
  • Observer

  • 8 posts
  • Corona SDK

I have just completed the tutorial, and began building my own app to challenge myself.

 

now that i am creating the menu portion of it i cant seem to get the scaling right for the title.

 

in the tutorials the title seemed to almost scale automatically.

 

is there anything i could do to make the image scale up or down? 

function scene:create( event )

	local sceneGroup = self.view
	
	local backGround = display.newImageRect( sceneGroup, "Images/BackGround1.png",
	display.contentWidth, display.contentHeight)
	backGround.x = display.contentCenterX
	backGround.y = display.contentCenterY

	local title = display.newImageRect(sceneGroup, "Images/Title.png",500 , 80)
	title.x = display.contentCenterX
	title.y = 45
end 


[TOPIC: post.html]
#2

jdsmedeirosbr

[GLOBAL: userInfoPane.html]
jdsmedeirosbr
  • Enthusiast

  • 52 posts
  • Corona SDK

https://docs.coronalabs.com/api/type/DisplayObject/scale.html



[TOPIC: post.html]
#3

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,207 posts
  • Enterprise

It's really hard to know what's going on without seeing your config.lua. In config.lua you define your virtual screen and if you've set your width to 320 for instance, a 500px wide title is going to be too big, but if you set your width to 1080, it's going to take up half the width (assuming a portrait/vertical app). 

 

Also Corona is designed to also look for higher resolution images to use on higher resolution devices. So if you've defined your virtual screen as 320x480, you may want that title to be a 125px wide image to take up about half the screen. Then you can have a middle resolution image Title@2x.png thats 250px wide and a Title@4x.png image that's 500px wide, that will get used when Corona maps that 320px wide screen to a higher resolution device for you. 

 

Rob



[TOPIC: post.html]
#4

veracode

[GLOBAL: userInfoPane.html]
veracode
  • Observer

  • 8 posts
  • Corona SDK

i did see the documentation on appending @2x and @4x  and so on , i guess i just don't know how to implement this into my code.

 

here is the config 


application =
{
content =
{
width = 1080,
height = 1920,
scale = "adaptive",
fps = 60,
 
--[[
imageSuffix =
{
    ["@2x"] = 2,
    ["@4x"] = 4,
},
--]]
},
}
 

 

It's really hard to know what's going on without seeing your config.lua. In config.lua you define your virtual screen and if you've set your width to 320 for instance, a 500px wide title is going to be too big, but if you set your width to 1080, it's going to take up half the width (assuming a portrait/vertical app). 

 

Also Corona is designed to also look for higher resolution images to use on higher resolution devices. So if you've defined your virtual screen as 320x480, you may want that title to be a 125px wide image to take up about half the screen. Then you can have a middle resolution image Title@2x.png thats 250px wide and a Title@4x.png image that's 500px wide, that will get used when Corona maps that 320px wide screen to a higher resolution device for you. 

 

Rob



[TOPIC: post.html]
#5

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,207 posts
  • Enterprise

So based on your config.lua, you're creating a virtual screen that's 1080 wide and 1920 high. Config.lua is always written assuming portrait mode. Your build.settings controls if you're building a landscape or portrait app. But let's assume it's portrait.

 

You probably don't really need to worry too much about multiple image sizes if you're using such a large content area. I guess you might want to have @2x assets for things like 12" iPad Pros. Simply create your art to fit your 1080x1920 content area and load it at the exact size. You don't want to enlarge images. it causes them to be soft and fuzzy. Downsizing images is okay, but upsizing is bad. 

 

Also you can always "lie" to display.newImageRect() too. Instead of:

local title = display.newImageRect(sceneGroup, "Images/Title.png", 500, 80)

you can do:

local title = display.newImageRect(sceneGroup, "Images/Title.png", 1000, 160)

and we will scale the image up, but you're going to suffer the sharpness issue inherent with enlarging images. 

 

You can also change the config.lua to be what your art was designed for, as an example, maybe 800 x 1200 or 720x1280 etc. At that point you may want to have @2x images for people on 1080x1920 devices.

 

Rob



[TOPIC: post.html]
#6

veracode

[GLOBAL: userInfoPane.html]
veracode
  • Observer

  • 8 posts
  • Corona SDK

when i "lie" 100 x 160 looks fantastic on the ipad / bigger screens, but it doesn't scale down on the smaller screens 

 

i don't mind having to create multiple images for the various screen sizes, but i wouldn't know how to write out the code to select the image best suited for the the screen the app is running on

So based on your config.lua, you're creating a virtual screen that's 1080 wide and 1920 high. Config.lua is always written assuming portrait mode. Your build.settings controls if you're building a landscape or portrait app. But let's assume it's portrait.

 

You probably don't really need to worry too much about multiple image sizes if you're using such a large content area. I guess you might want to have @2x assets for things like 12" iPad Pros. Simply create your art to fit your 1080x1920 content area and load it at the exact size. You don't want to enlarge images. it causes them to be soft and fuzzy. Downsizing images is okay, but upsizing is bad. 

 

Also you can always "lie" to display.newImageRect() too. Instead of:

local title = display.newImageRect(sceneGroup, "Images/Title.png", 500, 80)

you can do:

local title = display.newImageRect(sceneGroup, "Images/Title.png", 1000, 160)

and we will scale the image up, but you're going to suffer the sharpness issue inherent with enlarging images. 

 

You can also change the config.lua to be what your art was designed for, as an example, maybe 800 x 1200 or 720x1280 etc. At that point you may want to have @2x images for people on 1080x1920 devices.

 

Rob



[TOPIC: post.html]
#7

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,207 posts
  • Enterprise

application =
{
    content =
    {
        width = 1080,
        height = 1920,
        scale = "adaptive",
        fps = 60,
 
        imageSuffix =
        {
            ["@2x"] = 2,
        },
    },
}

The magic happens with the imageSuffix block which was commented out. With the above, on devices that are 2160 px wide it will pick up the 2x resolution images automatically if you apply an @2x suffix to the image such as Background@2x.png and Background.png on images that are 2159 px or less. 

 

This doesn't really help. In the world where there was only a 320x480 iPhone 3 and a 640x960 iPhone 4, 2x made a lot of sense, but if you were on an Android device that was 600x1024 like the original kindle fire, 600 is < 640, so Corona wouldn't pick up the higher res images for a higher res screen.  So I tend to use something more like:
 

application =
{
    content =
    {
        width = 1080,
        height = 1920,
        scale = "adaptive",
        fps = 60,
 
        imageSuffix =
        {
            ["@2x"] = 1.5,
        },
    },
}

The 1.5 is a subtile change, but but instead of waiting until you have a 2160 to use the 2x images, you use them starting at 1620px screens.

 

But in the end you're content area is still a virtual 1080x1920 and your base 1x art should be designed to look well on that screen size and just pick up the @2x images on larger screens.

 

Rob



[TOPIC: post.html]
#8

veracode

[GLOBAL: userInfoPane.html]
veracode
  • Observer

  • 8 posts
  • Corona SDK

This is starting to make more sense now, i added an image that was scaled on a 1080 x 1920 background and names it image@2x.png

 

the code picked it up immediately and attempted to use it for all the screens  this obviously didn't work out well since the image is too large. 

 

it seems the only image being used is the one named @2x, 

 

 

for the simulator im using the s5 seeting and switching form it to the Ipad air / pro



[TOPIC: post.html]
#9

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,207 posts
  • Enterprise

Don’t manually load the @Nx images. You need to let Corona manage that for you. I’m away from my computer for a little bit. I’ll try to provide a better example later. Rob

[TOPIC: post.html]
#10

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,207 posts
  • Enterprise

  Best Answer

Okay, let me try to provide a little more clarity and what's tripping you up. 

 

Let's start with an assumption (probably a bad one that's hung on since iPhone 3/4 days). The most commonly defined content area has an aspect ratio of 1:1.5.  In the old days (and this still holds true for a lot of things today), a phone was 320px wide and 480px high. 480 / 320 = 1.5, so the content area is 50% taller than it is wide (I'm doing everything in portrait). To this day, Apple still considered phones to be 320 points wide. Web Browsers treat all portrait phones at 320px wide. Ad provider banner ads are 320x50px even though the physical devices have much higher resolutions. These virtual points will be with us for a very long time. But I digress. The common content definition is usually 1.5x bigger than the width.

 

Why that value? Well it fits on both tablets which tend to be more square and it fits on phones which are more taller and thinner. The area outside of the content area is known as the "letterbox" area. On phones, you will have more pixels on the top and bottom. On iPads the extra space is on the sides. There is a very important tutorial that you need to read that helps explain this part more in depth:  https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/

 

I'm not going to repeat the stuff in the tutorial. I want to stay focused on dynamic images and programming the config.lua and creating your images.

 

You are using the Samsung S5 skin (1080x1920) and the iPad Pro (2048x2732).  If you look at the width, the iPad Pro is 1.89 x the Samsung's screen. The iPad is a more square tablet, so instead of comparing widths to get the scale difference, Corona uses the height, in this case 2732/1920 = 1.42x. The content area is going to scale to fit the iPad based on the height, the phone based on the width. This is a weird quirk, but it makes sense when you consider trying to make your defined shape fit different shaped screens.

Since the tablet vs. phone is in effect here. If you used the 1.5 value as I suggested above, then it's not going to work because of this issue. If you adjust the config.lua to 1.4 instead of 1.5 it will work as it should.

 

Consider this:

--
-- For more information on config.lua see the Project Configuration Guide at:
-- https://docs.coronalabs.com/guide/basics/configSettings
--

application =
{
	content =
	{
		width = 1080,
		height = 1920,
		scale = "letterbox",
		fps = 60,
		
		imageSuffix =
		{
			    ["@2x"] = 1.4,
		},
	},
}

And our main.lua:

-- Your code here

local title = display.newImageRect("title.png", 540, 120)
title.x = display.contentCenterX
title.y = 150

I created two title images - title@2x.png that's 1080x240 (2x the base)

Attached File  title@2x.png   19.66KB   0 downloads

and title.png that's 540x120:

Attached File  title.png   7.44KB   0 downloads

 

Each image is labeled as being normal or @2x so you can visually change it.

 

With all this information, conduct two experiments. Set the content area to 1.5x of the width or 1620. This will cause the scaling to be more like 2048/1620 or 1.68x. Now change your suffix setting in config.lua between 1.6 and 1.7 and you can see in one case it will load the @2x image on the iPad and in the other it wont. Since you're content area is much taller (1.7888 aspect ratio), you have to divide the 2732/1920 is 1.42x, so if you want the @2x images to load on the iPad Pro, you have to set the scale to 1.4 in config.lua. Try changing it between 1.4 and 1.5 and see the difference.

 

Why did I make the 1x image 540px wide? Well that's half of 1080, so the title will take up 50% of the screen, which feels right for a title. But on the iPad, you have that extra letterbox area (2048 - 1080 = 968 extra pixels) so even the @2x image is going to look small.

 

There is no "right" or "wrong" way to setup up the config.lua. You set it up to work for you. But if I would make one recommendation if you want to support both iPads and tall phones is to make that content area closer to 1.5x instead of 1.788x. In other words, width 1080, height 1620. and use the tutorial I linked to above to help you deal with positioning things into the areas outside of the defined content area.

 

Rob




[topic_controls]
[/topic_controls]