完善部分文档

en/SUMMARY.md

@@ -87,7 +87,7 @@
  - [Publish to Web](publish/publish-web.md)
  - [Native Development Environment](publish/setup-native-development.md)
  - [Publish to Native Platforms](publish/publish-native.md)
- - [Debug JavaScript on Native Platform](publish/debug-jsb.md)
+ - [Debuging JavaScript on Native Platforms](publish/debug-jsb.md)
  - [Publish to Alipay Mini Games](publish/publish-alipay-mini-games.md)
  - [Publish to WeChat Mini Games](publish/publish-wechatgame.md)
  - [WeChat Open Data Context](publish/publish-wechatgame-sub-domain.md)

en/components/button.md

@@ -14,8 +14,8 @@ Click the **Add Component** button at the bottom of the **Properties** panel and
 | -------------- | ----------- |
 | Interactable | Boolean type, if set to false then the Button component enters the forbidden state.
 | Enable Auto Gray Effect | Boolean type, if set to true, the Button's target sprite will turn gray when interactable is false.
-| Transition | Enumeration type, including NONE, COLOR and SPRITE. Each type corresponds to a different Transition setting. Please see the **Button Transition** section below for details. |
-| Click Event | Default list type is null. Each event added by the user is composed of the node reference, component name and a response function. Please see the **Button Event** section below for details.
+| Transition | Enumeration type, including NONE, COLOR, SPRITE and SCALE. Each type corresponds to a different Transition setting. Please see the **Button Transition** section below for details. |
+| Click Event | Default list type is null. Each event added by the user is composed of the node reference, component name and a response function. Please see the **Button Click Event** section below for details.
 
 **Note**: When `Transition` is `SPRITE` and the `disabledSprite` property has a `spriteFrame` associated with it, the `Enable Auto Gray Effect` property is ignored at this time.
 
@@ -55,7 +55,7 @@ Button Transition is used to indicate the status of the Button when clicked by t
 | Property | Function Explanation
 | -------------- | ----------- |
 |Duration| Time interval needed for Button status switching.
-|ZoomScale| When user press the button, the button will zoom to a scale.The final scale of the button  equals (button original scale * zoomScale), zoomScale could be negative value.
+|ZoomScale| When user press the button, the button will zoom to a scale. The final scale of the button equals button original `scale * zoomScale`, zoomScale could be negative value.
 
 ## Button Click Event
 
@@ -76,7 +76,7 @@ The Button can additionally add a Click event to respond to the player's click a
 
 There are two ways to add a callback through the script.
 
-1. The event callback added by this method is the same as the event callback added by the editor, all added by Button component. First you need to construct a `cc.Component.EventHandler` object, and then set the corresponding `target`, `component`, `handler` and `customEventData` parameters.
+1. The event callback added by this method is the same as the event callback added by the editor, all added by code. First you need to construct a `cc.Component.EventHandler` object, and then set the corresponding `target`, `component`, `handler` and `customEventData` parameters.
 
  ```js
  // here is your component file, file name = MyComponent.js 

en/components/canvas.md

@@ -6,11 +6,11 @@ The **Canvas** component can get the actual resolution of the device screen and
 
 ## Property
 
-Property  | Explanation
---  | --
-Design Resolution  | Design resolution (the resolution blueprint used while the content producer builds the scene)
-Fit Height  | Auto-fit height (the height of the design resolution will auto-fit to the screen height)
-Fit Width  | Auto-fit width (the width of the design resolution will auto-fit to the screen width)
+| Property | Explanation |
+| -- | -- |
+| Design Resolution | Design resolution (the resolution blueprint used while the content producer builds the scene) |
+| Fit Height | Auto-fit height (the height of the design resolution will auto-fit to the screen height) |
+| Fit Width | Auto-fit width (the width of the design resolution will auto-fit to the screen width) |
 
 ## Adapt the screen size
 

en/components/graphics.md

@@ -4,7 +4,7 @@ The Graphics component provides a series of drawing interfaces that reference th
 
 ![](../render/graphics/graphics/graphics.png)
 
-Create a new empty node, and then click the **Add Component** button below the **Properties** panel and select **Graphics** from **Renderer Component**. Then you can add the Graphics component to the node.
+Select a node in the **Node Tree** panel, and then click the **Add Component** button below the **Properties** panel and select **Graphics** from **Renderer Component**. Then you can add the Graphics component to the node.
 
 ## Graphic Properties
 

en/components/label.md

@@ -24,7 +24,7 @@ Click the **Add Component** button at the bottom of the **Properties** panel and
 | Enable Italic | If enabled, italic effect will be added to the text. (Takes effect when using System Font or TTF font) |
 | Enable Underline | If enabled, underline effect will be added to the text. (Takes effect when using System Font or TTF font) |
 | Underline Height | Height of underline. |
-| Cache Mode | Text cache mode includes **NONE**, **BITMAP** or **CHAR**. Takes effect only for System Font or TTF font, BMFont does not require this optimization. See [Cache Mode](#cache-mode-new-in-v209) below for details. |
+| Cache Mode | Text cache mode includes **NONE**, **BITMAP** and **CHAR**. Takes effect only for System Font or TTF font, BMFont does not require this optimization. See [Cache Mode](#cache-mode-new-in-v209) below for details. |
 | Use System Font | If enabled, **System Font** will be used. |
 | Materials | Material of Label, see the document [Material](../render/material.md) for details. |
 
@@ -34,17 +34,17 @@ For API interface of Label, please refer to [Label API](../../../api/en/classes/
 
 | Properties | Function Explanation |
 | ------------- | ------------- |
-| CLAMP | The text size won't zoom in or out as the Bounding Box size changes. When Wrap Text is disabled, parts exceeding the Bounding Box won't be shown according to the normal character layout. When Wrap Text is enabled, it will try to wrap the text exceeding the boundaries to the next line. If the vertical space is not enough, any not completely visible text will also be hidden. |
+| CLAMP | The text size won't zoom in or out as the Bounding Box size changes.<br>When Wrap Text is disabled, parts exceeding the Bounding Box won't be shown according to the normal character layout.<br>When Wrap Text is enabled, it will try to wrap the text exceeding the boundaries to the next line. If the vertical space is not enough, any not completely visible text will also be hidden. |
 | SHRINK | The text size will zoom in or out (it won't zoom out automatically, the maximum size that will show is specified by Font Size) as the Bounding Box size changes.<br>When Wrap Text is enabled, if the width is not enough, it will try to wrap the text to the next line before automatically adapting the Bounding Box's size to make the text show completely.<br>If Wrap Text is disabled, then it will compose according to the current text and zoom automatically if it exceeds the boundaries.<br>**Note**: This mode may takes up more CPU resources when the label is refreshed. |
-| RESIZE_HEIGHT | The text Bounding Box will adapt to the layout of the text. The user cannot manually change the height of text in this status; it is automatically calculated by the internal algorithm. |
+| RESIZE_HEIGHT | The text Bounding Box will adapt to the layout of the text. The developer cannot manually change the height of text in this status, it is automatically calculated by the internal algorithm. |
 
 ## Cache Mode
 
 | Properties | Function Explanation |
 | ---------- | ---------------------- |
 | NONE | Defaults, the entire text in label will generate a bitmap. |
 | BITMAP | After selection, the entire text in the Label will still generate a bitmap, but will try to participate in [Dynamic Atlas](../advanced-topics/dynamic-atlas.md). As long as the requirements of Dynamic Atlas are met, the Draw Call will be merged with the other Sprite or Label in the Dynamic Atlas. Because Dynamic Atlas consume more memory, **this mode can only be used for Label with infrequently updated text**. **Note**: Similar to NONE, BITMAP will force a bitmap to be generated for each Label component, regardless of whether the text content is equivalent. If there are a lot of Labels with the same text in the scene, it is recommended to use CHAR to reuse the memory space. |
-| CHAR | The principle of CHAR is similar to BMFont, Label will cache text to the global shared bitmap in "word" units, each character of the same font style and font size will share a cache globally. Can support frequent modification of text, the most friendly to performance and memory. However, there are currently restrictions on this model, which we will optimize in subsequent releases:<br>1. **This mode can only be used for font style and fixed font size (by recording the fontSize, fontFamily, color, and outline of the font as key information for repetitive use of characters, other users who use special custom text formats need to be aware). And will not frequently appear with a huge amount of unused characters of Label.** This is to save the cache, because the global shared bitmap size is 2048*2048, it will only be cleared when the scene is switched. Once the bitmap is full, the newly appearing characters will not be rendered. <br>2. Cannot participate in dynamic mapping (multiple labels with CHAR mode enabled can still merge Draw Call in the case of without interrupting the rendering sequence). |
+| CHAR | The principle of CHAR is similar to BMFont, Label will cache text to the global shared bitmap in "word" units, each character of the same font style and font size will share a cache globally. Can support frequent modification of text, the most friendly to performance and memory. However, there are currently restrictions on this model, which we will optimize in subsequent releases:<br>1. **This mode can only be used for font style and fixed font size (by recording the fontSize, fontFamily, color, and outline of the font as key information for repetitive use of characters, other users who use special custom text formats need to be aware). And will not frequently appear with a huge amount of unused characters of Label.** This is to save the cache, because the global shared bitmap size is **2048 * 2048**, it will only be cleared when the scene is switched. Once the bitmap is full, the newly appearing characters will not be rendered. <br>2. Cannot participate in dynamic mapping (multiple labels with CHAR mode enabled can still merge Draw Call in the case of without interrupting the rendering sequence). |
 
 **Note**:
 
@@ -54,7 +54,7 @@ For API interface of Label, please refer to [Label API](../../../api/en/classes/
 
 ## Detailed Explanation
 
-By dragging the TTF font file and BMFont font file into the `Font` attribute in the **Properties** panel the Label component can alter the rendering font type. If you want to stop using a font file, you can use the system font again by checking `Use System Font`.
+By dragging the TTF font file and BMFont font file into the `Font` property in the **Properties** panel the Label component can alter the rendering font type. If you want to stop using a font file, you can use the system font again by checking `Use System Font`.
 
 If you want to use LabelAtlas, you should create a LabelAtlas font asset at first. Please refer to [LabelAtlas asset](../asset-workflow/label-atlas.md) for more information.
 

en/components/layout.md

@@ -4,15 +4,15 @@ Layout is a container component. The container can unlock the auto-layout functi
 
 - Horizontal Layout
 
-![horizontal-layout](./layout/horizontal-layout.png)
+ ![horizontal-layout](./layout/horizontal-layout.png)
 
 - Vertical Layout
 
-![vertical-layout](./layout/vertical-layout.png)
+ ![vertical-layout](./layout/vertical-layout.png)
 
 - Grid Layout
 
-![grid-layout](./layout/grid-layout.png)
+ ![grid-layout](./layout/grid-layout.png)
 
 Click the **Add Component** button at the bottom of **Properties** panel and then select **Layout** from the **UI Component** to add the Layout component to the node.
 

en/components/mask.md

@@ -11,10 +11,10 @@ Click the **Add Component** button at the bottom of the **Properties** panel and
 | Properties | Description
 | -------------- | ----------- |
 | Type | Mask type. Including `RECT`, `ELLIPSE`, `IMAGE_STENCIL` three types, refer to [Type API](../../../api/en/enums/Mask.Type.html) for details.
-| Inverted | The Reverse mask
+| Inverted | The Reverse mask.
 | Alpha Threshold| Alpha threshold, which is a floating point type and takes effect only if type is set to `IMAGE_STENCIL`.<br>The content is drawn only if the alpha value of the template pixel is greater than that value.<br>The value range of this property is 0 ~ 1, 1 means completely disabled.
-| Sprite Frame | The image required for the mask, which takes effect only when the Mask type is set to `IMAGE_STENCIL`
-| Segements | The segements for ellipse mask, which takes effect only when the Mask type is set to `ELLIPSE`
+| Sprite Frame | The image required for the mask, which takes effect only when the Mask type is set to `IMAGE_STENCIL`.
+| Segements | The segements for ellipse mask, which takes effect only when the Mask type is set to `ELLIPSE`.
 
 **Note**: After adding the Mask component to a node, all the child nodes of this node will be affected by Mask during rendering.
 

en/components/pageview.md

@@ -29,7 +29,7 @@ Please refer to the script interface of the [PageView API](../../../api/en/class
 
 ### CCPageViewIndicator Set Up
 
-CCPageViewIndicator is optional, the component is used to display the number of pages and the current page. Please refer to [PageviewIndicator Component](./pageviewindicator.md) for details.
+CCPageViewIndicator is optional, the component is used to display the number of pages and mark the current page. Please refer to [PageviewIndicator Component](./pageviewindicator.md) for details.
 
 The association can be done by dragging a node with a PageViewIndicator component into the **Indicator** property of the PageView component in the **Node Tree**.
 
@@ -41,16 +41,16 @@ The association can be done by dragging a node with a PageViewIndicator componen
 | -------------- | ----------- |
 | Target | Node with script component |
 | Component | Script component name |
-| Handler | Specifies a callback function that will be called when the Slider event occurs |
+| Handler | Specifies a callback function that will be called when the PageView event occurs |
 | CustomEventData | The user specifies an arbitrary string as the last argument of the event callback |
 
-PageView event callback has two parameters, the first parameter is the PageView itself, the second parameter is CustomEventData
+PageView event callback has two parameters, the first parameter is the PageView itself, the second parameter is the event type of the PageView.
 
 ## Detailed explanation
 
-The PageView component must have the specified content node to work, Each child node in content is a separate page, The size of each page is the size of the PageView node, The operation effect is divided into two kinds: 
+The PageView component must have the specified content node to work, Each child node in content is a separate page. The size of each page is the size of the PageView node, The operation effect is divided into two kinds: 
 
-- Slow sliding, by dragging the page in the view to reach the specified ScrollThreshold value (the value is the percentage of page size) after the release will automatically slide to the next page.
+- Slow sliding, by dragging the page in the view to reach the specified ScrollThreshold value (the value is the percentage of page size), after the release will automatically slide to the next page.
 - Fast sliding, fast to a direction to drag, automatically slide the next page, each slide up to only one page.
 
 Usually a PageView node tree as shown below:

en/components/pageviewindicator.md

@@ -1,6 +1,6 @@
 # PageviewIndicator component reference
 
-The PageViewIndicator Component, Used to display the current page number of the PageView and the page where the tag is currently located.
+The PageViewIndicator component is used to display the current page number of the PageView and the page where the tag is currently located.
 
 ![pageviewindicator.png](./pageviewindicator/pageviewindicator.png)
 

en/components/progress.md

@@ -9,19 +9,19 @@ Click the **Add component** button at the bottom of the **Properties** panel and
 
 For the script interface of the ProgressBar, please refer to [ProgressBar API](../../../api/en/classes/ProgressBar.html).
 
-## ProgressBar property
+## ProgressBar Property
 
 | Property | Function Explanation
 | -------------- | ----------- |
-| Bar Sprite | The Sprite component needed for rendering ProgressBar. It can be linked by dragging a node with the **Sprite** component to this attribute.
-| Mode | Currently supports the **HORIZONTAL**, **VERTICAL** and **FILLED** modes. The initial direction can be changed by cooperating with the **Reverse** attribute.
+| Bar Sprite | The Sprite component needed for rendering ProgressBar. It can be linked by dragging a node with the **Sprite** component to this property.
+| Mode | Currently supports the **HORIZONTAL**, **VERTICAL** and **FILLED** modes. The initial direction can be changed by cooperating with the **Reverse** property.
 | Total Length | The total length/total width of the Bar Sprite when the ProgressBar is at 100%. In **FILLED** mode, **Total Length** represents the percentage of the total display range for Bar Sprite, with values ranging from 0 to 1.
 | Progress | Floating point. The value range is 0~1, and values outside the range are not allowed.
 | Reverse | Boolean value. The default fill direction is from left to right/bottom to top, and when enable, it becomes right to left/top to bottom.
 
 ## Detailed explanation
 
-After adding the ProgressBar component, drag a node with the **Sprite** component from the **Node Tree** to the Bar Sprite attribute. Then you can control the display of the ProgressBar by dragging the progress sliding block.
+After adding the ProgressBar component, drag a node with the **Sprite** component from the **Node Tree** to the Bar Sprite property. Then you can control the display of the ProgressBar by dragging the progress sliding block.
 
 Bar Sprite could be its own node, child node or any node that comes with the **Sprite** component. Also, Bar Sprite can freely choose the Simple, Sliced or Filled rendering modes.