While making my game I started creating some graphical assets using Photoshop. After finishing I noticed that they became the wrong size inside Corona to that which was in photoshop.
How do I know what size I need to design my graphics on so that they appear exactly the same when running inside Corona? Do I need to set the canvas inside Photoshop to that listed in the config.lua file? In my case it is 320x480.
Thanks in advance
you’ve opened up a can of worms, and i’m not even sure where to begin – none of it is really that difficult, but there are several different technical aspects implied by your question…
content dimensions (as specified in config.lua) are like a “virtual” canvas size, which is stretched/extended/cropped as necessary (based on your selected “scale” method in config.lua) to the device’s actual physical pixel dimensions - which very often will differ from your content dimensions. (unless you ONLY run it on a single type of device)
let’s say your content dimensions as 320x480, scale = letterbox. and let’s also say that you’re running the simulator on an exactly 320x480 device of the iPhone 1/2/3 generation (there’s an Android mdpi in borderless, or use a custom). and let’s also assume that you’ve made sure the simulator’s zoom scale is 1:1.
with all of that in place, your 320x480 content pixels should exactly match the simulated device’s 320x480 physical pixels, and at 1:1 scale.
if you now create, for example, an image in photoshop with dimensions 160x240 and you’re viewing it at 100% scale.
If you now display that image in your code, without altering it’s scale, then you should expect that to occupy exactly 1/4 of the total content area.
and if everything is still 1:1 throughout the entire chain then it ought to appear exactly the same on-screen between simulator and photoshop (“same” meaning wrt size, ie disregarding any potential minor antialiasing effects)
if any one of those links in the chain is other than exactly 1:1 scale, then what you see in the simulator won’t match what you see in photoshop.
BUT… once you finally grasp how all of this works, you’ll realize it doesn’t really matter. for example, switch the simulator to an iPhone 4 now, at twice the resolution (640x960) and guess what? your image will now appear twice as large in the simulator as it does in photoshop (assuming everything is still at 1:1 scale)
One of the first things you have to understand is that hitting pixel perfect images simply isn’t practical. In the days were screens were 320x480 or 640x960 it was, but today with the endless number of shape and size screens.
Next, understanding this guiding principle of digital imagery: Images scale down better than they scale up (there are exceptions to this rule) but scaling up images get blurry, scaling down tends to retain sharpness.
Once that’s understood, then you have to think about your virtual screen size. Popular ones are 320x480 and 800x1200. And there are basically two to three screen sizes. Low density, medium density and high density screens. If you use 320x480, you will target all three, if you use 800x1200 then you will target two…
You should create 1X, 2X and 4X resolution versions. So if you’re building a card game, you might make your cards 64x96 for the 1X sized image. The 2x version would be 128x192 and the 4x would be 256x384. Since we want to start with the highest resolution graphics, you would actually create the 4x version first, and then resize them in photoshop by 50% to make the 2x and then the 1x version.
Why those odd numbers? Well you can make them whatever size you want, but computers are more efficient when you’re using Power of Two numbers (2, 4, 8,16, 32, 64,128, 256, 512, 1024, 2048 etc.) But todays devices are fast enough and if you art makes sense to be 74px x 213px make it fit.
Normally we use a specific naming convention for artwork. Lets say you’re making a button thats 100x50 and you want to name it button.png, then you would end up with button.png (100x50), button@2x.png (200x100) and button@4x.png (400x200). If you’re using an 800x1200 content area we are only going to have two files: button.png (200x100) and button@2x.png (400x200).
If your config.lua is configured properly and you use display.newImageRect() in your code, Corona will automatically use the right sized image for the screen.
So determine your config.lua’s content area (320x480, 800x1200, etc), build your images 4x bigger than you need them (or 2x bigger with a larger content area) and then downsize to the 2x an 1x images.
Rob
I see now, so since I am using 320x480 I should design the UI elements at 4x the size? so basically in Photoshop, the canvas I design on should be 1280x1920 and then scale down and it will work fine?
Thanks for the detailed explanations guys
Yes, that’s the basic concept.
Rob
you’ve opened up a can of worms, and i’m not even sure where to begin – none of it is really that difficult, but there are several different technical aspects implied by your question…
content dimensions (as specified in config.lua) are like a “virtual” canvas size, which is stretched/extended/cropped as necessary (based on your selected “scale” method in config.lua) to the device’s actual physical pixel dimensions - which very often will differ from your content dimensions. (unless you ONLY run it on a single type of device)
let’s say your content dimensions as 320x480, scale = letterbox. and let’s also say that you’re running the simulator on an exactly 320x480 device of the iPhone 1/2/3 generation (there’s an Android mdpi in borderless, or use a custom). and let’s also assume that you’ve made sure the simulator’s zoom scale is 1:1.
with all of that in place, your 320x480 content pixels should exactly match the simulated device’s 320x480 physical pixels, and at 1:1 scale.
if you now create, for example, an image in photoshop with dimensions 160x240 and you’re viewing it at 100% scale.
If you now display that image in your code, without altering it’s scale, then you should expect that to occupy exactly 1/4 of the total content area.
and if everything is still 1:1 throughout the entire chain then it ought to appear exactly the same on-screen between simulator and photoshop (“same” meaning wrt size, ie disregarding any potential minor antialiasing effects)
if any one of those links in the chain is other than exactly 1:1 scale, then what you see in the simulator won’t match what you see in photoshop.
BUT… once you finally grasp how all of this works, you’ll realize it doesn’t really matter. for example, switch the simulator to an iPhone 4 now, at twice the resolution (640x960) and guess what? your image will now appear twice as large in the simulator as it does in photoshop (assuming everything is still at 1:1 scale)
One of the first things you have to understand is that hitting pixel perfect images simply isn’t practical. In the days were screens were 320x480 or 640x960 it was, but today with the endless number of shape and size screens.
Next, understanding this guiding principle of digital imagery: Images scale down better than they scale up (there are exceptions to this rule) but scaling up images get blurry, scaling down tends to retain sharpness.
Once that’s understood, then you have to think about your virtual screen size. Popular ones are 320x480 and 800x1200. And there are basically two to three screen sizes. Low density, medium density and high density screens. If you use 320x480, you will target all three, if you use 800x1200 then you will target two…
You should create 1X, 2X and 4X resolution versions. So if you’re building a card game, you might make your cards 64x96 for the 1X sized image. The 2x version would be 128x192 and the 4x would be 256x384. Since we want to start with the highest resolution graphics, you would actually create the 4x version first, and then resize them in photoshop by 50% to make the 2x and then the 1x version.
Why those odd numbers? Well you can make them whatever size you want, but computers are more efficient when you’re using Power of Two numbers (2, 4, 8,16, 32, 64,128, 256, 512, 1024, 2048 etc.) But todays devices are fast enough and if you art makes sense to be 74px x 213px make it fit.
Normally we use a specific naming convention for artwork. Lets say you’re making a button thats 100x50 and you want to name it button.png, then you would end up with button.png (100x50), button@2x.png (200x100) and button@4x.png (400x200). If you’re using an 800x1200 content area we are only going to have two files: button.png (200x100) and button@2x.png (400x200).
If your config.lua is configured properly and you use display.newImageRect() in your code, Corona will automatically use the right sized image for the screen.
So determine your config.lua’s content area (320x480, 800x1200, etc), build your images 4x bigger than you need them (or 2x bigger with a larger content area) and then downsize to the 2x an 1x images.
Rob
I see now, so since I am using 320x480 I should design the UI elements at 4x the size? so basically in Photoshop, the canvas I design on should be 1280x1920 and then scale down and it will work fine?
Thanks for the detailed explanations guys
Yes, that’s the basic concept.
Rob