Hello, I'm working on a simple desktop UI library for my project, and I wanted to get some info about how people like to lay out their in-game UI in order to scale for different resolutions (and potentially slightly different aspect ratios, e.g. 16:9 vs 16:10.)

I'm specifically looking at doing mostly image-based UI components, so I'll be looking at scaling images (or exporting multiple sizes) instead of dynamically drawing.

Most frameworks/engines I've worked in give you a few options for positioning/sizing:

1. Absolute value in pixels (or one of the pixel variants like dp)
2. Absolute value in % of screen size
3. Anchors/relative value

Additionally, they'll have some sort of scaling based on selected resolution.

But I've never made a full game, so I don't know what's typically used. Say you have a basic hotbar, health/mana, and some menus like inventory and stuff. What would you use? Does your approach change when you're making something like settings menus? I'm just looking to get some insight.

I'm doing this right now from scratch and my preferred way is to have a declarative language for the UI and an implicit layouting. As this isn't much different from the other way to write game UI, it has some advantages.

You can find my thoughts here https://gamedev.net/forums/topic/709375-ui-framework​

It is first a matter of how you assemble your UI. Some libraries require to work declarative like I want it to work for our SDK, others rely on OOP and creating the UI from objects. Layouting is mostly done using some kind of anchorpoints rather than pixel positions. We used NGUI a lot in our indie Unity projects and Unity's Immeadiate Mode UI for Editor tools. This is quite easy if you don't need pixel perfect UIs for most games.

However, I also worked on a project which has had hand-drawn images used for everything. This project has had multiple resolutions of the same image used for different game resolutions and aspect ratios.

In your case, Health/Mana bars and an inventory don't need that in my opinion. Taking a look at modern RPGs, the inventory never resizes much as there are some standard resolutions present these days. Any Health/Mana bar usually is just a 1px texture which is then repeated to the entire width so no resizing needed as it is repated by the hardware

Practical scaling and stretching needs tend to be more complex. For example, a list of many text items should be readable at an appropriate distance, display as many items as possible, reduce its own height in case there's enough room for all items, add scrollbars or pagination controls if needed and adjust viewports accordingly, possibly shrink text size as a compromise to display a decent number of items in a small space, and so on.

The most advanced features of the HTML/CSS layout model, probably augmented with 9-slice images and other sophisticated expandable graphical elements, could be a good starting point for your UI framework.