How do I draw a 2D user interface in a game on top of 3D?

I created a 3D game like Minecraft in Java using the LWJGL library. I can also move around the world, look up, look down, look around, and so on. And how do I display a panel like the one I highlighted in red in the attached picture?

Minecraft Screenshot

Let's say I drew these squares in Paint and saved them in the panel.png file, but how do I display it?

Write a sample source code.

Author: nick, 2016-05-14

4 answers

In the screen initialization code (before the main loop), write the following code:

GL11.glEnable(GL11.GL_TEXTURE_2D);
GL11.glEnable(GL11.GL_BLEND);
GL11.glBlendFunc(GL11.GL_SRC_ALPHA, GL11.GL_ONE_MINUS_SRC_ALPHA);
GL11.glMatrixMode(GL11.GL_MODELVIEW);
GL11.glMatrixMode(GL11.GL_PROJECTION);
GL11.glLoadIdentity();
GL11.glOrtho(0, Display.getWidth(), Display.getHeight(), 0, 1, -1);
GL11.glMatrixMode(GL11.GL_MODELVIEW);
Texture i4 = TextureLoader.getTexture("PNG", new FileInputStream("textures" + File.separator + "myTexture.png"));

And in the main loop, the following:

while (!Display.isCloseRequested()) {
    GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
    i4.bind();
    GL11.glBegin(GL11.GL_QUADS);
    // Координаты и разрешение текстуры
    GL11.glTexCoord2f(0F, 0F);
    GL11.glVertex2f(100F, 100F);
    GL11.glTexCoord2f(1F, 0F);
    GL11.glVertex2f(100F + (float) i4.getTextureWidth(), 100F);
    GL11.glTexCoord2f(1F, 1F);
    GL11.glVertex2f(100F + (float) i4.getTextureWidth(), 100F + (float) i4.getTextureHeight());
    GL11.glTexCoord2f(0F, 1F);
    GL11.glVertex2f(100F, 100F + (float) i4.getTextureHeight());
    GL11.glEnd();
}
 8
Author: nick, 2016-05-21 07:52:24

Create a separate container for the sprites, anchored relative to the camera, and place the UI sprites in it. As a container, you can use a porous rectangle with a texture (canvas). You can work with the texture (canvas) via PixelWriter and PixelReader, redrawing areas on the plane.

Or you can make an analog of Group from JavaFX, as well as fix its instance relative to the camera and already add 3D interface elements.

UPD: See the discussion here https://github.com/LWJGL/lwjgl3/issues/101

UPD2: This is where the issue has already been discussed https://gamedev.stackexchange.com/questions/18468/making-a-hud-gui-with-opengl-lwjgl (Briefly: the person draws the world, and then the interface is on top of the world, that's all).

UPD3: And another recommendation here https://gamedev.stackexchange.com/a/29284 - use a ready-made library for the GUI in LWJGL-Nifty (http://void256.github.io/blog/ -> https://github.com/nifty-gui/nifty-gui)

 5
Author: DimXenon, 2017-04-13 12:18:54

In general, the approach is as follows:

  1. Drawing a game in a three-dimensional projection (perspective, etc.)
  2. Switching the projection to orthographic
  3. Turning off the depth buffer
  4. Drawing the interface
 3
Author: Kromster, 2016-05-18 04:51:04

Android has FrameLayout for displaying one content on top of the second, I think there is such a thing in your industry

 0
Author: Denis, 2016-05-24 12:01:50