How do you guys code your UIs?

Graphics
1

Hey, I’m just wondering what your conventions are for coding UI elements into a game? Most importanly, how do developers typically make their larger context panes and such, like Inventory, Character Sheet, Journal, etc? I assume that there’s typically a combination of reusable image elements (like tiles and such) and/or texture primitive shapes (such as rectangles, lines, triangles circles and other things that involve Texture.SetData property and Color class)?

Is .SetData and stretching the texture area in various ways the default method of drawing non-art elements, especially larger ones, while .pngs are the most common filetype for art elements, especially smaller ones?

Thanks. I guess I just wanna know what smart tricks there are for creating UI quickly and easily, if any.

2

By designing are you talking code or graphics? You can find (usable) graphic examples here:

https://opengameart.org/art-search-advanced?keys=gui&title=&field_art_tags_tid_op=or&field_art_tags_tid=&name=&field_art_type_tid[]=9&field_art_type_tid[]=10&field_art_type_tid[]=7273&field_art_type_tid[]=14&field_art_type_tid[]=12&field_art_type_tid[]=13&field_art_type_tid[]=11&field_art_licenses_tid[]=2&field_art_licenses_tid[]=3&field_art_licenses_tid[]=6&field_art_licenses_tid[]=5&field_art_licenses_tid[]=10310&field_art_licenses_tid[]=4&field_art_licenses_tid[]=8&field_art_licenses_tid[]=7&sort_by=score&sort_order=DESC&items_per_page=24&Collection=

https://opengameart.org/art-search-advanced?keys=inventory&title=&field_art_tags_tid_op=or&field_art_tags_tid=&name=&field_art_type_tid[]=9&field_art_type_tid[]=10&field_art_type_tid[]=7273&field_art_type_tid[]=14&field_art_type_tid[]=12&field_art_type_tid[]=13&field_art_type_tid[]=11&field_art_licenses_tid[]=2&field_art_licenses_tid[]=3&field_art_licenses_tid[]=6&field_art_licenses_tid[]=5&field_art_licenses_tid[]=10310&field_art_licenses_tid[]=4&field_art_licenses_tid[]=8&field_art_licenses_tid[]=7&sort_by=score&sort_order=DESC&items_per_page=24&Collection=

Not sure I’m following, why do you need SetDate? I assume you mean Texture.SetData?

Use an external UI lib (disclaimer: I wrote one). You can find some options here:

But if you prefer to write yourself please provide more info because I didn’t quite understand what you meant with the SetData thing :slight_smile:

1 Like
3

@GeonBit Hey, thanks for the reply, and yeah I edited my OP for clarity. I meant the coding itself, as I already know how to design UIs art-wise, plus there’s tons of videos on that online anyways. Just wanted to know about the code.

But I see you provided some nice UI libs as well, I’ll definitely look into those and read some documentation etc. Thanks.

By SetData I was referring to setting a Color and transparency for a given texture and rendering that texture on-screen as a line, rectangle, circle or whatever shape (as to hardcode some parts rather using existing image files, when I’m just gonna render a single-colored UI element anyways). Heck, I may even just end up doing no art assets at all (except typefaces) for my UI, similar to what you see in Factorio and similar games.

I’ve looked into 2D Primitives APIs though, but I’d like to just know how to do it myself for minimum third-party code and also for personal learning reasons.

4

Write code for a bunch of reusable items like display text, input text, button, slider, image, etc. Then everything is either manually positioned, or more often put into a panel that displays things one after the other vertically and you run the newline function when you want to go to the next line.

It’s not the most popular but I use immediate mode GUI where you don’t store much state between passes. A contrived example would be.

function draw()
{
	updateAndDraw(Mode.Draw);
}

function update()
{
	updateAndDraw(Mode.Update);
}

function updateAndDraw(Mode mode)
{
	Panel panel = new Panel();
	panel.Mode = mode;
	
	if (panel.DoButton("Start Game"))
	{
		startGame();
	}
}

function bool Panel.DoButton(string text)
{
	bool result = false;
	if (mode == Mode.Draw)
	{
		// Draw the button
	}
	if (mode == Mode.Update && mouseIsOverButton && mouseClicked)
	{
		result = true;
	}
	return result;
}

There’s a whole lot of other stuff that goes on but thats the basics. In do button the space it takes up is stored in the panel so the next item will come after it. Also I often do a sizing mode/pass as well that stores the whole size of the panel and items in it for drawing backgrounds and stuff. I also store an ID for each item which makes it easy to do hover and highlight effects, this is extra important if you have a window system where panels can be ontop of other panels.

1 Like
5

This helps a lot, thanks. :slight_smile: