UIBlock2D
UIBlock2D is a UIBlock which renders an adjustable, rounded-corner rectangle mesh and supports a variety of features:
- Rounded Corners
- Radial Fill
- Gradients
- Images
- Drop Shadows and Inner Shadows
- Borders
- Built-In Anti-Aliasing
- Surface Lighting
Rounded Corners
Corner Radius
The corner radius of the UIBlock body. The Border and Shadow, if enabled, will round with the body based on their configuration.
uiBlock.CornerRadius.Value = 1f;
Value vs. Percent Corner Radius
| Type | Behavior |
|---|---|
| Value | The radius will stay constant and not change with the size of the UIBlock |
| Percent | The radius will change with the size of the UIBlock |
// 0.1 == 10%
uiBlock.CornerRadius.Percent = 0.1f;
Images
Image
Can be a Texture2D, Sprite, or RenderTexture.
uiBlock.SetImage(texture2D);
uiBlock.SetImage(sprite);
uiBlock.SetImage(renderTexture);
Image Scale Mode
| Type | Behavior |
|---|---|
| Envelope | As the UIBlock's size changes, the image scale will adjust automatically to ensure the image maximally fills its parent container. Preserves the image's native aspect ratio (unstretched) |
| Fit | As the UIBlock's size changes, the image scale will adjust automatically to ensure the full image fits within its parent container. Preserves the image's native aspect ratio (unstretched) |
| Sliced | The image will be displayed as a 9-sliced sprite, analogous to Unity's Sliced image type (see also PixelsPerUnitMultiplier). |
| Tiled | The image will be displayed as a 9-sliced sprite with the sections being tiled instead of stretched, analogous to Unity's Tiled image type (see also PixelsPerUnitMultiplier). |
| Manual | No automatic adjustment is made to the image's scale. If the aspect ratio of the UIBlock and image do not match, the image will stretch |
uiBlock.ImageAdjustment.ScaleMode = ImageScaleMode.Fit;
Manual Image Adjustment
If Scale Mode is Manual, CenterUV and UVScale can be used to manually adjust how the image is rendered;
uiBlock.ImageAdjustment.CenterUV = Vector2.zero;
// Zooms in by a factor of 2
uiBlock.ImageAdjustment.UVScale = 2f * Vector2.one;
Radial Fill
Radial Fill
A radial fill/cutout.
Rotation
The angle (in degrees from the positive x-axis) that serves as the basis rotation from which the Fill Angle will apply.
uiBlock.RadialFill.Rotation = 45f;
Center
The center/origin of the radial cutout in its local space.
uiBlock.RadialFill.Center.Value = new Vector2(1f, 2f);
// 1 == 100%
uiBlock.RadialFill.Center.Percent = new Vector2(0.5f, 0.2f);
Radial Gradients
Center
The center offset of the gradient in its local space.
uiBlock.Gradient.Center.Value = new Vector2(1f, 2f);
// 1 == 100%
uiBlock.Gradient.Center.Percent = new Vector2(0.1f, 0.2f);
Radius
A per-axis radius of the gradient.
uiBlock.Gradient.Radius.Value = new Vector2(1f, 2f);
// 1 == 100%
uiBlock.Gradient.Radius.Percent = new Vector2(0.1f, 0.2f);
Rotation
A counter-clockwise rotation of the gradient (in degrees) around its Center.
uiBlock.Gradient.Rotation = 45f;
Linear Gradients
A value of 0 for Radius is equivalent to infinity, and can be used to achieve a linear-style gradient.
Borders
Border Direction
| Type | Behavior |
|---|---|
| Out | Border expands outward from the edge of the UIBlock body |
| Center | Border is centered on the edge of the UIBlock body, expanding inward and outward |
| In | Border expands inward from the edge of the UIBlock body |
uiBlock.Border.Direction = BorderDirection.In;
Border Width
Value vs. Percent Border
| Type | Behavior |
|---|---|
| Value | The width of the border will stay constant and not change with the size of the UIBlock |
| Percent | The width of the border will change with the size of the UIBlock |
uiBlock.Border.Width.Value = 1;
// 0.1 == 10%
uiBlock.Border.Width.Percent = 0.1f;
Shadows
Shadow Direction
| Type | Behavior |
|---|---|
| Out | Drop shadow |
| In | Inner shadow |
uiBlock.Shadow.Direction = ShadowDirection.Out;
Shadow Blur
A larger blur leads to a softer shadow, whereas a smaller blur leads to a sharper shadow.
uiBlock.Shadow.Blur.Value = 1f;
// 0.1 == 10%
uiBlock.Shadow.Blur.Percent = 0.1f;
Shadow Width
The width of the shadow before the Blur is applied.
uiBlock.Shadow.Width.Value = 1f;
// 0.1 == 10%
uiBlock.Shadow.Width.Percent = 0.1f;
Shadow Offset
The center offset of the shadow in its local space.
uiBlock.Shadow.Offset.Value = new Vector2(0.1f, 0.2f);
Value vs. Percent Shadow
Configurable on Width, Blur, and Offset.
| Type | Behavior |
|---|---|
| Value | The value will stay constant and not change with the size of the UIBlock |
| Percent | The value will change with the size of the UIBlock |
uiBlock.Shadow.Width.Value = 1f;
uiBlock.Shadow.Offset.Percent = new Vector2(0.1f, 0.2f);
Anti-Aliasing
Soften Edges
UIBlock2Ds have built-in anti-aliasing which does not require any post-processing effects and applies to the body, Border, and Shadow. See Anti-Aliasing for more info.