7.cc.Sprite组件的使用详解

1. cc.Sprite

游戏中显示一个图片，通常我们把这个叫做”精灵” sprite
cocos creator如果需要显示一个图片，那么需要在节点上挂一个精灵组件,为这个组件指定要显示的图片(SpriteFrame)
显示一个图片的步骤:
     (1) 创建一个空节点;
     (2) 添加一个渲染组件-->sprite;
     (3) 要显示的图片(SpriteFrame)拖动到SpriteFrame;
     (4) 配置图片的SIZE_MODE:  
             a: CUSTOM 大小和CCNode的大小一致;
             b: RAW 原始的图片大小;
             c:  TRIMMED 大小为原始图片大小, 显示的内容是裁剪掉透明像素后的图片;
     (5) trim: 是否裁剪掉 图片的透明区域, 如果勾选，就会把完全透明的行和列裁掉, 做帧动画的时候，我们一般是用原始大小不去透明度,动画，不至于抖动;
精灵更换spriteFame;
快捷创建带精灵组件的节点;

 

2. 图片模式

simple: 精灵最普通的模式, 选择该模式后,图片将缩放到指定的大小;
Tiled: 平铺模式, 图片以平铺的模式，铺地板砖的模式，铺到目标大小上;
Slice: 九宫格模式，指定拉伸区域;

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

 

3. 九宫格的使用

指定拉伸区域, 让图片在拉伸的时候某些区域不会改变; 比如圆角,聊天气泡等
九宫格能省图片资源, (对话框);
编辑九宫格,来制定缩放区域;
体会对话框背景的九宫拉伸;

 

4. Filled模式

配置Filled模式
配置Filled模式, 设置为Radius参数;
配置Radius的参数模式,
           中心: 位置坐标(0, 1小数), (0, 0)左下脚, (1, 1) 右上角 (0.5, 0.5) 中心点            
           Fill Start 开始的位置: 0 ~1, 右边中心点开始，逆时针走
           Fill Range: 填充总量(0, 1];
           FillRange为正，那么就是逆时针，如果为负，那么就是顺时针;
个性化时间进度条案例;
游戏中道具的时间进度显示都可以;

 

例 : seat.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        //获取组件实例 编辑器绑定
        sprite: {
            default: null,
            type: cc.Sprite,
        },

        action_time: 15,

    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        //获取组件实例 代码获取 
        var node = this.node.getChildByName("time_bar");
        this.spt = node.getComponent(cc.Sprite);

        this.now_time = 0;

    },

    start () {
    },

    update (dt) {

        this.now_time = this.now_time + dt;
        var percent = this.now_time / this.action_time; //百分比
        if(percent >= 1) {
            percent = 1;
            this.now_time = 0; //重新开始
        }

        this.spt.fillRange = percent;

    },

});

工程截图:

 

例: 代码换图  change_sprite_frame.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     }, 
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        sprite_frame: {
            default: null,
            type: cc.SpriteFrame,
        },

    },
 
    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        this.sp = this.getComponent(cc.Sprite);
        this.sp.spriteFrame = this.sprite_frame;
        console.log(this.sp.spriteFrame);

    },

    start () {

    },

    // update (dt) {},
});

工程截图