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

cocoscreator文字阴影相关推荐

CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
CSS中的盒子阴影和文字阴影
去掉li前面的小圆点: list-style: none; 圆角边框:盒子编程圆角. 语法格式: border-radius: length; 写法: border-radius:50%;//变成圆形 ...
html给文字添加阴影效果,text-shadow css文字阴影_字体投影属性样式
text-shadow为css文字阴影.css字体投影与字体阴影含胡效用效果的CSS属性单词 css text-shadow阴影功效一.text-shadow先容 text-shadow是CSS格局 ...
文字阴影-CSS Text-Shadow
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
酷炫，用Html5/CSS实现文字阴影
前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...
css3中animation动画、浏览器私有前缀、文字阴影
animation动画: 可以设置多个节点来控制一个或一组动画,动画可以实现更多变化,更多控制,连续自动播放等效果.动画的使用分两步:1.定义动画 2.调用动画(调用必须写调用名称和持续时间),其属 ...
HTML连载70-相片墙、盒子阴影和文字阴影
一. 制作一个相片墙二. <!DOCTYPE html><html lang="en"><head><meta charset=&quo ...
网页边框和网页文字阴影
CSS: <style type="text/css"> /* 为 DIV 加阴影 */ .out { position:relative; background:#b ...
Android TextView跑马灯效果与设置文字阴影
TextView跑马灯效果的实现自定义一个TextView public class MusicDesText extends TextView {public MusicDesText(Cont ...

cocoscreator文字阴影

cocoscreator文字阴影相关推荐

最新文章

热门文章