Announcement

Collapse
No announcement yet.

Getting SVG shapes into UMG

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    [TUTORIAL] Getting SVG shapes into UMG

    Hi all,
    didn't like how PNGs got filtered when moving my mockup from Photoshop to UMG, so I packaged my shapes in a font file and got perfect vector graphics for the HUD
    Click image for larger version

Name:	forum.png
Views:	1
Size:	20.0 KB
ID:	1179571
    Super quick tutorial here (posted to my dev blog), let me know if you have any questions.

    #2
    Neat - are you planning to use the font materials to do things like fill the boost bar?

    Comment


      #3
      Originally posted by Nick Darnell View Post
      Neat - are you planning to use the font materials to do things like fill the boost bar?
      Right now I'm masking out the boost bar glyph by setting the X scale of the canvas panel wrapping it, and then I just tint it based on ship speed. Will get into font materials to see what more can be done

      Comment


        #4
        Honestly this wouldn't be a bad idea for an actual feature for umg... Instead of using font files using actual svg :O
        -Josh Steinhauer ~ HERO ~ My Blog ~ My Twitter

        Comment


          #5
          Nifty, keep us posted on how it turns out!

          And +1 for what Josh said.
          The Unreal Wiki & Unreal Docs are full of helpful Information about almost every topic!
          Found a Bug? Have a Question or a Feature request? The AnswerHub is your best friend!
          Want to share/discuss your progress or a tutorial? The Forums are all yours!

          Comment


            #6
            cool you just give me the answer.

            After using a few font awesome icons in HUD, I was wondering if a custom font could work as a solution for custom vectorial shape. It looks great. thanks for sharing your result.


            Originally posted by joshcamas View Post
            Honestly this wouldn't be a bad idea for an actual feature for umg... Instead of using font files using actual svg :O
            +1

            Comment


              #7
              Yeah getting SVGs into UMG native feels like it should be a breeze for seasoned devs at epic

              Here's some moving pictures of the HUD in action!

              Comment


                #8
                I don't believe UE4 has support for rasterizing SVGs in real time. Fonts are instead translated into raster distance fields on import. You can easily import your own distance field graphics derived from your SVGs without using the font system.

                Comment


                  #9
                  SVG is significantly less performant than non vector graphics. this is due to the rasterizing of said graphics. Traditionally an image sent to a gpu is already a raster. SVG needs rasterization in realtime to be useful. so you pay for that conversion. the only benefit is reduced disk space from vector graphics, and they are not always more efficient in terms of space either.

                  I implemented a realtime Bresenham's rasterizing in my own game engine, it was not too difficult to implement but it's a hard problem to make faster and honestly not really that beneficial at all at-least from what i seen from my game engine, it was not worth the trouble, you don't really gain anything. you get a file type sure but you pay for raster.

                  We had SVG ui's in ue before, it was called scaleform and it was honestly....garbage im my opinion.


                  I'd honestly say, continue on how you're going, this is how i do my ui for ona even though my ui is extremely minimal. Your's is looking pretty damned sweet.
                  Last edited by SaxonRah; 04-15-2016, 11:33 PM.
                  Youtube
                  Machine Learning C++ Plugin
                  Lindenmayer System C++ Plugin

                  Comment


                    #10
                    Originally posted by SaxonRah View Post
                    SVG is significantly less performant than non vector graphics. this is due to the rasterizing of said graphics. Traditionally an image sent to a gpu is already a raster. SVG needs rasterization in realtime to be useful. so you pay for that conversion. the only benefit is reduced disk space from vector graphics, and they are not always more efficient in terms of space either.

                    I implemented a realtime Bresenham's rasterizing in my own game engine, it was not too difficult to implement but it's a hard problem to make faster and honestly not really that beneficial at all at-least from what i seen from my game engine, it was not worth the trouble, you don't really gain anything. you get a file type sure but you pay for raster.

                    We had SVG ui's in ue before, it was called scaleform and it was honestly....garbage im my opinion.


                    I'd honestly say, continue on how you're going, this is how i do my ui for ona even though my ui is extremely minimal. Your's is looking pretty damned sweet.
                    SaxonRah, I don't understand your position, are you saying that using SVGs as bzxo did is good, or not?

                    Anyway, from my unexpert point of view, it looks awesome! Congrats bzxo!
                    PORTFOLIO

                    Comment


                      #11
                      Originally posted by Klawd3 View Post
                      SaxonRah, I don't understand your position, are you saying that using SVGs as bzxo did is good, or not?

                      Anyway, from my unexpert point of view, it looks awesome! Congrats bzxo!
                      No, he gave some performance considerations which is always more than welcome.
                      The Unreal Wiki & Unreal Docs are full of helpful Information about almost every topic!
                      Found a Bug? Have a Question or a Feature request? The AnswerHub is your best friend!
                      Want to share/discuss your progress or a tutorial? The Forums are all yours!

                      Comment


                        #12
                        Originally posted by SaxonRah View Post
                        SVG is significantly less performant than non vector graphics. this is due to the rasterizing of said graphics. Traditionally an image sent to a gpu is already a raster. SVG needs rasterization in realtime to be useful. so you pay for that conversion. the only benefit is reduced disk space from vector graphics, and they are not always more efficient in terms of space either.

                        I implemented a realtime Bresenham's rasterizing in my own game engine, it was not too difficult to implement but it's a hard problem to make faster and honestly not really that beneficial at all at-least from what i seen from my game engine, it was not worth the trouble, you don't really gain anything. you get a file type sure but you pay for raster.

                        We had SVG ui's in ue before, it was called scaleform and it was honestly....garbage im my opinion.


                        I'd honestly say, continue on how you're going, this is how i do my ui for ona even though my ui is extremely minimal. Your's is looking pretty damned sweet.
                        This only applies to realtime rasterisation, though - not supporting an SVG import that converts to a raster distance field. This is all the font import is doing at the moment, it would just be a neater way of doing it.
                        Gangster Weapon Pack | Free Weapon Pack | Various Free Models

                        Comment


                          #13
                          Originally posted by DaveFace View Post
                          This only applies to realtime rasterisation, though - not supporting an SVG import that converts to a raster distance field. This is all the font import is doing at the moment, it would just be a neater way of doing it.
                          True. If one did want to look into said problem this paper would be of use.

                          paper link

                          bytewrangler info
                          Last edited by SaxonRah; 04-18-2016, 01:59 PM.
                          Youtube
                          Machine Learning C++ Plugin
                          Lindenmayer System C++ Plugin

                          Comment


                            #14
                            Could we get SVG support as standalone feature? It would help in so many places.

                            Comment


                              #15
                              I found this: https://www.unrealengine.com/marketp...porter-plugin#
                              Maybe it is exactly what you asked for!
                              Instead of going through the font import pipeline.

                              youtube.com/watch?v=MvokfyihNXs

                              Comment

                              Working...
                              X