Currently in my code I use display.newImage but I noticed in someother posts people using display.newRect for their images. I’m not noticing any memory leaks.
Which is better to use?
Thanks
Lori
Memory leaks are not an issue for any of the three options:
- newImage()
- newImageRect()
- newRect() followed by assigning a texture as a fill.
The benefits as I see them are:
- newImage() - None. I don’t use this EVER.
- newImageRect() - Exact control over dimensions <w,h> AND automatically uses @2x, @3x, @4x images if you set them up in config.lua and are supplying them.
- newImage() does not do this. (see gotchas in newImage() docs)
If you know the image size before loading, use display.newImageRect() instead — this API also handles loading the proper image resolution based on the device’s resolution.
- newRect() - Simple and Flexible. I use the image fill options all the time and this is my go to choice for most non- auto-scaling apps.
Question To Experts: Do image fills scale? i.e. if I create a newRect() and fill it with a texture, will the app use the @2x, @3x, @4x textures at the right time? I think the answer is, “No”, but I’ve never had any reason to check.
-Ed
I did set my @2x, @3x etc in config.lua. So I guess I’d better change my newImage() to new Image(Rect) so it will work correctly.
Thanks!
Lori
Is the @2x, @3x applicable to all my images or just the icons?
Didn’t you ask a question about @2x, @3x and icons before? It seems familiar.
Anyways, icons and display images are separate:
- Your config.lua settings control auto-scaling and the use of @2x, @3x textures for display objects.
- Icons (specifically named ones) are specified in build.settings, and are not affected by config.lua settings. These icon names are required based on target devices you wish to be compatible with.
Yes I did ask a question about ICONS a few questions back. Sorry for the confusion. I have the @2x etc in my build.settings and not in my config.lua settings.
So, I do need to save multiple copies of all my images in the various sizes that I define in my config.lua and I must use newImageRect(). Is this correct?
For some reaosn, I had it in my brain that I only had to do that for the ICONS.
I do appreciate your patience when answering my questions.
Thanks,
Lori
Hi. If you specify scaling selection in your config.lua file, then for any images (used for display objects) that you want the system to auto-select for, simply supply the base size, 2X, 3X, etc.
However, if you only want some images to use the base size, then supply only the base size. You’ll get a warning saying something like, “Couldn’t find @2x”, but the game/app will work fine.
The rule here is, when you have auto-selection enabled, you need to provide the @2x, @3x, ONLY when you want them used. Otherwise supply only the base size and all will be fine.
Yes, you must use newImageRect(). I know the docs are a little hazy on this, but AFAIK only newImageRect() pays attention to the settings in config.lua, and newImage() definitely DOES NOT. (I wish that function didn’t even exist actually, but it does have some uses…)
Once more re: icons, so we are clear. Icons are completely separate and a concern of the target device and build.settings. The fact that they have names like @2x, @3x, etc. is simply a side-effect of standard nomenclature.
My suggestion. Make your game/app first. Handle making the assets, setting up config.lua, etc. Then, when all that is working. Made decisions about your icons. Thinking about both at the same time may be confusing things for you.
Update: Above I said “I wish that function didn’t even exist actually, but it does have some uses…” I do realize this function is useful. My real gripe is that so many new users go right to this function and never learn to use newImageRect(). Then, they run into problems and wonder why.
Thanks taking the time to respond so thoroughly! The information was really helpful.
FWIW, display.newImage() is great if you don’t know what size your image is. If you try to load an image that you don’t know it’s dimensions with display.newImageRect() it will shape to the width and height you set, which can distort the image, if the width and height don’t match the aspect ratio of the image. It’s best to load those in with display.newImage() and scale it to fit your need. This is primarily an issue with images you download from the internet or if you’re building a photo display.
For game art, you should know the width and height of your images and display.newImageRect() is the API of my choice.
Rob
along the same lines, also useful in some cases when loading back in a captured image. particularly when at device resolution, yet captured with content coords - as sometimes the pixel-scaling math is hard to recreate *exactly*. so if you care about maintaining *exact* aspect then better to load w newImage() and scale yourself (rather than fitting it into a rect that might not be exact aspect)
I only ever use newImage to load an image that might have a varying width/height depending on the situation. Say for instance I’m loading from an array of images, some of which might be square, while some might be wide rectangles or tall rectangles.
I then read the .width and .height values, destroy the image and load it again using newImageRect now that I know the size/aspect ratio of the image.
The table below is the from the Project Build Settings guide and refers to creating icons.
I created my own game art so I know the sizes. When I am saving my game art to work with @2x, @3x etc… do I save them using the referenced Size (w×h) as noted below or is this just for icons?
Also, I have an app that resizes the image to the requested dimensions. Is it ok to use this for saving my game art and icon’s to the various sizes? I wasn’t sure if it would distort. It is alot faster than pulling up the canvas and resaving.
Thanks,
Lori
For iOS, you must create a series of app icons for the iOS devices you plan to support. Apple also recommends a set of smaller icons for spotlight search results and settings. All icons should adhere to the names and sizes listed below. For detailed information on creating icons, please refer to the iOS Human Interface Guidelines.
File iOS Version Size (w×h) Usage Icon-60@3x.png >= 8.0 180 × 180 App Icon — iPhone 6 Plus Icon-Small-40@3x.png >= 8.0 120 × 120 Search — iPhone 6 Plus Icon-Small@3x.png >= 8.0 87 × 87 Settings — iPhone 6 Plus Icon-60.png >= 7.0 60 × 60 App Icon — iPhone Icon-60@2x.png >= 7.0 120 × 120 App Icon — Retina iPhone Icon-76.png >= 7.0 76 × 76 App Icon — iPad Icon-76@2x.png >= 7.0 152 × 152 App Icon — Retina iPad Icon-Small-40.png >= 7.0 40 × 40 Search/Settings — all devices Icon-Small-40@2x.png >= 7.0 80 × 80 Search/Settings — all devices Icon.png <= 6.1 57 × 57 App Icon — iPhone Icon@2x.png <= 6.1 114 × 114 App Icon — Retina iPhone Icon-72.png <= 6.1 72 × 72 App Icon — iPad Icon-72@2x.png <= 6.1 144 × 144 App Icon — Retina iPad Icon-Small-50.png <= 6.1 50 × 50 Search/Settings — iPad Icon-Small-50@2x.png <= 6.1 100 × 100 Search/Settings — Retina iPad Icon-Small.png <= 6.1 29 × 29 Search/Settings — iPhone Icon-Small@2x.png <= 6.1 58 × 58 Search/Settings — Retina iPhone
The text you quoted above is just for Icons. If you game needs a button to draw at say 50x50. You create a 50x50, a 100x100 and typically a @4x version. @3x is an oddity that comes with the iPhone 6, and it’s primarily for business type apps. You want an @4x image of 200x200 (or whatever is 4x your base image).
I just got through reading the Tutorial: Modernizing the config.lua. And that helped me understand better. That new code sure does knock it down to a few lines.
When I was designing my objects, I always used IPAD Retina in the simulator. So after reading the tutorial, I assume those would be my @2x and then I would reduce the size by 50% to be my base image which would not have any suffix behind the image. Is that correct?
Do I also need a @400x? I understood it to say I only needed two sizes. I’m sure I’m mixing things up…so I appreciate the clarifications.
Thanks and Happy Easter!
Lori
Definitely not a 400x!!! A lot depends on your config.lua and what you’re art is already build for. You define the space your screen will live in, like 320 x 480 (plus any extra space the modernizing config.lua adds per device). At this size a button might make sense being 30 pixels high and 60 pixels wide. When that device becomes a newer iPhone, like the iPhone 4 or 5 where the screen is really 640x960 (2x the 320x480) base, then you want to use your @2x assets which would be 60 x 120 pixels. The retina iPads have way big screens and for us to upsize that 60x120 to something big enough to take up the same relative space on the screen, we suggest having an @4x image that would be 120x240.
But if you’re artwork is already designed to fit on a Retina iPad, then you might want to leave it alone. There are not likely any iPhone’s out there that would choke on images that size. Though you might be stressing older iPhone 4’s at that point.
Can you post your config.lua?
My current config.lua is very basic. Below is my current config.lua and what I was planning on changing it to:
Current config.lua:
application =
{
content =
{
width = 768,
height = 1024,
scale = “letterBox”
}
}
But I was planning going to the example in Tutorial: Moderning the config.lua:
– calculate the aspect ratio of the device
local aspectRation = display.pixelHeight/display.pixelWidth
application = {
content = {
width = aspectRatio > 1.5 and 800 or math.ceil (1200/aspectRatio),
height = aspectRatio <1.5 and 1200 or math.ceil (800* aspectRatio),
scale = “letterBox”,
fps = 30
imageSuffic = {
["@2x"] = 1.3
},
},
}
Would this be correct?
Thanks for your help.
Lori
Hi Lori,
Is what you posted a direct copy from your actual code? If so, I notice a few syntax errors/misspelling which are going to cause problems:
[lua]
local aspectRation
–should be: local aspectRatio
imageSuffic
–should be: imageSuffix
[/lua]
Brent
I typed it so they are from my fat fingering the key board. Thanks for the clarification.
Memory leaks are not an issue for any of the three options:
- newImage()
- newImageRect()
- newRect() followed by assigning a texture as a fill.
The benefits as I see them are:
- newImage() - None. I don’t use this EVER.
- newImageRect() - Exact control over dimensions <w,h> AND automatically uses @2x, @3x, @4x images if you set them up in config.lua and are supplying them.
- newImage() does not do this. (see gotchas in newImage() docs)
If you know the image size before loading, use display.newImageRect() instead — this API also handles loading the proper image resolution based on the device’s resolution.
- newRect() - Simple and Flexible. I use the image fill options all the time and this is my go to choice for most non- auto-scaling apps.
Question To Experts: Do image fills scale? i.e. if I create a newRect() and fill it with a texture, will the app use the @2x, @3x, @4x textures at the right time? I think the answer is, “No”, but I’ve never had any reason to check.
-Ed
I did set my @2x, @3x etc in config.lua. So I guess I’d better change my newImage() to new Image(Rect) so it will work correctly.
Thanks!
Lori