Cocos 2.x 自定义扩展组件

参考
张晓衡 Cocos Creator基础教程(12)—精灵变身

//SpriteEx.js

let SpriteEx = cc.Class({    
    extends: cc.Sprite,    //继承自cc.Sprite

    properties: {        
        spriteFrames: [cc.SpriteFrame],        
        _index: 0,        
        index: {            
        type: cc.Integer,
            set(value) {                
                if (value < 0) {                    
                    return;
                } 
                //直接访问spriteFrame属性，因为this就是cc.Sprite
                this._index = value % this.spriteFrames.length;
                this.spriteFrame = this.spriteFrames[this._index];
            },
            get() {                
                return this._index;
            }
        }
    },

    next() {        this.index++
    }
});


//下面是控制SpriteEx组件在属性检查器中的属性显示

//不显示spriteFrame属性
cc.Class.Attr.setClassAttr(SpriteEx, 'spriteFrame', 'visible', false);
//不显示Atlas属性
cc.Class.Attr.setClassAttr(SpriteEx, '_atlas', 'visible', false);
//根据函数返回值控制属性显示、隐藏
cc.Class.Attr.setClassAttr(SpriteEx, 'fillType', 'visible', function() {    
    return this._type === cc.Sprite.Type.FILLED;
});

cc.Class.Attr.setClassAttr(SpriteEx, 'fillCenter', 'visible', function() {    
    return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'fillStart', 'visible', function() {    
    return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'fillEnd', 'visible', function() {    
    return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'fillRange', 'visible', function() {    
    return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'srcBlendFactor', 'visible', function() {    
    return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'dstBlendFactor', 'visible', function() {    
    return this._type === cc.Sprite.Type.FILLED;
});

可以参考使用 TypeScript 脚本，改造成TS版本：

/*
 * @Descripttion: 
 * @Author: cuixu
 * @Date: 2021-07-08 09:27:48
 */
const { ccclass, property } = cc._decorator;

@ccclass
export default class SpriteEx extends cc.Sprite {

    @property(cc.SpriteFrame)
    spriteFrames: cc.SpriteFrame[] = [];

    @property
    _index = 0;

    @property
    get index() {
        return this._index;
    }

    set index(value) {
        if (value < 0) {
            return;
        }
        this._index = value % this.spriteFrames.length;
        this.spriteFrame = this.spriteFrames[this._index];
    }

}

cc.Class["Attr"].setClassAttr(SpriteEx, 'spriteFrame', 'visible', false);
cc.Class["Attr"].setClassAttr(SpriteEx, '_atlas', 'visible', false);

cc.Class["Attr"].setClassAttr(SpriteEx, 'fillType', 'visible', function () {
    return this._type === cc.Sprite.Type.FILLED;
});

cc.Class["Attr"].setClassAttr(SpriteEx, 'fillCenter', 'visible', function () {
    return this._type === cc.Sprite.Type.FILLED;
});
cc.Class["Attr"].setClassAttr(SpriteEx, 'fillStart', 'visible', function () {
    return this._type === cc.Sprite.Type.FILLED;
});
cc.Class["Attr"].setClassAttr(SpriteEx, 'fillEnd', 'visible', function () {
    return this._type === cc.Sprite.Type.FILLED;
});
cc.Class["Attr"].setClassAttr(SpriteEx, 'fillRange', 'visible', function () {
    return this._type === cc.Sprite.Type.FILLED;
});

cc.Class["Attr"].setClassAttr(SpriteEx, 'srcBlendFactor', 'visible', function () {
    return this._type === cc.Sprite.Type.FILLED;
});
cc.Class["Attr"].setClassAttr(SpriteEx, 'dstBlendFactor', 'visible', function () {
    return this._type === cc.Sprite.Type.FILLED;
});

做成prefab后，可以使用getComponent

    _emmitNode() {
        let node = cc.instantiate(this.prefab);
        let v: SpriteEx = node.getComponent("SpriteEx");
        v.index = 2;

        node.position = this.node.position;
        node.x += this.offsetX;
        node.parent = this.node.parent;

        let distance = ((cc.winSize.height / 2) - this.node.y);
        let duration = distance / this.speed;
        let moveBy = cc.moveBy(duration, cc.v2(0, distance));
        let removeSelf = cc.removeSelf();
        let sequence = cc.sequence(moveBy, removeSelf);
        node.runAction(sequence);
    }