Sign in to follow this  

User Interface with Varying Screen Sizes

This topic is 2043 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Nowadays, computer monitors have varying screen resolutions. Does anyone have any ideas on how to put a user interface together that stretches according to the screen's size in a flexible way? The catch: I don't want my images to actually stretch. Maybe create textures at the highest screen resolution supported for each supported aspect ratio, and apply load mipmaps if the resolution for lower-resolution monitors of that aspect ratio? Then, everything could be drawn to the screen proportionally, for example, the health bar takes up 10x1.5 percent of the screen space, etc.

Share this post


Link to post
Share on other sites
[quote name='Vincent_M' timestamp='1336819420' post='4939535']
The catch: I don't want my images to actually stretch
[/quote]
Do you mean "I don't want the aspect ratio to change" or do you mean "I want an exact 1:1 texel:pixel ratio for all UI textures." The latter sounds good until you realize how thoroughly you're going to screw over forward compatibility.

Share this post


Link to post
Share on other sites
I use a few tricks to achieve this
(1) create a table layout class that works with proportions, so a set of column widths looks like (1, 2, 4, 2, 1) where 2 means "twice the size of a 1", the total width is 1 + 2 + 4 + 2 + 1
(2) create a text renderer that "thinks" in lines, so a button is 1 line high, a listbox might be 10.5 lines high (the 0.5 gives user some indication of scrollability)
(3) I also use plenty of "stretch to fit" text rendering // but I can see why people wouldn't like that // works for my industrial apps though (no artists to worry about)
(4) you can't escape different layouts for different aspect ratios, but you can usually get away with a portrait layout and a landscape layout (I have same apps running 1280x1024 and 480x640)
I also have a class called "ScaleFont" which is like a mip mapped font renderer that has 3 prerendered glyph atlases and switches between them according to scale

Share this post


Link to post
Share on other sites
For my UI stuff, I use a system similar to CEGUI's[url="http://www.cegui.org.uk/docs/current/fal_intro.html#fal_unifiedsystem"] Unified Coordinate System[/url]. A coordinate component (x or y, width or height) is specified as 2 floating point numbers: a relative and an absolute. The relative part is considered relative to the parent's coordinate frame, the absolute part is considered as absolute pixels. This way, you can mix relative and absolute sizes and positioning. It's a pretty handy notation that helps me to do my layouts on a relative basis, and draw the elements on an absolute basis.

Share this post


Link to post
Share on other sites

This topic is 2043 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this