UIBlock2D is a UIBlock which renders an adjustable, rounded-corner rectangle mesh and supports a variety of features:
- Rounded Corners
- Radial Fill
- Drop Shadows and Inner Shadows
- Built-In Anti-Aliasing
- Surface Lighting
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
|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;
Can be a Texture2D, Sprite, or RenderTexture.
uiBlock.SetImage(texture2D); uiBlock.SetImage(sprite); uiBlock.SetImage(renderTexture);
Image Scale Mode
|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;
A radial fill/cutout.
The arc angle (in degrees) of the fill.
uiBlock.RadialFill.FillAngle = 90f;
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;
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);
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);
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);
A counter-clockwise rotation of the gradient (in degrees) around its Center.
uiBlock.Gradient.Rotation = 45f;
A value of
0 for Radius is equivalent to infinity, and can be used to achieve a linear-style gradient.
A colored border drawn around the perimeter of the body.
uiBlock.Border.Enabled = true;
|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;
Value vs. Percent Border
|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;
A drop shadow, inner shadow, or glow effect.
uiBlock.Shadow.Enabled = true;
uiBlock.Shadow.Direction = ShadowDirection.Out;
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;
The width of the shadow before the Blur is applied.
uiBlock.Shadow.Width.Value = 1f; // 0.1 == 10% uiBlock.Shadow.Width.Percent = 0.1f;
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.
|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);
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.