Starling Forum

1. 

   Daniel
   

   Primary Feather
   Joined: Jan '10
   Posts: 5,121

   

   Daniel

   Primary Feather
   Joined: Jan '10
   Posts: 5,121

   Hey guys,

   I thought you'd like a sneak peek on a new feature that I just pushed to the master branch. It's a new "MeshStyle" called "DistanceFieldStyle", and its main use is smooth rendering of bitmap fonts of any scale. It also supports some special effects (outline, glow, drop shadow) that are rendered right away, i.e. without detours over filters or render textures!

   

   The style requires that you process your textures with a certain "signed distance field" algorithm, but there are several tools available that help with that.

   I started writing the documentation of this feature in this wiki article; refer to that for more information! -> http://wiki.starling-framework.org/manual/distance_field_fonts

   I think that's a great addition for the Starling toolbox -- I hope you like it!

   Posted 1 year ago #
2. 

   marpies
   

   Expert Bird
   Joined: Sep '13
   Posts: 239

   

   marpies

   Expert Bird
   Joined: Sep '13
   Posts: 239

   Great stuff, Daniel!

   Is there any significant performance penalty when using this style (with or without effect - glow, shadow...) for TextFields which have their text value changed often?

   Posted 1 year ago #
3. 

   Aditya
   

   Expert Bird
   Joined: Jul '13
   Posts: 313

   

   Aditya

   Expert Bird
   Joined: Jul '13
   Posts: 313

   This looks really great !!!

   But before I get my hopes high... can we use this in Feathers ?? and yes what about the performance ??

   Posted 1 year ago #
4. 

   Alexandr
   

   Senior Bird
   Joined: Oct '13
   Posts: 97

   

   Alexandr

   Senior Bird
   Joined: Oct '13
   Posts: 97

   I was so close =)

   Thank you Daniel, cool implementation!

   Posted 1 year ago #
5. 

   Daniel
   

   Primary Feather
   Joined: Jan '10
   Posts: 5,121

   

   Daniel

   Primary Feather
   Joined: Jan '10
   Posts: 5,121

   Thanks a lot for the nice words, guys!

   I still have to make extensive performance tests, but it should come with only a very small penalty, at least given a reasonably capable GPU.

   All the processing is done in a fragment shader that's quite simple for the basic mode (and a little more complex for the others). On the CPU, it's just 12 more bytes per vertex that need to be copied on batching (those store the shader settings). In any case, it's *much* faster than adding a standard filter, because it's all just one (batchable!) draw call.

   And yes, this should work with Feathers, just as well! At least if Josh allows us to access the "style" property (if that's not possible yet, I'm sure it will be easy to add). Maybe I'll also add an additional XML element to the ".FNT"-file in the future, so that Starling recognizes the distance field mode automatically.

   Posted 1 year ago #
6. 

   Josh Tynjala
   

   Feathers Guru
   Joined: Feb '12
   Posts: 10,315

   

   Josh Tynjala

   Feathers Guru
   Joined: Feb '12
   Posts: 10,315

   It's not currently possible to use DistanceFieldStyle with the BitmapFontTextRenderer in Feathers, but I'll make sure that it gets added in the next version.

   #1424 BitmapFontTextRenderer: expose property to allow a custom MeshStyle

   Posted 1 year ago #
7. 

   Daniel
   

   Primary Feather
   Joined: Jan '10
   Posts: 5,121

   

   Daniel

   Primary Feather
   Joined: Jan '10
   Posts: 5,121

   Thanks a lot for looking into it, Josh!

   Posted 1 year ago #
8. 

   harayoki
   

   Competent Bird
   Joined: Nov '13
   Posts: 39

   

   harayoki

   Competent Bird
   Joined: Nov '13
   Posts: 39

   Super great!

   Posted 1 year ago #
9. 

   Lexlutha
   

   Novice Bird
   Joined: May '13
   Posts: 18

   

   Lexlutha

   Novice Bird
   Joined: May '13
   Posts: 18

   Very nice Daniel!

   Posted 1 year ago #
10. 

    rodrigo
    

    Expert Bird
    Joined: Dec '13
    Posts: 183

    

    rodrigo

    Expert Bird
    Joined: Dec '13
    Posts: 183

    Hi Daniel, this feature will always break batching, right?
    I didn't test the performance yet, but the draw count is going really high.
    idk if that will be an issue or not eventually, as this is the first Starling app I'm doing.

    Amazing feature btw, thanks!
    Is so nice to use only 1 bitmapFont for all text sizes

    Posted 12 months ago #
11. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 5,121

    

    Daniel

    Primary Feather
    Joined: Jan '10
    Posts: 5,121

    No, this doesn't break batching! At least if the following two conditions are met:

    1) the TextField has ".batchable" enabled
    2) the styles use the same render mode (basic/drop shadow/outline/glow)

    So it's actually the same as for normal bitmap fonts, plus rule (2).

    Posted 12 months ago #
12. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 5,121

    

    Daniel

    Primary Feather
    Joined: Jan '10
    Posts: 5,121

    A quick update on distance field rendering: I just added a new utility to Starling, found in the "util" folder: The "Field Agent".

    With the help of this tool, you can convert any black and white image into a distance field texture. More information can be found in its README file.

    In a nutshell, it's a Ruby script (inspired by this article) that wraps some rather elaborate calls to ImageMagick. (Thus, both Ruby and ImageMagick need to be installed.) I tested it on Windows and macOS.

    I hope that helps!

    Posted 7 months ago #
13. 

    IonSwitz
    

    Expert Bird
    Joined: Sep '13
    Posts: 432

    

    IonSwitz

    Expert Bird
    Joined: Sep '13
    Posts: 432

    Very nice!

    I was looking into something very similar at one point. The edge detection method for transparent PNGs did something very similar when looking for an outline of a transparent picture. This should be very much the same, I think.

    The cost of generating the SDF bitmap would be high though, at least for runtime scenarios, so your offline step is probably needed. Very nice tool

    Posted 7 months ago #
14. 

    divlaine
    

    Competent Bird
    Joined: Sep '16
    Posts: 40

    

    divlaine

    Competent Bird
    Joined: Sep '16
    Posts: 40

    Hello.
    At Starling documentation it's described DistanceFieldStyle that is assigned to cat image and showed a cat picture with shadow. But I cant get such shadow.

    var image:Image = new Image(Assets.quadTexture);
    image.width = image.height = 200;
    var style:DistanceFieldStyle = new DistanceFieldStyle();
    style.setupDropShadow();
    image.style = style;

    As a result I'm getting image of circle bordered quad with dark bottom right corner.

    Posted 4 months ago #
15. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 5,121

    

    Daniel

    Primary Feather
    Joined: Jan '10
    Posts: 5,121

    Could you upload that "quadTexture" somewhere so I could try it out?

    Posted 4 months ago #
16. 

    divlaine
    

    Competent Bird
    Joined: Sep '16
    Posts: 40

    

    divlaine

    Competent Bird
    Joined: Sep '16
    Posts: 40

    Ok, thanks Daniel.
    quadTexture - it's just a white rectange 10x10 px.
    I'll write more details with links and some illustrations today after work.

    Posted 4 months ago #
17. 

    divlaine
    

    Competent Bird
    Joined: Sep '16
    Posts: 40

    

    divlaine

    Competent Bird
    Joined: Sep '16
    Posts: 40

    Hello and sorry. The daily routine consumed my time. So only now i can write you.

    var image:Image = new Image(Assets.quadTexture);
    image.width = image.height = 200;
    image.x = image.y = 200;
    var style:DistanceFieldStyle = new DistanceFieldStyle();
    style.setupDropShadow();
    image.style = style;

    So here the result image with left side code: https://ibb.co/bUDEyv
    Here my quadTexture: http://s000.tinyupload.com/?file_id=18661826143070127160

    Posted 3 months ago #
18. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 5,121

    

    Daniel

    Primary Feather
    Joined: Jan '10
    Posts: 5,121

    Ah, I see! No, sorry, you're misunderstanding how the DistanceFieldStyle is supposed to work. It's supposed to be used only with especially prepared textures that manipulate the image's edges in a specific way, like in this image:

    

    In reality, this is just a pure white image with an alpha channel (this one), but I put it in front of a black background so you see what's going on.

    The details about what distance field rendering is about can be found in the Starling Manual.

    Does that help? If you need any more help, just keep on asking.

    Posted 3 months ago #
19. 

    divlaine
    

    Competent Bird
    Joined: Sep '16
    Posts: 40

    

    divlaine

    Competent Bird
    Joined: Sep '16
    Posts: 40

    ok, Daniel, thx. I thought it have something similar to DropShadowFilter.
    So its clear now about its usage.

    Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.