CompressedTexture.md

# 压缩纹理使用(Beta)

因为目前Unity导出的WEBGL游戏只支持DXT1和DXT5，在移动端上并不支持，而且除非使用Addressable这种将图片打包出来的手段，否则也会导致包体过大。为了解决这两个问题。我们提供了这个功能，让Unity游戏也能在移动端自动支持ASTC和ETC2的压缩纹理。而且图片也自动做了按需加载，无需再单独拆分打包。

简单总结使用我们的压缩纹理的好处：

    - 降低内存、减少解码消耗
    - 自动懒加载，降低包体

`注意：` 使用压缩纹理的图片或者图集，宽高需要为2的幂次，否则不会转化为移动端的压缩纹理。对于需要动态读取图片内容做处理的，目前还不支持将其转为压缩纹理。

## 原理简介
简单来说，我们使用占位符的方式将纹理图片设置为DXT1格式，然后在运行时再根据占位符去加对应纹理的压缩纹理格式。从而达到了减少内存和自动懒加载纹理的效果。

## 使用
### 1、安装ImageMagick
下载并安装[ImageMagick](https://imagemagick.org/index.php) window用户安装完后需重启电脑。
### 2、Mac上授权
因为Mac上的隐私安全问题，使用mac的用户需要先授权，使用window的用户跳过这步。点击"微信小游戏"->"MacOS脚本授权",进行授权，直到不报错为止。若授权后还是报错，则需重启unity后再点授权。

### 3、替换纹理
1、首先点击"微信小游戏"->"转换小游戏" 打开转换小游戏弹窗，填入相关的导出配置信息，  
2、点击"微信小游戏"->"包体瘦身--压缩纹理"->"替换纹理"，用到的纹理图片就会自动替换成占位符，展示位黑色的图片，如果项目用到的图片比较多这一步可能需要花费较长时间，比如10多分钟。  
3、替换完毕后，如果你是用了AB或AB包，则需要再打一遍AA/AB包。

这里替换纹理后在导出目录会生成一个Assets目录，需要将该目录放到CDN的对应目录， 其对应的是你填写的"Assets目录对应CDN地址" ，比如你填写的地址为 https://wx.qq.com/data/Assets/ 
，那么小游戏需要展示图片的时候就会自动去该目录下载对应图片。
<image src="../image/edwindow.png" width="600"/>  

导出后的纹理所在目录：
![avatar](../image/assets2.png)

### 4、导出游戏
点击"微信小游戏"->"转换小游戏" 打开转换小游戏弹窗，点击左下角的"导出WEBGL并转化为小游戏"按钮等待导出游戏即可


`注意：`"选择图片资源目录"对应的默认为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纹理或者一些组件展示的时候需要获取图片宽高导致，可以将这些图片自动到一个目录，打开"微信小游戏"->"包体瘦身--压缩纹理"->"设置Flare纹理目录"，将改目录配置上，再重新替换纹理试试。
  * 2、如果使用了TextMeshPro，可以参考[这里](https://zhuanlan.zhihu.com/p/401559453), 将其纹理提取出来，再使用纹理替换。

### 六、图片太多，转换太慢
 * 1、"微信小游戏"->"包体瘦身--压缩纹理"->"设置替换纹理目录"可以限制替换纹理的目录。
 * 2、可以打开"微信小游戏"->"包体瘦身--压缩纹理"->"更多设置"，勾选上只生成ASTC纹理。再替换纹理。这样只会生成一种纹理格式，可以用于开发时快速验证效果，正式上线时还应该去掉勾选，生成全部格式的纹理。

### 七、生成的纹理太大
* 1、PC端上预览的时候展示的是PNG图片会比较大，手机上用的是带txt后缀的，如astc.txt, 这些文件压缩率很高，注意正式环境CDN一定要开启Brotli或者Gzip，这样加载的时候纹理就会很小。速度快很多。

### 八、每次替换完纹理都要还原吗？
* 1、如果替换纹理后续的修改，没有增改纹理的话，可以不用还原，直接导出游戏就好。

### 九、非POT图片能否也用懒加载，来进一步减少包体大小？
可以打开"微信小游戏"->"包体瘦身--压缩纹理"->"更多设置"，勾选上"懒加载非POT图片"，然后按上面的步骤替换纹理导出游戏即可。