Documentation

MPImage

Updated on February 28, 2021

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; }
What are your feelings