Setting max width and height on images for Corona SDK

As some of you may know, I am currently experimenting with Corona SDK to develop with one code base, an application that can be deployed to both iOS and Android devices.

Corona SDK’s UI tools are very primitive, and this is the first of several entries on how to improve upon the standard UI API Corona gives you.

One of the first problems I ran into was image sizes. In Corona, I can give an image a size via the display.newImageRect() function, and Corona will scale my image for me. However, it does not maintain the aspect ratio of the original image.

I pulled out my ui module and added a function to figure out the width of an object, given the height:

-- get the width of an image given the height of the image. Maintain aspect ratio
function ui.imageGetWidth(image, height)
	local tempImage = display.newImage(image)
	
	local multiplier = height / tempImage.height
	
	tempImage:removeSelf()
	return tempImage.width * multiplier
end

With this function, all I cared about was setting a maximum height, and not caring about the restraining width. However, I soon found this was too limited and needed to find a real height and width given a maximum for each direction. So I expanded that function a bit into this:


-- get the size of an image given the maximum width and height. Maintain aspect ratio. Prefers larger image
function ui.getImageSize(image, maxwidth, maxheight)
	-- print(image .. ":" .. maxwidth .. "x" .. maxheight)
	local tempImage = display.newImage(image)
	
	local multiplier_height = maxheight / tempImage.height
	local multiplier_width = maxwidth / tempImage.width
	
	local width = nil
	local height = nil
	
	if multiplier_height > multiplier_width then
		width = tempImage.width * multiplier_height
		height = tempImage.height * multiplier_height
	else
		width = tempImage.width * multiplier_width
		height = tempImage.height * multiplier_width	
	end	
	
	-- do we need to shrink?
	if width > maxwidth then
		--resize width
		multiplier_width = maxwidth / width
		
		width = maxwidth
		height = height * multiplier_width
	end
	
	if height > maxheight then 
		--resize height
		multiplier_height = maxheight / height
		
		
		height = maxheight
		width = width * multiplier_height
		-- because this can only shrink, we do not need to check width again
	end
	
	tempImage:removeSelf()
	
	--make whole
	width = math.floor(width)
	height = math.floor(height)
	
	return {
		width = width,
		height = height
	}
end

Which worked perfectly, except now I needed to call it, then create an image and then set that image to the values returned from it. This created a lot of extra overhead and a lot of complicated code. So to tie it all together, I rewrote the display.newImageRect into this:

function ui.newImageRect(image, maxwidth, maxheight)
	local size = ui.getImageSize(image, maxwidth, maxheight)
	return display.newImageRect(image, size.width, size.height)
end

The new ui.newImageRect ties everything together and I can create aspect ratio restrained scaled images with one line of code.

Be Sociable, Share!

No related posts.

No Comments.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>