Starling Forum

1. 

   Daniel
   

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

   

   Daniel

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

   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 2 years ago #
2. 

   marpies
   

   Expert Bird
   Joined: Sep '13
   Posts: 250

   

   marpies

   Expert Bird
   Joined: Sep '13
   Posts: 250

   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 2 years ago #
3. 

   Aditya
   

   Expert Bird
   Joined: Jul '13
   Posts: 316

   

   Aditya

   Expert Bird
   Joined: Jul '13
   Posts: 316

   This looks really great !!!

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

   Posted 2 years ago #
4. 

   Alexandr
   

   Senior Bird
   Joined: Oct '13
   Posts: 107

   

   Alexandr

   Senior Bird
   Joined: Oct '13
   Posts: 107

   I was so close =)

   Thank you Daniel, cool implementation!

   Posted 2 years ago #
5. 

   Daniel
   

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

   

   Daniel

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

   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 2 years ago #
6. 

   Josh Tynjala
   

   Feathers Guru
   Joined: Feb '12
   Posts: 11,554

   

   Josh Tynjala

   Feathers Guru
   Joined: Feb '12
   Posts: 11,554

   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 2 years ago #
7. 

   Daniel
   

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

   

   Daniel

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

   Thanks a lot for looking into it, Josh!

   Posted 2 years ago #
8. 

   harayoki
   

   Competent Bird
   Joined: Nov '13
   Posts: 39

   

   harayoki

   Competent Bird
   Joined: Nov '13
   Posts: 39

   Super great!

   Posted 2 years ago #
9. 

   Lexlutha
   

   Novice Bird
   Joined: May '13
   Posts: 18

   

   Lexlutha

   Novice Bird
   Joined: May '13
   Posts: 18

   Very nice Daniel!

   Posted 2 years ago #
10. 

    rodrigo
    

    Wise Owl
    Joined: Dec '13
    Posts: 652

    

    rodrigo

    Wise Owl
    Joined: Dec '13
    Posts: 652

    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 2 years ago #
11. 

    Daniel
    

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

    

    Daniel

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

    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 2 years ago #
12. 

    Daniel
    

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

    

    Daniel

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

    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 2 years ago #
13. 

    IonSwitz
    

    Expert Bird
    Joined: Sep '13
    Posts: 433

    

    IonSwitz

    Expert Bird
    Joined: Sep '13
    Posts: 433

    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 2 years ago #
14. 

    divlaine
    

    Expert Bird
    Joined: Sep '16
    Posts: 217

    

    divlaine

    Expert Bird
    Joined: Sep '16
    Posts: 217

    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 1 year ago #
15. 

    Daniel
    

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

    

    Daniel

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

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

    Posted 1 year ago #
16. 

    divlaine
    

    Expert Bird
    Joined: Sep '16
    Posts: 217

    

    divlaine

    Expert Bird
    Joined: Sep '16
    Posts: 217

    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 1 year ago #
17. 

    divlaine
    

    Expert Bird
    Joined: Sep '16
    Posts: 217

    

    divlaine

    Expert Bird
    Joined: Sep '16
    Posts: 217

    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 1 year ago #
18. 

    Daniel
    

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

    

    Daniel

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

    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 1 year ago #
19. 

    divlaine
    

    Expert Bird
    Joined: Sep '16
    Posts: 217

    

    divlaine

    Expert Bird
    Joined: Sep '16
    Posts: 217

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

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.