cocos2d-x Label描边问题以及解决办法

这里以quick_cocos2dx_3.3为例说明一下cocos2dx的Label描边问题以及个人想到的一个不是很完美的解决办法。

先上一段程序：

    local label = display.newTTFLabel({ text="你好",

    font="arial",--系统自带的字体库

    size=120,

    color=cc.c3b(255,0,0), --红色颜色

    align=cc.TEXT_ALIGNMENT_CENTER, --水平对齐方式

    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,--垂直对齐方式

    })

    label:setAnchorPoint(cc.p(0,0)) --设置锚点

    label:setPosition(200+2,200+2) --设置摆放位置

    label:addTo(self) --添加到显示的场景中

运行结果如下图所示：



好的，接着给这个Label的文字进行描边。在上面那段程序的基础上进行修改，程序如下：

 local label = display.newTTFLabel({ text="你好",
    font="arial",--系统自带的字体库
    size=120,
    color=cc.c3b(255,0,0), --红色颜色
    align=cc.TEXT_ALIGNMENT_CENTER, --水平对齐方式
    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,--垂直对齐方式
    })
    label:setAnchorPoint(cc.p(0,0)) --设置锚点
    label:setPosition(200+2,200+2) --设置摆放位置

    label:enableOutline(cc.c4b(255,255,255,255), 2) --描边颜色为白色，描边宽度为2pix。
    label:addTo(self) --添加到显示的场景中

   运行程序效果如下：



看不到描边效果，并且说只支持IOS或者Android移动端。其实就是系统自带的字库在PC端不支持描边显示效果。那好办啊，就换一个字库。网上下一个ttf格式的字库就行了。修改程序如下：

 local label = display.newTTFLabel({ text="你好",

    font="arial",--系统自带的字体库

    size=120,

    color=cc.c3b(255,0,0), --红色颜色

    align=cc.TEXT_ALIGNMENT_CENTER, --水平对齐方式

    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,--垂直对齐方式

    })

    label:setAnchorPoint(cc.p(0,0)) --设置锚点

    label:setPosition(200+2,200+2) --设置摆放位置

    label:enableOutline(cc.c4b(255,255,255,255), 2) --描边颜色为白色，描边宽度为2pix。

    label:addTo(self) --添加到显示的场景中

运行程序效果如下：



怎么感觉没看到描边？

其实已经加上了描边了。我们改变一下思路。设置字体颜色为白色，描边颜色为红色，看一下会有什么效果：

local label = display.newTTFLabel({ text="你好",

    font="arial",--系统自带的字体库

    size=120,

    color=cc.c3b(255,255,255), --白色颜色

    align=cc.TEXT_ALIGNMENT_CENTER, --水平对齐方式

    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,--垂直对齐方式

    })

    label:setAnchorPoint(cc.p(0,0)) --设置锚点

    label:setPosition(200+2,200+2) --设置摆放位置
    label:enableOutline(cc.c4b(255,0,0,255), 2) --描边颜色为红色，描边宽度为2pix。

    label:addTo(self) --添加到显示的场景中
运行效果如下：



可以看到在白色字体的周围能看到红色的描边。

其实我们可以把描边这个过程看成是一个光学的过程。在白色的字周围加上红色的描边可以看成是红光通过白色的玻璃出射后显示的红光。

所以，我们一开始想要在红色的字周围加上白色的描边就看不到，因为红色的玻璃只能透过红光，白光经过红色的玻璃后只剩下红光，不可能产生白色的描边。

读者也可以尝试着在红色的字周围加上绿色或者蓝色的描边，效果就是看不到绿色或者蓝色的描边。

但是在白色的字周围加上任何颜色的描边都是可以看到的。基本原理就是上面所说的。

好了，那项目中确实有需要在红色的字周围加上白色的描边怎么办呢？这里介绍一个可能不是很完美的解决办法。那就是在这个红字Label的下面放四个白色字体相通尺寸的Label。这四个Label都以红字Label为中心往四周偏移一点点距离。

程序如下：（Label2，Label3,Label4,Label5以Label1为中心向四周偏移2pix）

    local label2 = display.newTTFLabel({ text="你好",

    font="fonts/hua_kang_yuan.ttf",

    size=120,

    color=cc.c3b(255,255,255),

    align=cc.TEXT_ALIGNMENT_CENTER,

    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,

     })

    label2:setAnchorPoint(cc.p(0,0))

    label2:setPosition(200-2,200-2)

    label2:addTo(self)

    local label3 = display.newTTFLabel({ text="你好",

    font="fonts/hua_kang_yuan.ttf",

    size=120,

    color=cc.c3b(255,255,255),

    align=cc.TEXT_ALIGNMENT_CENTER,

    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,

    })

    label3:setAnchorPoint(cc.p(0,0))

    label3:setPosition(200+2,200+2)

    label3:addTo(self)

    local label4 = display.newTTFLabel({ text="你好",

    font="fonts/hua_kang_yuan.ttf",

    size=120,

    color=cc.c3b(255,255,255),

    align=cc.TEXT_ALIGNMENT_CENTER,

    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,

    })

    label4:setAnchorPoint(cc.p(0,0))

    label4:setPosition(200-2,200+2)

    label4:addTo(self)

    local label5 = display.newTTFLabel({ text="你好",

    font="fonts/hua_kang_yuan.ttf",

    size=120,

    color=cc.c3b(255,255,255),

    align=cc.TEXT_ALIGNMENT_CENTER,

    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,

    })

    label5:setAnchorPoint(cc.p(0,0))

    label5:setPosition(200+2,200-2)

    label5:addTo(self)

    local label1 = display.newTTFLabel({ text="你好",

    font="fonts/hua_kang_yuan.ttf",

    size=120,

    co
bbc0
lor=cc.c3b(255,0,0),

    align=cc.TEXT_ALIGNMENT_CENTER,

    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,

    })

    label1:setAnchorPoint(cc.p(0,0))

    label1:setPosition(200,200)

    --label1:enableOutline(cc.c4b(255,0,0,255), 2)

    label1:addTo(self)

效果如图：



附：local label = display.newTTFLabel({ text="你好",

    font="fonts/hua_kang_yuan.ttf",

    size=120,

   -- color=cc.c3b(255,0,0), --红色颜色

    align=cc.TEXT_ALIGNMENT_CENTER, --水平对齐方式

    valign = cc.VERTICAL_TEXT_ALIGNMENT_TOP,--垂直对齐方式

    })

    label:setTextColor(cc.c4b(255,0,0,255))

    label:setAnchorPoint(cc.p(0,0)) --设置锚点

    label:setPosition(200+2,200+2) --设置摆放位置

    label:enableOutline(cc.c4b(255,255,255,255), 4) --描边颜色为白色，描边宽度为2pix。

    label:addTo(self) --添加到显示的场景中

今天刚发现，原来这么写就好了。重要的是设置TextColor，而不是color。