Is there a way to use "newImageRect" taking automatically the width and height of the @1x image?

Hi community,

in order to have a nice upscaling of my games, I’m using display.newImageRect() and create all graphics in @1x, @2x, and @3x.

Now, whenever I want to use an image, I have to check manually the width and height (of the @1x image) in order to fill the required parameters for display.newImageRect().

Is there a way to make display.newImageRect() use automatically the width and height of the @1x image? Or is there a nice workaround to get programmatically the width and height of the @1x image and then pass it to the display.newImageRect()?

Cheers,

Chris

Just use newImage()

Note: This is all in the API docs and elsewhere.

API Docs here: https://docs.coronalabs.com/api/

Tip: If you look at the docs for newImageRect(), you’ll notice it even suggests other related topics:

  See also

display.newImage()

display.loadRemoteImage()  

Display Objects (guide)

Image Sheets (guide)

@chris: this isn’t the lightest operation, but it gets the job done and as long as you’re not constantly loading new images in a tight loop during critical gameplay moments, it should appear seamless. You can just create your own image loading function and use that in lieu of the usual display.newImage and/or display.newImageRect calls.

I’m typing this code up on the fly, so it hasn’t been tested, but it should work. It follows the syntax for display.newImageRect, so you can optionally pass in a parent display group and custom width/height values to override the @1x values if you wish. It adds a new function to the display library that I’m calling ‘display.myNewImage’, but you could obviously call it whatever you want.

function display.myNewImage(...) local parent = display.currentStage local filename = '' local baseDir = system.ResourceDirectory local w, h = nil, nil for i = 1, #arg do local a = arg[i] if type(a) == 'string' then filename = a elseif type(a) == 'table' then parent = a elseif type(a) == 'userdata' then baseDir = a elseif type(a) == 'number' then if w == nil then w = a else h = a end end end if (w == nil and h == nil) then local sizer = display.newImage(filename, baseDir) w, h = sizer.width, sizer.height display.remove(sizer) sizer = nil end img = display.newImageRect(parent, filename, baseDir, w, h) return img end

image sheets.

put all your images in an atlas, at all three resolutions, define sheetContentWidth|Height per the @1x dimensions, then all dynamic selection happens _ there _, then just blindly use display.newImage(sheet, index) without any further effort and it’ll be dynamic resolution (because the _ sheet _ is).

after, you’d only need newImageRect if actually wanted to _ change _ the dimensions - no need to _ ever _ specify original dimensions.

I think I misread, or under-thought this a little.

At first I thought, “He simply wants to create a image w/o specifying the size and having it default to the 1x image size.”

Then, I remembered newImage() does not use content scaling and he implies he has @2x and other images.

So, the fall back is to:

  • do it manually - what he is trying to avoid

  • Use code given above by Jason ( good solution ) ( I’d go with this actually )

  • Use SSK2(or take my code from  it) to determine the size.

    local w,h = ssk.misc.getImageSize( filename ) local img = display.newImageRect( filename, w, h )

Thank you for your answers and @schroederapps for your code! :slight_smile:

As I understood, it basically comes down to loading the image via display.newImage, getting it’s width and height, removing it and then loading the image via display.newImageRect. I’ve also checked the SSK2 library and this is also what is done there in ssk.misc.getImageSize.

I’ve also looked in the image sheets option. Here, a tool like the Texture Packer would be necessary, otherwise I would have to again specify by hand the dimensions in the definitions.

I just thought about another option: Trying to make my code editor (I use Sublime Text) automatically add the width and height of the referenced image file. But I’m not sure if this is possible with Sublime…

Anyways, thanks again for your posts - now I know the options :slight_smile:

Just use newImage()

Note: This is all in the API docs and elsewhere.

API Docs here: https://docs.coronalabs.com/api/

Tip: If you look at the docs for newImageRect(), you’ll notice it even suggests other related topics:

  See also

display.newImage()

display.loadRemoteImage()  

Display Objects (guide)

Image Sheets (guide)

@chris: this isn’t the lightest operation, but it gets the job done and as long as you’re not constantly loading new images in a tight loop during critical gameplay moments, it should appear seamless. You can just create your own image loading function and use that in lieu of the usual display.newImage and/or display.newImageRect calls.

I’m typing this code up on the fly, so it hasn’t been tested, but it should work. It follows the syntax for display.newImageRect, so you can optionally pass in a parent display group and custom width/height values to override the @1x values if you wish. It adds a new function to the display library that I’m calling ‘display.myNewImage’, but you could obviously call it whatever you want.

function display.myNewImage(...) local parent = display.currentStage local filename = '' local baseDir = system.ResourceDirectory local w, h = nil, nil for i = 1, #arg do local a = arg[i] if type(a) == 'string' then filename = a elseif type(a) == 'table' then parent = a elseif type(a) == 'userdata' then baseDir = a elseif type(a) == 'number' then if w == nil then w = a else h = a end end end if (w == nil and h == nil) then local sizer = display.newImage(filename, baseDir) w, h = sizer.width, sizer.height display.remove(sizer) sizer = nil end img = display.newImageRect(parent, filename, baseDir, w, h) return img end

image sheets.

put all your images in an atlas, at all three resolutions, define sheetContentWidth|Height per the @1x dimensions, then all dynamic selection happens _ there _, then just blindly use display.newImage(sheet, index) without any further effort and it’ll be dynamic resolution (because the _ sheet _ is).

after, you’d only need newImageRect if actually wanted to _ change _ the dimensions - no need to _ ever _ specify original dimensions.

I think I misread, or under-thought this a little.

At first I thought, “He simply wants to create a image w/o specifying the size and having it default to the 1x image size.”

Then, I remembered newImage() does not use content scaling and he implies he has @2x and other images.

So, the fall back is to:

  • do it manually - what he is trying to avoid

  • Use code given above by Jason ( good solution ) ( I’d go with this actually )

  • Use SSK2(or take my code from  it) to determine the size.

    local w,h = ssk.misc.getImageSize( filename ) local img = display.newImageRect( filename, w, h )

Thank you for your answers and @schroederapps for your code! :slight_smile:

As I understood, it basically comes down to loading the image via display.newImage, getting it’s width and height, removing it and then loading the image via display.newImageRect. I’ve also checked the SSK2 library and this is also what is done there in ssk.misc.getImageSize.

I’ve also looked in the image sheets option. Here, a tool like the Texture Packer would be necessary, otherwise I would have to again specify by hand the dimensions in the definitions.

I just thought about another option: Trying to make my code editor (I use Sublime Text) automatically add the width and height of the referenced image file. But I’m not sure if this is possible with Sublime…

Anyways, thanks again for your posts - now I know the options :slight_smile: