Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
BIG_BUG644
minigame-unity-webgl-transform
提交
9a2e1a8f
M
minigame-unity-webgl-transform
项目概览
BIG_BUG644
/
minigame-unity-webgl-transform
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
M
minigame-unity-webgl-transform
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
9a2e1a8f
编写于
3月 21, 2022
作者:
L
liangyizhou(周良宜)
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update:更新压缩纹理文档
上级
bd3a8d8f
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
17 addition
and
46 deletion
+17
-46
Design/CompressedTexture.md
Design/CompressedTexture.md
+17
-46
image/cm-texture1.png
image/cm-texture1.png
+0
-0
未找到文件。
Design/CompressedTexture.md
浏览文件 @
9a2e1a8f
...
...
@@ -7,70 +7,41 @@
- 降低内存、减少解码消耗
- 自动懒加载,降低包体
`注意:`
使用压缩纹理的图片或者图集,宽高需要为
2的幂次
,否则不会转化为移动端的压缩纹理。对于需要动态读取图片内容做处理的,目前还不支持将其转为压缩纹理。
`注意:`
使用压缩纹理的图片或者图集,宽高需要为
4的倍数
,否则不会转化为移动端的压缩纹理。对于需要动态读取图片内容做处理的,目前还不支持将其转为压缩纹理。
## 原理简介
简单来说,我们使用占位符的方式将纹理图片设置为
DXT
1格式,然后在运行时再根据占位符去加对应纹理的压缩纹理格式。从而达到了减少内存和自动懒加载纹理的效果。
简单来说,我们使用占位符的方式将纹理图片设置为
ETC
1格式,然后在运行时再根据占位符去加对应纹理的压缩纹理格式。从而达到了减少内存和自动懒加载纹理的效果。
## 使用
### 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,如果按文本传输也会出现加载回来的图片成黑色。
image/cm-texture1.png
0 → 100644
浏览文件 @
9a2e1a8f
77.6 KB
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录