完善图像资源模块 (cocos#1984)

* 完善图像资源模块

* Commit changes

* 调整精灵帧及补充创建 RenderTexture

* Apply suggestions from code review

Author: xunyi0

en/asset/atlas/spriteframes.png

@@ -4,15 +4,15 @@ __Sprite Frame__ is a container for __UI rendering__ and basic graphics, which m
 
 ## Importing Sprite Frame Assets
 
-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 **Inspector** 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 __Inspector__ 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)
+![imported texture](sprite-frame/spriteframe.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.
+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:
 
@@ -22,21 +22,21 @@ The `spriteFrame` has the following properties:
 | 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. For details, please refer to the [Auto Trim for SpriteFrame](../ui-system/components/engine/trim.md) documentation.<br>2. Custom -- Custom trim<br>3. None -- No trim, use original texture. |
-| 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.  |
+| 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
 
-In the editor, drag the __SpriteFrame__ asset to the __Sprite Frame__ property of the **Sprite** component to switch the image displayed by the __Sprite__. At runtime, taking the content picture in the above picture as an example, The entire asset is divided into image asset (`content`), its sub-asset (`spriteFrame`) and sub-asset (`texture`). The assets in the game package can be obtained by the following methods:
+In the editor, drag the __SpriteFrame__ asset to the __Sprite Frame__ property of the __Sprite__ component to switch the image displayed by the __Sprite__. At runtime, taking the content picture in the above picture as an example, The entire asset is divided into image asset (`content`), its sub-asset (`spriteFrame`) and sub-asset (`texture`). The assets in the game package can be obtained by the following methods:
 
 __Method 1__: (load __ImageAsset__):
 
 ```typescript
 const self = this;
-const url = 'test_assets/test_altas/content';
+const url = 'test_assets/test_atlas/content';
 resources.load(url, ImageAsset, (err: any, imageAsset) => {
   const sprite = this.getComponent(Sprite);
   const spriteFrame = new SpriteFrame();
@@ -84,4 +84,4 @@ const sprite = this.getComponent(Sprite);
 sprite.spriteFrame = spriteFrame;
 ```
 
-For API information, please refer to the [SpriteFrame](__APIDOC__/en/classes/asset.spriteframe.html) documentation.
+For API information, please refer to the [SpriteFrame](__APIDOC__/en/classes/asset.spriteframe-1.html) documentation.

en/asset/label-atlas/create-label-atlas.png

@@ -4,9 +4,7 @@ A texture is a displayable image, or a piece of intermediate data used for compu
 
 - Used for 2D UI rendering, see the [SpriteFrame](../../asset/sprite-frame.md) documentation for details.
 
-- Used for 3D model rendering. A texture asset needs to be specified in the material, to render and map it to the mesh surface.Textures also support switching to **cube map** and **normal map** when [importing image assets](../../asset/image.md).
-
-  ![add texture](add-texture.png)
+- Used for 3D model rendering. A texture asset needs to be specified in the material, to render and map it to the mesh surface.Textures also support switching to **cube map** or **normal map** when [importing image assets](../../asset/image.md).
 
 - Used for the particle system to make particles more expressive. As with 3D models, the use of textures in particle system also depends on materials.
 

en/asset/label-atlas/raw_texture_file.png

@@ -46,6 +46,7 @@
         - [纹理贴图资源](asset/texture.md)
         - [精灵帧资源](asset/sprite-frame.md)
             - [图像资源的自动剪裁](ui-system/components/engine/trim.md)
+        - [立方体贴图资源](asset/texture-cube.md)
         - [图集资源](asset/atlas.md)
         - [自动图集资源](asset/auto-atlas.md)
         - [艺术数字资源](asset/label-atlas.md)

en/asset/label-atlas/save-label-atlas.png

@@ -28,19 +28,21 @@
 
 ![atlas files](atlas/atlas_files.png)
 
-使用 TexturePacker 打包图集时需要注意，Creator 3.0 不支持 TexturePacker v4.x 以下的图集格式，否则导入时会出现报错。
+使用 TexturePacker 打包图集时的设置可参考 [TexturePacker 设置](../ui-system/components/engine/trim.md#texturepacker-%E8%AE%BE%E7%BD%AE)。
+
+> **注意**：Cocos Creator 3.x 不支持 TexturePacker v4.x 以下的图集格式，否则导入时会出现报错。
 
 ## 导入图集资源
 
 将上面所示的 **plist** 和 **png** 文件同时拖拽到 **资源管理器** 中，就可以生成可以在编辑器和脚本中使用的图集资源了。
 
 ### Atlas 和 SpriteFrame
 
-在[图像资源文档](../ui-system/components/editor/sprite.md)中，我们介绍了 Texture 和 SpriteFrame 的关系。导入图集资源后，我们可以看到类型为 `Atlas` 的图集资源可以点击左边的三角图标展开，展开后可以看到图集资源里包含了很多类型为 `SpriteFrame` 的子资源，每个子资源都是可以单独使用和引用的图片。
+导入图集资源后，点击类型为 **Atlas** 的图集资源左边的三角图标，展开后可以看到图集资源里包含了很多类型为 `SpriteFrame` 的子资源，每个子资源都可以单独使用/引用。
 
 ![sprite frame](atlas/spriteframes.png)
 
-接下来对于 Sprite Frame 的使用方法就和图像资源中介绍的一样了，请查阅相关文档。
+关于 SpriteFrame 的使用方式，详情请参考 [SpriteFrame](sprite-frame.md) 文档。
 
 <!-- ## 碎图转图集
 

en/asset/sprite-frame.md

@@ -1,28 +1,45 @@
 # 图像资源
 
-图像资源又经常被称作贴图、图片，是游戏中绝大部分图像渲染的数据源。图像资源一般由图像处理软件（比如 Photoshop，Windows 上自带的画图）制作而成并输出成 Cocos Creator 可以使用的文件格式，目前包括 JPG 和 PNG 两种。
+图像资源又经常被称作贴图、图片，是游戏中绝大部分图像渲染的数据源。图像资源一般由图像处理软件（比如 Photoshop，Windows 上自带的画图）制作而成并输出成 Cocos Creator 可以使用的文件格式，目前支持 **JPG**、**PNG**、**BMP** 格式。
 
 ## 导入图像资源
 
-使用默认的资源导入方式就可以将图像资源导入到项目中，之后我们就可以在 **资源管理器** 中看到如下图所示的图像资源。
+将图像资源直接拖拽到 **资源管理器** 即可将其导入到项目中，之后我们就可以在 **资源管理器** 中看到如下图所示的图像资源：
 
-![](texture/imported.png)
+![imported](texture/imported.png)
+
+**属性检查器** 中图像资源的相关属性说明如下：
+
+| 属性 | 说明 |
+| :--- | :--- |
+| Type | 用于设置图像资源的类型，包括 **raw**、**texture**（默认）、**normal map**、**sprite-frame**、**texture cube**，具体说明可参考下文 **图像资源类型** 部分的内容。 |
+| Flip Vertical | 是否沿 X 轴垂直翻转导入的贴图。 |
+| useComponentTexture | 是否使用压缩纹理，详情请参考 [压缩纹理](compress-texture.md)。 |
 
 ## 图像资源的类型
 
-选中导入的图像资源，在右侧的属性检查器面板上，可以选择图像资源不同的使用方式，目前共有4中使用方式供开发者使用，如下所示：
+在 **资源管理器** 面板选中导入的图像资源，在 **属性检查器** 面板中便可根据需要设置图像资源的使用类型，目前支持以下几种：
+
+![type-change](texture/type-change.png)
+
+- **raw**：原始图片类型，无作用，用户不需要关心。
+
+- **texture**：图像资源类型，也是导入的图像资源的默认类型，详情可参考 [纹理贴图资源](texture.md)。
+
+- **normal map**：法线贴图类型，常用于渲染 3D 模型，可在模型材质中勾选 `USE NORMAL MAP` 属性使用。需要注意的是，如果材质中没有定义 `USE NORMAL MAP` 就没有该属性。
+
+  ![normal-map](texture/normal-map.png)
+
+- **sprite-frame**：精灵帧资源，用于 UI 制作上，详情可参考 [SpriteFrame](sprite-frame.md)。
+
+- **texture cube**：立方贴图类型，使用在全景图上，常用于制作天空盒。详情可参考 [立方体贴图](texture-cube.md)。
 
-![](texture/type-change.png)
+## 子资源
 
-各类型图像资源的详情在下面的章节中有详细介绍：
-- raw 类型为原始图片类型，无作用，用户不需使用
-- texture 类型为图像资源类型，也为导入的默认类型，详情可参考 [Texture](texture.md)
-- normal map 类型为法线贴图类型
-- sprite-frame 类型为精灵帧资源，用于 UI 制作上，详情可参考 [SpriteFrame](sprite-frame.md)
-- texture cube 类型为立方贴图类型，使用在全景图上，用于制作天空盒上，详情可参考 [天空盒](../concepts/scene/skybox.md#修改天空盒的环境贴图)
+每个图像资源导入后或者设置图像资源类型后，编辑器便会自动在其下方创建相应类型的子资源。在 **资源管理器** 中点击图像资源左侧的三角图标，即可展开查看图像资源的子资源。
 
-在 **资源管理器** 中，图像资源的左边会显示一个和文件夹类似的三角图标，点击就可以展开看到它的子资源（sub asset），每个图像资源导入后编辑器会自动在它下面创建同名的 **选中类型** 的资源。选中资源本身可进行更改资源类型、设置图像翻转及设置图像在各平台的质量的操作。子资源的详细属性说明请参考 [子资源属性面板](texture.md#子资源Texture2D的属性面板)。
+下图以 texture 类型的图像资源为例：
 
-![](texture/image-info.png)
+![image info](texture/sub-texture.png)
 
-![](texture/texture-info.png)
+子资源的详细属性说明请参考对应资源类型的文档说明。**normal map** 的子资源属性与 **texture** 一致，可参考 [纹理贴图资源](texture.md)

en/asset/sprite-frame/imported_texture.png

@@ -4,29 +4,34 @@
 
 ## 创建艺术数字资源
 
-在 **资源管理器** 的文件夹中点击右键或者点击左上方的加号按钮，然后选择 **创建 -> 艺术数字配置**，将会新建一个 **LabelAtlas.labelatlas** 的资源。
+在 **资源管理器** 中点击右键，然后选择 **创建 -> 艺术数字配置**，或者点击 **资源管理器** 左上角的加号按钮：
 
 ![create label atlas](label-atlas/create-label-atlas.png)
 
-**艺术数字资源** 在使用之前需要进行一些配置，比如关联事先绘制好的包含所需字体样式的图片，如下图所示：
+即可新建一个艺术数字资源：
 
-![](label-atlas/raw_texture_file.png)
+![label atlas](label-atlas/label-atlas.png)
 
-## 配置艺术数字资源
+## 属性
 
-在 **资源管理器** 中选中一个 **艺术数字资源** 后，**属性检查器** 面板将会显示 **艺术数字资源** 的所有可配置项。
+| 属性         | 功能说明
+| :---------- | :----------
+| SpriteFrame | 设置事先绘制好的包含所需字体样式的图片
+| Item Width  | 指定每一个字符的宽度
+| Item Height | 指定每一个字符的高度
+| Start Char  | 指定艺术数字字体里面的第一个字符，如果字符是空格，也需要在这个属性里面输入空格字符
+| Font Size   | 显示每个字符的大小，由 **Item Width** 和 **Item Height** 自动计算得出，不可编辑
 
-| 属性             | 功能说明
-| --------------   | -----------
-| SpriteFrame      | 设置事先绘制好的包含所需字体样式的图片
-| Item Width       | 指定每一个字符的宽度
-| Item Height      | 指定每一个字符的高度
-| Start Char       | 指定艺术数字字体里面的第一个字符，如果字符是 Space，也需要在这个属性里面输入空格字符
+**艺术数字资源** 在使用之前需要先配置包含所需字体样式的 SpriteFrame 贴图，如下图：
 
-配置完成后点击右上方的打勾按钮来保存设置。
+![raw_texture_file](label-atlas/raw_texture_file.png)
 
-![save label atlas](label-atlas/save-label-atlas.png)
+然后将其拖拽到 **艺术数字资源** 的 **SpriteFrame** 属性框中：
+
+![sprite-frame](label-atlas/save-label-atlas.png)
+
+设置完成后请点击右上角的绿色打钩按钮保存。
 
 ## 使用艺术数字资源
 
-使用艺术数字资源非常简单，你只需要新建一个 Label 组件，然后将新建好的艺术数字资源拖拽到节点的 Label 组件的 Font 属性上即可。可参考 [Label 组件](../ui-system/components/editor/label.md)。
+使用艺术数字资源只需要在 **层级管理器** 中新建一个 Label 节点，然后在 **属性检查器** 中将新建好的艺术数字资源拖拽到节点 Label 组件的 Font 属性上即可。详情可参考 [Label 组件](../ui-system/components/editor/label.md)。

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

@@ -2,10 +2,26 @@
 
 渲染纹理是一张在 GPU 上的纹理。通常我们会把它设置到相机的 **目标纹理** 上，使相机照射的内容通过离屏的 `frambuffer` 绘制到该纹理上。一般可用于制作汽车后视镜，动态阴影等功能。
 
+## 创建 RenderTexture
+
+在 **资源管理器** 中点击左上方的 **+** 按钮，选择 **渲染纹理**，即可创建渲染纹理资源：
+
+![add-render-texture](render-texture/add-render-texture.png)
+
+然后在 **属性检查器** 中便可以设置渲染纹理资源的相关属性：
+
+![render-texture-property](render-texture/render-texture-property.png)
+
+| 属性 | 说明 |
+| :--- | :--- |
+| **Width** | 设置渲染纹理的宽 |
+| **Height** | 设置渲染纹理的高 |
+
 ## 使用 RenderTexture
 
+方法一：将 3D 相机可见范围内的内容绘制到 UI 的精灵帧上
+
 ```typescript
-// 方法一：把 3D 相机照射的内容绘制到 UI 的精灵帧上
 export class CaptureToWeb extends Component {
     @property(Sprite)
     sprite: Sprite = null;
@@ -40,8 +56,11 @@ export class CaptureToWeb extends Component {
         this.sprite.spriteFrame = sp;
     }
 }
+```
+
+方法二：将 3D 相机可见范围内的内容绘制到 3D 模型上
 
-// 方法二：把 3D 相机照射的内容绘制到 3D 模型上
+```ts
 export class RenderCameraToModel extends Component {
     @property(MeshRenderer)
     model: MeshRenderer = null;