Hi, I’m trying to create an utility app: no problems with the code, but the graphics isn’t good. When I load an image, it is always a little bit fuzzy ( I’m also putting -foo after the name of the images, naturally using the imageSuffix option in config.lua).
I’m using an iPhone 5. Should I use something else instead of -foo?
When you say “-foo” do you mean a placeholder for the dynamic scaling or actually “-foo”? What is the naming scheme you’re using for your images of different resolutions?
myImage-foo.png is the naminf scheme
So you’ve got bg.png, bg-x2.png etc and you’ve defined the schema in your config file? Have you read the documented instructions on the site? There’s also a couple of blog posts about it.
It would help to know, specifically, the filenames and to see your config file, of course…
It might be helpful for you to post your config.lua file.
I’m sorry for the late reply. Here’s the config.lua file:
application = {
content = {
width = 320,
height = 480,
scale = “letterBox”,
fps = 30,
antialias = true,
imageSuffix = {
["@2"] = 2,
["@3"] = 3,
["-bar"] = 3.3,
["-foo"] = 4.5,
}
},
}
Let’s look at what is going to happen with your config.lua:
For devices that are less than 640px wide, it’s going to look for “myImage.png”
For devices that are 640px wide up to 959px wide, its going to look for “myImage@2.png”
For devices that are 960px wide up to 1055px wide, its going to look for “myImage@3.png”
For devices that are 1056px to 1439px wide, it’s going to look for “myImage-bar.png” and
for devices that are 1440px or wider, then it’s going to look for “myImage-foo.png”.
These numbers are based on the width of the device while in portrait mode.
Your first category (less than 640px) includes the iPhone 3Gs, Kindle Fire, Barnes and Noble Nook Color, Tablet, etc., Most android phones like the Droid that have a 840x480 screen)
Your 2nd category (less than 960px) will include the iPhone 4, 4s, 5, iPad 1, iPad2, iPad Mini and Google Nexus 7 tablet, Nook HD, Kindle Fire HD 7" and so on.
Your 3rd category (less than 1056px)… Well I can’t find any devices that fit in here. Now that doesn’t meany there are any. Samsung has way too many devices to keep track of… But none of the common devices fall in this category.
The 4th group, less than 1440px, picks up the Kindle Fire 8.9" screens and the Nook HD+. The new 1080p group of devices will fall in here (newer Nexus’s, Ouya etc.)
The 5th group will include the Retina iPads (iPad 3, iPad 4).
So your -foo files are only going to get used by the Retina IPads. Your tablets like the KF and Nook Tablet are going to pick up your smallest image and blow it up. The iPhone 5, even though it is tall is going to use your @2 images just like an iPhone 4 will. The dynamic scaling works on the width, not the height.
One of the reasons I wrote the Ultimate config.lua post the way I did was to address issues like this. Two main things to point out.
I use:
imageSuffix = {
["@2x"] = 1.5,
["@4x"] = 3.0,
}
on purpose. With a factor of 1.5 and a 320px wide based config.lua, then devices smaller than 480px will use the normal “myImage.png”. Starting at 480px (now getting into those bigger screen droids), up to 959px, it’s going to use “myImage@2x.png”. This covers the Retina iPhones, the non-retina iPads, the 7" tablets and such. It will scale up a bit or down a bit, but it’s close enough there. then for the 1080p class devices, and the retina iPads it will take the largest image and scale down as necessary. Now I create my graphics exactly 1x, 2x and 4x.
So how do you deal with the different screen shapes? This is why we recommend using 360x570 images (720x1140 for @2x and 1440x 2280 for @4x) images. These will fill the screens (and in some cases bleed off screen), but it covers all shapes using roughly a 320x480 type screen. The Ultimate config.lua then handles setting the right height for the specific device.
When you say “-foo” do you mean a placeholder for the dynamic scaling or actually “-foo”? What is the naming scheme you’re using for your images of different resolutions?
myImage-foo.png is the naminf scheme
So you’ve got bg.png, bg-x2.png etc and you’ve defined the schema in your config file? Have you read the documented instructions on the site? There’s also a couple of blog posts about it.
It would help to know, specifically, the filenames and to see your config file, of course…
It might be helpful for you to post your config.lua file.
I’m sorry for the late reply. Here’s the config.lua file:
application = {
content = {
width = 320,
height = 480,
scale = “letterBox”,
fps = 30,
antialias = true,
imageSuffix = {
["@2"] = 2,
["@3"] = 3,
["-bar"] = 3.3,
["-foo"] = 4.5,
}
},
}
Let’s look at what is going to happen with your config.lua:
For devices that are less than 640px wide, it’s going to look for “myImage.png”
For devices that are 640px wide up to 959px wide, its going to look for “myImage@2.png”
For devices that are 960px wide up to 1055px wide, its going to look for “myImage@3.png”
For devices that are 1056px to 1439px wide, it’s going to look for “myImage-bar.png” and
for devices that are 1440px or wider, then it’s going to look for “myImage-foo.png”.
These numbers are based on the width of the device while in portrait mode.
Your first category (less than 640px) includes the iPhone 3Gs, Kindle Fire, Barnes and Noble Nook Color, Tablet, etc., Most android phones like the Droid that have a 840x480 screen)
Your 2nd category (less than 960px) will include the iPhone 4, 4s, 5, iPad 1, iPad2, iPad Mini and Google Nexus 7 tablet, Nook HD, Kindle Fire HD 7" and so on.
Your 3rd category (less than 1056px)… Well I can’t find any devices that fit in here. Now that doesn’t meany there are any. Samsung has way too many devices to keep track of… But none of the common devices fall in this category.
The 4th group, less than 1440px, picks up the Kindle Fire 8.9" screens and the Nook HD+. The new 1080p group of devices will fall in here (newer Nexus’s, Ouya etc.)
The 5th group will include the Retina iPads (iPad 3, iPad 4).
So your -foo files are only going to get used by the Retina IPads. Your tablets like the KF and Nook Tablet are going to pick up your smallest image and blow it up. The iPhone 5, even though it is tall is going to use your @2 images just like an iPhone 4 will. The dynamic scaling works on the width, not the height.
One of the reasons I wrote the Ultimate config.lua post the way I did was to address issues like this. Two main things to point out.
I use:
imageSuffix = {
["@2x"] = 1.5,
["@4x"] = 3.0,
}
on purpose. With a factor of 1.5 and a 320px wide based config.lua, then devices smaller than 480px will use the normal “myImage.png”. Starting at 480px (now getting into those bigger screen droids), up to 959px, it’s going to use “myImage@2x.png”. This covers the Retina iPhones, the non-retina iPads, the 7" tablets and such. It will scale up a bit or down a bit, but it’s close enough there. then for the 1080p class devices, and the retina iPads it will take the largest image and scale down as necessary. Now I create my graphics exactly 1x, 2x and 4x.
So how do you deal with the different screen shapes? This is why we recommend using 360x570 images (720x1140 for @2x and 1440x 2280 for @4x) images. These will fill the screens (and in some cases bleed off screen), but it covers all shapes using roughly a 320x480 type screen. The Ultimate config.lua then handles setting the right height for the specific device.