Merge branch 'v3.0-release' into v3.1

# Conflicts:
#	en/SUMMARY.md
#	en/advanced-topics/index.md
#	en/editor/preferences/index.md
#	en/editor/preferences/index/laboratory.png
#	en/editor/preferences/index/preview.png
#	en/material-system/overview.md
#	en/render-pipeline/builtin-pipeline.md
#	en/render-pipeline/overview.md
#	en/render-pipeline/post-process.md
#	en/render-pipeline/user-pipeline.md
#	zh/SUMMARY.md
#	zh/editor/preferences/index.md
#	zh/material-system/overview.md
#	zh/render-pipeline/builtin-pipeline.md
#	zh/render-pipeline/overview.md
#	zh/render-pipeline/user-pipeline.md
#	zh/scripting/ccclass.md

Author: xunyi0

en/SUMMARY.md

@@ -17,13 +17,14 @@
         - [Animation](editor/animation/index.md)
         - [Preferences](editor/preferences/index.md)
         - [Project Settings](editor/project/index.md)
-        <!--- [Editor Layout](editor/editor-layout/index.md)-->
+        - [Editor Layout](editor/editor-layout/index.md)
         - [Preview & Debugging](editor/preview/index.md)
     - [Quick Start: First Game](getting-started/first-game/index.md)
     - [Support](getting-started/support.md)
     - [Caution!](getting-started/attention/index.md)
 - [Upgrade Guide](release-notes/index.md)
     - [Cocos Creator 3.0 Upgrade Guide](release-notes/upgrade-guide-v3.0.md)
+    - [Cocos Creator 3.0 Material Upgrade Guide](material-system/effect-2.x-to-3.0.md)
     - [Cocos Creator 3.1 Material Upgrade Guide](material-system/Material-upgrade-documentation-for-v3.0-to-v3.1.md)
 
 ## Editor Manual
@@ -306,8 +307,10 @@
     - [AssetManager for Hot Update](advanced-topics/hot-update-manager.md)
     - [Dynamic Atlas](advanced-topics/dynamic-atlas.md)
     - [Engine Customization Workflow](advanced-topics/engine-customization.md)
-    - [Render Pipeline](render-pipeline/overview.md)
-        - [Builtin Rendering Pipeline](render-pipeline/builtin-pipeline.md)
+    - [Render Pipeline Overview](render-pipeline/overview.md)
+        - [Built-in Render Pipeline](render-pipeline/builtin-pipeline.md)
+        - [Custom Render Pipeline](render-pipeline/user-pipeline.md)
+        - [Post-processing](render-pipeline/post-process.md)
     - [The Tutorial for JSB 2.0](advanced-topics/JSB2.0-learning.md)
     - [JavaScript to Java Reflection](advanced-topics/java-reflection.md)
     - [JavaScript to Objective-C Reflection](advanced-topics/oc-reflection.md)

en/advanced-topics/index.md

@@ -5,7 +5,10 @@
     - [AssetManager](hot-update-manager.md)
 - [Dynamic Atlas](dynamic-atlas.md)
 - [Engine Customization Workflow](engine-customization.md)
-- [Render Pipeline](../render-pipeline/overview.md)
+- [Render Pipeline Overview](../render-pipeline/overview.md)
+    - [Built-in Render Pipeline](../render-pipeline/builtin-pipeline.md)
+    - [Custom Render Pipeline](../render-pipeline/user-pipeline.md)
+    - [Post-processing](../render-pipeline/post-process.md)
 - [The Tutorial for JSB 2.0](JSB2.0-learning.md)
 - [JavaScript to Java Reflection](java-reflection.md)
 - [JavaScript to Objective-C Reflection](oc-reflection.md)

en/asset/dynamic-load-resources.md

@@ -142,7 +142,7 @@ assetManager.loadRemote<ImageAsset>(remoteUrl, function (err, imageAsset) {
 
 // Remote texture url without file extensions, then you need to define the file type explicitly
 remoteUrl = "http://unknown.org/emoji?id=124982374";
-assetManager.loadRemote<ImageAsset>(remoteUrl, {type: 'png'}, function (err, imageAsset) {
+assetManager.loadRemote<ImageAsset>(remoteUrl, {ext: '.png'}, function (err, imageAsset) {
     const spriteFrame = new SpriteFrame();
     const texture = new Texture2D();
     texture.image = imageAsset;

en/asset/mesh.md

@@ -35,9 +35,12 @@ When the model asset file (`.fbx` or `.gltf`) is selected in the __Assets__ pane
 
 ![mesh_model](mesh/mesh_model.jpg)
 
-- `Normals` -- Normals information, including **Optional**, **Exclude**, **Require**, **Recalculate**
-- `Tangents` -- Tangents information, including **Optional**, **Exclude**, **Require**, **Recalculate**
-- `SkipValidation` -- SkipValidation, whether to skip standard checks
+| Property | Description |
+| :--- | :--- |
+| Normals | Normals import setting, including the following four options:<br>1. **Optional**: Import normals only if the model file contains normals.<br>2. **Exclude**: Do not import normals.<br>3. **Required**: Import normals that are contained in the model file, or recalculate if not contained. It is recommended to use this option if the model data itself is fine, without additional processing.<br>4. **Recalculate**: Recalculate normals and import, ignoring whether if the model file contain normals. Selecting this option will increase the calculated amount, but it will eliminate the subsequent problems caused by the absence of normalization of the model's original normal data. |
+| Tangents | Tangents import setting, including Optional、Exclude、Require、Recalculate four options, option feature can refer to the description of **Normals**, the two are not very different. |
+| Skip Validation | Skip validation of the model file |
+| Disable mesh split | Currently there is a joint-counting-based mesh splitting process during the import pipeline to workaround the max uniform vector limit problem for real-time calculated skeletal animation system on many platforms. This process has a preference impact on other runtime system too. So if it can be pre-determined that the real-time calculated skeletal animations (when `useBakedAnimation` option of the **SkeletalAnimation** component is unchecked) will not be used, this option can be checked to improve preference. But note that toggling this would update the corresponding prefab, so all the references in the scene should be updated as well to accompany that. This process will be removed in further refactors. |
 
 ### Animation Module
 

en/asset/mesh/mesh_model.jpg

@@ -4,12 +4,28 @@ __Sprite Frame__ is a container for __UI rendering__ and basic graphics, which m
 
 ## Importing Sprite Frame Assets
 
-Use the __default asset import__ method to import image assets into the project, then set the type of image as __sprite-frame__ and can then be seen in the **Assets** panel.
+Use the default [asset import](asset-workflow.md) method to import image assets into the project, then set the type of image as __sprite-frame__ in the **Inspeactor** panel:
+
+![set sprite-frame](sprite-frame/set-spriteframe.png)
+
+Creator will then automatically create a spriteFrame resource under it as shown below:
 
 ![imported texture](sprite-frame/imported_texture.png)
 
 Image assets will use thumbnails of their own pictures as icons in the **Assets** panel. When the image sub-asset is selected in the **Assets** panel, a thumbnail of the image is displayed below the **Inspector** panel.
 
+The `spriteFrame` has the following properties:
+
+| Property | Description |
+| :--- | :--- |
+| Packable | Whether to be packed into Dynamic Atlas. |
+| Rotated  | Read-only property, cannot be changed. Used to see if the sub-asset in the Texture Packer asset is rotated. |
+| Offset X, Y | Read-only property, cannot be changed. Used to view the offset of the rectangle in Texture Packer asset. |
+| Trim Type | Set the trim type, including:<br>1. Auto -- Automatic trim<br>2. Custom -- Custom trim<br>3. None -- No trim, use original texture<br>For details, please refer to the [Auto Trim for SpriteFrame](trim.md) documentation |
+| Trim Threshold | Set the transparency threshold, trim off the pixels whose transparency is below the set value.<br>The default value is 1, and the range of values is 0~1.<br>Only takes effect when **Trim Type** is set to **Auto**.  |
+| Trim X, Y, Width, Height | Sets the trim rect, only takes effect when **Trim Type** is set to **Custom**. |
+| Border Top, Bottom, Left, Right | Set the texture margins of the 9-sliced, which can be edited visually by clicking on the **Edit** button below.  |
+
 ## Using a Sprite Frame
 
 ### The object contained in the container is using textures

en/asset/sprite-frame.md

@@ -90,4 +90,4 @@ The `Layer` property of a node is global and unique, but different nodes can set
 
 For more information about Components as well as other types of Components, please refer to the [Components](../../editor/components/index.md) documentation.
 
-> **Note**: that only one rendering component can be added to a node. Rendering components include: **MeshRenderer**, **Sprite**, **Label**, **Graphics**, **Mask**, **RichText**, **UIStaticBatch**, etc.
+> **Note**: only one rendering component can be added to a node. Rendering components include: **MeshRenderer**, **Sprite**, **Label**, **Graphics**, **Mask**, **RichText**, **UIStaticBatch**, etc.

en/asset/sprite-frame/imported_texture.png

@@ -58,7 +58,6 @@ The following is an example of how DragonBones replaces the texture. Replace the
         @property({ type: dragonBones.ArmatureDisplay })
         replaceArmatureDisplay: dragonBones.ArmatureDisplay | null = null;
 
-
         _leftWeaponIndex = 0;
         _rightDisplayIndex = 0;
         _rightDisplayNames:string[] = [];

en/asset/sprite-frame/set-spriteframe.png

@@ -2,72 +2,72 @@
 
 ![index](index/index.png)
 
-**Console** outputs editor or engine information, including **log**, **warnings**, and **errors**. Different types of information will be displayed in different colors.
+**Console** outputs editor or engine messages, including **log**, **warn**, and **error**. Different types of messages are displayed in different colors.
 
-The colors displayed are as follows:
-
-- **console.log()**: output log, <font color=#b6b6b6>gray text</font>, the content that developers in the editor and plug-in feel necessary to print to the console.
+- `console.log()`: outputs log, <font color=#b6b6b6>gray text</font>, usually used to show what action is in progress.
 
   ![log](index/log.png)
 
-- **console.warn()**: output warning, <font color=#ebbe09>yellow text</font>, the abnormal situation encountered by the program that does not affect the result.
+- `console.warn()`: outputs warnings, <font color=#ebbe09>yellow text</font>, used to indicate exceptions that the developer would be wise to handle, but which will not affect operation if left unhandled.
 
   ![warn](index/warn.png)
 
-- **console.error()**: output error, <font color=#dd3c43>red text</font>, the exception encountered during operation that will affect the result, the severity is the highest.
+- `console.error()`: outputs error, <font color=#dd3c43>red text</font>, indicating a serious error that must be resolved before proceeding to the next step or running the game.
 
   ![error](index/error.png)
 
-## Panel operation
+## Panel operations
 
-The functions of the top toolbar are:
+The top toolbar functions, in order, are:
 
-- Clear all logs in the current console.
-- Enter text fuzzy search.
-- Whether to convert the input text to regular search.
-- Select the type of log to display.
-- Open the log file backed up on the disk, and the file data will be reset every time the editor starts.
+- Clear all logs in the current console
+- Enter text for fuzzy search
+- Whether to convert the input text to regular for searching
+- Select the type of logs to be displayed
+- Open the log file backed up on disk, which will be reset each time the editor is started.
 
   ![open-log-file](index/open-log-file.png)
 
-## Parameter Settings
+## Parameter settings
 
-Some parameters of the console are configured in **Preferences**. Please refer to the extended settings in the [Preferences](../preferences/index.md) documentation.
+Some parameters of the console can be configured in **Preferences -> Console**, including whether to display the date and adjust the text size.
 
 ![preferences](index/preferences.png)
 
-## Content Output Rules
+## Custom output information
+
+To make it easier to locate files, nodes or assets, or to provide links to jump to help documentation, etc., Cocos Creator supports custom output to the **console** log in **Developer -> Developer Tools** in the editor's main menu, which currently supports output of the following:
 
-In order to facilitate the location of files, nodes or resources, and provide a quick step to the help document, some recognition of the content and adding actions is required. Specific requirements are as follows:
+- Jump to links by URL
+- Show images by URL
+- Locate assets by URL or UUID
+- Locate nodes by UUID
+- Locate script files by disk file path
+- Output the text in the corresponding language
 
-- Redirect links according to url.
-- Display pictures according to url.
-- Locate Asset resource according to url or uuid.
-- Locate the Node node according to uuid.
-- Locate the script file according to the disk file path path.
-- Output text in the corresponding language.
+### Data format
 
-### Data Format
+Depending on the output content, the input data formats include the following two:
 
 - `{type[text](url)}`
 - `{type(text | url | uuid | path)}`
 
-### Data format description
+The data formats are described as follows:
 
-- Match the characters in `{}` as a whole.
-- `[text]` is optional for expansion input.
-- When `type` exists, it is not case sensitive.
-- When `type` does not exist, the original data is output.
+- Matches the characters in `{}` as a whole.
+- `[text]`: Text of the jump link, optional.
+- `type`: The type of information to be output, including the following. The filling is case-insensitive, and if not fill in, the input is directly output without format.
 
-- `types` has:
-    - `link`: external redirect link.
-    - `Image`: display picture.
-    - `Asset`: locates resources.
-    - `node`: locates the node.
-    - `I18n`: multilingual translation.
+    - `link`: external jump link
+    - `image`: display image
+    - `asset`: locate to a asset
+    - `node`: locate to a node
+    - `i18n`: multilingual translation
 
 ### Example
 
+Open **Developer -> Developer Tools** in the editor's main menu, then type:
+
 ```sh
 console.log('Open {link[the help doc url](https://docs.cocos.com/creator/manual/en/editor/console/)}');
 console.log('Locate {link[ the file in library](D:/cocos-creator/a/library/36/36b55a90-1547-4695-8105-abd89f8a0e5f.js)}');
@@ -79,6 +79,6 @@ console.log('Show image {image(https://forum.cocos.org/images/logo.png)}');
 console.log('Translate: {i18n(console.description)}');
 ```
 
-Which looks like this in the Console window:
+The output log can be seen in the **Console** panel as follows:
 
 ![content](index/content.png)

en/concepts/scene/node-component.md

@@ -0,0 +1,40 @@
+# Editor Layout
+
+Editor layout is the position, size and stacking of each panel in Cocos Creator.
+
+Select the **Cocos Creator -> Layout** menu in the main menu, currently only **Default Layout** is supported. Based on the default layout, it is allowed to continue to adjust the position and size of each panel. Changes to the layout are automatically saved in the global directory at:
+
+- **Windows**: `%USERPROFILE%\.CocosCreator\editor\window.json`
+- **macOS**: `$HOME/.CocosCreator/editor/window.json`
+
+## Resizing panel
+
+Hover the mouse over the boundary line between the two panels and see the mouse pointer become ![mouse-cursor](index/mouse-cursor.jpg), then press the mouse, the boundary line will turn yellow, then drag the mouse to change the size of the two adjacent panels.
+
+![resize](index/resize.png)
+
+> **Note**: some panels are set to the minimum size, when dragging to the minimum size limit, shrinking the panel cannot continue.
+
+## Moving panel
+
+A panel can be moved to any position in the editor window by clicking the tab bar of the panel and dragging it. The red box in the following figure indicates the area of the tab bar that can be dragged and dropped, and the arrow indicates the dragging direction:
+
+![drag tab](index/drag_tab.png)
+
+The blue translucent box during moving the panel indicates the position where the moved panel will be placed after releasing the mouse.
+
+## Stacking Panel
+
+In addition to moving the panel position, it is allowed to move the mouse to the tab bar area of another panel when dragging and dropping the panel tab bar:
+
+![stack before](index/stack_before.png)
+
+Releasing the mouse when the red vertical line appears in the tab bar of the target panel allows stacking two panels together, while only one panel is displayed: 
+
+![stack after](index/stack_after.png)
+
+Stacking panel is useful when the screen resolution is insufficient, or when laying out less-used panels. Panels in the stack can be dragged out at any time to restore displaying at the top level.
+
+Panels also support pop-up standalone panels or close panel operations by clicking the button at the top right of the panel. However, note that the **Scene** panel does not support pop-up/close.
+
+![popup](index/popup.png)

en/editor/components/dragonbones.md

@@ -5,7 +5,7 @@ __Cocos Creator__ will search for and automatically load extensions in both __Gl
 If you want to apply the extension to all projects, you can put the extension package under the __Global__ path:
 
 - **Windows**: `%USERPROFILE%\.CocosCreator\extensions`
-- **Mac**: `$HOME/.CocosCreator/extensions`
+- **macOS**: `$HOME/.CocosCreator/extensions`
 
 If you only want to apply the extension to the specified project, you can put the extension package under the __Project__ path: