1. Sprite 组件介绍
1：在游戏中显示一个图像，通常我们称之为“精灵”
2：cocos creator 如果需要显示图片，需要在节点上挂一个 sprite 组件，并为这个组件指定要显示的图片（SpriteFrame）
3：显示图像的步骤：
（1）创建节点；
（2）添加组件；
（3）将需要显示的图片（SpriteFrame）拖拽到SpriteFrame中；
（4）配置图像的SIZE_MODE：
a：CUSTOM的大小与CCNode的大小一致；
b：RAW原始图像尺寸；
c：TRIMMED尺寸为原图像尺寸，显示的内容为修剪透明像素后的图像；
（5）trim：是否修剪图片的透明区域，如果勾选，完全透明的行和列都会被修剪掉。在制作帧动画的时候，我们一般会使用原始大小而不去除透明度，避免出现抖动；
4：改变精灵的spriteFame；
5：快速创建带有精灵组件的节点；
@property({type:cc.SpriteFrame, tooltip:"需要替换的图片资源"})
开始 （） {
让 sprite : cc.Sprite = this.node.getComponent(cc.Sprite);
精灵。精灵框架 = 这个。我的精灵框架；
2.图片模式
1：简单：精灵最常见的模式cocos creator，选择此模式后创作人，图片会缩放到指定大小；
2：平铺：平铺模式，图像被平铺到目标尺寸，就像地砖一样；
3：Slice：九宫格模式，指定拉伸区域；如下图：
4：填充：设置填充方式（圆形、矩形），以及使用比例剪裁显示的图像（只显示比例）；
1. 九宫格的使用
1：指定拉伸区域，使得图片拉伸的时候，有些区域不会发生变化（如上图）；
例如圆角，聊天气泡等。
2：九宫格布局可以节省图片资源，（对话框）；
3：编辑九宫格，指定缩放区域；
4：体验对话框背景的九宫格拉伸；
2. 填充模式
1：配置填充模式
2：配置Filled模式，并设置为Radius参数；
3：配置Radius的参数模式，
Center：位置坐标（小数点后0,1），（0,0）左下角，（1,1）右上角，（0.5,0.5）中心点
Fill Start起始位置：0~1，从右侧中心点开始，逆时针旋转
填充范围：填充总量（0，1]；
若FillRange为正数，则为逆时针3D动画，若为负数，则为顺时针；
4：个性化时间进度条案例；
5：可以显示游戏中道具的时间进度显示；
3.制作游戏中的时间进度条
新建TimerRadius.ts，并挂载到TimeBar节点上cocos creator，如下图所示：
编辑
结果如下：
绿色计时器条将会沿着边缘逐渐减少。
