One image for both portrait and landscape

Solar2D General Questions/Discussion
#1

My app has portrait and landscape modes. In landscape, users will see a full 480×320 picture rendered. In portrait, they must see part of the “big picture”, in 320×480. I couldn’t find a way to use just one big image and position it accordingly (in portrait, for example, a 640x480 image occupies only part of the screen, instead of appearing full). At the end, my temporary solution was to use 2 images, one for each scenario. My main concern here is the total size of the application, as I am duplicating files. question is: is there a way to show a 640x480 (or any other size) full screen in portrait mode?

thanks,
Alex [import]uid: 4883 topic_id: 990 reply_id: 300990[/import]

#2

What was the problem with your 640x480 image? [import]uid: 5712 topic_id: 990 reply_id: 2340[/import]

#3

Mike, here goes (the image size is 3264x2448 - it was the only one i had at hands):
http://www.ppgplaces.com/test.png

I was expecting to have the screen be covered with the entire image (with part of the image “out of screen”). I used the following code:
local backgroundPortrait = display.newImage(“test.png”)

thanks for your support!
Alex [import]uid: 4883 topic_id: 990 reply_id: 2351[/import]

#4

Huh? That image is 330x489. Anyway, Corona is acting weird with it. Take this code:

local img = display.newImage( “test.png” , 0 , 0 )
function onFrame()
img.rotation = img.rotation + 1
end
Runtime:addEventListener( “enterFrame” , onFrame )

With a small image like and icon.png, the picture is placed in the top left corner like you would expect it. With your image it is placed in the center of the screen. This is unpredictabel and imho makes Corona very difficult to work with.
[import]uid: 5712 topic_id: 990 reply_id: 2352[/import]

#5

Hey Alex

I’ve been working on issues like this for a while, so my 2 cents…

  1. Setup a group to hold the images, you are going to need to tile them as Corona scales down the size if the image is too large (its a bug / issue that needs sorting)

  2. Divide your images into power of 2 sizes (better for memory) 512 x 512, 256 x 256 etc…

  3. Position them when loading with local display.newImage( “test.png” , x , y ) where x and y are the sizes of the next image, so image 1 you might place at x = -128 and the next and x=128, etc… so you are rebuilding the large image

  4. Set the reference point of the group to the point which you wish to rotate about it about (prob 1/2 screen height & 1/2 screen width)

That should do it, then when you change orientation rotate the group to match the rotation of the device.

You can then get all fancy and use transitions to animate the group between rotations, much like the fishes example but you dont need to fade between images as you have one large enough to fit both portrait and landscape

If you dont want to rotate about the centre of the screen things get more complicated as you will need 5 points of rotation to account for the different otentations and extra groups so if use the centre of the screen if you can

If you need any help let me know [import]uid: 5354 topic_id: 990 reply_id: 2361[/import]

#6

(Copied from related thread: http://developer.anscamobile.com/forum/2010/05/12/image-size-different-original )

Hi, Alex. The current behavior is a feature that automatically downscales images that are larger than the screen. Specifically, the latest versions of Corona will downscale to the next power-of-2 size larger than the native screen size. On iPhone, this currently means that anything over 512 x 512 will be downscaled on load.

The reasoning behind this is that texture memory is very limited on iPhone, and swapping data in and out of texture and main memory is very slow, so you don’t want to overrun the texture memory buffer if you can help it. Also, textures in OpenGL-ES are allocated in powers of 2, no matter what your image size is (so the sizes allocated are 128x512, 1024x1024, etc.)

However! There are definitely cases where you want to override our autoscaling, so we’ve got this filed as bug #28, and we plan to implement an optional flag to override this autoscaling behavior – so loading a 640 x 480 image on iPhone won’t be a problem once that flag is added.

The quick temporary solution is to either cut up the image, as you did, or just rescale it back up after loading, which will add a bit of blur but might look OK. The rescaling method will also save lots of texture memory, since a 640x480 image allocates twice as much texture memory as the downscaled 512x(?) image – so downscaling/upscaling might be a superior approach even after we add the new flag.

Note that the largest possible texture is 1024x1024 on iPhone 3G, and 2048x2048 on iPhone 3GS. There is no way to load a single image larger than that without chopping it up into tiles. (Looking at the iPhone photo viewer app, I think it may be downscaling photos to no more than 2048x2048, and then upscaling slightly in software, since the photos look a bit pixellated at full magnification.) [import]uid: 3007 topic_id: 990 reply_id: 2367[/import]