Hi !
Featured games (91)
games approved by the League of Dukes
Games in Showcase (808)
Games in Android Showcase (239)
games submitted by our members
Games in WIP (872)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Creating a UI  (Read 5073 times)
0 Members and 1 Guest are viewing this topic.
Offline bogieman987
« Posted 2014-06-12 02:47:57 »

Hi, wasn't sure if this belonged to this section or the "Game Mechanics" section, as I think it can cover both.

Anyways, I was wondering, how does one go about the UI, more specifically, drawing it. When its drawn and how.
I've got an idea on how I might go about it, but I would like to here your opinion.

I would use an external library, but I'm "recreating the wheel" for learning experience.

So what I'm thinking on how it's, each element is a texture on a quad, if there's the UI element, the quad is just rotating, or moving or what ever.

Here's an image, roughly highlighting the quads of what I think is all the separate elements of the UI in one of my favorite games. Fallout 3
Elements highlighted in yellow boxes, btw not a screenshot from my copy of Fallout 3, quick pull off of the internet.
Might need to view full size to see the lines.
For full

As for how, I imagine that I just render it like I normally would, binding the textures, updating position uniform if need be and binding the VAO and so on.
But do I do this after I render the game and do what ever post-processing? Or at any stage in between or before?
Also, do I create a separate shader program and use it at this point, or set up some sort of sub-routine in my main shader?

A little extra note, I do know about the different types of UI in games. Diegetic, Non-diegetic, Spatial and Meta according to, personally I don't know the names by heart.


Offline The Lion King
« Reply #1 - Posted 2014-06-12 02:53:47 »

Your making this way too complicated Smiley

Just don't multiply the UI things by the same matrix as everything else. In fact the screen's X coord goes from [-1,1] and the Y coord goes from [-1,1]

Just render all the buttons and UI stuff without any matrices in this area and it'll always be on screen exactly in the same spot unless you specify otherwise

"You have to want it more than you want to breath, then you will be successful"
Offline bogieman987
« Reply #2 - Posted 2014-06-12 09:53:53 »

Just don't multiply the UI things by the same matrix as everything else. In fact the screen's X coord goes from [-1,1] and the Y coord goes from [-1,1]
I figured this, I don't think I really specifically said anything about this though.
Plus I see no harm in having a matrix to make things like rotation easier, and then passing the coordinates to the GPU via vectors, taking the necessary data from the matrix.
Things would get more complicated though, for 3D aspects of the UI.

I was just unsure about the theory behind it in a sense.

Although after writing it down, it does seem more clear.

How have some of you guys gone about implementing a UI and such?

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline loom_weaver

JGO Coder

Medals: 17

« Reply #3 - Posted 2014-06-13 01:28:46 »

Pretty much what the Lion King said, draw your 3D stuff first then change the projection matrix so that you can use easy coordinates for 2D stuff.

The following will allow pixel coordinate accuracy for drawing with 0,0 being in the bottom-left corner.  If you want the more standard 0,0 in the top-left you can adjust the projection matrix to do so.

  override def toggleOn2D() {
    if (!is2D) {
      val viewport: IntBuffer = BufferUtils.createIntBuffer(16)

      glGetInteger(GL_VIEWPORT, viewport)


      glOrtho(viewport.get(0), viewport.get(0)+viewport.get(2), viewport.get(1), viewport.get(1)+viewport.get(3), -1, 1)
      glTranslated(0.375, 0.375, 0.0)  // slight transition for exact pixel positioning


      is2D = true

  override def toggleOff2D() {
    if (is2D) {

      is2D = false
Offline bogieman987
« Reply #4 - Posted 2014-06-13 15:46:06 »

Ok, ok, how would I go about drawing text?
Do I have sprite sheet with all the letters on it, and upon rendering, have a square containing a single letter, having lots of squares to make a sentence?

Offline Hermasetas

Senior Devvie

Medals: 6
Projects: 2
Exp: 7 years

I do gamez, yes!

« Reply #5 - Posted 2014-06-13 17:35:18 »

Ok, ok, how would I go about drawing text?
Do I have sprite sheet with all the letters on it, and upon rendering, have a square containing a single letter, having lots of squares to make a sentence?

That is how I do it Smiley
There might be a better way. Especially if the text never changes, then you might just as well draw it on the UI texture Smiley
Offline bogieman987
« Reply #6 - Posted 2014-06-14 22:36:36 »

I've managed to set up a basic UI but I have a problem, it's with my Quad class.

In this class I basically create a quad that's somewhat hard coded, I take data passed and simply create a quad.

Should I post the problem here or in a new thread?
The problem is a small one though, basically the position of the vertices and the way I've set them up. I think.

Also, anyone know any good resources on how to make a pretty UI?

Offline Slyth2727
« Reply #7 - Posted 2014-06-14 22:52:45 »

Why use a projection matrix at all when you can just use an orthographic matrix? Unless you're going for a built into the helmet GUI thing.
Offline bogieman987
« Reply #8 - Posted 2014-06-14 22:56:05 »

I'm not using any matrices in my implementation.

I convert the location in pixels, for example, 50 pixels, to a position from -1 to 1.

The UI renders almost the way I want it, it's just flipped on the X axis.
Would that also be the U axis?

Or would you say it's flipped on the Y axis? I dunno, it's flipped in the up and down direction.

However if I flip the UVs in the quad class, the 3D stuff will get flipped, because I use a quad during the post process stage.

I would add an option to choose whether to flip, but I figured it might be better to have it so this doesn't happen.
One less thing I would have to worry about.

Update: I figured the best way to go would be to flip the image upon import, but as far as I can tell, PNGDecoder doesn't have a flip method. (It has decodeFlipped, which I assume just means that I pass a buffer and it does the flip for me) Anyone know how I would go about it?

Offline bogieman987
« Reply #9 - Posted 2014-06-17 22:48:03 »

Got some kind of basic UI working Cheesy

Click to Play

Left is a panel, just an image, the right is a button, managed to get it so if the mouse is on it, it changes state to in focus.

I still need to make a way so that if it's pressed it does something. As right now the state just changes.
As well as render strings that are made of letters from a sprite sheet or something, instead of having it in an image before hand.

I also still need to sort out flipping the image on loading.

Edit: Need to do a complete redesign, my current implementation is messy. But I have the idea down.

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline bogieman987
« Reply #10 - Posted 2014-06-25 20:40:06 »

Redesigned a few things.

I must ask, what would the best way to go about linking a button or something to an object, when they seem completely separate?

For example, I click a button, and object A rotates faster, and object B shrinks and grows.

Never mind, please ignore this.

Pages: [1]
  ignore  |  Print  

Riven (845 views)
2019-09-04 15:33:17

hadezbladez (5789 views)
2018-11-16 13:46:03

hadezbladez (2602 views)
2018-11-16 13:41:33

hadezbladez (6205 views)
2018-11-16 13:35:35

hadezbladez (1498 views)
2018-11-16 13:32:03

EgonOlsen (4733 views)
2018-06-10 19:43:48

EgonOlsen (5789 views)
2018-06-10 19:43:44

EgonOlsen (3275 views)
2018-06-10 19:43:20

DesertCoockie (4174 views)
2018-05-13 18:23:11

nelsongames (5500 views)
2018-04-24 18:15:36
A NON-ideal modular configuration for Eclipse with JavaFX
by philfrei
2019-12-19 19:35:12

Java Gaming Resources
by philfrei
2019-05-14 16:15:13

Deployment and Packaging
by philfrei
2019-05-08 15:15:36

Deployment and Packaging
by philfrei
2019-05-08 15:13:34

Deployment and Packaging
by philfrei
2019-02-17 20:25:53

Deployment and Packaging
by mudlee
2018-08-22 18:09:50

Java Gaming Resources
by gouessej
2018-08-22 08:19:41

Deployment and Packaging
by gouessej
2018-08-22 08:04:08 is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!