Layer Based GUI Elements

[FireTamer81]

At the moment I have a static GUI with some buttons and one that moves around when clicked and dragged. The one that moves is meant to display a certain set of information, but everyway that I have tried to draw strings among other things has resulted in them rendering behind the moving element. 

For the past week I have been trying to find a way to properly control what objects render in front of/behind other objects to no avail. I have also been trying to look at sources like FTB Lib for how they did, quote "layer-based GUI components" (I think that's the exact words) and Mekanism with their movable GUI elements, but again they are both more complex than I am used to (I have only just started doing GUIs 9 days ago). 

If someone could either shed some light on how one of those two mods do their layer based GUIs, perhaps give a different source that is a bit more clear, or even just explain how you would do it (every ounce of code mumbo jumbo you feel like using, which I will then use the power of google to figure out)

Edited January 11, 2022 by FireTamer81

[FireTamer81]

https://github.com/FireTamer81/DragonBlockBeyond/tree/main/src/main/java/io/github/firetamer/dbb/modules/gui_testing

This is the link to my repo. The two packages within the one the link leads to were two separate tests I did, the "player_screen" package having the screen with movable components and the "test_screen" package being a general test (for the second I had made a GUI with it, but that class isn't in the repo since I had earlier deleted it).

I had tried something with GL11 in the "BaseScreen" class in the second package, but that didn't work in any tests I did with it. 

A couple days ago I had also tried just recreating the whole Screen-FocusableScreen-AbstractGUI vanilla class stuff, taking out wasn't needed and editing what I thought would work, but a pal of mine said you can only make a GUI by extending the Screen class since there was a forge bit in there that was required or something. Don't have that anywhere since I hadn't updated the repo much during that test.

[FireTamer81]

It also isn't a container or anything like that at the moment since I thought that would overcomplicate things while I am trying to get this one aspect to work right, it's just opened by a keybind.

 

[FireTamer81]

Strings have been the only thing I have come across that does it so far (I haven't gone much further since I hit this issue). I tried rendering them many ways. Directly in the GUI class render method, with the button constructor, etc. Strings always end up behind the GUI

So, I went about trying to find a way to either move the string forward or move the GUI back.

[FireTamer81]

@Override
    public void render(MatrixStack stack, int p_230430_2_, int p_230430_3_, float p_230430_4_) {
        this.renderBG(stack);

        this.strengthButton.render(stack, p_230430_2_, p_230430_3_, p_230430_4_);

        ITextComponent strengthButtonText = new StringTextComponent("Hello, this is the Strength Button");
        int strengthButtonTopLeftPosX = (int)(topLeftX + 10);
        int strengthButtonTopLeftPosY = (int)(topLeftY + 20);
        FontRenderer fontRenderer = this.mc.font;
        drawCenteredString(stack, fontRenderer, strengthButtonText, strengthButtonTopLeftPosX, strengthButtonTopLeftPosY, 0xFFFFFF);
        //drawString(stack, fontRenderer, strengthButtonText, strengthButtonTopLeftPosX, strengthButtonTopLeftPosY, 0xFFFFFF);
        //this.mc.font.draw(stack, "Hello All", strengthButtonTopLeftPosX, strengthButtonTopLeftPosY, 0xFFFFFF);

        super.render(stack, p_230430_2_, p_230430_3_, p_230430_4_);
    }


    private void renderBG(MatrixStack stack) {
        RenderSystem.pushMatrix();
        RenderSystem.translatef(0.0f, 0.0f, 100.0f);
        this.mc.getTextureManager().bind(BACKGROUND_TEXTURE);
        RenderSystem.color4f(1.0F, 1.0F, 1.0F, 1.0F);
        this.blit(stack, (int)(topLeftX), (int)(topLeftY), 0, 0, 236, 187);      //Main Background
        RenderSystem.popMatrix();
    }

This is the first way I did it. I don't still have the other ways I tried it other than what's in the BaseScreen class here: 

protected void drawText(MatrixStack matrix, ITextComponent text, int x, int y, Color textColor, boolean shadow) {
        GL11.glPushMatrix();
        GL11.glTranslatef(0, 0, zLevel + .5f);

        if (shadow) {
            mc.font.drawShadow(matrix, text, x, y, textColor.hashCode());
        } else {
            mc.font.draw(matrix, text, x, y, textColor.hashCode());
        }

        //Don't understand this bit or it's purpose
        //TextColor.WHITE.apply();
        GL11.glPopMatrix();
    }

    protected void drawCenteredText(MatrixStack matrix, ITextComponent text, int x, int y, int maxX, int maxY, Color textColor, boolean shadow) {
        int centerX = x + ((maxX - x) / 2) - (mc.font.width(text) / 2);
        int centerY = y + ((maxY - y) / 2) - (mc.font.lineHeight / 2);
        drawText(matrix, text, centerX, centerY, textColor, shadow);
    }

    @Override
    public void blit(MatrixStack pMatrixStack, int topLeftX, int topLeftY, int textureWidth, int textureHeight, int pUWidth, int pVHeight) {
        float f = 0.00390625F;
        float f1 = 0.00390625F;
        BufferBuilder bufferbuilder = Tessellator.getInstance().getBuilder();
        bufferbuilder.begin(7, DefaultVertexFormats.POSITION_TEX);

        bufferbuilder
                .vertex(x, y + height, this.zLevel)
                .uv(((float)textureWidth * f), ((float)(textureHeight + height) * f1))
                .endVertex();
        bufferbuilder
                .vertex(x + width, (y + height), this.zLevel)
                .uv(((float)(textureWidth + width) * f), ((float)(textureHeight + height) * f1))
                .endVertex();
        bufferbuilder
                .vertex(x + width, y, this.zLevel)
                .uv(((float)(textureWidth + width) * f), ((float)textureHeight * f1))
                .endVertex();
        bufferbuilder
                .vertex(x, y, this.zLevel)
                .uv(((float)textureWidth * f), ((float)textureHeight * f1))
                .endVertex();

        bufferbuilder.end();
        RenderSystem.enableAlphaTest();
        WorldVertexBufferUploader.end(bufferbuilder);
    }

 

[FireTamer81]

Oh, uh, sorry mate. I didn't know that was a thing. Uh here then:

 

Where I draw the string the normal way, but it resulted in the image above.

https://github.com/FireTamer81/DragonBlockBeyond/blob/cc0f5559e37071d39e6a542cb463fc8029acef8c/src/main/java/io/github/firetamer/dbb/modules/gui_testing/player_screen/children/PlayerStatGui.java#L134

 

One of my attempts (that I actually saved) on drawing GUI elements based on a z value:

https://github.com/FireTamer81/DragonBlockBeyond/blob/cc0f5559e37071d39e6a542cb463fc8029acef8c/src/main/java/io/github/firetamer/dbb/modules/gui_testing/test_screen/base_classes/BaseScreen.java#L72

https://github.com/FireTamer81/DragonBlockBeyond/blob/cc0f5559e37071d39e6a542cb463fc8029acef8c/src/main/java/io/github/firetamer/dbb/modules/gui_testing/test_screen/base_classes/BaseScreen.java#L50

[FireTamer81]

Boosting.

I don't quite know if I did something wrong or it's just no one has an answer.

[FireTamer81]

Right, sorry. Just imagine it wasn't, because the image I posted was from when it was.

 

[FireTamer81]

Oh, let me update it then

It should be updated

 

Edited January 13, 2022 by FireTamer81

[FireTamer81]

https://github.com/FireTamer81/DragonBlockBeyond/blob/7e69f0bfd01cf7bc4d9cdff6c22e6b37a5d8a362/src/main/java/io/github/firetamer/dbb/modules/gui_testing/player_screen/children/PlayerStatGui.java#L145

 

Edited January 13, 2022 by FireTamer81

[FireTamer81]

That's perfectly fine mate.... I guess I'll just keep looking for the answer then. Thank you for your time at least

 

[FireTamer81]

I now feel like a total idiot, and I am so sorry for the trouble (also the forge suggestion, I was under the impression that because you couldn't figure out the issue that it wasn't on my end.... when it totally was).

Turns out minecraft does have a layering system thingy.... 

That highlighted float was "100.0f" in the repo you looked through.... I thought I would just change values around as a last ditch effort and changing that one worked.... So yea, sorry mate.