update:更新压缩纹理文档

Design/CompressedTexture.md

@@ -7,70 +7,41 @@
     - 降低内存、减少解码消耗
     - 自动懒加载，降低包体
 
-`注意：` 使用压缩纹理的图片或者图集，宽高需要为2的幂次，否则不会转化为移动端的压缩纹理。对于需要动态读取图片内容做处理的，目前还不支持将其转为压缩纹理。
+`注意：` 使用压缩纹理的图片或者图集，宽高需要为4的倍数，否则不会转化为移动端的压缩纹理。对于需要动态读取图片内容做处理的，目前还不支持将其转为压缩纹理。
 
 ## 原理简介
-简单来说，我们使用占位符的方式将纹理图片设置为DXT1格式，然后在运行时再根据占位符去加对应纹理的压缩纹理格式。从而达到了减少内存和自动懒加载纹理的效果。
+简单来说，我们使用占位符的方式将纹理图片设置为ETC1格式，然后在运行时再根据占位符去加对应纹理的压缩纹理格式。从而达到了减少内存和自动懒加载纹理的效果。
 
 ## 使用
-### 1、安装ImageMagick
-下载并安装[ImageMagick](https://imagemagick.org/index.php) window用户安装完后需重启电脑。
+### 1、安装NodeJS
+下载并安装[NodeJs](https://nodejs.org/en/) 
 ### 2、Mac上授权
 因为Mac上的隐私安全问题，使用mac的用户需要先授权，使用window的用户跳过这步。点击"微信小游戏"->"MacOS脚本授权",进行授权，直到不报错为止。若授权后还是报错，则需重启unity后再点授权。
 
-### 3、替换纹理
-1、首先点击"微信小游戏"->"转换小游戏" 打开转换小游戏弹窗，填入相关的导出配置信息，  
-2、点击"微信小游戏"->"包体瘦身--压缩纹理"，推荐按默认配置，直接点击替换纹理就好。用到的纹理图片就会自动替换成占位符，展示为黑色的图片，如果项目用到的图片比较多这一步可能需要花费较长时间，比如10多分钟。执行完后请留意控制台的提示信息。
-3、替换完毕后，如果你是用了AB或AB包，则需要再打一遍AA/AB包。
+### 3、打bundle文件
+如果使用了bundle文件，要先打好AB或AB包。注意不要开启crc对bundle进行校验。
 
-这里替换纹理后在导出目录会生成一个Assets目录，需要将该目录放到CDN的对应目录， 其对应的是你填写的"游戏资源CDN"地址 ，比如你填写的地址为 https://wx.qq.com/data/
-，那么小游戏需要展示图片的时候就会自动去该目录下的Assets目录去下载对应图片。
-<image src="../image/maineditor.png" width="600"/>    
+### 4、导出游戏
+点击"微信小游戏"->"转换小游戏" 打开转换小游戏弹窗，点击左下角的"导出WEBGL并转化为小游戏"按钮等待导出游戏即可
 
-导出后的纹理所在目录：  
+### 5、处理bundle文件
+点击"微信小游戏"->"包体瘦身--压缩纹理"，点击处理bundle，如果自定义了bundle生成路径，要将bundle复制到导出目录的webgl目录下。如果项目用到的图片比较多这一步可能需要花费较长时间，比如10多分钟。执行完后请留意控制台的提示信息。
 
-![avatar](../image/assets2.png)
 
-### 4、导出游戏
-点击"微信小游戏"->"转换小游戏" 打开转换小游戏弹窗，点击左下角的"导出WEBGL并转化为小游戏"按钮等待导出游戏即可
+导出后的纹理所在目录：  
+
+![avatar](../image/cm-texture1.png)
 
 
-`注意：`"选择图片资源目录"对应的默认为Assets目录，选择更小范围的目录能加快图片替换时间。对于一些不在该目录内的图片，图片format`不能`选择为DXT1和DXT5。
 
 ## QA:
-###  一、为什么点替换纹理之后没有在导出的Assets目录找到生成的文件？  
-  * 1、如果是window用户请确认是否安装了ImageMagick并且重启了电脑，如果是Mac用户请确认是否已经点击了MacOS脚本授权并且控制台没有报错。
-
-### 二、为什么导出后PC上IDE画面图片是黑的？  
-  * 1、如果请求的是非正式域名，或者不是管理端配置的域名，请确认是否右侧"详情->本地设置"，勾选上了不校验合法域名。
-  * 2、在IDE上点清除缓存->全部缓存，确认是不是缓存问题。  
-  * 3、查看控制台切换到Network的tab查看网络是否有请求图片的网络错误，如果有请确认你填写的"Assets目录对应CDN地址"是否正确。并且资源是否已经放到了CDN的正确位置。  
-  * 4、查看导出目录webgl/Assets目录下面的png图片是否是正常的，如果黑色的说明是重复替换了，请恢复工程里的纹理再替换一遍。  
-  * 5、确认AB或AA包是否在替换纹理之后，是清除了缓存后再打的包，如果不是就要重新打一遍。  
-### 三、出现了PC IDE里面是正常的，但是手机上纹理却是黑色的情况。  
-  * 1、在IDE上点清除缓存->全部缓存，确认是不是缓存问题。
-  * 2、确认AB或AA包是否在替换纹理之后，是清除了打包缓存后再打的AB/AA包，如果不是就要重新打一遍。可以用[AssetStudio](https://github.com/Perfare/AssetStudio/releases) 这个工具查看AB/AA包里的要用压缩纹理图片是不是成了黑色的图片，如果不是，就说明打的AB/AA包没有成功，是旧的，需要清理打包缓存再打。
-  * 3、如果只是调试，没有在管理端配置正式域名，确认是否已经点击了小游戏右上角，打开了调试。
-  * 4、确认是否设置了"替换纹理目录"，如果设置了，那么不在这个目录里的图片请注意不要设置为DXT格式，否则会出现黑色。可以用[AssetStudio](https://github.com/Perfare/AssetStudio/releases) 这个工具查看AB/AA包里有问题的图片是不是设置成了DXT格式。
-
-### 四、MAC替换失败报Too Many Files错误。
-  * 1、这个问题一般是工程太大导致。请安装[NodeJS](https://nodejs.org/en/), 并打开"微信小游戏"->"包体瘦身--压缩纹理"，勾选上"使用NodeJS生成纹理"，执行替换后，进入WX-WASM-SDK/Editor/Node 目录用命令行，执行 ’node compressor.js‘ 来命令生成纹理。
-
-### 五、有部分纹理展示异常
-  * 1、可能是flare纹理或者是NGUI的图集或者是SpriteRender或者一些组件展示的时候需要获取图片宽高导致，可以将这些图片自动到一个目录，打开"微信小游戏"->"包体瘦身--压缩纹理"，将该目录配置上，然后勾选上保留宽高，再重新替换纹理试试。注意如果没有勾选保留宽高前，已经替换过纹理，再勾选上的，需要先还原再点替换纹理。
-  * 2、如果使用了TextMeshPro，可以参考[这里](https://zhuanlan.zhihu.com/p/401559453), 将其纹理提取出来，再使用纹理替换。
-
-### 六、图片太多，转换太慢
- * 1、"微信小游戏"->"包体瘦身--压缩纹理"，可以自己配置路径限制替换纹理的目录。注意一点，不在该目录内的图片格式不能设置为DXT，否则会导致黑图。
- * 2、可以打开"微信小游戏"->"包体瘦身--压缩纹理"，勾选上只生成ASTC纹理。再替换纹理。这样只会生成一种纹理格式，可以用于开发时快速验证效果，正式上线时还应该去掉勾选，生成全部格式的纹理。
-
-### 七、生成的纹理太大
+
+
+### 一、生成的纹理太大
 * 1、PC端上预览的时候展示的是PNG图片会比较大，手机上用的是带txt后缀的，如astc.txt, 这些文件压缩率很高，注意正式环境CDN一定要开启Brotli或者Gzip，这样加载的时候纹理就会很小。速度快很多。建议优先使用Brotli
 
-### 八、每次替换完纹理都要还原吗？
-* 1、202111221134后的版本支持增量替换和生成纹理了，可以不还原多次替换。
 
-### 九、资源上传至CDN的注意事项
+### 二、资源上传至CDN的注意事项
 * 1、上传至CDN时，请注意要按二进制传输，强制storebinary，如果按文本传输也会出现加载回来的图片成黑色。