storyboard overlay arithmetic

Solar2D Composer
#1

Happy Christmas to anyone reading!

I always get concerned when my arithmetic fails me. Often it is my brain not working but sometimes I go over and over the logic but still don’t get the result I want.

Here is my problem.

I have an app which is set in config.lua (based on Rob’s ultimate config) to be 768x1024, but in practice the app is locked to landscape of 1024x768.

The scaling is set to letterbox.

I use a magic background that bleeds beyond the iPad limits to create a more pleasant background than the default black bars in other, wider devices. At present the backrground graphic is set as 1400x900, which works fine for covering all of the devices IOS and Android.

I have been working on adding a nice fly-in Overlay that comes in about half way and still shows the main background and retracts once choices have been made.

On the Ipad/Ipad2 this is all fine,  but on wider devices I cannot find the formula for setting the x,y coordinates of the overlay graphic that will fly into the edge of the screen. In most cases the overlay overshoots by some way the width of the screen.

My current logic sets the background at display.contentWidth/2,display.contentHeight/2 this works great for the main graphic.

For the overlay graphic (which is 540 wide by 900 high) I set it to 270 (ie 1/2 the overlay width) as x and display.contentHeight/2 for height. This by my arithmetic should set the overlay on the edge on all machines, but in fact it overshoots by quite a way.

I suspect it is something to do with difference between the screen as seen with Letterbox (which is the 1024x768) and the display.contentWidth that somehow counts the wider area beyond the letterbox.

Any ideas?

Martin

#2

just to be clear. The positions all work correctly for overlay on Ipad, only overshoot on other devices.

#3

Can you post your config.lua?  Maybe a screen shot of what it’s doing?

Thanks

Rob

#4

Hi Rob,

it isn’t actually the full “Ultimate config”

all it contains is

application =

  {

    content =

    {

      width = 768,

      height =1024,

      scale = “letterBox”,

      xAlign = “center”,

      yAlign = “center”,

      imageSuffix =

     {

        ["@2x"]= 2.0,

     },

  },

  license =

  {

    google =

    {

      key =“keytextsasdasdasd”,

      policy=“servermanaged” ,

    }

  }

}

Any ideas regarding how letterbox and the actual display.contentWidth/contentHeight interact?

Martin

#5

Good that helps me understand what is going on.  You’re content area is in a ratio of 4:3 (basically a US Standard def TV).  On an iPad, this fits perfectly.  On any other taller device, like an iPhone 4 or 5 or any Android device your visible screen area is larger.  Using a defined content area of 768 points, for an iPhone 4/4s the visible screen area is 1152 points (we use points, not pixels since Corona is going to scale them to fit the device).  On an iPhone 5/5s (and many Android devices) your visible screen is 1363 points and of course the iPads it’s 1024 points since that’s the ratio you have defined in your config.lua. 

Now think about a high def TV showing a low def TV signal.  You get black bars on either side.  So in effect your defined content area of 1024x768 is setting in the middle of the visible area on these wide screen devices.  Using an iPhone 5 family for our example going forward, that means that the real left edge of your screen is and X position of around -170 (well -169.5).  The right most edge is around 1194.

The reason we wrote those two blog posts was to allow the left edge to be at X = 0 and the right edge to be “display.contentWidth” by calculating a different contentWidth/contentHeight based on the shape of the device.  Of course this also means that the top edge is a Y of 0 and the bottom edge is a Y of display.contentHeight (with Corona handling the changing of the values based on orientation). 

In your case you’re using a fixed content area on variable sized screens, and this is okay.  Many people prefer it this way because it means a fixed distance between screen objects rather than having to place things relative to the center or an edge and having elements that can move based on the screen shape.  Think of a home button in the top left and a settings button in the top right.  On a narrow screen like an iPad those buttons will be closer than they would be on a wide screen device like an iPhone 5 since the buttons stay the same distance from the edges.

The solution is to do some additional math using the two calls:

In the iPhone 5 example with your config.lua, display.screenOriginX should produce the -169.5, the real left edge of your screen, and display.contentWidth - display.screenOriginX (since this is a negative number, subtracting it makes it add the amount.  you could have used math.abs() I suppose).

If you want to slide it in towards the center but anchor it on the left edge, you would use:

      transition.to(object, {time=whatever, x = display.contentCenterX+display.screenOriginX})

or something like that.

Rob

#6

Excellent, I guessed it was related to the letterbox issue. I can work out the details now Rob,

thanks again for the help.

Martin

#7

just to be clear. The positions all work correctly for overlay on Ipad, only overshoot on other devices.

#8

Can you post your config.lua?  Maybe a screen shot of what it’s doing?

Thanks

Rob

#9

Hi Rob,

it isn’t actually the full “Ultimate config”

all it contains is

application =

  {

    content =

    {

      width = 768,

      height =1024,

      scale = “letterBox”,

      xAlign = “center”,

      yAlign = “center”,

      imageSuffix =

     {

        ["@2x"]= 2.0,

     },

  },

  license =

  {

    google =

    {

      key =“keytextsasdasdasd”,

      policy=“servermanaged” ,

    }

  }

}

Any ideas regarding how letterbox and the actual display.contentWidth/contentHeight interact?

Martin

#10

Good that helps me understand what is going on.  You’re content area is in a ratio of 4:3 (basically a US Standard def TV).  On an iPad, this fits perfectly.  On any other taller device, like an iPhone 4 or 5 or any Android device your visible screen area is larger.  Using a defined content area of 768 points, for an iPhone 4/4s the visible screen area is 1152 points (we use points, not pixels since Corona is going to scale them to fit the device).  On an iPhone 5/5s (and many Android devices) your visible screen is 1363 points and of course the iPads it’s 1024 points since that’s the ratio you have defined in your config.lua. 

Now think about a high def TV showing a low def TV signal.  You get black bars on either side.  So in effect your defined content area of 1024x768 is setting in the middle of the visible area on these wide screen devices.  Using an iPhone 5 family for our example going forward, that means that the real left edge of your screen is and X position of around -170 (well -169.5).  The right most edge is around 1194.

The reason we wrote those two blog posts was to allow the left edge to be at X = 0 and the right edge to be “display.contentWidth” by calculating a different contentWidth/contentHeight based on the shape of the device.  Of course this also means that the top edge is a Y of 0 and the bottom edge is a Y of display.contentHeight (with Corona handling the changing of the values based on orientation). 

In your case you’re using a fixed content area on variable sized screens, and this is okay.  Many people prefer it this way because it means a fixed distance between screen objects rather than having to place things relative to the center or an edge and having elements that can move based on the screen shape.  Think of a home button in the top left and a settings button in the top right.  On a narrow screen like an iPad those buttons will be closer than they would be on a wide screen device like an iPhone 5 since the buttons stay the same distance from the edges.

The solution is to do some additional math using the two calls:

In the iPhone 5 example with your config.lua, display.screenOriginX should produce the -169.5, the real left edge of your screen, and display.contentWidth - display.screenOriginX (since this is a negative number, subtracting it makes it add the amount.  you could have used math.abs() I suppose).

If you want to slide it in towards the center but anchor it on the left edge, you would use:

      transition.to(object, {time=whatever, x = display.contentCenterX+display.screenOriginX})

or something like that.

Rob

#11

Excellent, I guessed it was related to the letterbox issue. I can work out the details now Rob,

thanks again for the help.

Martin