How to scale images to full screen on all devices, i want to use %
the method i’ve seen so far is to define pixels
image_variable_name = display.newImage( “testimage.jpg”, 100, 300 )
i want to do something like
image_variable_name = display.newImage( “testimage.jpg”, 100%, 100% )
but that won’t work, i want something like fluid css, the image will maintain the size no matter what is the size of the screen. Is it possible?
You can’t use % with Corona. You have to calculate the difference in size and then use the :scale() function to resize the image.
local myImage = display.newImage(“myimage.png”, display.contentCenterX, display.contentCenterY)
local s = display.contentWidth / myImage.width
myImage:scale(s,s)
or something like that. I’ve not tested it, so my math may be off a bit. That will scale it to fit the width of the screen. Change the width’s to height’s to scale based on the image height instead.
sir i’m using the tablet preset in corona, how big is that? i need to know in order to calculate how much i need to scale my images.
If i can’t use %, does that mean i have to create a new version of the game to every phone/tablet out there? The screen size varies, so what is the best way to insure cross platform compatibility? Does the example you showed do the trick?
Well your config.lua should tell you what your settings are, however you really don’t need to hard code it. It’s what the two variables:
display.contentWidth
and
display.contentHeight
tell you. The code I gave you above will scale your image, to either the height or width. Most people though use dynamic scaling and let Corona do the work for them. I’ll try to quickly sum up how dynamic scaling works.
First, you have to define a base coordinate system for your app. An iPhone 3Gs is a 320x480 device (in vertical mode). An iPhone 4 and 4s is 640x960 (twice the screen size). The iPads clock in a 1024x768 and 2048x1536. Of course you have Android screens all over the place. An image on the retina Iphones is roughly the same size as the non-Retina iPads. So what you have is a need for a Low Resolution image, a Medium Res image and a HIgh Resolution image. With Android in the mix, they still basically fall into the same three categories, older lower res phones, high res phones/low res tablets (i.e. medium res) and high res tablets.
With everything in life, there are tradeoffs that have to be made. The lower res/older devices have slower CPU’s and less memory, so feeding them high res graphics means slower performance and possible crashes due to too much memory. Of course providing all three resolutions of images means your application download size is going to grow considerably. You of course could just try and hit the middle of the road to keep things simple.
Obviously you’re in for a programming nightmare if you have to use coordinates for a low res screen like 0,0 to the top left corner and 320, 480 for the bottom right corner on one device and 0,0 and 1536, 2048 on another. This is where your config.lua file comes into play.
Your app uses a file called “config.lua” as a place where you can tell it all about how you want to scale your screen and how to manage multiple resolutions of the same image. Within it it, you define the coordinate system you want to use. 0,0 will always be the top left, but you can set the width and height that you want to use. In the simplest example, you would pick a width of 320 and a height of 480 (always treat config.lua like you’re app is in portrait mode. Corona will manage flipping it for you in landscape apps).
With this set, all devices now have a width of 320 and a height of 480 as far as your app is concerned. Lets say you place an image at 100, 100. Corona SDK will automatically make that 200, 200 on a 640x960 device. It knows the physical scale of your device vs. your virtual scale and it moves things accordingly.
Now lets say you have a 100px x 100px image that looks right at 320x480. It would of course be too small on larger screens. Corona does one of two things for you (well it actually does both at the same time). If you provide multiple resolution images, it will go find the one that best fits the real screen size and then it will scale it up or down automatically until it’s proportionately the same on that screen. You operate with the 100x100 and Corona does the rest. On those 640x960 devices, it will grab your 200x200 image and draw it on the screen. On the high res tablets, it will grab your 400x400px image and use it.
You have to provide your base image (lets call it mypic.png for example): mypic.png at 100px by 100px. You also provide mypic@2x.png at 200px by 200px and mypic@4x.png at 400px by 400px. All three files live in your folder. In your code, you should use:
local mypic = display.newImageRect(“mypic.png”, 100, 100)
mypic.x = 200
mypic.y = 300
Notice I used newImageRect, not newImage. With display.newImageRect, you provide the base name of the image and its WIDTH and HEIGHT, unlike newImage, where you provide the X and Y of where to draw it. With newImageRect, you have to specify the X and Y separately (this is the center of the image btw).
Please look at the blog post: http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/
for an example of a config.lua that handles multiple devices. The thing I want to make sure you see is the @2x bits. Note the scale factor isn’t 2x and 4x, its 1.5x and 3x. This make it work best on those Android devices that are about half-way inbetween the iOS devices size wise.
Also read through our guides: http://docs.coronalabs.com/daily/guide/index.html
It will help you bring all of this together.
Now in the end, there are times where you need to take an image and scale it yourself. I have a photo gallery app that I put together. I have various sized photos in it and I want it to fill the screen vertically. I basically use the code I posted above:
local myImage = display.newImage("myimage.png", display.contentCenterX, display.contentCenterY) local s = display.contentHeight / myImage.height myImage:scale(s,s)
to do that. I don’t know what your image your trying to scale is. The code I first posted will scale it for you based on the width of the image.
To summarize, Corona SDK doesn’t use percentages like a web page does. You set a base scale that you want to use and Corona handles the math under the hood to keep things in proportion based on the device.
thanks a lot sir!
You can’t use % with Corona. You have to calculate the difference in size and then use the :scale() function to resize the image.
local myImage = display.newImage(“myimage.png”, display.contentCenterX, display.contentCenterY)
local s = display.contentWidth / myImage.width
myImage:scale(s,s)
or something like that. I’ve not tested it, so my math may be off a bit. That will scale it to fit the width of the screen. Change the width’s to height’s to scale based on the image height instead.
sir i’m using the tablet preset in corona, how big is that? i need to know in order to calculate how much i need to scale my images.
If i can’t use %, does that mean i have to create a new version of the game to every phone/tablet out there? The screen size varies, so what is the best way to insure cross platform compatibility? Does the example you showed do the trick?
Well your config.lua should tell you what your settings are, however you really don’t need to hard code it. It’s what the two variables:
display.contentWidth
and
display.contentHeight
tell you. The code I gave you above will scale your image, to either the height or width. Most people though use dynamic scaling and let Corona do the work for them. I’ll try to quickly sum up how dynamic scaling works.
First, you have to define a base coordinate system for your app. An iPhone 3Gs is a 320x480 device (in vertical mode). An iPhone 4 and 4s is 640x960 (twice the screen size). The iPads clock in a 1024x768 and 2048x1536. Of course you have Android screens all over the place. An image on the retina Iphones is roughly the same size as the non-Retina iPads. So what you have is a need for a Low Resolution image, a Medium Res image and a HIgh Resolution image. With Android in the mix, they still basically fall into the same three categories, older lower res phones, high res phones/low res tablets (i.e. medium res) and high res tablets.
With everything in life, there are tradeoffs that have to be made. The lower res/older devices have slower CPU’s and less memory, so feeding them high res graphics means slower performance and possible crashes due to too much memory. Of course providing all three resolutions of images means your application download size is going to grow considerably. You of course could just try and hit the middle of the road to keep things simple.
Obviously you’re in for a programming nightmare if you have to use coordinates for a low res screen like 0,0 to the top left corner and 320, 480 for the bottom right corner on one device and 0,0 and 1536, 2048 on another. This is where your config.lua file comes into play.
Your app uses a file called “config.lua” as a place where you can tell it all about how you want to scale your screen and how to manage multiple resolutions of the same image. Within it it, you define the coordinate system you want to use. 0,0 will always be the top left, but you can set the width and height that you want to use. In the simplest example, you would pick a width of 320 and a height of 480 (always treat config.lua like you’re app is in portrait mode. Corona will manage flipping it for you in landscape apps).
With this set, all devices now have a width of 320 and a height of 480 as far as your app is concerned. Lets say you place an image at 100, 100. Corona SDK will automatically make that 200, 200 on a 640x960 device. It knows the physical scale of your device vs. your virtual scale and it moves things accordingly.
Now lets say you have a 100px x 100px image that looks right at 320x480. It would of course be too small on larger screens. Corona does one of two things for you (well it actually does both at the same time). If you provide multiple resolution images, it will go find the one that best fits the real screen size and then it will scale it up or down automatically until it’s proportionately the same on that screen. You operate with the 100x100 and Corona does the rest. On those 640x960 devices, it will grab your 200x200 image and draw it on the screen. On the high res tablets, it will grab your 400x400px image and use it.
You have to provide your base image (lets call it mypic.png for example): mypic.png at 100px by 100px. You also provide mypic@2x.png at 200px by 200px and mypic@4x.png at 400px by 400px. All three files live in your folder. In your code, you should use:
local mypic = display.newImageRect(“mypic.png”, 100, 100)
mypic.x = 200
mypic.y = 300
Notice I used newImageRect, not newImage. With display.newImageRect, you provide the base name of the image and its WIDTH and HEIGHT, unlike newImage, where you provide the X and Y of where to draw it. With newImageRect, you have to specify the X and Y separately (this is the center of the image btw).
Please look at the blog post: http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/
for an example of a config.lua that handles multiple devices. The thing I want to make sure you see is the @2x bits. Note the scale factor isn’t 2x and 4x, its 1.5x and 3x. This make it work best on those Android devices that are about half-way inbetween the iOS devices size wise.
Also read through our guides: http://docs.coronalabs.com/daily/guide/index.html
It will help you bring all of this together.
Now in the end, there are times where you need to take an image and scale it yourself. I have a photo gallery app that I put together. I have various sized photos in it and I want it to fill the screen vertically. I basically use the code I posted above:
local myImage = display.newImage("myimage.png", display.contentCenterX, display.contentCenterY) local s = display.contentHeight / myImage.height myImage:scale(s,s)
to do that. I don’t know what your image your trying to scale is. The code I first posted will scale it for you based on the width of the image.
To summarize, Corona SDK doesn’t use percentages like a web page does. You set a base scale that you want to use and Corona handles the math under the hood to keep things in proportion based on the device.
thanks a lot sir!