cocos creator 基础一文通(六)--sprite一. sprite组件美工会设置同样大小的图片,所以,一般

sprite 组件

一. sprite组件

1.sprite组件属性 //后续详解

2.sprite组件属性设置

美工会设置同样大小的图片,所以,一般设置为: RAW 不勾选 trim.

做帧动画时,应不勾选 trim防止抖动

3.图片模式

4. Slice 九宫格模式 (便于内容拉伸和缩放)

①. 将图片类型调整为九宫格模式

②. 点击图片后的编辑按钮

③. 在编辑框中设定九宫格的尺寸

5. filled 填充模式

①扇形显示RADIAL

center 是中心点(填入比例) start是起始角度(填入比例) fill range显示的角度(填入比例)

例子:用此功能加前面的定时器和键盘事件,做一个简单的技能CD.

cc.Class({                               //脚本挂载在父节点上.
    extends: cc.Component,

    properties: {

        action_time:10,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        //vars
        var catQ=this.getComponentsInChildren(cc.Sprite)[1];
        var label_cool_down_count=this.getComponentsInChildren(cc.Label)[1];
        var cool_down_flag=true;
        var cool_down= function(e){
            if(e.keyCode==cc.macro.KEY.q){
                if(cool_down_flag){
                    cool_down_flag=false;
                    catQ.fillRange=0;
                    console.log(label_cool_down_count);
                    this.schedule(cool_down_display,0.1);
                }
            }
        };
        var cool_down_display=function(){
            catQ.fillRange+=0.1/this.action_time;
            label_cool_down_count.string=parseInt(this.action_time+1-catQ.fillRange*this.action_time);
            if(catQ.fillRange>=1){
                cool_down_flag=true;
                this.unscheduleAllCallbacks();
                label_cool_down_count.string="";
            }
        };
        //actions
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,cool_down,this);
    },
});

二 spriteFrame类型

1.通过绑定属性面板换图

①. 创建一个面板属性

②. 将属性与精灵的spriteFrame属性绑定(千万注意小写)

③. 在操作面板将素材传递给属性.

cc.Class({
    extends: cc.Component,
    properties: {
        sprite_Frame:{
            default:null,
            type:cc.SpriteFrame,
        }
    },
    onLoad () {
        var sprite1=this.getComponent(cc.Sprite);
        sprite1.spriteFrame=this.sprite_Frame;
    },
});

2. 资源动态绑定 (代码绑定) //(先挖个坑)