createjs吧 关注：124贴子：822
- 12回复贴，共1页
纹理是把animateCC生成的复杂的矢量转化为位图的过程。那为什么要这么做呢？因为canvas对于矢量性能的支持并不好，大量的矢量会导致设备卡顿，特别是移动端。如果转化为位图那么性能就会变的非常好，但是位图比较大，所以这是一个用时间空间换性能的方式。
这里的设置我一个个解释：
1.导出图像资源：这个是用来设置保存纹理的路径的，而下面导出为的选项我就不介绍了，今天讲的是纹理那选的一定是纹理
2.品质：animateCC默认是选择8位的，那是因为矢量一般是画出来的结构比较简单，一般情况是用不到32位的情况，如果用到了你还不如直接变成图片来的更好。
3.分辨率：animateCC默认选择2，那为什么是2呢？主要是为了移动端的考虑，详细介绍你等会往下看，下面会详细介绍。
4.最大大小：我这里默认是2048*2048，以前默认是8192*8192不知道现在是不是改了，改了的原因也很简单的，因为createjs的机制或者说bug，这里越大会越耗性能，以前8192*8192的时候卡的很多人都找不到卡顿的原因。所以这里最佳设置是2048*2048，如果还有问题就设置成1024*1024
5.纹理中所包含的元件：一般来说animateCC默认是会把复杂的矢量转化为位图，简单的矢量保留，但是这里简单和复杂的判断比较迷，有些我认为复杂的系统觉得他简单，有些我觉得简单的系统觉得复杂。然后就是经过本人的测试，修改纹理中包含的元件，只能把复杂元件改成不转化成纹理，简单的元件你设置成转化为纹理也没用吗，系统照样不输出。
1.导出图像资源：这个是用来设置保存纹理的路径的，而下面导出为的选项我就不介绍了，今天讲的是纹理那选的一定是纹理
2.品质：animateCC默认是选择8位的，那是因为矢量一般是画出来的结构比较简单，一般情况是用不到32位的情况，如果用到了你还不如直接变成图片来的更好。
3.分辨率：animateCC默认选择2，那为什么是2呢？主要是为了移动端的考虑，详细介绍你等会往下看，下面会详细介绍。
4.最大大小：我这里默认是2048*2048，以前默认是8192*8192不知道现在是不是改了，改了的原因也很简单的，因为createjs的机制或者说bug，这里越大会越耗性能，以前8192*8192的时候卡的很多人都找不到卡顿的原因。所以这里最佳设置是2048*2048，如果还有问题就设置成1024*1024
5.纹理中所包含的元件：一般来说animateCC默认是会把复杂的矢量转化为位图，简单的矢量保留，但是这里简单和复杂的判断比较迷，有些我认为复杂的系统觉得他简单，有些我觉得简单的系统觉得复杂。然后就是经过本人的测试，修改纹理中包含的元件，只能把复杂元件改成不转化成纹理，简单的元件你设置成转化为纹理也没用吗，系统照样不输出。
为什么这么设置呢？其实主要还是为了服务移动端，早期的animateCC对移动端是非常的不友好的，新手会遇到各种问题，遇到最大的问题就是，诶，为什么我在图片在移动端这么模糊？诶为什么这么卡？所以adobe为了解决这几个问题，就推出了纹理，且把纹理分辨率设置成2 。那为什么是2呢？我说的通俗易懂一点就是，移动端的1格物理像素实际上可能有2格实际像素，你看为什么现在的手机1000多的分辨率，电脑1920的分辨率，但是实际上手机的大小并没有电脑屏幕的一半，连4分之一都没有。原因就在于我刚才说的移动端1格物理像素可能有2格实际像素，当然随着视网膜屏幕的普及，3-4格也是有可能的。所以这里adobe干脆把所有的位图资源都设置成2倍大小，这里矢量不受大小限制，所以没关系。但是！如果真的要按照adobe的思路来，那么你的舞台大小就不能按照实际的像素来，得按照物理大小来，比如750的设计案，你舞台就需要设置成375，不知道物理大小的可以用下面代码获取：
html：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"></head>
js：
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
并且还需要开启adobe自带的自适应：
html：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"></head>
js：
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
并且还需要开启adobe自带的自适应：
那么这么设置到底好不好呢？
你自己试过其实就知道好不好了，我的评价是问题很多。
1.你自己就得知道原理，设置成物理像素，不然移动端模糊的问题就依然存在，但是新手哪里知道这个问题。
2.逼你必须使用animateCC自己的组件，如果你在外边自己定义dom组件，他压根不会自适应。
3.他这种方式无法准确的获取鼠标或者手指所在的真实位置，还需要通过换算，如果要做个拖动或者碰撞检测对于新手来说就比较麻烦了
4.无法分开导出png和jpg，众所周知，jpg比png小很多，但是png能带通道，所以这2个应该是分开导出的，但是animateCC会把他们合并导出
你自己试过其实就知道好不好了，我的评价是问题很多。
1.你自己就得知道原理，设置成物理像素，不然移动端模糊的问题就依然存在，但是新手哪里知道这个问题。
2.逼你必须使用animateCC自己的组件，如果你在外边自己定义dom组件，他压根不会自适应。
3.他这种方式无法准确的获取鼠标或者手指所在的真实位置，还需要通过换算，如果要做个拖动或者碰撞检测对于新手来说就比较麻烦了
4.无法分开导出png和jpg，众所周知，jpg比png小很多，但是png能带通道，所以这2个应该是分开导出的，但是animateCC会把他们合并导出
那有没有什么比adobe更好的办法呢？有！
首先自适应方面看这个：https://www.ajexoop.com/wordpress/?p=1219
meta标签的自适应是整个页面一起自适应，所以不用考虑是canvas还是dom对象，舞台也只要根据设计案的大小来就可以了。
但是要注意，有些app会自带ui，比如微信会弹出一些获取权限的ui，meta标签自适应会破坏他们原有的大小，还有使用iframe的时候也会破坏大小，所以当出现以上情况时推荐的设置：
https://www.ajexoop.com/wordpress/?p=507
首先自适应方面看这个：https://www.ajexoop.com/wordpress/?p=1219
meta标签的自适应是整个页面一起自适应，所以不用考虑是canvas还是dom对象，舞台也只要根据设计案的大小来就可以了。
但是要注意，有些app会自带ui，比如微信会弹出一些获取权限的ui，meta标签自适应会破坏他们原有的大小，还有使用iframe的时候也会破坏大小，所以当出现以上情况时推荐的设置：
https://www.ajexoop.com/wordpress/?p=507
扫二维码下载贴吧客户端
下载贴吧APP
看高清直播、视频！
看高清直播、视频！
贴吧热议榜
- 1我爸在手机上写下令他崩溃的长文2212860
- 2狼队紫幻被零封后的某一天2013325
- 3T1教练组立军令状死保Smash1993544
- 4关税让美国人跑到中国搞代购1847151
- 5甲亢哥被蒙古的雪豹皮整沉默了1755884
- 6IG不敌NIP这个豹女味太冲1329575
- 7RTX5060系全球首发定价公开1211472
- 8王楚钦澳门世界杯首战告捷987160
- 9AL横扫TT继续领跑巅峰组894520
- 10美特工用微软后门进行网络攻击888951
- 12回复贴，共1页
发贴请遵守贴吧协议及“七条底线”贴吧投诉
发布成功
去贴吧APP订阅抽奖结果通知
扫码进入贴吧APP
···········
开奖后第一时间站内信通知
···········
中奖结果全员公示
