cocos creator Sprite详解

image.png

• Atlas:Sprite 显示图片资源所属的atlas图集资源
• Sprite Frame：渲染 Sprite 使用的SpriteFrame图片资源
• Type：渲染模式，包括普通（Simple）、九宫格（Sliced）、平铺（Tiled）和填充（Filled）渲染四种模式
  • Simple:按照原始图片资源样子渲染 Sprite，一般在这个模式下我们不会手动修改节点的尺寸，来保证场景中显示的图像和美术人员生产的图片比例一致。
  • Sliced：图像将被分割成九宫格，并按照一定规则进行缩放以适应可随意设置的尺寸.四个角保护原像素不变，其他部分根据尺寸作相应伸缩
  • Tiled：当 Sprite 的尺寸增大时，图像不会被拉伸，而是会按照原始图片的大小不断重复
  • Filled：根据原点和填充模式的设置，按照一定的方向和比例绘制原始图片的一部分。经常用于进度条的动态展示。一般用作进度条，技能CD等。
    • Fill Type：填充类型选择，有 HORIZONTAL（横向填充）、VERTICAL（纵向填充）和 RADIAL （扇形填充）三种。
    • Fill Start：填充起始位置的标准化数值（从 0 ~ 1，表示填充总量的百分比），从哪里开始填充
    • Fill Range：填充范围的标准化数值（从 0 ~ 1，表示填充总量的百分比），填充多少
    • Fill Center：填充中心点，只有选择了 RADIAL 类型才会出现这个属性
    • 而 RADIAL 类型中 Fill Start 只决定开始填充的方向，Fill Start 为 0 时，从 x 轴正方向开始填充，Fill Range 决定填充总量，值为 1 时将填充整个圆形。Fill Range 为正值时逆时针填充，为负值时顺时针填充。

image.png

约束框：紫色框内容。
182x40: 图片原始尺寸
可以尝试直接将一张图片拖入到场景中，看先当前的图片尺寸是多大。
然后取消Trim，看下图片的变化，
然后在Size Mode中选择raw，再看看图片的尺寸值变化。

• Trim：勾选后将在渲染 Sprite 图像时去除图像周围的透明像素，我们将看到刚好能把图像包裹住的约束框。取消勾选，Sprite 节点的约束框会包括透明像素的部分
• Size Mode:用来将节点的尺寸设置为原图或原图裁剪透明像素后的大小，通常用于在序列帧动画中保证图像显示为正确的尺寸
  • TRIMMED:会将节点的尺寸（size）设置为原始图片裁剪掉透明像素后的大小
  • RAW:会将节点尺寸设置为原始图片包括透明像素的大小
  • CUSTOM：自定义尺寸，用户在修改 Size 属性，或在脚本中修改 width 或 height 后，都会自动将 Size Mode 设为 CUSTOM

一般对于我们需要替换美术UI的Sprite，我们一般使用：
取消勾选Trim，
SizeMode 选择 RAW，使图片保持原图大小
这样在替换资源后可以保证资源不会因为有透明部分被裁减而出现图片拉伸问题。