Corona SDK – Cross-Platform Image Scaling – Experiments and Learning

Did lots of experimenting in Corona with placing of images on the screen with the different devices in the simulator (iPhone, iPhone4, iPad, Droid).
Scaling up is easier or less problematic. Scaling down, you want to replace the image.

Notes within the comments of the config.lua file:

application =
{
	content =
	{
		width = 320, --iPhone
		height = 480, --iPhone
		--width = 480, --Droid
		--height = 854, --Droid
		--width = 768, --iPad
		--height = 1024, --iPad
		--scale = "letterbox",  -- get black borders/bars
		scale = "zoomEven", --"uniformly scales up content to fill the screen, while preserving
		--                      aspect ratio. Some content may appear offscreen, if the new screen
		--                      has a different aspect ratio"
		--scale = "zoomStretch", --"non-uniformly scales up content to fill the screen. All content
		--                      will remain onscreen, but it may be stretched vertically or horizontally
		imageSuffix =
				{
					["_1p5"] = 1.5,		-- A good scale for Droid (480 x 854), Nexus One, etc.
					["_2p0"] = 2.0,		-- A good scale for iPhone 4 and iPad
					["_2p4"] = 2.4		-- (My addition) iPad scale, according to an article on Ansca's site
				},
	}
}

--NOTES;
-- Instead of suffixes like "_iPhone4_640by960", (though desciptive) it's better to use a general
-- descrption (on image file and in this code) that represents a scaling number, because different
-- images will have different pixel dimensions.

Notes and code from the main.lua sourcecode:

-- Demonstrates displaying a background image, and at least one in front
--
-- Version: 0.001 (February 21, 2012)
-- Eric Platt
-- NOTES:
--  display.newImage()  is different from display.newImageRect()
-- Droid 2 screen resolution:   480 x 854  			(1:1.78 = 16:9 aspect ratio = .5625) taller and thinner than iPhone
-- Nexus One screen resolution: 480 x 800
-- iPhone screen resolution:    320 x 480 at 163 ppi (2:3 aspect ratio = .6667)
-- iPhone 4 screen resolution:  960 x 640 at 326 ppi
-- iPad's screen resolution:    1024 x 768  		 (1:1.33 aspect ratio)
-- (http://developer.anscamobile.com/content/building-devices-android)
-- http://blog.anscamobile.com/2010/11/content-scaling-made-easy/
-- Loading an Dynamic Resoultion Image: http://developer.anscamobile.com/content/display-objects
--
-- The only thing that worked (so far) on every device, using the "local backImage = display.newImage" method, and
-- the config.lua file using width = 320, height = 480, scale = "zoomEven".  "letterbox" leaves black spaces on the sides.
-- Scaling graphics down did not work with zoomEven - got letterbox black bars effect. "zoomStretch" also worked like it was
-- supposed to, stretching to fill the screens. 

-- Background
--local halfW = display.viewableContentWidth / 2
--local halfH = display.viewableContentHeight / 2
--local halfW = display.contentCenterX
--local halfH = display.contentCenterY

local backImage = display.newImageRect( "morning_glories.png", 320, 480)
backImage.x = display.contentWidth / 2
backImage.y = display.contentHeight / 2
--image:translate( halfW, halfH )

local hummerImage = display.newImageRect( "hummingbird.png", 100, 100 )
hummerImage.x = display.contentWidth / 2
hummerImage.y = display.contentHeight / 2

local testCircleImage = display.newImageRect( "testCircle.png", 100, 100, true )
testCircleImage.x = display.contentWidth / 1.3
testCircleImage.y = display.contentHeight / 1.3

 

HyperCard

8/8/8  HyperCard!
Boy, where do I start, in writing about HyperCard!? There are so many connections there, in my history, as well as things in Personal Computing history, many of which (such as the connection to Flash and “multimedia” (and  multimedia programming) most people in the field are not aware of.

http://www.tilestack.com/

1/9/09
If you work in computer/media fields, and don’t know what Hypercard was, you are like an artist not know who Leonardo was. Or like an American not knowing that we landed men on the moon.