Good config setting here (iOS only)

Since there are no docs, and the blog posts love to also throw Android into the mix, I had to find my own settings for universal builds.

I finally found some good settings so my existing iphone game could look properly on iPad.

Here's the config.lua

application =
{
        content =
        {
                width = 320,
                height = 480,
                scale = "letterbox",
                                imageSuffix =
                                {
                                        ["@2x"] = 2,            -- A good scale for iPhone 4 and iPad
                        
                                },
                },
 
}

Thank you man!
I'm currently wrapping my head around this too!

Cheers!

Actually, what we did was this:
(skipped syntax...but hopefully you get the jist...

we did an if/else.

If ipad then:
width=384, height=512
scale = zoomEven
align center

["@2x"] = 1

else

width=320, height=480
scale = zoomEven
align center

["@2x"] = 2

Doing it this way we found allows us to use the Retina Display asset kit and not need to create a 3rd kit.
This method forces the touch grid of the iPad to match the phone...but still use full resolution graphics.

The only thing you have to remember is that when creating your Retina Graphics, be sure to accommodate for the bleed edge on the iPad.

we then are designing the app to function within the 320x480 zone of all devices...but we are making our backgrounds a bit larger to fill the edge void in the iPad.

Seems to work well...for us at least.

That looks interesting, though I'm not sure about a few things.

When on iPad wouldn't the x and y of upper left border of the screen be different from 0,0 since you're center aligning or am I wrong on this?

It seems to accomplish the same as the way I'm doing it though. I don't have to make a third set of assets for iPad, I just use the retina ones.

Edit: I meant to say upper left.

I used shorthand...
in the config...

actually type:
xAlign = "center"
yAlign = "center"

When building the app however...you will need to make your layout relative to the center of the screen rather than the top left corner...otherwise ... things won't line up correctly on an iPad.

My solution above was intended for new (future) apps...not for porting over existing apps.

I suspect if you change the iPad screen size to 320x480...and leave everything else the same...you will get an identical display as the 4G.

The difference between mine and your though is that I think if you just set the iPad screen size to 320x480 in the config and then set @2x to a 1 scale...you don't have to touch your app build anywhere. It should just become universal with a display similar to the 2x enlargement on an iPad...but will use the Retina graphics rather than the iPod graphics.

If you want to use the full screen of the ipad...then you will need to modify your source in your app to accommodate the different aspect ratios of the devices.

"When building the app however...you will need to make your layout relative to the center of the screen rather than the top left corner...otherwise ... things won't line up correctly on an iPad."

That's what I thought. It seems more trouble than it's worth. I guess it's not really a problem for a new app, but I like to work in 0-480 terms.

What I'm doing is just enlarging the background from a center alignment to add the bleed areas. It's hard to explain in words exactly how it works out. Maybe I'll post some pictures.

Using relative to center will reduce the amount of dual X,Y values in your build source. I have used top left in the past too...but will be switching over to make things universal and simpler to port.

The savings in avoiding an iPad asset kit and making the build universally render is worth the adaptation to center based layouts. If you have a hit...then porting over to other devices should be a snap if you use center based positioning.

To each their own though.

"Using relative to center will reduce the amount of dual X,Y values in your build source. I have used top left in the past too...but will be switching over to make things universal and simpler to port."

I'm not sure what you mean by this. The way I'm doing it requires absolutely no change to the X,Y values anywhere on my code. That's sort of the beauty of it. 0 is left border of iphone and ipad and 480 is the right border (in landscape) on iphone and ipad. Which is nice.

As for not building an iPad asset kid, I couldn't agree more. I just don't see why you need to move to center alignment to achieve that.

All I had to do was make my backgrounds larger to account for the iPad bleed size, which you had to do as well. The rest of the assets remained the same and I'm using the @2x ones on iPad (and also the 2x spritesheets).

I don't want to get into a pointless argument about who's method is better, I just wanted to understand the way you're doing it to see if was worth it to make the change.

Also I'd advise against using device labels in your code. Imagine the next iPad is labeled iPad2, that would break your code. I think it's better to rely on aspect ratios, since those are much less likely to change.

You are right...there is always more than 1 way to skin a cat. (old saying)

I was just sharing the way we are planning to approach Universal builds. As for device labels...I got that suggestion from Ansca's Blog.

Good luck with your next title!!!

@IgnacioIturra

Can you confirm if the display.newImageRect is required for all graphics that have iPhone4 suffix?

I was doing some testing for iPad screen and noticed that some of my graphics I had thought were retina on the iPhone4 were actually the 320 x 480 graphics.

I am therefore assuming that where I have code like:

1	localGroup:insert(display.newImage("images/splashBg.jpg"))

Yes you need display.newImageRect if you want the images to scale. This is also true for non universal builds.

Also remember that display.newImageRect has 2 more parameters, the x and y size of the original image (in reality it can be whatever you want, but stick the the original image size).

If you're using ui.lua for your buttons you'll need to edit it, since it uses display.newImage.

Thanks IgnacioIturra

Weird thing is that I am displaying the vast majority of my images using just display.newImage and this is working fine on both the 3G and iPhone4.

If the images were not scaling, surely I would see all the images as small on the iPhone4? Or would they just be the low res versions but look OK in terms of dimensions?

Thanks

Paul

"Or would they just be the low res versions but look OK in terms of dimensions?"

That's what's happening. With small images is not all that noticeable, but anything with sharp edges or images that have text (like buttons) and you can really see the difference.

Ah pants! Well there is no point in me having 400 images if I am only using 200 of them. Guess I will have to work my way through and change all the code to the imageRect syntax. I was under the false impression that if I did not include the retina sized images that the 3G images would not work on the iPhone 4. Certainly an option for keeping the file size down though I have now got my game down from 38MB to 17MB.

Cheers

Paul

In order to keep filesize down you can also opt to use only the highres image for some of your assets. This will lead to an increase in the use of Texture Memory in the 3GS version, so it's a compromise.

In my game for a lot of the smaller sized images I just use the high res version, since in filesize their pretty close to the big ones like backgrounds, but they'll just use a little more RAM.

I'll give you an example on how to do it. Say you have a 50x50 image.png and a 100x100 image@2x.png. Delete image.png and change the name of the 100x100 one to image.png.

You don't need to change the code. It should remain:

1	local image = display.newImageRect("image.png", 50, 50)

@IgnacioIturra

Wow thanks - I certainly wasn't aware this was possible. I will give this a go.

Fortunately I have now got all my graphics working across the 3 device screen sizes (iPhone 3G, iPhone 4 and iPad). I am not even going to think about the fact there is a new iPad screen size on the horizon or about Android screen sizes.

@IgnacioIturra - do you have 3 different sized Default.png images (one for iPhone 3G, one for iPhone4 and one for iPad)?

I ask as I have realized with your settings, that it seems to display Default.png on the iPhone4 instead of Default@2.png

Though doing as you suggest and renaming Default02.png as Default.png seems to do the trick

Be interested how you deal with the Default.png images

You can also use a dynamic config.lua that uses different layouts for different devices:

http://blog.anscamobile.com/2011/01/use-dynamic-layouts-in-universal-builds-with-corona-sdk/

@IgnacioIturra - I am curious how your solution works in terms of positioning elements for the iPad.

As a test I have created a file that has 2 graphics, a full screen background and a tile graphic. I have made my background graphic 512 x 384 (1024 x 768) and my tile 35 x 35 (70 x 70).

On the iPad I want to display the tile in the top left corner of the area that is the same as the iPhone 4 i.e the top left corner of the 960 x 640 area central to the 1024 x 768.

The following is how I have achieved this:

config.lua

if system.getInfo("model") ~= "iPad" then
        application = 
        {
                content =
                {
                        width = 320,
                        height = 480,
                        scale = "letterbox",
        
                        imageSuffix = 
                        {
                                ["@2x"] = 2,
                        },
                },
        }
                
                
else
 
        application = 
        {
                content =
                {
                        width = 384,
                        height = 512,
                        scale = "letterbox",
                        imageSuffix = 
                        {
                                ["@2x"] = 2,
                        },
                },
        }
 
 
 
 
end

Nice thread!

Hello,

Cheers for the info, all is very useful but I have one problem. On the iPad all the HD images are appearing as low resolution one. So basically the @2 doesn't work. Any idea why that might be?

Cheers

views:2225 update：2011/10/10 15:46:04


Label: corona android iphone ipad building error inmobi problem display screen View image tableView failed object physics touch button game lua config event listener