昨天的一个问题困扰了一阵子，在给角色做升级的时候，发现动态更新纹理的时候图片的位置偏移了，大小也不太符合预期，调试一看发现Node节点的大小发生了改变。假设在编辑器中的大小是100*100，切换纹理之后变为了200*200。为什么会出现这种问题呢，研究后发现是因为sprite的size Mode和trim问题没有设置好。
和图片裁剪相关的 Sprite 组件设置有以下两个：
Trim 勾选后将在渲染 Sprite 图像时去除图像周围的透明像素，我们将看到刚好能把图像包裹住的约束框。取消勾选，Sprite 节点的约束框会包括透明像素的部分。只在 Type 设置为 Simple 时生效。
Size Mode 用来将节点的尺寸设置为原图或原图裁剪透明像素后的大小，通常用于在序列帧动画中保证图像显示为正确的尺寸。有以下几种选择：
TRIMMED 选择这个选项，会将节点的尺寸（size）设置为原始图片裁剪掉透明像素后的大小。
RAW 选择这个，会将节点尺寸设置为原始图片包括透明像素的大小。
CUSTOM 自定义尺寸，开发者在使用 矩形变换工具 拖拽改变节点的尺寸，或通过修改 Size 属性，或在脚本中修改 width 或 height 后，都会自动将 Size Mode 设为 CUSTOM。表示开发者将自己决定节点的尺寸，而不需要考虑原始图片的大小。
如果开启trim模式，当前的透明像素则会被自动裁减掉。
从编辑器拖出来默认是trim模式，把透明像素裁剪掉了。取消trim，图片缩小了，但属性栏的size没变。
这个时候再设置size mode为raw，就可以展示为原图了。
这个时候属性栏的size也变了，因此我们发现这个png图片是包含很多透明像素的。
动态切换素材的代码如下
cc.loader.loadRes("images/role/body/" + role.data.body + '.png', (err, texture) => { const sprite = this.roleBodyNode.getComponent(cc.Sprite); const spriteFrame = new cc.SpriteFrame(texture); sprite.spriteFrame = spriteFrame});
这个时候如果用默认模式去更换纹理，更新后精灵的节点大小却发生变化了，新的纹理没有按照trim的模式渲染，个人感觉这个可能是cocos的一个bug。理论上更新的纹理应该要按照当前sprite的模式渲染，实际上的表现是改变的size mode，但手动去改变size mode的值没有任何反应，还是得不到预期的效果。
因此有一种做法就是不要设置trim，size mode设置为raw，这样就没有任何问题，前提是更换的纹理图尺寸要保持一致。