2dx设置字体阴影 cocos_cocos2dx 文字阴影 - CSDN
  • cocoscreator文字阴影

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

     

    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

    展开全文
  • localexp_label = “创建字体”:enableOutline(cc.c4b(0,0,0,255), 1) --描边 exp_label:setColor(cc.c3b(255,255,255)) exp_label:enableShado...
    localexp_label = “创建字体”:enableOutline(cc.c4b(0,0,0,255), 1)   --描边
                                        exp_label:setColor(cc.c3b(255,255,255))
                                        exp_label:enableShadow(cc.c3b(0,0,0), cc.size(0,-2), 1)  --阴影
    字母数字符号可使用
    展开全文
  • 今天 KUOKUO 就教大家用一句代码来实现字体阴影。 正文 先看效果 一下子就有立体感了是吧!其实很简单,看步骤。 新建标签 在场景中新建一个标签,我们可以看到右下角就是默认的材质。那么要想自定义特殊效果很...

    摘要

    CocosCreator 的 2.2.0 版本正式上线,一大亮点就是 Effect 语法更加方便理解了。今天 KUOKUO 就教大家用一句代码来实现字体的阴影。

    正文

    先看效果


    一下子就有立体感了是吧!其实很简单,看步骤。

    新建标签

    在场景中新建一个标签,我们可以看到右下角就是默认的材质。那么要想自定义特殊效果很显然得新建自己的材质。

    材质与Effect

    我们在文件层级中新建 Effect 文件,再新建一个材质文件。因为是由 Effect 决定材质,所以我们得在材质上选择好,如图。
    最后记得点‘应用’。

    拖入。

    阴影如何产生

    我们已经看到过效果了,就是在字体的右下方来产生一个半透明的本身即可。
    那么我们先说两个知识点:vs 顶点着色器,fs 像素着色器。
    举个例子来理解,一个三角形有三个顶点,vs 处理三次。而这个三角形内部有 100 个像素,fs 处理 100 次。
    白话:一个管顶点的,一个管图形像素的。
    那么我们新建一个 Effect 后默认是有一个无变化的 vs 与 fs 的,就是没处理或者说在原有的基础上乘以一(单位矩阵)。
    来了!

    我们看第 70 行,它的输出为本体图像。那么我们在 75 行打入代码,对其位置做偏移后乘以 0.5 再累加。

    o += texture(texture, v_uv0 + vec2(-0.02, -0.05)) * 0.5;
    

    多尝试

    效果出来了,通过 KUOKUO 这么一讲,有没有让你有所感悟呢?我只是改了微微的一小部分,上边还有 vs 段等着你来探索!还等什么?打开 CocosCreator 2.2 造出个星辰大海!!!

    结语

    O(∩_∩)O~~

    微信公众号


    [外链图片转存中…(img-BdbSEGtc-1571649171833)]

    展开全文
  • cocos creator 文字描边效果

    千次阅读 2019-06-16 02:17:45
    2019独角兽企业重金招聘Python工程师标准>>> ...

    公司做的微信小游戏,里面涉及文字描边的效果,找了一下,发现官方自带了一个LabelOutline脚本,只要在Label的节点上,挂上LabelOutline脚本,设置下文字和描边的颜色,描边的宽度,就OK了

    转载于:https://my.oschina.net/u/2396236/blog/1817256

    展开全文
  • cocos2d-x用shader来实现阴影

    万次阅读 2014-12-05 19:11:35
    #### cocos2d-X在Sprite上使用shader ```cpp auto sprite = Sprite::create("test2.png"); sprite->setPosition(origin.x + visibleSize.width/2, origin.y + visibleSize.height /2 ); auto shader_program
  • cocos2dx 富文本XML格式说明

    千次阅读 2017-10-13 11:39:12
    font 字体 face必须是正确的,才能对字体操作正常 b 加粗 i 斜体文本 del 删除线 u 下划线 small 字体缩小 big 字体放大 img 添加图片 a 添加url连接 br 换行 outl
  • RichText控件应该具备以下基本功能:1、多样化的文本显示功能,包括字体、颜色、字号的设置2、能显示图片以及一些特殊元素。3、应该支持图片文字的超链接功能。4、能够支持滚动的效果。5、能够有很方便的换行功能...
  • Label有三个样式设置:分别还是shadow(阴影),outline(外边),glow(发光)。 我的一点小建议是对于一些不需要点击的label可以单独设置shadow或glow,但是对于需要点击的label而言,将字设置为白色,然后使用outline...
  • cocos2d-x 3.0 为字体添加黑边和阴影

    千次阅读 2014-08-18 09:50:27
    zhi Size shadeOffSet(5.0,5.0);... //定义字体 FontDefinition shadeTextDef; shadeTextDef._fontSize = 100; shadeTextDef._fontName = std::string("楷体"); shadeTextDef._fontFillColor
  • 2:当有打断批处理的节点时,可以通过设置该节点透明度或者active属性进行隐藏,此时该节点就不会参加渲染,从而不会影响到连续的批处理 3:减少使用系统字,尽量用bmf字体替换 4:看不到的节点设置opacity透明度为0...
  • Cocos2d-x 3.0beta New Label新特性,描边,阴影,发光
  • cocos2d-lua 手游之RichText的改写

    千次阅读 2016-08-19 20:23:52
    cocos2d-lua 手游之RichText 的改写(lua版) RichText控件应该具备以下基本功能: 1、多样化的文本显示功能,包括字体、颜色、字号的设置2、能显示图片以及一些特殊元素。 3、应该支持图片文字的超链接功能。...
  • Cocos2d-x中要显示文字就需要用到Label控件。在3.x版本的Cocos2d中,舍弃了之前版本所使用的LabelTTF、LabelAtlas、LabelBMFont 3个用于显示文字的类,而使用一个新类Label取代。可想而知,Label实际上就是对之前3...
  • http://blog.csdn.net/song_hui_xiang/article/details/17375279
  • 本节书摘来异步社区《Cocos2d 跨平台游戏开发指南(第2版)》一书中的第2章,第2.1节,作者: 【印度】Siddharth Shekar(谢卡)译者: 武传海 责编: 胡俊英,更多章节内容可以访问云栖社区“异步社区”公众号查看...
  • 经常应为api的记不住导致浪费时间,有的时候发现了好人整理的文档就很方便了,希望更多的人更加的开发方便1:(附加:在使用ccui进行主要开发时文本内容自动换行需要使用cc.LabelTTF而不能使用ccui.Text,ccui.Text...
  • cocos2d-x游戏开发】Label标签的使用

    千次阅读 2015-05-05 16:25:10
    在3.x中重新整合了2.x中的LabelTTF、LabelAltas、LabelBMFont三个字体类,重新生成了全新的Label标签字体类。另外在3.x中,新版本的Label支持四种方式的标签创建。并新增了阴影Shadow、轮廓Outline、发光Glow效果的...
  • cocos2dx 利用CCLabelTTF设置字的水平间距与垂直间距  在项目中对于文字的显示要求会有很多种,比如加描边、加阴影、个别文字加颜色、字的行间距与列间距等等一些。。最近在看cocos2d-x源码时发现...
1 2 3 4 5 ... 20
收藏数 896
精华内容 358
热门标签
关键字:

2dx设置字体阴影 cocos