能不能加一个文字或节点阴影组件

Creator 2.x
#1

目前项目可能会大量用到文字阴影， 虽然自己写了一个阴影的组件，奈何水平不足，利用了一些取巧的方法实现了， 如果版本更新可能会失效，所以希望官网能给一个正式的。

#2

求开源

#3

跪求开源 :grinning:

#4 
    //LabelOverwrite
    const {ccclass, property, inspector} = cc._decorator;

    @ccclass
    @inspector('packages://inspector/inspectors/comps/label.js')
    export class CLabelOverwrite extends cc.Label {
        
        _updateNodeSize() {
            let pt:any = cc.Label.prototype;
            pt._updateNodeSize.call(this);
            this.node.emit("updateNodeSize");
        }
    
        onEnable() {
            let pt:any = cc.Label.prototype;
            pt.onEnable.call(this);
            this.node.emit("onEnable");
        }
    
        onDisable() {
            let pt:any = cc.Label.prototype;
            pt.onDisable.call(this);
            this.node.emit("onDisable");
        }
    }


    //LabelShadow
    import { CLabelOverwrite } from "./LabelOverwrite";

	const { ccclass, property, requireComponent } = cc._decorator;

	@ccclass
	@requireComponent(CLabelOverwrite)
	export class CLabelShadow extends cc.Component {
		@property({
			tooltip: "描边颜色"
		})
		private shadowColor: cc.Color = cc.color(0, 0, 0, 255);

		@property({
			tooltip: "偏移量"
		})
		private shadowOffset: cc.Vec2 = cc.p(0, -4);

		/** 阴影文字 */
		private shadeLabel: cc.Label = null;

		/** 设置阴影颜色 */
		setColor(color: cc.Color) {
			this.shadowColor = color;
			this.refreshShadow();
		}
		/** 设置阴影偏移量 */
		setOffset(offset: cc.Vec2) {
			this.shadowOffset = offset;
			this.refreshShadow();
		}

		/** 更新阴影 */
		private refreshShadow() {
			if (CC_JSB) {
				let label: any = this.node.getComponent(cc.Label);
				if (label) {
					label._sgNode.enableShadow( this.shadowColor, cc.size(this.shadowOffset.x,this.shadowOffset.y));
				}
			} else if (this.shadeLabel) {
				this.shadeLabel.node.color = this.shadowColor;
				this.shadeLabel.node.position = this.shadowOffset;
			}
		}

		onLoad() {
			this.node.on("updateNodeSize", () => {
				this.onLabelChange();
			});
			this.node.on("onEnable", () => {
				if (this.shadeLabel) {
					this.shadeLabel.node.active = true;
				}
			});
			this.node.on("onDisable", () => {
				if (this.shadeLabel) {
					this.shadeLabel.node.active = false;
				}
			});
		}

		onEnable() {
			let label: any = this.node.getComponent(cc.Label);
			if (label) {
				if (CC_JSB) {
					label._sgNode.enableShadow(this.shadowOffset, cc.size(this.shadowOffset.x,this.shadowOffset.y) );
				} else {
					if (this.shadeLabel) {
						this.shadeLabel.node.active = true;
					} else {
						let node = new cc.Node();
						this.shadeLabel = node.addComponent(cc.Label);
						this.shadeLabel.node.on("onDestroy", () => { this.destroy(); })
						this.node.addChild(node, -8, "LabelShadow");
						this.onLabelChange();
						this.refreshShadow();
					}
				}
			}
		}

		onDisable() {
			if (this.shadeLabel) {
				this.shadeLabel.node.active = false;
			}
		}

		/** 刷新阴影数据 */
		private onLabelChange() {
			if (CC_JSB) {
				return;
			}

			let label: any = this.node.getComponent(cc.Label);
			if (label && this.shadeLabel) {
				this.shadeLabel.string = label.string;
				this.shadeLabel.horizontalAlign = label.horizontalAlign;
				this.shadeLabel.verticalAlign = label.verticalAlign;
				this.shadeLabel.fontSize = label.fontSize;
				this.shadeLabel.fontFamily = label.fontFamily;
				this.shadeLabel.lineHeight = label.lineHeight;
				this.shadeLabel.overflow = label.overflow;
				this.shadeLabel.enableWrapText = label.enableWrapText;
				this.shadeLabel.font = label.font;
				this.shadeLabel.isSystemFontUsed = label.isSystemFontUsed;
			}
		}
	}
3赞
#5

感謝大神分享 :grinning:

#6

:smiley:厉害啊

#7

提供一个我写的叠影组件

cc.Class({
extends: cc.Component,

properties: {
    offPos: cc.p(0, -4),
    shadowColor: new cc.Color(255, 255, 255, 255),

    _shadowNode: {
        type: cc.Node,
        default: null,
    },
    _time: 0,
},

// LIFE-CYCLE CALLBACKS:

// onLoad () {},

start () {
    if (this._shadowNode) {
        return;
    }
    this._shadowNode = new cc.Node();
    
    
    this._shadowNode = cc.instantiate(this.node);
    this._shadowNode.color = this.shadowColor;
    this._shadowNode.setPosition(cc.p(this.node.x+this.offPos.x, this.node.y+this.offPos.y));

    this.node.parent.addChild(this._shadowNode, this._shadowNode.getLocalZOrder()-1);
    
},

update (dt) {
    this._time += dt;
    this.node.getComponent(cc.Label).string = this._time;
},

});

2赞
#8

楼主的 如果node的 瞄点改变 就有问题哦

#10

/** 刷新阴影数据 */
onLabelChange() {
if (CC_JSB) {
return;
}

    let label = this.node.getComponent(cc.Label);
    if (label && this.shadeLabel) {
        this.shadeLabel.string = label.string;
        this.shadeLabel.horizontalAlign = label.horizontalAlign;
        this.shadeLabel.verticalAlign = label.verticalAlign;
        this.shadeLabel.fontSize = label.fontSize;
        this.shadeLabel.fontFamily = label.fontFamily;
        this.shadeLabel.lineHeight = label.lineHeight;
        this.shadeLabel.overflow = label.overflow;
        this.shadeLabel.enableWrapText = label.enableWrapText;
        this.shadeLabel.font = label.font;
        this.shadeLabel.isSystemFontUsed = label.isSystemFontUsed;
        **this.shadeLabel.node.anchorX = this.node.anchorX;**

** this.shadeLabel.node.anchorY = this.node.anchorY;**
}
},

#11

感谢，用上了！