Supporting multiple displays

[Squadventure_Games]

Hi, 

I’ve read the following articles:

http://www.coronalabs.com/blog/2011/01/27/dynamic-image-resolution-made-easy/

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

But the first seems really outdated and the second might not actually work for my game. The second does sound great though, being able to use most of the screen on most devices.

My concern is with the positioning of objects if I use Rob Miracle’s config.lua. My game will have a background image, and on top of it, objects will be placed in key places of that background. This does not seem like it would work, would it?

I’m currently using something simple like this:

application = {     content = {         --width = 768, height = 1024, -- iPad Retina         --width = 640, height = 960, -- iPod 4 Retina         width = 640, height = 1136, -- iPod 5         scale = "letterBox",         --scale = "zoomStretch",         fps = 30,                          imageSuffix = {                 ["@1.5x"] = 1.5,             ["@2x"] = 2,                 ["@4x"] = 4,         }     },  

Which as you can see, I’ve been trying several configurations.

I was just wondering what the best way to do this is. Should I use the iPod5’s resolution as the base, or should I use something like 320x480 like the first article suggests?

Or maybe there’s a way to use Rob Miracle’s config.lua with my positioning requirements.

Any direction would be greatly appreciated.

[bjsorrentino]

Hi George,

For the first article, that’s very outdated. This is the second time today that it was mentioned (very odd). Can you cite where you found the link to that article? Or, did you just locate it via Internet search? If it’s coming from one of our pages, I need to eliminate and update the URL to something newer.

Anyway, on your topic, whatever “content area” you set up, the positioning of objects in that space will remain the same as long as you’re not using “zoomStretch”. So, even if the content area goes off the screen somewhat (on some devices), the coordinate system will remain the same on that overall canvas-like content area.

Now, if you want some objects to remain flush to an edge of the screen, or positioned in direct correlation to an edge of the screen, you’ll need to use offset values to make sure they appear in the correct place, independent of the device aspect ratio.

It’s up to you which content size you choose. These days, I just go with 640x960 or 768x1024 (iPad 1&2), versus 320x480, because I generally don’t target pre-iPhone4 devices. It all works out proportionally the same, however, if you set up your config suffix values correctly.

Brent

[Squadventure_Games]

Hi Brent,

Thanks for your response.

For the first article, that’s  very  outdated. This is the second time today that it was mentioned (very odd). Can you cite where you found the link to that article? Or, did you just locate it via Internet search? If it’s coming from one of our pages, I need to eliminate and update the URL to something newer.

I did find the first article through a Google search. A link to an updated article at the top of that one would be great. 

Anyway, on your topic, whatever “content area” you set up, the positioning of objects in that space will remain the same as long as you’re not using “zoomStretch”. So, even if the content area goes off the screen somewhat (on some devices), the coordinate system will remain the same on that overall canvas-like content area.

So the positioning of objects shouldn’t be affected even if I specify a different content area for different devices? Even if I create my background image with display.contentWidth, display.contentHeight? Or should I specify the width/height of the background image with the values for the base image?

t’s up to you which content size you choose. These days, I just go with 640x960 or 768x1024 (iPad 1&2), versus 320x480, because I generally don’t target pre-iPhone4 devices. It all works out proportionally the same, however, if you set up your config suffix values correctly.

What do you think about the configuration given in the second article? I’m targeting iPod 4 and above, but also want to target Android devices. What do you recommend?

Thanks again.

[bjsorrentino]

Hi George,

OK, I see now… yes, if you are changing your actual content size per-device, then it can’t be guaranteed that your objects will remain in the proper locations.

Frankly, it’s difficult to make specific suggestions for content size and config, because each developer works differently. Many users prefer the method that Rob Miracle outlines in his “Ultimate Config” tutorial. Personally, I prefer to keep it simple and use just one content size in “letterbox” mode, then use offset values to orient some objects in relation to a particular screen edge.

Similarly, it’s hard to suggest a specific content size. In one app, I use 704x1024. I know that sounds weird because it’s not really a match on any specific device, but rather a “compromise” between iPhone4 and iPad, plus it accommodates the wide variety of Android devices fairly well. The “letterbox” scale method just makes sense to me, so I’ve stayed with that. If you need, I can explain how to get offset values per-device to make certain object obey the screen edges.

Brent

[rob]

What are your positioning requirements?

The ultimate config.lua works with the understanding that depending on the shape of the device, some of the background will be off screen, but that 0,0 will be the top left and display.contentWidth, display.contentHeight will be the bottom right corner regardless of shape of the device.  By keeping the basic device scaled to the same settings (i.e. don’t have one device 320x480 and another device 640x960) then most things will stay in the same spot.

It also requires thinking relativly with regards to position.  For landscape app, an iPhone 5 is 88 pixels wider than an iPhone 4 (or 44 points when scaled to 320x).  You have to deal with that extra space some how.  So if you use absolute positioning and you need a button near the right edge of an iPhone 4, you’re going to need x = 460 or so.  On the iPhone 5, that’s going to be an additional 44 points away from the right edge which isn’t going to look good.   By saying, these elements need to stretch to fit the device, things that need to be X pixels away from the top or left edge you just set the .x and .y to the value.  But for things that need to stay X pixels away from the right or bottom edges, then you have to use display.contentWidth - distance, and display.contentHeight - distance.  Then regardless of the device these things position correctly.  Then things that need to be a relative distance from the center (think of Angry birds where the sling shot has to be some distance away from the pigs), then you do display.contentCenterX +/- some distance and regardless of the device that distance between the two doesn’t change.

Now the quirky thing is how I got to some of these numbers.  It might be tempting to make the iPad 512x384, but we want to keep the scaling relative to the other devices, so instead we make it 360x480 (same shape, just scaled down a bit).  Then on the wide devices like the iPhone 5 or the letterbox androids are more like 320x570.  Thus if your backgrounds cover 360x570 it will fill the screen properly.

[Squadventure_Games]

Hey guys, I really appreciate your help.

I’ve been playing around with “the ultimate config.lua” for a little while so let me try to understand this better.

What are your positioning requirements?

1. I have some HUD elements in the screen, some that should be at the top of the screen, and others at the very bottom. This shouldn’t be an issue because I can use relative to 0,0 for the top-aligned items, and relative to contentWidth/contentHeight for the bottom-aligned items.

2. The game is a point-and-click adventure, so my background image is my scene. I then add items on top of that scene, like particles and game-related items for the user to click. This is where I’m most concerned. Should I use contentWidth/contentHeight for my background scene image, or should I use the dimensions of my base image here? Likewise, for items that go on top of the scene, what width/height should I use for them? It seems like if I use contentX for the background, items will be misplaced since the image would be stretched. Correct me if I’m wrong here.

that depending on the shape of the device, some of the background will be off screen, but that 0,0 will be the top left and display.contentWidth, display.contentHeight will be the bottom right corner regardless of shape of the device.

What do you mean by the background being off-screen? I guess this would happen if I don’t use contentWidth/contentHeight when I’m creating my background image. So does this mean I should use my base width/height?

I hope I made my case a bit clearer. Please let me now if you need more info. 

[Squadventure_Games]

I think I understand now. I should use the following to create my background image:

local background = display.newImageRect("assets/images/scene1.png", 570, 360) background:setReferencePoint(display.TopLeftReferencePoint) background.x, background.y = 0, 0

 and not display.contentWidth and contentHeight, and place my game items inside the 320x480 inner block (using 360x570 coordinates), that way they will definitely be visible in any device. This way items should get placed in the same position of the background image regardless of the device used.

Please correct me if I’m wrong.

[rob]

Well I would center the background, but a lot depends on the background contents.  But you have the basic idea.

[Squadventure_Games]

Well, if I center the background I won’t be able to use absolute positions accurately, and for this game I do need absolute positions. This means that I need the top left corner of my image to be the top-left corner of the content. So in my case, my image would only bleed in the right and bottom.

Do you see any problem with doing it like this?

[contact593]

Hi,i am 

wondering do you have any new article regarding the supporting multiple display? i still use @2x, @3x and also i am using the ultimate config file. therefore my position is relative to the center of the device. my coding will be CenterX, CenterY and then plus or minus the pixel required.

example

[Lua] display.contentCenterX-275 [/Lua]

[bjsorrentino]

Hi @contact593,

What kind of information are you seeking? Not much has changed in terms of multiple displays, except for Apple requiring apps to utilize the size/resolution of the iPhone5 screen, but I believe that’s been covered in previous tutorials, and here:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

http://docs.coronalabs.com/guide/distribution/buildSettings/index.html

Best regards,

Brent

[bjsorrentino]

Hi George,

For the first article, that’s very outdated. This is the second time today that it was mentioned (very odd). Can you cite where you found the link to that article? Or, did you just locate it via Internet search? If it’s coming from one of our pages, I need to eliminate and update the URL to something newer.

Anyway, on your topic, whatever “content area” you set up, the positioning of objects in that space will remain the same as long as you’re not using “zoomStretch”. So, even if the content area goes off the screen somewhat (on some devices), the coordinate system will remain the same on that overall canvas-like content area.

Now, if you want some objects to remain flush to an edge of the screen, or positioned in direct correlation to an edge of the screen, you’ll need to use offset values to make sure they appear in the correct place, independent of the device aspect ratio.

It’s up to you which content size you choose. These days, I just go with 640x960 or 768x1024 (iPad 1&2), versus 320x480, because I generally don’t target pre-iPhone4 devices. It all works out proportionally the same, however, if you set up your config suffix values correctly.

Brent

[Squadventure_Games]

Hi Brent,

Thanks for your response.

For the first article, that’s  very  outdated. This is the second time today that it was mentioned (very odd). Can you cite where you found the link to that article? Or, did you just locate it via Internet search? If it’s coming from one of our pages, I need to eliminate and update the URL to something newer.

I did find the first article through a Google search. A link to an updated article at the top of that one would be great. 

Anyway, on your topic, whatever “content area” you set up, the positioning of objects in that space will remain the same as long as you’re not using “zoomStretch”. So, even if the content area goes off the screen somewhat (on some devices), the coordinate system will remain the same on that overall canvas-like content area.

So the positioning of objects shouldn’t be affected even if I specify a different content area for different devices? Even if I create my background image with display.contentWidth, display.contentHeight? Or should I specify the width/height of the background image with the values for the base image?

t’s up to you which content size you choose. These days, I just go with 640x960 or 768x1024 (iPad 1&2), versus 320x480, because I generally don’t target pre-iPhone4 devices. It all works out proportionally the same, however, if you set up your config suffix values correctly.

What do you think about the configuration given in the second article? I’m targeting iPod 4 and above, but also want to target Android devices. What do you recommend?

Thanks again.

[bjsorrentino]

Hi George,

OK, I see now… yes, if you are changing your actual content size per-device, then it can’t be guaranteed that your objects will remain in the proper locations.

Frankly, it’s difficult to make specific suggestions for content size and config, because each developer works differently. Many users prefer the method that Rob Miracle outlines in his “Ultimate Config” tutorial. Personally, I prefer to keep it simple and use just one content size in “letterbox” mode, then use offset values to orient some objects in relation to a particular screen edge.

Similarly, it’s hard to suggest a specific content size. In one app, I use 704x1024. I know that sounds weird because it’s not really a match on any specific device, but rather a “compromise” between iPhone4 and iPad, plus it accommodates the wide variety of Android devices fairly well. The “letterbox” scale method just makes sense to me, so I’ve stayed with that. If you need, I can explain how to get offset values per-device to make certain object obey the screen edges.

Brent

[rob]

What are your positioning requirements?

The ultimate config.lua works with the understanding that depending on the shape of the device, some of the background will be off screen, but that 0,0 will be the top left and display.contentWidth, display.contentHeight will be the bottom right corner regardless of shape of the device.  By keeping the basic device scaled to the same settings (i.e. don’t have one device 320x480 and another device 640x960) then most things will stay in the same spot.

It also requires thinking relativly with regards to position.  For landscape app, an iPhone 5 is 88 pixels wider than an iPhone 4 (or 44 points when scaled to 320x).  You have to deal with that extra space some how.  So if you use absolute positioning and you need a button near the right edge of an iPhone 4, you’re going to need x = 460 or so.  On the iPhone 5, that’s going to be an additional 44 points away from the right edge which isn’t going to look good.   By saying, these elements need to stretch to fit the device, things that need to be X pixels away from the top or left edge you just set the .x and .y to the value.  But for things that need to stay X pixels away from the right or bottom edges, then you have to use display.contentWidth - distance, and display.contentHeight - distance.  Then regardless of the device these things position correctly.  Then things that need to be a relative distance from the center (think of Angry birds where the sling shot has to be some distance away from the pigs), then you do display.contentCenterX +/- some distance and regardless of the device that distance between the two doesn’t change.

Now the quirky thing is how I got to some of these numbers.  It might be tempting to make the iPad 512x384, but we want to keep the scaling relative to the other devices, so instead we make it 360x480 (same shape, just scaled down a bit).  Then on the wide devices like the iPhone 5 or the letterbox androids are more like 320x570.  Thus if your backgrounds cover 360x570 it will fill the screen properly.

[Squadventure_Games]

Hey guys, I really appreciate your help.

I’ve been playing around with “the ultimate config.lua” for a little while so let me try to understand this better.

What are your positioning requirements?

1. I have some HUD elements in the screen, some that should be at the top of the screen, and others at the very bottom. This shouldn’t be an issue because I can use relative to 0,0 for the top-aligned items, and relative to contentWidth/contentHeight for the bottom-aligned items.

2. The game is a point-and-click adventure, so my background image is my scene. I then add items on top of that scene, like particles and game-related items for the user to click. This is where I’m most concerned. Should I use contentWidth/contentHeight for my background scene image, or should I use the dimensions of my base image here? Likewise, for items that go on top of the scene, what width/height should I use for them? It seems like if I use contentX for the background, items will be misplaced since the image would be stretched. Correct me if I’m wrong here.

that depending on the shape of the device, some of the background will be off screen, but that 0,0 will be the top left and display.contentWidth, display.contentHeight will be the bottom right corner regardless of shape of the device.

What do you mean by the background being off-screen? I guess this would happen if I don’t use contentWidth/contentHeight when I’m creating my background image. So does this mean I should use my base width/height?

I hope I made my case a bit clearer. Please let me now if you need more info. 

[Squadventure_Games]

I think I understand now. I should use the following to create my background image:

local background = display.newImageRect("assets/images/scene1.png", 570, 360) background:setReferencePoint(display.TopLeftReferencePoint) background.x, background.y = 0, 0

 and not display.contentWidth and contentHeight, and place my game items inside the 320x480 inner block (using 360x570 coordinates), that way they will definitely be visible in any device. This way items should get placed in the same position of the background image regardless of the device used.

Please correct me if I’m wrong.

[rob]

Well I would center the background, but a lot depends on the background contents.  But you have the basic idea.

[Squadventure_Games]

Well, if I center the background I won’t be able to use absolute positions accurately, and for this game I do need absolute positions. This means that I need the top left corner of my image to be the top-left corner of the content. So in my case, my image would only bleed in the right and bottom.

Do you see any problem with doing it like this?

[contact593]

Hi,i am 

wondering do you have any new article regarding the supporting multiple display? i still use @2x, @3x and also i am using the ultimate config file. therefore my position is relative to the center of the device. my coding will be CenterX, CenterY and then plus or minus the pixel required.

example

[Lua] display.contentCenterX-275 [/Lua]