Hi,
What do I have to do in order to support all currently-supported iDevices ? Do I have to make art for every resolution or is there any auto-resizing facility inside Corona?
And what happens if you run a game that you made for iPod touch 4G on a Retina iPad?
(I know if you resize you will lose quality but as I’m rapid prototyping, I don’t care about that right now.) [import]uid: 166325 topic_id: 34212 reply_id: 334212[/import]
You may want to take a look at this:
http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/
and this:
http://developer.coronalabs.com/content/configuring-projects [import]uid: 159908 topic_id: 34212 reply_id: 136067[/import]
There are a couple of different schools of thought and Corona helps in either case. The first school of thought is to build resolution specific graphics and let Corona pick the art based on the device in use. For instance, you build a 320x480 background called background.png, a 640x960 background called background@2x.png and a 1280x1920 one called background@4x.png (I’m not dealing with the different screen shapes yet, just talking about how Corona can pick the art for you.)
Now you position all your buttons, graphics, etc. based on a screen that’s 320x480 in size and Corona through some additional magic will pick up the right sized graphic for the device and your iPad4 will use the highest resolution image, your iPhone4, 4S and 5 and iPad2 will use the medium sized one while an older 3Gs will use the lower resolution graphics. Your app size will be bigger because you’re including extra images, but your lower powered devices will appreciate using the smaller images.
The next school of thought is to use medium sized graphics only and let Corona automatically scale up or down based on the devices capacity. This takes more CPU and in the case of lower memory devices like the 3Gs more memory, but your app size is considerably smoother. On the other size, when Corona scales images up, they won’t be quite as sharp, but the retina iPads do a really good job of making these lower resolution images look good. If you don’t care about the 3Gs (and perhaps we are to a point of saying its time to cut them free), then you could do a system where your basic graphics are medium sized and you use a grid of 640x960 to position everything and provide @2x images for the retina devices.
Now for managing the different shapes, there are different strategies there too. One is to make all devices use 320x480 (or 640x960) and take that out of the middle of each devices screen. On the iPhone 4’s this will fit perfectly. On the iPhone 5 there will be 44px at the top and bottom that are outside those bounderies (vertical, or left and right horizontally). In other words the screen coordinates for a horizontal iPhone 5 game using a fixed 320x480 screen size would actually be
-44,0 -------------------------524,0
| |
| |
-44,320-----------------------524,320 The iPad has the opposite problem as your extra space is on top and bottom for a landscape game.
Your background has to be bigger than the 320x480 so that it will bleed out on all devices (570x360 is the magic size).
The other way to address this is to use a flexible scaling where 0,0 is always the top left corner and display.contentWidth/display.contentHeight is the bottom right corner. This fills the screen exactly but you have to position things relativly based on distance from the edges or distance from the center. In other words elements will move in or out/ up or down based on the shape of the device. We blogged about this here:
http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/
Any way, that blog post covers how to make backgrounds that work on all devices and covers how to do the @2x and @4x graphics relative to how you build your config.lua.
[import]uid: 199310 topic_id: 34212 reply_id: 136068[/import]
What about placement of GUI elements? [import]uid: 206803 topic_id: 34212 reply_id: 136203[/import]
If you use the config.lua where 0,0 is the top left and display.contentWidth,display.contentHeight is the bottom right, things will be at different distances from each other. Something positioned at X = 64 and another object at display.contentWidth - 64 will have a different distance apart from each other. For some physics based games, this isn’t the ideal situation.
But if you are positioning things like a joystick button and a fire button, you want them to be “anchored” to the sides and bottom. Your high score display, any GUI items like a home button, you want those to move into the right place.
Maybe it’s my twisted mind, but what I do when looking at an app is say:
“What things need to be some distance from the Top?”, “What things need to be near the bottom?” (and the same for the sides). Then using:
homeButton.x = 64
homeButton.y = 64
highScore.x = display.contentWidth - 128
highScore.y = 64
joystick.x = 64
joystick.y = display.contentHeight - 64
fireButton.x = display.contentWidth - 64
fireButton.y = display.contentHeight - 65 Those items will position correctly. We don’t care how far apart the home button in the top left is from the score in the top right.
Then for things that are important to be a distance apart, you can use the center to control them. Lets say your sling shot needs to be 300 pixels from your wall, then you can do:
slingshot.x = display.contentCenterX - 150
wall.y = display.contentCenterX + 150 This puts a bit more math on you… But it works pretty well.
[import]uid: 199310 topic_id: 34212 reply_id: 136205[/import]
Thanks man, you surely are definition of a good moderator/support!
What about sizes like font sizes? How can I determine what size for fonts should I use for GUI? [import]uid: 206803 topic_id: 34212 reply_id: 136206[/import]
Font sizes won’t change. display.newText() scales up with the device. What doesn’t scale up is native.newTextField() and native.newTextBox(). In that case, you can do something like:
nativeScale = display.pixelHeight / display.contentHeight
fontSize = 12 \* nativeScale
myNativeNewTextField.size = fontSize Corona provides a display.contentScaleX, display.contentScaleY which does what my nativeScale calculation does, but it’s inverted. That is if you’re setup as 320x480, then the value will be 0.5 on an iPhone 4, where as my calculation goes the other way and would be 2.0. In other words:
fontSize = 12 / display.contentScaleX
would do the same thing. [import]uid: 199310 topic_id: 34212 reply_id: 136207[/import]
Thanks man! [import]uid: 206803 topic_id: 34212 reply_id: 136209[/import]
You may want to take a look at this:
http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/
and this:
http://developer.coronalabs.com/content/configuring-projects [import]uid: 159908 topic_id: 34212 reply_id: 136067[/import]
There are a couple of different schools of thought and Corona helps in either case. The first school of thought is to build resolution specific graphics and let Corona pick the art based on the device in use. For instance, you build a 320x480 background called background.png, a 640x960 background called background@2x.png and a 1280x1920 one called background@4x.png (I’m not dealing with the different screen shapes yet, just talking about how Corona can pick the art for you.)
Now you position all your buttons, graphics, etc. based on a screen that’s 320x480 in size and Corona through some additional magic will pick up the right sized graphic for the device and your iPad4 will use the highest resolution image, your iPhone4, 4S and 5 and iPad2 will use the medium sized one while an older 3Gs will use the lower resolution graphics. Your app size will be bigger because you’re including extra images, but your lower powered devices will appreciate using the smaller images.
The next school of thought is to use medium sized graphics only and let Corona automatically scale up or down based on the devices capacity. This takes more CPU and in the case of lower memory devices like the 3Gs more memory, but your app size is considerably smoother. On the other size, when Corona scales images up, they won’t be quite as sharp, but the retina iPads do a really good job of making these lower resolution images look good. If you don’t care about the 3Gs (and perhaps we are to a point of saying its time to cut them free), then you could do a system where your basic graphics are medium sized and you use a grid of 640x960 to position everything and provide @2x images for the retina devices.
Now for managing the different shapes, there are different strategies there too. One is to make all devices use 320x480 (or 640x960) and take that out of the middle of each devices screen. On the iPhone 4’s this will fit perfectly. On the iPhone 5 there will be 44px at the top and bottom that are outside those bounderies (vertical, or left and right horizontally). In other words the screen coordinates for a horizontal iPhone 5 game using a fixed 320x480 screen size would actually be
-44,0 -------------------------524,0
| |
| |
-44,320-----------------------524,320 The iPad has the opposite problem as your extra space is on top and bottom for a landscape game.
Your background has to be bigger than the 320x480 so that it will bleed out on all devices (570x360 is the magic size).
The other way to address this is to use a flexible scaling where 0,0 is always the top left corner and display.contentWidth/display.contentHeight is the bottom right corner. This fills the screen exactly but you have to position things relativly based on distance from the edges or distance from the center. In other words elements will move in or out/ up or down based on the shape of the device. We blogged about this here:
http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/
Any way, that blog post covers how to make backgrounds that work on all devices and covers how to do the @2x and @4x graphics relative to how you build your config.lua.
[import]uid: 199310 topic_id: 34212 reply_id: 136068[/import]
What about placement of GUI elements? [import]uid: 206803 topic_id: 34212 reply_id: 136203[/import]
If you use the config.lua where 0,0 is the top left and display.contentWidth,display.contentHeight is the bottom right, things will be at different distances from each other. Something positioned at X = 64 and another object at display.contentWidth - 64 will have a different distance apart from each other. For some physics based games, this isn’t the ideal situation.
But if you are positioning things like a joystick button and a fire button, you want them to be “anchored” to the sides and bottom. Your high score display, any GUI items like a home button, you want those to move into the right place.
Maybe it’s my twisted mind, but what I do when looking at an app is say:
“What things need to be some distance from the Top?”, “What things need to be near the bottom?” (and the same for the sides). Then using:
homeButton.x = 64
homeButton.y = 64
highScore.x = display.contentWidth - 128
highScore.y = 64
joystick.x = 64
joystick.y = display.contentHeight - 64
fireButton.x = display.contentWidth - 64
fireButton.y = display.contentHeight - 65 Those items will position correctly. We don’t care how far apart the home button in the top left is from the score in the top right.
Then for things that are important to be a distance apart, you can use the center to control them. Lets say your sling shot needs to be 300 pixels from your wall, then you can do:
slingshot.x = display.contentCenterX - 150
wall.y = display.contentCenterX + 150 This puts a bit more math on you… But it works pretty well.
[import]uid: 199310 topic_id: 34212 reply_id: 136205[/import]
Thanks man, you surely are definition of a good moderator/support!
What about sizes like font sizes? How can I determine what size for fonts should I use for GUI? [import]uid: 206803 topic_id: 34212 reply_id: 136206[/import]
Font sizes won’t change. display.newText() scales up with the device. What doesn’t scale up is native.newTextField() and native.newTextBox(). In that case, you can do something like:
nativeScale = display.pixelHeight / display.contentHeight
fontSize = 12 \* nativeScale
myNativeNewTextField.size = fontSize Corona provides a display.contentScaleX, display.contentScaleY which does what my nativeScale calculation does, but it’s inverted. That is if you’re setup as 320x480, then the value will be 0.5 on an iPhone 4, where as my calculation goes the other way and would be 2.0. In other words:
fontSize = 12 / display.contentScaleX
would do the same thing. [import]uid: 199310 topic_id: 34212 reply_id: 136207[/import]
Thanks man! [import]uid: 206803 topic_id: 34212 reply_id: 136209[/import]