Sprite Renderer
The SpriteRenderer component is used to display images in 3D/2D scenes.
Note: By default, the sprite renderer places the image on the XoY plane.
Properties
| Property | Type | Description |
|---|---|---|
| sprite | Sprite | Reference to the sprite |
| width | Number | Width of the sprite renderer; if not customized by the developer, defaults to the sprite width |
| height | Number | Height of the sprite renderer; if not customized by the developer, defaults to the sprite height |
| color | Color | Color of the sprite |
| flipX | Boolean | Whether to flip on the X-axis when rendering |
| flipY | Boolean | Whether to flip on the Y-axis when rendering |
| drawMode | SpriteDrawMode | Drawing mode, supports normal, nine-slice, and tiling drawing modes |
| maskInteraction | SpriteMaskInteraction | Mask interaction type, used to set whether the sprite needs a mask, and if so, whether to display inside or outside the mask |
| maskLayer | SpriteMaskLayer | Mask layer to which the sprite belongs, used for matching with SpriteMask, defaults to Everything, indicating it can be masked with any SpriteMask |
Usage
Creation
Create a Node with Sprite Renderer
By selecting a node in the Hierarchy Panel, you can quickly add a child node with a sprite renderer by right-clicking -> 2D Object -> Sprite Renderer.
Attach Sprite Renderer to a Node
To attach a sprite renderer to an existing node, simply go to the Inspector Panel of the selected node, then choose Add Component -> 2D -> Sprite Renderer.
Script Creation
Similarly, in scripts, we can attach a sprite renderer to a node with the following code:
const spriteRenderer = entity.addComponent(SpriteRenderer);
spriteRenderer.sprite = sprite;Set Sprite
When displaying an image, first add a sprite component to an entity and then set the sprite asset as follows:
Rendering Size
Setting the width and height of SpriteRenderer can explicitly specify the size of the sprite in 3D space. If not set, the size of the Sprite will be used as the default value.
Set Color
Adjust the color by setting the color property to achieve fade-in and fade-out effects, as shown below:
Image Flip
In addition to basic image display, SpriteRenderer also supports image flipping. Simply set the flipX/flipY properties to achieve flipping, as shown below:
Drawing Modes
The sprite renderer currently provides three drawing modes: normal, nine-slice, and tiled drawing (default is normal drawing). By modifying the drawing width and height in different drawing modes, you can visually perceive the rendering differences between the modes, as shown below:
Masking
Please refer to the Sprite Mask documentation.
Custom Materials
Please refer to the Custom Shader documentation.