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.

0

Share this post

Link to post

Share on other sites

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.

0

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

0

Share this post

Link to post

Share on other sites

For my UI stuff, I use a system similar to CEGUI's Unified Coordinate System. 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.