[1.19] Render line on screen

[J3ramy]

Hey,

I want to render a line on screen depending on a start- and end point.

I call it in the render() method of my screen class which extends from AbstractContainerScreen<MyMenu>

 

So far I got this method (inspired from GuiComponent.fill()):
 

Spoiler

 private void drawLine(PoseStack poseStack, int startX, int startY, int endX, int endY, int color) {
        if (startX < endX) {
            int i = startX;
            startX = endX;
            endX = i;
        }

        if (startY < endY) {
            int j = startY;
            startY = endY;
            endY = j;
        }

        Matrix4f pMatrix = poseStack.last().pose();
        float f3 = (float)(color >> 24 & 255) / 255.0F;
        float f = (float)(color >> 16 & 255) / 255.0F;
        float f1 = (float)(color >> 8 & 255) / 255.0F;
        float f2 = (float)(color & 255) / 255.0F;
        BufferBuilder bufferbuilder = Tesselator.getInstance().getBuilder();
        RenderSystem.enableBlend();
        RenderSystem.disableTexture();
        RenderSystem.defaultBlendFunc();
        RenderSystem.setShader(GameRenderer::getRendertypeLinesShader);
        bufferbuilder.begin(VertexFormat.Mode.LINES, DefaultVertexFormat.POSITION_COLOR);
        RenderSystem.lineWidth(this.lineWidth);
        bufferbuilder.vertex(pMatrix, (float)startX, (float)startY, 0.0F).color(f, f1, f2, f3).endVertex();
        bufferbuilder.vertex(pMatrix, (float)endX, (float)endY, 0.0F).color(f, f1, f2, f3).endVertex();
        bufferbuilder.end();
        BufferUploader.end(bufferbuilder);
        RenderSystem.enableTexture();
        RenderSystem.disableBlend();
        RenderSystem.lineWidth(1.0F);
    }

Thanks!

 

[Luis_ST]

There should already be methods for drawing a line in GuiComponent.

Note that they are separated into vertical and horizontal lines.

[J3ramy]

Yes, I already know

But I want to draw a diagnoal line as well

[Luis_ST]

Have you tried to use the code from the line render methods of GuiComponent and modify it because fill draws a rectangle on the screen?

[J3ramy]

Yes, horizontal and vertical line use the fill method which creates a rectangle. But I want to draw a line diagonally as well (not only vertical/horizontal).

So, I guess the solution is not to draw a rectangle (except you can rotate it?).

I guess a better solution would be to work with the RenderSystem and pose stack (as shown in my code above), but it is not working (nothing appears on screen)

 

Afaik the RenderSystem uses OpenGL?

Do you have any idea what's wrong in my code?

[Luis_ST]

1 hour ago, J3ramy said:

So, I guess the solution is not to draw a rectangle (except you can rotate it?).

You can try to rotate the PoseStack

1 hour ago, J3ramy said:

Afaik the RenderSystem uses OpenGL?

Thats correct, the RenderSytem uses OpenGL vanilla builts thier system on top of that

1 hour ago, J3ramy said:

Do you have any idea what's wrong in my code?

Never done this before, I only have limited knowledge about rendering.
Sorry that I can't really help you further.

[J3ramy]

Still, thank you @Luis_ST !  

The idea of rotating the poseStack actually works for me by applying some mathematical caluclations.

 

That's my code for now (if someone will have the same question):

public final class Line {
    private final Point startPoint, endPoint;
    private final int color, lineWidth;
    private float lineLength, rotationAngleInDeg;

    public Line(Point start, Point end, int lineWidth, int color) {
        this.startPoint = start;
        this.endPoint = end;
        this.lineWidth = Math.abs(lineWidth);
        this.color = color;

        this.calculateLine();
    }

    public Line(int x1, int y1, int x2, int y2, int lineWidth, int color) {
        this(new Point(x1, y1), new Point(x2, y2), lineWidth, color);
    }

    public void render(PoseStack poseStack) {
        poseStack.pushPose();
        poseStack.translate(this.startPoint.x, this.startPoint.y, 0);
        poseStack.mulPose(Vector3f.ZP.rotationDegrees(this.rotationAngleInDeg));

        if(this.lineWidth % 2 == 0 || this.lineWidth == 1){
            AbstractContainerScreen.fill(poseStack, 0, 0,
                    (int) (this.lineLength), this.lineWidth, this.color);
        }
        else{
            AbstractContainerScreen.fill(poseStack, 0, -this.lineWidth / 2,
                    (int) (this.lineLength), this.lineWidth / 2, this.color);
        }

        poseStack.popPose();
    }

    private void calculateLine(){
        final int deltaX = this.endPoint.x - this.startPoint.x;
        final int deltaY = this.startPoint.y - this.endPoint.y;

        this.lineLength = (float) Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
        this.rotationAngleInDeg = (float) Math.toDegrees(Math.atan2(deltaY, deltaX)) * -1;
    }
}

Just instantiante a Line object in your Screen class and call the Line render method inside your Screen render method and just pass the poseStack

Edited November 8, 2023 by J3ramy