Creating good game UI

Game Play & Game Design
#1

many rpg type of games have nice UIs that benefit the player through out the game; Usually with a drag and drop functionality. Before I try dabbling with it myself, what would be the most effective way to create UIs like this?

I was thinking of making them dragable by setting its velocity to the mouses’ velocity when clicked and have the items in the drop slots keep its’ coordinates based off of where the UI box is dragged. I drew an example:

http://i.imgur.com/FYqQvnI.png?1

I forgot what you call fake code that’s used for an example, but hope this clears the point.

Another idea I had was to use undecorated JFrames instead of an Image UI so the player can move it out of the screen. I could then give that frame a nice UI layout and use the Java API to for the dragging and dropping.

#2

Can you please make your example image work?

#3

My bad, I’ll get that fixed right away

#4

Oh, I’ve seen that UI before. It does look very nice.

I wouldn’t bother with setting velocities, seems a bit messy. Just detect when the mouse is pressed onto the object, then get the offset of the mouse. For example:
Say the mouse was pressed at (10,20) on the object. Every loop until the mouse is released, set the item’s x position to be mousePosition.x - 10 and the item’s y position to be mousePosition.y - 20.

#5

I agree with ipe369, don’t both with the whole velocity thing, just set its location to the mouse’s based on a boolean for ‘grabbed’ or something.

#6

I haven’t seen any mouse release methods in lwjgl. How would I go about this, yet keeping things simple?

#7

If(!Mouse.isPressed(0))

Release.

#8

Thanks, I feel like an idiot. :stuck_out_tongue:

#9

This is how I would do it.

Create a List of rectangles. These rectangles should represent places where you can pick up, drag or drop items.

User presses down left mouse button -> Check if mouse is colliding with any of the rectangles -> If not, don’t do anything. If there is a rectangle that collides, set DraggedItem to the item that rectangle contains -> When mouse is released, check if mouse is colliding with any of the rectangles. If it is, that means that player dragged an item from DraggedItem to currently colliding rectangle.

#10

Check what some the UI libraries do! Swing, scene2d.ui, TWL, nifty, you name it. They are open source :slight_smile: For drag and drop functionality, check out scene2d.ui’s DragAndDrop class, as well as Target.

#11

Just go into it knowing that it’s not going to be simple. I have great appreciation for the developers who have written major UI libraries.

Abstracting raw mouse/key events into an event dispatch system is tricky especially when you consider drag/drop, focus, window z-stack, and modal.

If you want want to write things from scratch count on spending at least a month full time to get something useable and definitely not complete. This is considering you are working off the shoulders of giants e.g. looking at how awt, TWL, nifty, etc. are implemented.

You will have to start with a UIComponent that stores a location + dimension, can paint itself, have children, and can handle events.

I’ve probably spent between 30-45 days on mine. I think it’s worth it in the long run - good learning experience and I have a framework that avoids spaghetti code. If you don’t want to spend that time e.g. would rather write your game then your only option is to learn a library.

Good luck.

#12

Thanks :smiley: I’m guessing spaghetti code is sloppy unorganized code. I just edited this image. (I don’t know how to scale this crap)

#13

The funny message in the picture is in there somewhere haha