CocosCreator3.8研究笔记（十）CocosCreator 图像资源的理解

一、图像资源导入

Cocos Creator 可使用图像文件格式，支持 JPG、PNG、BMP、TGA、HDR、WEBBP、PSD、TIFF 等。

将图像资源直接拖拽到 资源管理器 即可将其导入

二、图像资源的类型

在 属性检查器 面板中便可根据需要设置图像资源的使用类型：raw 、 texture 、normal map 、spriteFrame。

1、raw

原始图片类型，无作用。

2、texture

纹理贴图资源是一种用于程序采样的资源，模型上的贴图、精灵上的 UI。当程序渲染 UI 或者模型时，会使用纹理坐标获取纹理颜色，然后填充在模型网格上，再加上光照等等一系列处理便渲染出了整个场景。

纹理贴图资源可由图像资源（ImageAsset）转换而来，图像资源包括一些通用的图像转换格式如 PNG、JPEG 等等。

texture 类型即是 Texture2D 纹理资源。 Texture2D 是纹理贴图资源的一种，通常用于 3D 模型的渲染，如模型材质中的反射贴图、环境光遮罩贴图等等。

属性	说明
Anisotropy	各向异性值，应用各向异性过滤算法的最大阈值
Filter Mode	过滤模式，可选项为 Nearest（None）、Bilinear、Bilinear with mipmaps、Trilinear with mipmaps 以及 Advanced
Wrap Mode	设置寻址模式，可选项为 Repeat、Clamp、Mirror 以及 Advanced 在选择 Advanced 时，设置 S（U）/ T（V）方向上的纹理寻址模式，也就是像素对纹理在 S（U）或者 T（V）方向上的映射模式

脚本中动态使用Texture2D，需要先获取图像资源（ImageAsset），然后根据获取到的 ImageAsset 实例化出 Texture2D 资源。

resources.load("testAssets/image/texture", Texture2D, (err: any, texture: Texture2D) => {
   
  const spriteFrame = new SpriteFrame();
  spriteFrame.texture = texture;
  this.node.getComponent(Sprite).spriteFrame = spriteFrame;
});

3、normal map：法线贴图类型，常用于渲染 3D 模型，可在模型材质中勾选 USE NORMAL MAP 属性使用。

需要注意的是，如果材质中没有定义 USE NORMAL MAP 就没有该属性。