- Category: Materials
- Update: 1.1 (05.03.2018)
- Unreal Engine: 4.18 - 4.19
- Platforms: VR, PC, Console, HTML
SDF Robo Progress Bars is an advanced master material usable for creating a wide range of customized progress bars. Package contains over 50 predefined excellent styles easy to use for various types of games. Material supports advanced customization that covers most of the possible design requirements. Thanks to using SDF functions instead of huge textures all created progress bars always stay sharp, well aliased.
- Two types of shape circle bar/rectangular bar. Fully callable and extendable for more shapes.
- Signed distance functions based rendering. The shape is generated from mathematical functions that give the quality of ‘Vectorized’ graphics without using huge resolution textures.
- Configurable for all resolutions.
- KISS – One mesh per bar.
- Can be mixed with SDF and standard textures.
- Rounded corners of shape colors patterns and progress bar showing.
- GPU friendly, one draw call per bar.
- 23 different example themes that can be adjusted to requirements.
- Unlimited user-defined themes can be created easily using the available properties.
- Multiple advanced effects of progress bar – burning/fade.
- Easy to integrate witch UMG.
- Supported reparenting of themes between different shapes.
- Flexible modification options, each bar presented in this package can be created directly from another.
Version 1.1 (05.03.2018)
- circle bar mode
- 10 new presets of bars
- additional demo room
Version 1.0 (22.01.2018)
- Releases basic version
Creating a new bar
- Select bar from group ExamplesSurface/ExamplesUmg. Find a bar that looks closest visual to effect that you would like to achieve (all bars share the same functionalities so can be modified one to another but it’s faster to start from some point).
- Create duplicate or material instance from the selected bar.
- Set the name for the newly created instance of material. It’s good practice to start name from MI_Surface or MI_Umg. Open material and modify parameters.
- Modify the parameters of the new bar according to your requirements.
Basic types of bars
All bars used in the game should be created as Material Instance that derives from the build in types of materials. Multiple combinations of bars are possible based on bar shape and bar type. The base bar instance name is constructed according to the specified naming convention:
MI_ + BarType + BarShape + Bar
BarType – System is divided into two separate material instances that allow using this system on the surface meshes as well as on UMG widgets.
- Umg – material can be used on hud controls (widget elements).
- Surface – material used on regular meshes (planes in 3d space). Check ExamplesSurface folder to see all examples prepared for surface bars. UseInterface switch set false (for optimization).
BarShape – Allow to chose the basic method of bar visualization.
- Rect – classic rectangular bard that fills from on side to another.
- Circle – advanced bar that fills the circle.
Check ExamplesUmg, ExamplesSurface, ExamplesUmgCircle, ExamplesSurfaceCircle, folder to see all examples.
Using Robo Bars in UMG
- The easiest way to use Robo Bars on UMG is to apply progress bar material onto Widget Image in parameter Brush->Image as presented below:
- Next step is to setup the parameter “Progress” of progress in blueprint graph. To do this you need to read material from the widget and set parameter value.
Progress is a basic value parameter in the master material used for setting how much progress bar is filled. Debug options override the behavior of progress bar by default to visualize the effect of changes in the preview. Find material that you used in your progress bar and disable the debug option by setting:
Progress->ProgressDebug = false
A simple example of using Robo Bars is presented in the demo (Demo/Blueprints/BP_Hud)
Signed Distance Fields
Signed Distance Field is an image where each pixel contains the distance to the nearest point on the boundary. An additional sign of distance allows determining if the pixel is inside or outside rendered shape. SDF image that looks like gradient can be loaded from a file or generated by mathematical functions called Signed Distance Functions.
One of the biggest benefits of using this method is very cheap and configurable antialiasing effect. The same method is used to render outlined/smooth high-quality fonts in Unreal Engine 4 based on low-resolution textures.
Package SDF Robo Progress Bars uses this method to render all bars in multiple ways.
- drawing smooth outlines, shadows, edges
- configurable division on bars
- combining multiple shapes
- round corners using smooth min function
Master material parameters
The progress bar is divided into 4 basic layers that are combined into one using translucent blending. Each layer is configurable and implements some additional effects.
- Outline layer (white)
- Shape layer (black)
- Progress layer (red)
- Pattern layer (blue)
The outline effect is very common in progress bars, it’s a great tool to highlight the shape or separate bar from the background to make it more readable. Outline layer is represented by the base shape. In final effect, it can be rendered as shape, filled background or stay invisible.
|Use Outline||Switch that determinates whether the background outline should be rendered. When disabled then the background is filled by one color.|
|Outline Color||Color of outline/background layer. To make it fully invisible change color alpha to 0.|
Shape layer is to describe the shape of the bar and it is represented by combined signed distance functions. Shape layer is always active.
|Use Shape Texture||Allow using SFD texture as shape description.|
|Use Shape Color Texture||Fill the shape by texture color multiplied by shape color.|
|Shape Color 1/2||Colors of divides shape.|
|Shape Edge X/Y||Edge scale allows fitting bar into different aspect ratio.|
|Shape Scale X/Y||Scaling the visual part of the bar to fit into the mesh model.|
|Shape Slope X/Y||Allows you to create inclined progress bars|
|Use Shape Round 1/2||Enable/Disable round corners on shape.|
|Shape Round||Strength of round corners in shape.|
Progress layer is used for drawing current progress (how much shape is filled by color/texture/effect).
|Progress||Parameter used to steering fill of the progress bar. Active only when Debug is disabled.|
|Progress Debug||Debug options override the behavior of progress bar by default to visualize the effect of changes in the preview.|
|ProgressAnimU/V||Sets animated UV of progress bar texture.|
|ProgressUV||Define progress texture UV mapping. XY- Position, ZW-scale.|
|ProgressColor1/2||Sets separate colors of the pattern used on the bar.|
|Use Progress Color texture||Allow to use progress color texture.|
|Progress Color Texture||
Texture of progress bar sampled based on ProgressAnimU/V. The final color of the bar is calculated by the multiplication of Colors and Texture. This option is useful for an additional effect like gloss/shadow.
Two functionalities in one parameter. Allow changing the direction of progression by setting positive-negative value. The negative value means that the bar will be filled from left to right and the positive from right to left. The absolute value of this value represents the blending of the progress bar into the shape layer. Big value = hard edge/small value = soft edge.
leaning of progress bar lines.
|Use Progress Round||
Allow to use round corners on the progress bar.
Represents the roundness of progress bar corners.
|Use Progress Move||
If true then progress texture will be moved when Progress parameter changes.
Pattern layer describes the scheme of a division the bar into two colors.
|Use Divisions||Allow using automatic division of the bar on two colored patterns.|
|Divisions Jump Hard||Hard jumping between progress values. Round to closest.|
|Divisions Jump Soft||Soft jumping between progress values.|
|Divisions Count||Number of divisions on the bar.|
|Divisions Gaps||Distance between divisions bars.|
|Use Pattern Texture||Allow using texture as the division of the bar into two colored patterns.|
|Use Pattern Texture Progress||Allow using texture as the division of the progress bar on two colored patterns.|
Each layer of bar contains parameters designed especially to control antialiased and smooth edges. This functionality allows to set up hard or soft blending between lower and higher layer.
|Width||Range of smoothness. Bigger value allows making smooth edges of the layer.|
|Shift||Parameter shift is related to zero position on SFD. Determinates the edge size of the layer. Can be used to set up outlines.|
From UMG to Surface
Sometimes there is a need to change Surface material into UMG to render on hud without loss of all parameters set in the material. This operation is well supported by UE4.
- Open material that needs to be changed to support UMG/Surface mode,
- Find option General->Parent and change to MI_Umg*Bar/MI_Surface*Bar depends on your needs.
Explanation of UE4 mechanism. There are two differences between UMG and Surface materials:
UMG does not support vertex interpolators so UseInterface needs to be set false in materials used in UMG. Surface allows for vertex interpolators so it is used as an optimization.
|MI_SurfaceRectBar MI_SurfaceCircleBar||MI_UmgRectBar MI_UmgCircleBar|
Questions & Answers
Why I can’t control the progress value?
It's because of the debug option "Debug Progress" is enabled by default in all bars. That is very useful in testing and previewing bars. Open your bar material and change Debug Porgress=false.
Is there a second layer of bar usually called ‘buffer’?
The easiest way to do this in Robo Bars system is by creating two bars:
- Background bar with buff.
- Foreground top layer bar where: Outline color and shape Colors are set to fully transparent. (only progress will be rendered)