Layout questions (letterbox, fill, float)

[XaronParticipant]

Hey all,

there are several Layout options for the view. But I actually miss a Layout like “letterbox-x” and “letterbox-y” like “fill-x” and “fill-y”. What I want to achieve is the scaling of the letterbox but with a floating size on one axis. I need that for all the different aspect ratios for mobile devices.

With Monkey 1 I did this by myself using PushMatrix() and PopMatrix() and scaling.

[XaronParticipant]

Am I really the only one having this issue? How do you solve that for all these different aspect ratios? I prefer to have a fixed virtual resolution but with a floating x or y size so that parts of the background are cropped.

[EthernautParticipant]

I do think it would be useful, allowing one of the axis to be preserved while the other one increases/decreases in size as needed, effectively changing the aspect ratio. I also had that working in Monkey1, but haven’t done it in M2 yet.

I’m away from my laptop now, but maybe you can use Window.OnMeasure() and adjust the virtual resolution to always match the aspect ratio of the device? Simply return a new Vec2i with the desired virtual resolution that matches the device’s aspect. Will try later tonight.

[EthernautParticipant]

I just remembered I don’t know how to get the Device’s dimensions, which makes my suggestion hard to test…

I also don’t know how to get the letterboxed dimensions, using Window.Width and Height seems to return the Window size, not the “cropped” size.

Any clues on how to do those things?

[Mark SiblyKeymaster]

What I want to achieve is the scaling of the letterbox but with a floating size on one axis.

Don’t quite understand this – you want a letterbox *without* the same aspect ratio as returned by OnMeasure?

Letter box does ‘float’ on the minor axis, ie: the axis where the border appears, so you can use View.Gravity to control where letterbox is positioned horizontally/vertically within it’s border. This is shown in the view_layout banana I think.

But letterbox will always fill the major axis, and it’s aspect ratio will always be the same as the aspect ratio returned by OnMeasure.

You may also be able to achieve what you want by nesting a letterbox view within a ‘normal’ view, or vice versa.

[XaronParticipant]

Hi there and many thanks. To clarify even more what I want to achieve I have attached a screenshot.

1. Let’s assume I want to use landscape format.
2. I never want to stretch anything in only one axis (so no distortion but proportional scaling of course)
3. I don’t want to have black borders anywhere

Let’s also assume a virtual resolution of 512×288 (for this example!). This is a 16:9 aspect ratio. On devices using this ratio they will always see my background image of 512×288 stretched to the native resolution of course.

For devices like iPads the visible size would be 384×288 of that background image. So the remaining 128 pixel of that background would simply not be visible but cropped. Scaling is always done using the y axis ratio. So when the native resolution of the device is 768×576, my background image would be scaled up to 1024×576 but cropped so that only 768×576 would be visible.

Is there a way to get the native resolution? Width and Height return my virtual resolution using the letterbox Layout.

Attachments:

1. 

   aspect.png
   

[XaronParticipant]

Apparently it works the same way as with Monkey 1:

Monkey

Class GameWindow Extends Window Protected Field _virtualY:Float Public Method New( title:String, width:Int, height:Int, flags:WindowFlags = Null ) Super.New( title, width, height, flags ) _virtualY = 288.0 Layout = "fill" End Method Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.PushMatrix() Local scaleRatio:Float = Float( Height ) / Float( _virtualY ) canvas.Scale( scaleRatio, scaleRatio ) 'Game rendering here... canvas.PopMatrix() End Method End Class

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

Class GameWindow Extends Window Protected   Field _virtualY:Float   Public   Method New( title:String, width:Int, height:Int, flags:WindowFlags = Null )     Super.New( title, width, height, flags )     _virtualY = 288.0     Layout = "fill"   End Method     Method OnRender( canvas:Canvas ) Override     App.RequestRender()     canvas.PushMatrix()       Local scaleRatio:Float = Float( Height ) / Float( _virtualY )       canvas.Scale( scaleRatio, scaleRatio )         'Game rendering here...       canvas.PopMatrix()   End Method End Class

OnMeasure is not needed in that case.

[Mark SiblyKeymaster]

I don’t know if I’d call this ‘letterbox’ anymore – IMO, ‘letterbox’ implies (optional) borders – but I think I see what you mean. You just want a fixed virtual height and to preserve aspect ratio, correct?

Here’s my attempt at something similar using OnMeasure and “stretch” Layout. The main benefit to doing it this way is that mouse/touch etc coords are already scaled for you, and of course no need to scale inside OnRender.

I have often thought about adding something like a ‘UIMatrix’ to View. This would be an additional post transform matrix that would be applied to rendering, but also to mouse/touch etc coords. So you could do something like this in OnRender to achieve what your version does:

UIMatrix=AffineMat3f.Scaling( scaleRatio )

Is this a good idea? Each thing I add seems to confuse things a bit!

Also: Use Window Frame.Width, Frame.Height or Frame.Size etc to get ‘physical’ window size. Rect.Width, Rect.Height will return ‘virtual’ size as you’ve noticed.

Monkey

Namespace myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class MyWindow Extends Window Field _virtualY:Float Method New( title:String, width:Int, height:Int, flags:WindowFlags = Null ) Super.New( title, width, height, flags ) Layout="stretch" ClearColor=Color.Red _virtualY=288 End Method Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.Color=Color.Blue canvas.DrawRect( 1,1,Width-2,Height-2 ) canvas.Color=Color.White canvas.DrawText( "Hello World!",Width/2,Height/2,.5,.5 ) End Method Method OnMeasure:Vec2i() Override Local scale:=Float(Frame.Height)/Float(_virtualY) Local size:=New Vec2i( Frame.Width/scale,_virtualY ) Print "Virtual Size="+size Return size End End Class Function Main() New AppInstance New MyWindow( "Hello",640,480,WindowFlags.Resizable ) App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

Namespace myapp   #Import "<std>" #Import "<mojo>"   Using std.. Using mojo..   Class MyWindow Extends Window Field _virtualY:Float    Method New( title:String, width:Int, height:Int, flags:WindowFlags = Null )         Super.New( title, width, height, flags )           Layout="stretch"           ClearColor=Color.Red           _virtualY=288         End Method    Method OnRender( canvas:Canvas ) Override         App.RequestRender()      canvas.Color=Color.Blue        canvas.DrawRect( 1,1,Width-2,Height-2 )               canvas.Color=Color.White        canvas.DrawText( "Hello World!",Width/2,Height/2,.5,.5 )      End Method    Method OnMeasure:Vec2i() Override       Local scale:=Float(Frame.Height)/Float(_virtualY)       Local size:=New Vec2i( Frame.Width/scale,_virtualY )       Print "Virtual Size="+size       Return size End    End Class   Function Main()   New AppInstance New MyWindow( "Hello",640,480,WindowFlags.Resizable ) App.Run() End

[XaronParticipant]

Perfect Mark, thanks so much. That’s exactly what I wanted to achieve!

[Author]

Posts