MPImage Settings #
DrawShape: Type of the shape to be drawn. Values are Circle, Triangle, Rectangle, Pentagon, Hexagon, NStarPolygon
DrawShape DrawShape { get; set; } = DrawShape.None;
StrokeWidth:Width of the stroke for the drawn shape. 0 is no stroke
float StrokeWidth { get; set; }
OutlineWidth: Width of the outline for the drawn shape. 0 is no outline.
float OutlineWidth { get; set; }
OutlineColor: Color of the Outline. Has no effect if the OutlineWidth is 0.
Color OutlineColor { get; set; }
FallOffDistance: Edge Falloff distance of the drawn Shape.
float FalloffDistance { get; set; } = 0.5f;
ConstrainRotation: Constraints rotation to 0, 90, 270 degrees angle if set to true. But the width and height of the shape is replaced as necessary to avoid clipping. If set to false, any shapes can be rotated in any arbitrary angle but will often result in clipping of the shape.
bool ConstrainRotation { get; set; }
ShapeRotation: Rotation of the Shape.
float ShapeRotation { get; set; }
FlipHorizontal: Flips the Shape Horizontally.
bool FlipHorizontal { get; set; }
FlipVertical: Flips the Shape Vertically.
bool FlipVertical { get; set; }
MaterialMode: Defines what material type of use to render the shape. Dynamic or Shared. Default is Dynamic and will issue one draw call per image object. If set to shared, assigned material in the material slot will be used to render the image. It will fallback to dynamic if no material in the material slot is assigned
MaterialMode MaterialMode { get; set; } = MaterialMode.Dynamic;
Material: Shared material to use to render the shape. the material must use the “MPUI/Procedural Sprite” shader
Material material { get; set; }
Type: Type of the image. Only two types are supported. Simple and Filled.
Default and fallback value is Simple
Type type { get; set; } = Type.Simple;
Shapes #
Circle – Struct #
Just a basic Circle
MPUIKIT.Circle Circle { get; set; }
Properties of the Circle struct:
Radius: Radius of the circle. This has no effect if FitToRect is set to true.
float Radius { get; set; } = 0f;
FitToRect: Fit the Circle to the Rect-Transform
bool FitToRect { get; set; }
Triangle – Struct #
An isosceles triangle where two sides of the triangle are equal. The width and height of the shape are the same as the rect-transform.
MPUIKIT.Triangle Triangle { get; set; }
Properties fo the Triangle Struct:
CornerRadius: Radius of the three corners. Counter-Clockwise from bottom-left
x => bottom-left, y => bottom-right z => top
Vector3 CornerRadius { get; set; }
Rectangle – Struct #
Basic Rectangle shape with the same width and height of the rect-transform.
MPUIKIT.Rectangle Rectangle { get; set; }
Properties of the Rectangle Struct:
CornerRadius: Radius of the four corners. Counter-Clockwise from bottom-left
x => bottom-left, y => bottom-right z => top-right, w => top-left
Vector4 CornerRadius { get; set; }
Pentagon – Struct #
Pentagon shape with two parallel opposite equal sides. It is basically a rectangle but one of the sides of the rectangle is broken into halves and pulled out.
MPUIKIT.Pentagon Pentagon { get; set; }
Properties of the Pentagon Struct:
CornerRadius: Radius of the four corners. Counter-Clockwise from bottom-left
x => bottom-left, y => bottom-right z => top-right, w => top-left
Vector4 CornerRadius { get; set; }
TipSize: Size of the Tip (the triangular part sticking out of the rectangular part of the shape).
float TipSize { get; set; }
TipRadius: Corner Radius of the Tip. The fifth corner of the pentagon shape.
float TipRadius { get; set; }
Hexagon – Struct #
Hexagon shape with two opposite parallel equal sides. It is basically a rectangle where two of its sides are broken into halves and pulled out of the shape that creates two triangle tips left and right of the shape.
MPUIKIT.Hexagon Hexagon { get; set; }
Properties of the Hexagon Struct:
CornerRadius: Radius of the four corners. Counter-Clockwise from bottom-left
x => bottom-left, y => bottom-right z => top-right, w => top-left
Vector4 CornerRadius { get; set; }
TipSize: Sizes of the two tips (the triangular part sticking out of the rectangular part of the shape).
x => left tip, y => right tip
Vector2 TipSize { get; set; }
TipRadius: Radius of the corner of the tips.
x => left tip’s corner, y => right tip’s corner
Vector2 TipRadius { get; set; }
NStar Polygon – Struct #
N-star polygon shape is equal-sided uniform polygon shape with the ability to morph to a star corresponding to the original shape. ie: an equilateral pentagon will morph into a five-sided star.
MPUIKIT.NStarPolygon NStarPolygon { get; set; }
Properties of the NStarPolygon Struct:
SideCount: How many sides should there be in the shape. These sides are equal in size. 3 sides create an equilateral triangle, 6 sides create a hexagon, and so on.
The value of SideCount should remain between 3 and 10.
float SideCount { get; set; } = 3f;
Inset: Inset is the value that determines how much should the sides go inside the shape and create a concave star shape. Each side will break in half and their middle point will go towards the center of the shape
Value of inset should remain between 2 and (SideCount – 0.01). 2 is default and means no breaking of the sides.
float Inset { get; set; } = 2f;
CornerRadius: Corner Radius of all the corners of the shape.
float CornerRadius { get; set; }
Offset: Position offset of the shape from the origin.
Vector2 Offset { get; set; }
Gradient Settings #
GradientEffect – Struct #
Gradient Overlay of the image.
MPUIKIT.GradientEffect GradientEffect { get; set; }
Properties of the GradientEffect Struct:
Enabled: Enable/Disable gradient overlay.
bool Enabled { get; set; } = 3f;
GradientType: Type of the gradient. Linear/Radial/Corner
GradientType GradientType { get; set; } = 2f;
Gradient: Gradient that will be overlaid onto the image. Doesn’t apply for corner gradient.
Gradient Gradient { get; set; }
CornerGradientColors: 4 Colors for Corner Gradient overlay.
[0] => top-left, [1] => top-right
[2] => bottom-left, [3] => bottom-right
Color[] CornerGradientColors { get; set; }
Rotation: Rotation of the Gradient. Only applies to Linear Gradient.
float Rotation { get; set; }