how to dynamic-scale vertically, but not horizontally?

Solar2D General Questions/Discussion
#1

Any advice/examples how I would setup a config.lua file?  The requirements would be:

a] scale up/down as required to match the vertical top/bottom

b] then horizontal scaling would be just set to that obtained from (a) above

Note: In addition to this there would be dynamic-image selection.

BACKGROUND:

* Have a horizontal scrolling game I’m working on 

* Using normal scaling approach however I don’t really like the black bars on the left you get for iPhone5 for example.  It just kind of feels clunky.

* Would like to basically have same approach, but with the ability to work out to each horizontal end for the device, so for iPhone 5 use up all the space for example

* Would need to then have wide enough images to cover the possibilities, and then be careful how I position items in a relative fashion, however the end result should be better

Current config.lua I have (for interest - don’t think you need this however):

application = {   content =   {   fps = 60,   width = 352,    height = 512,   scale = "letterbox",   xAlign = "center",   yAlign = "center",                   imageSuffix =       {     [""] = 0.8,           ["\_2"] = 1.6,                   ["\_3"] = 4                    }   } }  
#2

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

#3

thanks for the link - I’d already looked at that - I guess my question was whether there is a way to achieve what I want without having to do all the if/then loops…  Do you know that what I’m trying to do is not possible and I need to following the if/then approach that is described in the link?

#4

The thing about the link is it runs only once before the app loads. So a couple of if statements arent that bad really, it’s not doing them ever after the app loaded so you dont have to worry about performance. The great thing about it is that it provides a lot of coverage for multiple types of devices. Which is great for all the android devices out there that are so varied.

Do you still want another option?

#5

Just reviewing the link in detail and trying to get things to sink in…hadn’t looked at this for a while  (doh).   Haven’t quite got it all 100% in my mind yet, however just at the moment I think what I’m struggling with is:

* With my previous method I would design the screens in Photoshop in the highest resolution version, then export with a 100%, 50% and 25% version of the image

* When designing it I always knew that the whole screen would fit onto any device, but potentially with some letterboxing (black edges)

Now with this method if I’m sticking to still 3 resolutions of images then:

* I can’t assume anything I layout on the largest image resolution I use in Photoshop is actually going to show

* It seems that in some devices you won’t get all the background on the screen itself and it’ll be cut…

So I’m pondering what the development approach now is here.  i.e. the background image just has to be sky or something that doesn’t matter if it gets cut?   So if I have a varying ground level that a car goes up and down over, do I have to assume this won’t be part of the background & should overlay this later, to ensure that the left hand edge of the ground with the starting line will line up with the left hand edge of the display (and it won’t get cut)…  Hope this makes sense.

For the background do you really need to draw an inner rectangle in Photoshop to reflect potentially where the image could be cut off at (depending on the device) and then ensure anything important is inside this?

PS.  So what is the actual benefit of this new approach (per the link) over what I was doing.  It still suffering from some potentially “cutting out” or letterboxing.  So is the answer just that it gets one step closer to minimising the level of letterboxing etc?

#6

did a bit more playing & boiled it down to a question which I posted on Rob’s post:

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

#7

To start off with your image, since you have a starting line on it and must be afraid of that being off screen the most, I recommend you change your images reference point so that your image starts off exactly at x = 0 and if anything goes off screen it’s the right part. That would ensure your starting line is always on screen.

* With my previous method I would design the screens in Photoshop in the
highest resolution version, then export with a 100%, 50% and 25%
version of the image

Why don’t you do that now? Rob’s config pretty much has 3 sizes, well 4 if you include the iPad. It resizes to the normal iPhone 4 and alike aka 320x480. The iPhone5, samsung galaxy, or higher res phones 320x568 or 320x570. And then the ‘middle’ class phones 320x512. If you can make 3 background images of that size it should pretty much fit on most devices just fine.

I think the only other thing that can cut off some of your screen afterwards is something like:

display.topStatusBarContentHeight and you can do something like realWidth = display.contentWidth - display.topStatusBarContentHeight background = display.newImageRect( "background.png", realWidth, display.contentHeight )

Or test something out like that. for most cases no one’s had any problems with my app using that config. Only very few devices, nexus tablet for example.
 

#8

thanks - seemed to get things working doing the following:

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

* Image sizes I exported to from photoshop were : 360x480, and 2x then 4x these.

* Then used this approach

    -- Set sizes of actual image for the specific level      levelBase.BG\_IMAGE\_WIDTH  = 960             -- Actual size of image     levelBase.BG\_IMAGE\_HEIGHT = 720            -- Actual size of image     levelBase.BG\_SCREEN\_HEIGHT = 360         -- Size that will fit in one screens window     -- Then common code from then on     local vertFitRatio = display.contentHeight / levelBase.BG\_SCREEN\_HEIGHT     levelBase.BG\_IMAGE\_WIDTH\_SCALED  = levelBase.BG\_IMAGE\_WIDTH \* vertFitRatio     levelBase.BG\_IMAGE\_HEIGHT\_SCALED = display.contentHeight \* levelBase.BG\_IMAGE\_HEIGHT/levelBase.BG\_SCREEN\_HEIGHT     local tempBg = display.newImageRect(                  levelBase,                   imagePath,                  levelBase.BG\_IMAGE\_WIDTH\_SCALED,                  levelBase.BG\_IMAGE\_HEIGHT\_SCALED     )  
#9

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

#10

thanks for the link - I’d already looked at that - I guess my question was whether there is a way to achieve what I want without having to do all the if/then loops…  Do you know that what I’m trying to do is not possible and I need to following the if/then approach that is described in the link?

#11

The thing about the link is it runs only once before the app loads. So a couple of if statements arent that bad really, it’s not doing them ever after the app loaded so you dont have to worry about performance. The great thing about it is that it provides a lot of coverage for multiple types of devices. Which is great for all the android devices out there that are so varied.

Do you still want another option?

#12

Just reviewing the link in detail and trying to get things to sink in…hadn’t looked at this for a while  (doh).   Haven’t quite got it all 100% in my mind yet, however just at the moment I think what I’m struggling with is:

* With my previous method I would design the screens in Photoshop in the highest resolution version, then export with a 100%, 50% and 25% version of the image

* When designing it I always knew that the whole screen would fit onto any device, but potentially with some letterboxing (black edges)

Now with this method if I’m sticking to still 3 resolutions of images then:

* I can’t assume anything I layout on the largest image resolution I use in Photoshop is actually going to show

* It seems that in some devices you won’t get all the background on the screen itself and it’ll be cut…

So I’m pondering what the development approach now is here.  i.e. the background image just has to be sky or something that doesn’t matter if it gets cut?   So if I have a varying ground level that a car goes up and down over, do I have to assume this won’t be part of the background & should overlay this later, to ensure that the left hand edge of the ground with the starting line will line up with the left hand edge of the display (and it won’t get cut)…  Hope this makes sense.

For the background do you really need to draw an inner rectangle in Photoshop to reflect potentially where the image could be cut off at (depending on the device) and then ensure anything important is inside this?

PS.  So what is the actual benefit of this new approach (per the link) over what I was doing.  It still suffering from some potentially “cutting out” or letterboxing.  So is the answer just that it gets one step closer to minimising the level of letterboxing etc?

#13

did a bit more playing & boiled it down to a question which I posted on Rob’s post:

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

#14

To start off with your image, since you have a starting line on it and must be afraid of that being off screen the most, I recommend you change your images reference point so that your image starts off exactly at x = 0 and if anything goes off screen it’s the right part. That would ensure your starting line is always on screen.

* With my previous method I would design the screens in Photoshop in the
highest resolution version, then export with a 100%, 50% and 25%
version of the image

Why don’t you do that now? Rob’s config pretty much has 3 sizes, well 4 if you include the iPad. It resizes to the normal iPhone 4 and alike aka 320x480. The iPhone5, samsung galaxy, or higher res phones 320x568 or 320x570. And then the ‘middle’ class phones 320x512. If you can make 3 background images of that size it should pretty much fit on most devices just fine.

I think the only other thing that can cut off some of your screen afterwards is something like:

display.topStatusBarContentHeight and you can do something like realWidth = display.contentWidth - display.topStatusBarContentHeight background = display.newImageRect( "background.png", realWidth, display.contentHeight )

Or test something out like that. for most cases no one’s had any problems with my app using that config. Only very few devices, nexus tablet for example.
 

#15

thanks - seemed to get things working doing the following:

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

* Image sizes I exported to from photoshop were : 360x480, and 2x then 4x these.

* Then used this approach

    -- Set sizes of actual image for the specific level      levelBase.BG\_IMAGE\_WIDTH  = 960             -- Actual size of image     levelBase.BG\_IMAGE\_HEIGHT = 720            -- Actual size of image     levelBase.BG\_SCREEN\_HEIGHT = 360         -- Size that will fit in one screens window     -- Then common code from then on     local vertFitRatio = display.contentHeight / levelBase.BG\_SCREEN\_HEIGHT     levelBase.BG\_IMAGE\_WIDTH\_SCALED  = levelBase.BG\_IMAGE\_WIDTH \* vertFitRatio     levelBase.BG\_IMAGE\_HEIGHT\_SCALED = display.contentHeight \* levelBase.BG\_IMAGE\_HEIGHT/levelBase.BG\_SCREEN\_HEIGHT     local tempBg = display.newImageRect(                  levelBase,                   imagePath,                  levelBase.BG\_IMAGE\_WIDTH\_SCALED,                  levelBase.BG\_IMAGE\_HEIGHT\_SCALED     )