Designing for different aspect ratios using Orx?

acksysacksys
edited February 2012 in Help request
Orx has very nice features that help us position graphics independently of resolution. Using a fixed Frustum width and height, I can be assured size and positioning remain correct with only one configuration file.

E.g. iPhone 4 has 2x the resolution of iPhone 3, but using a single Frustum for both I only need to define object positions once.

So, what are our options for designing for different aspect ratios?

It looks like one option is to just stay with one constant Frustum width and height for everything. In my testing of this, Orx scales the graphics to fit the shortest dimension and just leaves empty space (letterboxing) for the larger dimension. Is my observation correct in all cases?

Another option would be to attempt to dynamically place all graphic elements based on the aspect ratio on any particular screen. This would allow you to utilize the entire screen (no letterboxing).

Why would you need to do this? For example, with Android devices you are not guaranteed any particular aspect ratio (although, admittedly, most are not wildly different).

In this case, you allow the actual display resolution to define the Frustum dimensions. Then, for instance, you place three icons in the lower right hand corner by placing them relative to the lower right hand pixel in the display. Or, to distribute three objects horizontally, divide the screen width into three sections (w / 3 = x) and use x * 1, x * 2, and x * 3 to position each object.

The second option might improve the appearance on a few very unusual aspect ratios, but seems to be a lot more work!

Have I neglected any other options available when using Orx?

Comments

  • iarwainiarwain
    edited February 2012
    Well, there are two things.

    Having a fixed frustum will actually trigger up/downscaling and letter/pillarboxing when need be, as you mentioned.

    However, for everything that need to be placed in screen space (mostly UI/HUD and fixed background, I'd say), you can define them with the ParentCamera attribute and set the UseParentSpace to either position, scale or both.

    When you do that, your object will actually be a child of the camera (and follow it wherever it goes, no matter what its frustum is) and you can also position them relatively to the camera's actual frustum size.

    You have then to give an explicit value to scale and/or position for it to work. 1 = full frustum size on that axis.
    Also the axes are centered in front of the camera, that means that top left corner is at coord (-0.5, -0.5) and bottom right is as (0.5, 0.5). That also works for the Z axis with 0 being on the FrustumNear plane (and not displayed) and 1 being on the FrustumFar plane (and this one is displayed).

    So if you have those objects: 
    [MyUIObject]
; Assuming that its pivot is set to: bottom left
ParentCamera = MyCamera
UseParentSpace = both
Scale = (0.1, 0.2, 1.0); This means Object.Width = 0.1 x FrustumWidth and Object.Height = 0.2 x FrustumHeight
Position = (-0.5, 0.5, 0.01) ; This object will be in the extreme lower left corner and very close to the camera, so likely to be rendered last
; Assuming its pivot is set to: bottom left, that means this object will be entirely displayed on screen and in the corner

[MyBackgroundObject]
ParentCamera = MyCamera
UseParentSpace = both
Position = (0, 0, 1); This object is as far as possible from the camera, so rendered first
Scale = 1; This means Object.Width = FrustumWidth and Object.Height = FrustumHeight
; So with a pivot set to: center, that means this object will cover the full camera view

    Does this help?
  • iarwainiarwain
    edited February 2012
    Another example, in your case of having 3 objects equally spaced at the bottom of the screen, and assuming we don't want to scale them based on the resolution:
    [UI]
ParentCamera = MyCamera
UseParentSpace = position

[BottomLeftObj@UI]
Position = (-0.5, 0.5, 0.01)
; Assuming its pivot is set to: bottom left

[BottomCenterObj@UI]
Position = (0, 0.5, 0.01)
; Assuming its pivot is set to: bottom center

[BottomRightObj@UI]
Position = (0.5, 0.5, 0.01)
; Assuming its pivot is set to: bottom right

    Using different pivots helps with this kind of positioning, in the same way you'd use justification (left/right/center) for text positioning for example.
  • acksysacksys
    edited February 2012
    Thanks! I will certainly be doing this for Android, so this is very helpful info.
Sign In or Register to comment.