Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outline / Stroke text font #1937

Closed
warent opened this issue Jan 7, 2022 · 10 comments
Closed

Outline / Stroke text font #1937

warent opened this issue Jan 7, 2022 · 10 comments

Comments

@warent
Copy link

warent commented Jan 7, 2022

Hello, hope you're doing well. Love Ebiten! I'm making a game with it for fun. One thing I'd like to do is draw text with an outline/border around it, for example white font with a black border. Do we know if something like this is possible, e.g. with shaders etc?

@hajimehoshi
Copy link
Owner

Hi, thank you for using Ebiten!

There is no such feature unfortunately so far. I'll add a task as a new feature.

Yes, I think it's possible with shaders. Rendering a text on an offscreen once and rendering the offscreen onto the destination with a shader (to render the border) should work. Let me think for a while...

@warent
Copy link
Author

warent commented Jan 7, 2022

Thank you! If it helps anyone else, a nice workaround I'm using now is to just use a font that has both a filled and an outlined variant, for example: https://www.dafont.com/becak.font
I found this by searching "font with outline and fill"

@SolarLune
Copy link

SolarLune commented Jan 7, 2022

A rough, but simple way to work around this is to simply render the font multiple times, offsetting it and changing the color to make outlines or shadows. Outlines would be blocky, though~

@hajimehoshi hajimehoshi added this to the v2.4.0 milestone Apr 2, 2022
@hajimehoshi
Copy link
Owner

@eihigh already has a solution on this issue :-)

https://github.com/eihigh/canvas

@hajimehoshi
Copy link
Owner

hajimehoshi commented Nov 23, 2022

https://github.com/eihigh/canvas

https://pkg.go.dev/github.com/eihigh/canvas#Font As I expected, this is only for a SNFT font

@eihigh
Copy link
Contributor

eihigh commented Nov 23, 2022

Yes, I believe its functionality is adequate.

https://github.com/eihigh/canvas/blob/v0.0.2/font/font.go#L20-L32

@hajimehoshi
Copy link
Owner

hajimehoshi commented Nov 23, 2022

I see.

I think I can implement a similar thing with the semi-official library https://pkg.go.dev/golang.org/x/image/font/sfnt#Font and Ebitengine's vector library.

@hajimehoshi
Copy link
Owner

I've succeeded to render a sfnt glyph with the vector package
a

hajimehoshi added a commit that referenced this issue Nov 25, 2022
@hajimehoshi
Copy link
Owner

Though I didn't add any new APIs, I could make a proof of concept.

In order to make a new API, we have to consider an API to accept sfnt.Font instead of font.Face...

@hajimehoshi
Copy link
Owner

If we add a new API, we have to consider other things related to text.

I'll reset the milestone to v2.6.0. We need to redesign text-related things.

@hajimehoshi hajimehoshi modified the milestones: v2.5.0, v2.6.0 Nov 25, 2022
@hajimehoshi hajimehoshi modified the milestones: v2.6.0, v2.7.0 Aug 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants