Canvas
Canvas (Canvas) is the area that should hold all UI elements, and all UI elements are subclasses of Canvas.
Canvas Group
Canvas Group (Canvas Group) can centrally control certain aspects of the entire set of UI elements. If there are too many canvases, you can manage some properties of the canvas in a unified manner by adding a canvas group.
Alpha
The opacity of UI elements in this group. The value is between 0 and 1, where 0 is completely transparent and 1 is completely opaque.
Interactable
determines whether this component accepts input. When set to false, interaction is disabled.
Whether Block Raycasts
accepts the detection of graphics events, if accepted, the graphics events cannot be changed. Whether the current self-set of
Ignore Parent Groups will be affected by the parent set. Note: Canvas Group needs to be manually searched and added in Add Component.
rendering mode
Screen Space - Overlay
This rendering mode places UI elements on the screen rendered on top of the scene. If the screen is resized or the resolution changes, the canvas will automatically resize to accommodate this.
Pixel PrefabsWhether the UI should be rendered accurately without aliasing.
Sort Orderfor the sort order.
Screen Space - Camera
This rendering mode is similar to Screen Space - Overlay , but in this mode the canvas is placed at a given distance in front of the specified __camera__. UI elements are rendered by this camera, which means that camera settings affect the appearance of the UI. If the camera is set to __orthographic view__, UI elements will be rendered in perspective, and the amount of perspective distortion can be controlled by the camera __field of view__. If the screen is resized, the resolution changes, or the camera frustum changes, the canvas will automatically resize to accommodate.
In this mode there will beRender CameraUI can be rendered to the camera.
World Space
This mode renders the UI as a flat object in the scene. However, unlike Screen Space - Camera mode, the plane does not need to face the camera and can be oriented however you like. The size of the canvas can be set using a rectangle transform, but the size of the canvas on the screen will depend on the camera's perspective and distance. Other scene objects can be behind the canvas, through the canvas, or in front of the canvas.
displayables
text
TextNot interactive per se but can display or illustrate other text.
character
Attributes | Function |
---|---|
Font | The font used to display text. |
Font Style | The style to apply to the text. Options include Normal (normal), Bold (bold), Italic (italic), and Bold And Italic (bold and italic) |
Font Size | display text size |
Line Spacing | Vertical spacing between lines of text |
Rich Text | Whether to choose rich text |
Paragraph
Attributes | Function |
---|---|
Alignment | horizontal and vertical alignment of text |
Align By Geomery | Horizontal alignment is performed using ranges of glyph geometries instead of glyph metrics |
Horizontal Overflow | Method to handle the case where the text is too wide to fit within the rectangle. The options provided are Wrap and Overflow |
Vertical Overflow | Method to handle the case where the wrapped text is too tall to fit within the rectangle. The options provided are Truncate and Overflow |
Best Fit | Should Unity ignore the size property and try to fit the text directly into the control's rectangle |
Color | the color to use for rendering text |
Material | The material used to render the text |
Raycast Padding | Raycasting, clicking on it may increase memory |
image
Rect Transform
With, Hight image size (pixels).
Anchors (anchor points) determine the positional relationship between the image and the background.
Pivot (center point) is related to Pos position.
Attributes | Function |
---|---|
Source Image | A texture representing the image to display (must be imported as a sprite) |
Color | the color to apply to the image |
Material | The material used to render the image |
Raycast Target | Whether this image should be treated as a raycast target |
Preserve Aspect | Make sure the image keeps its existing size |
Set Native Size | Use this button to set the dimensions of the image box to the texture's native pixel size |
ImageType
ImageType needs to be displayed after the image is attached to the Image.
There are four options for ImageTypeSimple,Sliced,Tiled,Filled:
Simple
Set Native SizeThe button is to restore the original image size of the image.
Sliced
is turned off when the picture is divided into nine (nine squares)Fill CenterThe part in the middle will be removed.
Pixels Per Unit MulpitlerPixels per unit.
Filled
is used to achieve the effect of skill CD in the game.
inFill MethodThe Horizontal in it means that the effect is realized in the horizontal direction, and Vertical represents the realization in the vertical direction.
Rdial90, Rdial80, and Rdial360 are realized at 90 degrees, 180 degrees, and 360 degrees, respectively.
Fill Origin represents the position where the implementation starts
Raw image (RawImage)
Attributes | Function |
---|---|
Texture | A texture representing the image to display |
Color | the color to apply to the image |
Material | The material used to render the image |
UV Rectangle | The offset and size of the image within the control's rectangle, expressed in normalized coordinates (range 0.0 to 1.0). The edges of the image will be stretched to fill the space around the UV rectangle |
RawImage can make frame animation
UV RectAmong them, x is the width and length of the picture, y is the length of the height,
H represents the ratio of the height of the changed picture to the original image;
W represents the ratio of the length of the changed picture to the original image.
Mask
After using the Mask, the part selected by the Mask can be displayed, while other parts will not be displayed.
Mask is generally not used frequently because Mask consumes computer performance. The reason is that Mask itself is a component of UI, but Mask itself will take away a UI and thus increase performance consumption.
Advantages of RectMask2D
: Compared with Mask, it consumes less performance.
Disadvantages: Can only be used for 2D layers, some minor bugs may appear.