Any "best practices" for GUI design?

[Lycanus Darkbinder]

Since this isn't a coding question I thought it would do better inGeneral:

 

Are there any "best practices" when designing a GUI?

 

I spent some time learning how to program a GUI but it looks bad. In other languages I've been spoiled with a "form designer" that lets you simply add the controls you need from a "toolbox" and then write the code underneath.

 

In Minecraft, I seem to have the most trouble positioning the controls on the screen. My GUI isn't really complex but it's got enough to be annoying:

 

• 3 Input fields (text)
  
• 3 Labels (next to each text box)
  
• 1 Yes / No
  
• 2 Buttons
  

When you design a GUI, what workflow do you use? Do you use something like Photoshop to draw a background with cutouts for each control? Do you "bake" the text onto a background (ie: text tool in Photoshop) rather than use font rendering in the game? Do you just render rectangles in Minecraft and skip the background completely?

 

I'm just gathering information as to what would be the easisest way to position the controls properly while leaving room for modifications in the future.

 

 

Thanks!

 

[yourname99]

When I make a GUI I begin mostly by just copying one of the minecraft GUI's (for example dispenser.png).

After that I gray out everything that I don't need so that I have a nearly blank GUI.

Then I add everything that will later be static directly with the image editing program on the GUI.

Every other stuff I place somethere in the unused transparent area of the picture and place them later right with rectangles.

For finding out pixel coordinates and sizes for rectangles I use something like the measurement tools in photoshop.

Everything else I do in code.

 

An easy way to place things like the rectangles right in the GUI is this:

		this.drawTexturedModalRect(x, y, 7, 134, 54, 18);

	if (Keyboard.isKeyDown(Keyboard.KEY_UP)) {
		y--;
		System.out.println("y = " + y);
	}
	if (Keyboard.isKeyDown(Keyboard.KEY_DOWN)) {
		y++;
		System.out.println("y = " + y);
	}
	if (Keyboard.isKeyDown(Keyboard.KEY_LEFT)) {
		x--;
		System.out.println("x = " + x);
	}
	if (Keyboard.isKeyDown(Keyboard.KEY_RIGHT)) {
		x++;
		System.out.println("x = " + x);
	}

With this you can adjust everything ingame with the arrow keys and then read later the right coordinates out of the console.

 

I also prefer to make the text in code.

So you can easily change things dynamically for things such as the localization.

[Lycanus Darkbinder]

Thanks, yourname99. The suggestion about positioning with the arrow keys should be helpful.

[Alexiy]

I didn't like the way how minecraft GUIs are written. Most people make GUI textures and align them with slots, buttons, etc. I decided to do it different way - I made it so Container's element positions are linked with GUI's element positions and I did textures only for slots. It resulted in fine minimalistic GUI which can be changed easier than original ones:

As you know, GUIs have borders; when you click with an item outside its borders, it is dropped into world. Those lines are GUI's borders. Textures are drawn per each slot.