Document image-based workaround for Line2D antialiasing

[Calinou]

Your Godot version: 3.2.3

Issue description:

Line2D's antialiasing property is known not to be reliable:

• It sometimes doesn't work if HDR is enabled in the project settings (which is the default when using GLES3).
• It breaks with translucent lines (alpha < 1.0).

Fortunately, you can use a specially crafted image for the Line2D to solve most of the aliasing issues with no performance impact. It won't anti-alias the line's begin and end caps (unless a circular cap mode is used), though. See https://www.reddit.com/r/godot/comments/k7qcwa/when_im_using_a_line2d_node_im_getting_horrible/.

When Mipmaps is enabled on the line texture, it should be possible to use a relatively tall image (like 1×128) to support pretty much every common line width, with good scaling support when using the 2d stretch mode.

See also #2379.

URL to the documentation page (if already existing): https://docs.godotengine.org/en/latest/classes/class_line2d.html

[Calinou]

Note that following the merge of godotengine/godot#43828, Line2D antialiasing should work reliably in 4.0. We should still document this workaround for 3.x.

[michaldev]

Drawing a straight 2d line is one of the basic functions of the engine. I can't find a solution to my problem anywhere and my thread has been closed. In my case this doesn't work correctly on GLES2 and GLES3.

This work very well on unity and defold.

[Calinou]

@michaldev This very issue provides a workaround using the Line2D and a specially crafted texture (depending on the line width). Did you try it?

Quoting my original comment on Reddit:

You can assign a texture to your Line2D that is designed to add some antialiasing. The texture must have a transparent 1-pixel border on the top of bottom sides and can have any solid fill – white is ideal so you can still modulate its color easily. Also, make sure filtering is enabled on the texture in the Import dock (by default, it should be). I also recommend enabling Mipmaps in the Import dock in case you decrease the line's width significantly or use a high base resolution of your project.

Here's an example for a 6 pixel thick line: https://i.imgur.com/TIGnKS3.png

(the image is white on a transparent background)

This won't solve the aliasing that appears on the line's begin and end edges, but it's very effective on the length axis (which is the most visible one).

[michaldev]

Yes. It doesn't work.

[Calinou]

@michaldev It appears you're using a very bright color for your text, line and circle:

Overbright colors will break antialiasing; this is the reason for a green fringe line appearing on the edge between the white line and the black background. Check the values of your various colors in your scene, including Modulate and Self Modulate properties – they must be between 0 and 1, not a brighter value. When setting a color by code with Color(), components' values should be between 0 and 1 if you don't want an overbright color.

[setanarut]

godot 4 alpha 3 still no antialiased thin lines. We are not in the 80s.

[Calinou]

godot 4 alpha 3 still no antialiased thin lines. We are not in the 80s.

The Vulkan renderer features portable line antialiasing using triangle strips: godotengine/godot#43828

However, the antialiased parameter was removed for some of the line drawing functions.

[Calinou]

I recently released an add-on which automates the process described in this issue: https://github.com/godot-extended-libraries/godot-antialiased-line2d

It supports antialiased 2D line and polygon drawing.

[akien-mga]

Fixed by godotengine/godot#59952.

[MathiasBaumgartinger]

I recently released an add-on which automates the process described in this issue: https://github.com/godot-extended-libraries/godot-antialiased-line2d

It supports antialiased 2D line and polygon drawing.

I just played around with a project in Godot 4 Beta that uses Line2D, I know this is more of a feature-request/bug-report but I first want to verify I understood your comment (and the /latest-documentation) correctly: Antialiasing should no longer be a problem on Line2D once the Antialiased property in the section border is checked in Godot 4, right? Because I am still getting a very "pixeled" line even when using the property:

[Calinou]

Antialiasing should no longer be a problem on Line2D once the Antialiased property in the section border is checked in Godot 4, right? Because I am still getting a very "pixeled" line even when using the property:

This is a known issue: godotengine/godot#62954

[MathiasBaumgartinger]

Thanks for letting me know, excuse my unnecessary comment.