You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: en/2d-object/2d-render/index.md
+8-5
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# 2D Rendering Component Description
1
+
# 2D Render Description
2
2
3
3
All rendering objects in the engine that do not own a model are 2D rendering objects. Unlike 3D objects, 2D objects do not have model information, and their vertex information is held by the Rect information of the UITransform component and created by the engine, and they have no thickness themselves. Due to the design requirements of the engine, the 2D render object needs to be a child of the RenderRoot node (the node with the RenderRoot2D component) in order to complete the data collection operation.
4
4
@@ -24,19 +24,22 @@ Components that have rendering capabilities in their own right are called 2D ren
Some 2D rendering components are built into the editor. After creating a RenderRoot node, create a node with 2D rendering components under this node:
31
+
Some 2D rendering components are built into the editor. After creating a RenderRoot node, create a node with 2D rendering components under this node:
31
32
32
33
33
34
34
35
2D rendering components can also be added by adding components to the node, the nodes under the 2D menu in the components menu are all 2D rendering components:
Copy file name to clipboardexpand all lines: en/2d-object/index.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -17,4 +17,4 @@ The 2D rendering flow is as follows:
17
17
2D objects can be broadly classified into two categories, **2D rendering objects** and **User-interface (UI)**. The difference is that 2D rendering objects are generally only responsible for rendering 2D objects, while UI is more about user interaction. For more details on the differences, users can refer to the specific descriptions:
This section introduces the powerful and flexible UI (User Interface) system in Cocos Creator. By assembling different UI components to produce UI interfaces that can be adapted to multiple screen resolutions, dynamically generate and update display content from data, and support multiple layout styles.
4
+
3
5
## Getting Started with UI
4
6
5
7
The difference between defining UI and 2D rendering objects in the engine mainly lies in adaptation and interaction. All UI needs to be under a Canvas node to make adaptation behavior, and the Canvas component itself inherits from `RenderRoot2D` component, it can also be used as an entry point for data collection.
@@ -8,12 +10,12 @@ The UI is a necessary interactive part of game development. Generally, buttons,
8
10
9
11
10
12
11
-
Once the design resolution is set, start creating UI elements, all of which are contained under the Canvas node. The Canvas node can be created by clicking the **+** button in the **Hierarchy** panel on the top left and selecting **UI Component -> Canvas**. The Canvas node has a [Canvas](../editor/canvas.md) component, which can be associated with a camera.
13
+
Once the design resolution is set, start creating UI elements, all of which are contained under the Canvas node. The Canvas node can be created by clicking the **+** button in the **Hierarchy** panel on the top left and selecting **UI Component -> Canvas**. The Canvas node has a [Canvas](../../ui-system/components/editor/canvas.md) component, which can be associated with a camera.
12
14
13
15
> **Notes**:
14
16
>
15
-
> - Multiple Canvas nodes can exist in a scene, but a Canvas node should not be nested under another Canvas node or its children.
16
-
> - Canvas components are not one-to-one with camera, their previous rendering depends on the layer of the node and the Visibility of the camera, pay extra attention to layer management to get the desired rendering effect when you have multiple Canvas.
17
+
> 1. Multiple Canvas nodes can exist in a scene, but a Canvas node should not be nested under another Canvas node or its children.
18
+
> 2. Canvas components are not one-to-one with camera, their previous rendering depends on the layer of the node and the Visibility of the camera, so you should pay extra attention to layer management to get the desired rendering effect when you have multiple Canvas.
17
19
18
20
Next, create UI nodes under the Canvas node. The editor comes with the following UI nodes:
19
21
@@ -23,42 +25,25 @@ UI components can be viewed by selecting the node and clicking **Add Component**
23
25
24
26
25
27
26
-
The order in which UI components are rendered is a depth ordering scheme, which means that the ordering of the child nodes under the Canvas node already determines the entire [rendering order](priority.md).
28
+
The order in which UI components are rendered is a depth ordering scheme, which means that the ordering of the child nodes under the Canvas node already determines the entire [rendering order](../../ui-system/components/engine/priority.md).
27
29
28
30
In general game development, the necessary UI elements are not only basic 2D rendering components such as Sprite, Label (text), Mask, but also Layout, Widget (alignment), etc., which are used to quickly build the interface. Sprite and Label are used to render images and text, Mask is mainly used to limit the display content, more commonly used in chat boxes and backpacks, etc. Layout is generally used for single arrangement of buttons, neat arrangement of props in backpacks, etc. <br>
29
-
The last important feature is the Widget, which is mainly used for display alignment. When finishing designing the UI and publish it to different platforms, the actual device resolution of the platform is bound to be different from our design resolution, therefore some trade-offs need to be made in order to adapt it. It is necessary to add a widget component to it, and always ensure that it is aligned to the top left of our design resolution. Please review the [alignment strategy](widget-align.md) and [alignment](../editor/widget.md) documentation.
31
+
The last important feature is the Widget, which is mainly used for display alignment. When finishing designing the UI and publish it to different platforms, the actual device resolution of the platform is bound to be different from our design resolution, therefore some trade-offs need to be made in order to adapt it. It is necessary to add a widget component to it, and always ensure that it is aligned to the top left of our design resolution. Please review the [Alignment Strategy](../../ui-system/components/engine/widget-align.md) and [Alignment](../../ui-system/components/editor/widget.md) documentation.
30
32
31
33
Once the interface is created, some people may notice that the iPhone 7 displays differently than the iPhone X. This is actually the same problem with the device resolution we mentioned above. When you design in design resolution and finally publish in device resolution, there is a pixel deviation because the resolution of different models of mobile devices may not be the same, so there is another conversion process that needs to be done that is screen adaptation. <br>
32
-
Notice in the **Projects -> Project Settings -> Project Data** page in the menu bar, there are two more options **Fit Width / Fit Height**, which can be easily adapted to different devices by following the screen adaptation rules and combining with the Widget component. The specific adaptation rules can be found in the [Multi-Resolution Adaptation Scheme](multi-resolution.md) documentation.
34
+
Notice in the **Projects -> Project Settings -> Project Data** page in the menu bar, there are two more options **Fit Width / Fit Height**, which can be easily adapted to different devices by following the screen adaptation rules and combining with the Widget component. The specific adaptation rules can be found in the [Multi-Resolution Adaptation Scheme](../../ui-system/components/engine/multi-resolution.md) documentation.
33
35
34
36
## UI components
35
37
36
-
UI components mostly do not have rendering capabilities themselves, but hold 2D rendering components for rendering, which themselves have more ability to quickly form user-interactive interfaces, and take on functions such as event response, typography adaptation, etc. UI component references are as follows:
-[Create a List of Dynamically Generated Content](../engine/list-with-data.md)
64
-
-[Use a Sliced Sprite to make a UI image](../engine/sliced-sprite.md)
38
+
UI components mostly do not have rendering capabilities themselves, but hold 2D rendering components for rendering, which themselves have more ability to quickly form user-interactive interfaces, and take on functions such as event response, typography adaptation, etc.
39
+
40
+
For specific descriptions of each UI component, please refer to the [UI Components](../../ui-system/components/editor/base-component.md) documentation.
0 commit comments