微信小游戏-CocosCreator 基础（七）

Sprite总结：

Sprite Frame :显示图片

Size Mode ：Custom和Node定义的Size自适应， RAW原始大小

trim ：图片中有全透明的边缘部分会被裁剪

TRIMMED ：被裁掉的图片重新自适应原始图片的大小

帧动画 ：要求是RAW +不勾选trim   ，保持原始大小，不抖动

聊天气泡：slice+Custom+不勾选trim  自定义图片大小拉伸不影响

Filled ：中心点 ：（0，0）左下角，（1，1）右上角

Fill Start （0，1）

Fill Range （0，1） 正负代表顺时针和逆时针

获取组件实例：1代码。2编辑器

更换图片：1.资源动态加载  2.编辑器绑定

cc.sprite :

1: 游戏中显示一个图片，通常我们把这个叫做”精灵” sprite

2: cocos creator如果需要显示一个图片，那么需要在节点上挂一个精灵组件,为这个组件指定要显示的图片(SpriteFrame)

3: 显示一个图片的步骤:

     (1) 创建一个节点;

     (2) 添加一个组件;

     (3) 要显示的图片(SpriteFrame)拖动到SpriteFrame;

     (4) 配置图片的SIZE_MODE:  

             a: CUSTOM 大小和CCNode的大小一致;

             b: RAW 原始的图片大小;

             c:  TRIMMED 大小为原始图片大小, 显示的内容是裁剪掉透明像素后的图片;

     (5) trim: 是否裁剪掉 图片的透明区域, 如果勾选，就会把完全透明的行和列裁掉, 做帧动画的时候，我们一般是用原始大小不去透明度,动画，不至于抖动;

4: 精灵更换spriteFame;

5: 快捷创建带精灵组件的节点;

1:  simple: 精灵最普通的模式, 选择该模式后,图片将缩放到指定的大小;

2:  Tiled: 平铺模式, 图片以平铺的模式，铺地板砖的模式，铺到目标大小上;

3:  Slice: 九宫格模式，指定拉伸区域;

4:  Filled: 设置填充的方式(圆，矩形)，可以使用比例来裁剪显示图片(只显示的比例);

 Filled：

1:  配置Filled模式

2: 配置Filled模式, 设置为Radius参数;

3: 配置Radius的参数模式, 

            中心: 位置坐标(0, 1小数), (0, 0)左下脚, (1, 1) 右上角 (0.5, 0.5) 中心点            

           Fill Start 开始的位置: 0 ~1, 右边中心点开始，逆时针走 

           Fill Range: 填充总量(0, 1];

           FillRange为正，那么就是逆时针，如果为负，那么就是顺时针;

4: 个性化时间进度条案例;

5: 游戏中道具的时间进度显示都可以;

=============================

进度条js：

cc.Class({

    extends: cc.Component,

    properties: {

        // foo: {

        //    default: null,      // The default value will be used only when the component attaching

        //                           to a node for the first time

        //    url: cc.Texture2D,  // optional, default is typeof default

        //    serializable: true, // optional, default is true

        //    visible: true,      // optional, default is true

        //    displayName: 'Foo', // optional

        //    readonly: false,    // optional, default is false

        // },

        // ...

        sprite: {

            default: null,

            type: cc.Sprite,

        },

        action_time: 15,

    },

    // use this for initialization

    onLoad: function () {

        // 获取组件的实例，代码获取，编辑器绑定

        var node = this.node.getChildByName("time_bar");

        this.sp = node.getComponent(cc.Sprite);

        // end 

        // this.now_time = 0;

        this.now_time = this.action_time;

    },

    // called every frame, uncomment this function to activate update callback

    update: function (dt) {

        this.now_time -= dt;

        var percent = this.now_time / this.action_time; // -->百分比

        if (percent <= 0)  {

            this.now_time = this.action_time; // 重新开始

        }

        this.sp.fillRange = percent;

    },

});

================================================

更改精灵js：

cc.Class({

    extends: cc.Component,

    properties: {

        // foo: {

        //    default: null,      // The default value will be used only when the component attaching

        //                           to a node for the first time

        //    url: cc.Texture2D,  // optional, default is typeof default

        //    serializable: true, // optional, default is true

        //    visible: true,      // optional, default is true

        //    displayName: 'Foo', // optional

        //    readonly: false,    // optional, default is false

        // },

        // ...

        // 编辑器, 代码, 资源的动态加载spriteFrame对象, 

        sprite_frame: {

            default: null,

            type: cc.SpriteFrame,

        },

        // 编辑器绑定你要的组件;

        sprite: {

            default: null,

            type: cc.Sprite,

        },

    },

    // use this for initialization

    onLoad: function () {

        this.sp = this.getComponent(cc.Sprite); 

        this.sp.spriteFrame = this.sprite_frame;

    },