01_graphics/01sprite

AnchorPoint

层级管理器和场景管理器的对应关系



这个示例只有一个脚本AR挂载在Game节点上

脚本AR定义的属性


首先获取this.goldAR.parent,也就是第一个金币的父节点，也就是第一头羊

var sheep = this.goldAR.parent 获取第一个金币的坐标转换为世界坐标的值 var posAR = sheep.convertToWorldSpaceAR(cc.v2(this.goldAR.x,this.goldAR.y)) 再将第一个porAR（label）的内容改为 转化后的世界坐标 this.posAR.string = '(' + parseInt(posAR.x) + ',' + parseInt(posAR.y) + ')'

## 运行结果结果

总结

  通过上面这个示例，我们掌握了几个点:

 1,获取父节点：调用parent属性;

 2,把局部坐标转换为世界坐标：convertToWorldSpaceAR();

 3,修改label的显示文本：LaberObj.string = …;

 4, parseInt()：把参数字符串转换为整数;

AtlasSprite

运行显示图

通过上面这张图片我们可以看到，第一只绵羊的节点精灵的sprite Frame来自散的单张图片


而第二只羊的sprite frame 来自 图集（Atlas）sheep下的一张图片

总结

   通过上面的介绍，我们总结到，一个sprite组件的Sprite Frame 可以来自一张散装的单张图片，也可以来自一个图集里的一个Sprite Frame;

补充说明

  图集文件可以通过TexturePacker等图集工具生成;

Change Color

通过点击Change Color 按钮 改变方块颜色

右边的方块节点上挂载着ChangeColor 脚本

而按钮节点上的点击事件挂载着右边方块节点，然后调用方块节点上的changColor脚本组建，再调用脚本组件内部的changeColor方法,绑定了按钮的点击事件

changeColor方法：调用cc.Color API的属性来修改节点的color属性

总结

  1，按钮的点击事件设置可以通过挂载包含脚本的节点，再调用其组件脚本中的方法来绑定点击事件;
  2，可以赋值给节点的color属性来更改节点的颜色；
  3，cc.color API 中可调用基本颜色属性，也可设置或获取节点颜色属性，具体的请看API

filledSprite

这个示例讲解了sprite精灵组件的filled属性,分为三类
1 Horizontal 水平方向的填充
2 Vertacil 垂直方向的填充
3 Radial 扇形方向的填充

Horizontal 和 Vertacil 填充各有两个属性

• Fill Start : 0~1的数字，代表填充起始的位置百分比

  • 0为H左边起始点，V下边起始点，依次填充，负数则好像一张图片反过来看，H从右向左，V从上向下

• Fill Range:0~1的数字，代表填充的范围的百分比

  • 负数则填充的范围位置向一张图片反过来看
    • 如 H起始点为0.3，Fill Range 为 0.4 ，则是从左边算过来30%的位置向右填充40%范围
    • 但 Fill Range 若为 -0.4，则是从左边算过来30%的位置反过来向左填充40%，但只要填充30%就已经到左边缘了，所以多余的10%则不起作用

Radial,有3个参数

• Fill Center : x,y填充时的中心点
  
  • x:0.5,y:0.5,中心点在左右上下中间
    
  • x:0.2;y:0.5,中心点横向位置在左边起始偏移20%比例的地方，纵向位置则是中间50%的地方
    
  • x:0.5,y:0.2，中心点横向位置在左右中间，纵向位置则是下边起始点往上偏移20%比例的地方
• Fill Start ，填充起始点 0~1百分比，0的位置在3点钟位置，以逆时针方向移动，负数的位置则是逆时针，
• Fill Range ，填充范围 0~1百分比，整数以逆时针方向填充百分比范围，负数则相反

值得一提的是脚本代码的运行方式

在update循环函数中改变H和V的fillStart,radial的fillRange，从而一直循环填充

SimpleSprite

这个项目就是一个普通的节点精灵

1. 场景中间显示一个 Sprite 图像
2. Sprite 周围有蓝色的 bounding box 紧贴图像
3. 修改 scale 属性时，Sprite 大小变化 - 缩放值
4. 修改 anchor 位置时，Sprite 显示的位置变化-中心锚点
5. 点击 Sprite 资源，会高亮 Assets 面板里的贴图资源
6. 修改 size 时，Sprite 大小变化
   
   
   

SlicedSprite

九宫格精灵
	修改尺寸时四个角的区域不会拉伸，适合ui按钮和面板背景

1. 场景正中应该显示一个 UI 面板图像
2. Sprite 组件里的 Type 属性应设为 Sliced
3. 再次修改 size 属性，可以看到图像无损拉伸
4. 可以选中 Scene 面板左上角第四个操作选项，激活 Rect Gizmo，然后拖拽四个顶点，或四条边来修改图像的尺寸和位置
5. 点击 Sprite 属性最右边的 Editor 按钮，可以打开 Sprite Editor 编辑 Sprite 的切分方式
   
   
   

TiledSprite

平铺精灵:修改大小时会不断平铺原始大小的图片

1. 场景正中显示是由tiled Sprite 类型的sprite 组合而成的 进度条.
   
   2. Sprite 组件里的 Type 属性应设为 Tiled.
   
   3. 设置Anchor 可以控制进度条的朝向.
   4. 设置Size的width 控制进度条的进度.
   值得一提的是，我们这里，学到了进度条的做法，虽然不知道是不是初级的
   • 一个barBg节点，图片设为，进度条背景，与进度条成对比
   • 一个sprite节点，图片显示类型设为Tiled
   • 一个挂在脚本的节点，设置一个 Progress Bar 属性，挂载sprite节点
   • 在脚本里通过修改sprite的width来造成进度条的效果
     
     
     

   TrimmedSprite

节点像素框是否包括透明像素区，勾选此项，剪除节点节点约束框透明像素区

勾选了trimmed自动裁剪选项，去除了透明像素区

未勾选Trimmed选项框，则保留了节点透明像素区