Jump to content

Any "best practices" for GUI design?


Recommended Posts

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!

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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: hwi5ednxwp2tj4sfg.jpg

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Announcements



×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.