cocoscreator文字阴影

 

CCLabelShadow当前使用的cocosCreator是1.9.3版本！

因项目需求需要使用文字阴影，使得文字看起来更有立体感一些：通过查阅cocos关于Label的绑定的接口部分，看到native端的shadow接口是已经绑定到了js层了，只是在jsb-label中没有启用这个接口。这样添加起来就比较容易了。

在jsb-label中添加一段使用代码，【这里jsb-label中的代码是基于CCSGLabel文件扩展的】。

//阴影
jsbLabel.prototype.setEnableShadow = function(color, offset) {
    this._shadowColor = color;
    var shadowOffset = cc.size(0, 0);
    shadowOffset.width = offset.x;
    shadowOffset.height = offset.y;
    this.enableShadow(color, shadowOffset);
}

添加完之后在components文件夹中仿照CCLabelOutline的格式编写文字阴影的组件就可以，备注：在文章末尾会将完整代码贴出。 

然而除了发布native版本外还需要有网页端的支持，通过对label中的文件CCSGLabelCanvasRenderCmd脚本组件的查看，可以看到网页端的文字的canvas渲染代码都在这个类中，仿照渐变的代码写一份就ok了。

if(this._node.getShadowEnabled()) {
                var shadowColor = this._node.getShadowColor() || cc.color(255, 255, 255, 255);
                var shadowBlur = this._node.getShadowBlur() || 10;
                var shadowOffset = this._node.getShadowOffset() || {x: 0, y: 0};
                this._labelContext.shadowBlur = shadowBlur;
                this._labelContext.shadowColor = shadowColor;
                this._labelContext.shadowOffsetX = shadowOffset.x;
                this._labelContext.shadowOffsetY = shadowOffset.y;
            }

最后写完在  gulp build 一下。 ok 收工。

在CCSGLabel中添加的代码

//阴影
    _shadowEnabled: false,
    _shadowOffset: {x: 0, y: 0},
    _shadowColor: cc.color(255, 255, 255, 255),
    _shadowBlur: 10,

...

 //阴影
    setShadowEnabled: function(value) {
        if (this._shadowEnabled === value) return;
        this._shadowEnabled = value;
        this._notifyLabelSkinDirty();
    },

    getShadowEnabled: function() {
        return this._shadowEnabled;
    },

    setShadowOffset: function(x, y) {
        var offset = this._shadowOffset;
        if (offset.x === x && offset.y === y) return;
        offset.x = x || 0;
        offset.y = y || 0;
        this._notifyLabelSkinDirty();
    },

    getShadowOffset: function() {
        return {x: this._shadowOffset.x, y: this._shadowOffset.y};
    },

    setShadowBlur: function(value) {
        if (this._shadowBlur === value) return;
        this._shadowBlur = value;
        this._notifyLabelSkinDirty();
    },

    getShadowBlur: function() {
        return this._shadowBlur;
    },

    setShadowColor: function(value) {
        if (this._shadowColor === value) return; 
        this._shadowColor = value;
        this._notifyLabelSkinDirty();
    },

    getShadowColor: function() {
        return this._shadowColor;
    },

    getOutlineColor: function() {
        return this._outlineColor;
    },

 shadow脚本组件代码，

/**
 * @class LabelShadow
 * 文字阴影
 * @extends Component
 * @example
 *  // Create a new node and add label components.
 *  var node = new cc.Node("New Label");
 *  var label = node.addComponent(cc.Label);
 *  var outline = node.addComponent(cc.LabelShadow);
 *  node.parent = this.node;
 */

var LabelShadow = cc.Class({
    name: 'cc.LabelShadow', extends: require('./CCComponent'),
    editor: CC_EDITOR && {
        menu: 'i18n:MAIN_MENU.component.renderers/LabelShadow',
        executeInEditMode: true,
        requireComponent: cc.Label,
    },

    ctor: function() {
        this._labelSGNode = null;
    },

    properties: {
        /**
         * !#en Change the shadow color
         * !#zh 改变阴影的颜色
         * @property color
         * @type {Color}
         */
        _color: cc.color(255,255,255,255),
        /**
         * !#en Change the shadow offset
         * !#zh 改变阴影的偏移量
         * @property color
         * @type {Color}
         */
        _offx: 0,
        _offy: 0,
        /**
         * !#en Change the shadow blur
         * !#zh 改变阴影的模糊范围
         * @property color
         * @type {Color}
         */
        _blur: 10,
        
        color: {
            get: function() {
                return this._color;
            },
            set:function(value) {
                this._color = cc.color(value);
                this._setShadow(this._labelSGNode);
            }
        },
        offsetX: {
            get: function() {
                return this._offx;
            },
            set: function(value) {
                this._offx = value;
                this._setShadow(this._labelSGNode);
            }
        },

        offsetY: {
            get: function() {
                return this._offy;
            },
            set: function(value) {
                this._offy = value;
                this._setShadow(this._labelSGNode);
            }
        },

        blur: {
            get: function() {
                return this._blur;
            },
            set: function(value) {
                this._blur = value;
                this._setShadow(this._labelSGNode);
            }
        }
    },

    onEnable: function () {
        var label = this.node.getComponent('cc.Label');
        var sgNode = this._labelSGNode = label && label._sgNode;
        (!CC_JSB && sgNode)?sgNode.setShadowEnabled(true): null;
        this._setShadow(this._labelSGNode);
    },

    onDisable: function () {
        if(this._labelSGNode) {
            !CC_JSB?this._labelSGNode.setShadowEnabled(false): null;
        }
        this._labelSGNode = null;
    },

    _setShadow: function(sgNode) {
        if (sgNode == null) { return; }
        if (CC_JSB) {
            sgNode.setEnableShadow(this._color, {x: this._offx, y: this._offy});
        } else {
            sgNode.setShadowOffset(this._offx, this._offy);
            sgNode.setShadowColor(cc.color(this._color));
            sgNode.setShadowBlur(this._blur);
        }
    }
});

cc.LabelShadow = module.exports = LabelShadow;

 

CCLabelShadow