Procedural UI: background and borders UMG material KIT

LabXX -
Average Rating:  
X Rating Failed

Material KIT to create UI background and borders procedurally via materials, usable in UMG! All the sample images of the KIT are created with UMG and included in the KIT as reference.

  • Supported Target Platforms
  • Supported Engine Versions
    4.16-4.21

Description


DEMO VERSION (v.1.5.1)

Try yourself most of the features available in the pack, no static switch material version used in the DEMO.

Download here the demo version (Windows 64bit)


Create all the backgrounds, rounded borders and strokes that you need with this KIT! Flat color directly adjustable by UMG widget params. Use it to create buttons, interface background, HUDs etc..


All the images of the KIT are created with Unreal Engine UMG and included in the KIT! Use as reference to create your own!


The KIT consists in one material that procedurally, at a low computational cost, creates round borders or only stoke. Each rounding (internal and external) can be adjustable individually. All of this is combined with a powerful color gradient system (up to 4 color, same params as Photoshop, Illustrator etc.., stop points and blend weights for each color), both linear with 360° of rotation and radial. Params of the material are self explanatory and very easy to use.


You can also stack the widgets with this is material assigned one on top of the other leaving you the potential to create very complex forms.


To save performance, when a feature is not used it's automatically discarded thanks to the usage of multiple Static Switch Parameters. A second version was introduced in version 1.5 without some Static Switch Parameters allows you to blend all the features together. Try it out in the DEMO.

Technical Details


Additional note on colours: Flat colour (param name "TintColorAndOpacity") must be previewed as sRBG and copied from outside in Hex sRBG slot. If leaved as plain white #FFFFFF you can set the colour directly in UMG widget interface (param "Tint" or "ColorContentAndOpacity", depending on widget type). Otherwise Gradient Colours must be previewed with sRBG unchecked and copied in Hex Linear Slot. This is required to perform the colour blending in RBG space and achieving the same beautiful results as Photoshop and Illustrator. See last image.


CHANGELOG

Base version: 1.3

Update 1.4

  • Added blend weight feature

Update 1.5

  • Added background texture feature
  • Added second material version without some Static Switches that let you combine all features together
  • Update Category of some material params to be more user friendly
  • Fix bug when Border Smoothing was forced to 0

Features:

  • Rounded borders (each rounding settable individually)
  • Stroke only (each round settable individually, both internal and external)
  • Rounding settable as percentage or target pixel
  • Flat color or Gradient up to 4 color with adjustable color stop points and blend weights
  • Linear gradient with 360° of rotation
  • Normal Radial gradient or elliptical
  • Only stoke angle feature (see picture n° 3)

Content: 2 Material, 8 Material function, 43 Sample Material instances

Supported Development and Target Platforms: All excepet mobile, no specific hardware feature used.

Documentation: All the images of the KIT are created with Unreal Engine UMG and included in the KIT! Use as reference to create your own! Params of the material are self explanatory and very easy to use.

Comments

!

Previous Next
  • Edit
  • Preview
  • Help
Enter
Login to comment
X Report this Comment
Report
X Attention


close
X Edit this Comment
  • Edit
  • Preview
  • Help
Update
X Remove this Comment

Are you sure you want to remove this comment?

Remove
X Attention