Cocos Creator_官方案例解析_01_graphics_ui

01_graphics/01_sprite
AnchorPoint(锚点)
AR.js：

cc.Class({
    extends: cc.Component,
    properties: {
        posAR: cc.Label, //两个文本标签，用于描述位置信息
        pos: cc.Label,
        goldAR: cc.Node,//两个节点，用于赋值对象。
        gold: cc.Node
    },
    onLoad: function () {
        //声明goldAR的父节点对象
        var sheep = this.goldAR.parent;
        var posAR = sheep.convertToWorldSpaceAR(cc.v2(this.goldAR.x, this.goldAR.y));
        //parseInt将字符串装换成整数（直接舍去小数位），带有“0x”前缀的字符串被认为是十六进制。其余所有字符串都被认为是十进制。
        this.posAR.string = '(' + parseInt(posAR.x) + ', ' + parseInt(posAR.y) + ')';   
        sheep = this.goldAR.parent;
        var pos = sheep.convertToWorldSpace(cc.v2(this.gold.x, this.gold.y));
        this.pos.string = '(' + parseInt(pos.x) + ', ' + parseInt(pos.y) + ')';
    },
});

AtlasSprite（图集）
精灵组件下的Atlas为精灵图集资源，Sprite Frame为图片资源。
一旦图集确定，那么呈现图片只能是图集中的一员。
FilledSprite（可填充精灵）
设置一定的填充起始位置和方法，能够以一定比率裁剪显示图片。
Fill Typet表示填充方向，一共有三种类型（水平，垂直，和扇形）。
Fill Centert表示填充中心。（左下角为（0,0）右上角为（1,1））。
Fill Start表示填充起始位置。（范围为0~1）
FillRange表示填充总量。（范围为0~1）
FilledSpriteControl

cc.Class({
    extends: cc.Component,
    properties: {
        speed: 0.1,
        horizontal: {
            default: null,
            type: cc.Sprite
        },
        vertical: {
            default: null,
            type: cc.Sprite
        },
        radial_round: {
            default: null,
            type: cc.Sprite
        },
        radial_semicircle: {
            default: null,
            type: cc.Sprite
        }
    },
    update: function (dt) {
        // 更新填充开始
        this._updataFillStart(this.horizontal, dt);
        this._updataFillStart(this.vertical, dt);
        // 更新填充范围
        this._updateFillRange(this.radial_round, 1, dt);
        this._updateFillRange(this.radial_semicircle, 0.5, dt);
    },
    _updataFillStart: function (sprite, dt) {
        var fillStart = sprite.fillStart;
        fillStart = fillStart > 0 ? fillStart -= (dt * this.speed) : 1;
        sprite.fillStart = fillStart;
    },
    _updateFillRange: function (sprite, range, dt) {
        var fillRange = sprite.fillRange;
        fillRange = fillRange < range ? fillRange += (dt * this.speed) : 0;
        sprite.fillRange = fillRange;
    }
});

SimpleSprite（基础精灵）
修改尺寸会整体拉伸图像，适用于序列帧动画和普通动画。
SlicedSprite（九宫格精灵）
修改尺寸时四个角的区域不会拉伸，适用于UI按钮和面板背景。

编辑图片调整九宫格，组件发生改变时四个角不会被拉伸。
TiledSprite（平铺精灵）
修改尺寸时会不断平铺原始大小的图片。
可以实现单一进度条效果。
TrimmedSprite（自动裁剪）

使用自动裁剪可以使动画开起来更为连贯，圆润。
PS：
指定Sprite所在节点的尺寸，CUSTOM表示自定义尺寸，TRIMMED表示取原始图片裁剪透明像素后的尺寸，RAW表示取原始图片为剪裁的尺寸。

01_graphics/02_particle
AutoRemoveParticle(自动删除粒子)
粒子播放完毕自动销毁所在节点。
TogleParticle（粒子的播放）
粒子系统的播放和停止。
myParticle.resetSystem();
myParticle.stopSystem();

01_graphics/03_texture_format