分析LabelShadow组件无效的原因

LabelShadow组件在原生平台无效，原因是LabelShadow组件只在Web平台上实现了该功能，在原生平台上没有实现该功能。

简单分析一下源码(文件:engine/cocos2d/core/render/utils/label/ttf.js)。游戏引擎是如何使用LabelShadow组件进行描边的。

通关观察ttf.js源码中 _updateTexture 和 _setupShadow两个函数。分析出描边所需要的四个参数：

• shadowColor: 描边的样式(RGBA)
• shadowBlur: 描边模糊的宽度
• shadowOffsetX: 描边的X轴的偏移量
• shadowOffsetY：描边的Y轴的偏移量

_updateTexture() {
    ......
    ......
    // only one set shadow and outline
    if (_shadowComp) {
        this._setupShadow();
    }
    ......
    ......
}

_setupShadow () {
    _context.shadowColor = `rgba(${_shadowColor.r}, ${_shadowColor.g}, ${_shadowColor.b}, ${_shadowColor.a / 255})`;
    _context.shadowBlur = _shadowComp.blur;
    _context.shadowOffsetX = _shadowComp.offset.x;
    _context.shadowOffsetY = -_shadowComp.offset.y;
}

如何解决LabelShadow组件在原生平台(Android)无效

1. 修改C++层相关代码

1.找到 CanvasRenderingContext2D类并进行简单的修改(文件目录在 cocos/platform/CCCanvasRenderingContext2D.h)。添加上面分析出来的变量。

//
class CC_DLL CanvasRenderingContext2D {
    // TODO lxx 阴影 begin
    void set_shadowColor(const std::string& shadowColor);
    void set_shadowBlur(float shadowBlur);
    void set_shadowOffsetX(float shadowOffsetX);
    void set_shadowOffsetY(float shadowOffsetY);
    // TODO 虣虣 阴影 end

    // TODO 虣虣 阴影 begin
    std::string  _shadowColor = "#000";
    float _shadowBlur = 1.0f;
    float _shadowOffsetX = 1.0f;
    float _shadowOffsetY = 1.0f;
    // TODO 虣虣 阴影 end
}

2.在相关android平台下修改这些变量的读写属性，以及调用Java层代码，文件所在目录(cocos/platform/android/CCCanvasRenderingContext2D-android.cpp)

// TODO 虣虣 阴影 begin
void setShadowColor(float r, float g, float b, float a)
{
    JniHelper::callObjectVoidMethod(_obj, JCLS_CANVASIMPL, "setShadowColor", r, g, b, a);
}
void setShadowBlur(float shadowBlur)
{
    JniHelper::callObjectVoidMethod(_obj, JCLS_CANVASIMPL, "setShadowBlur", shadowBlur);
}
void setShadowOffsetX(float shadowOffsetX)
{
    JniHelper::callObjectVoidMethod(_obj, JCLS_CANVASIMPL, "setShadowOffsetX", shadowOffsetX);
}
void setShadowOffsetY(float shadowOffsetY)
{
    JniHelper::callObjectVoidMethod(_obj, JCLS_CANVASIMPL, "setShadowOffsetY", shadowOffsetY);
}
// TODO 虣虣 阴影 end

// TODO 虣虣 阴影 begin
void CanvasRenderingContext2D::set_shadowColor(const std::string& shadowColor) {
    CSSColorParser::Color color = CSSColorParser::parse(shadowColor);
    _impl->setShadowColor(color.r/255.0f, color.g/255.0f, color.b/255.0f, color.a);
}

void CanvasRenderingContext2D::set_shadowBlur(float shadowBlur) {
    _impl->setShadowBlur(shadowBlur);
}

void CanvasRenderingContext2D::set_shadowOffsetX(float shadowOffsetX) {
    _impl->setShadowOffsetX(shadowOffsetX);
}

void CanvasRenderingContext2D::set_shadowOffsetY(float shadowOffsetY) {
    _impl->setShadowOffsetX(shadowOffsetY);
}
// TODO 虣虣 阴影 end

2. 修改JAVA层相关代码

修改 cocos/platform/android/java/src/org/cocos2dx/lib/CanvasRenderingContext2DImpl.java 文件，修改如下

// cocos/platform/android/java/src/org/cocos2dx/lib/CanvasRenderingContext2DImpl.java
public class CanvasRenderingContext2DImpl {
    // TODO 虣虣 阴影 begin
    private int mShadowStyleR = 0;
    private int mShadowStyleG = 0;
    private int mShadowStyleB = 0;
    private int mShadowStyleA = 0;
    private float mShadowBlur = 0;
    private float mShadowOffsetX = 0;
    private float mShadowOffsetY = 0;
    // TODO 虣虣 阴影 end

    // TODO 虣虣 阴影 begin
    // 设置阴影颜色
    private void setShadowColor(float r, float g, float b, float a) {
        // Log.d(TAG, "setShadowStyle: " + r + ", " + g + ", " + b + ", " + a);
        mShadowStyleR = (int)(r * 255.0f);
        mShadowStyleG = (int)(g * 255.0f);
        mShadowStyleB = (int)(b * 255.0f);
        mShadowStyleA = (int)(a * 255.0f);
    }
    // 设置描边宽度
    private void setShadowBlur(float shadowBlur) {
        mShadowBlur = shadowBlur;
    }
    // 设置描边的偏移X
    private void setShadowOffsetX(float shadowOffsetX) {
        mShadowOffsetX = shadowOffsetX;
    }
    // 设置描边的偏移Y
    private void setShadowOffsetY(float shadowOffsetY) {
        mShadowOffsetY = shadowOffsetY;
    }
    // TODO 虣虣 阴影 end

    private void fillText(String text, float x, float y, float maxWidth) {
//        Log.d(TAG, "this: " + this + ", fillText: " + text + ", " + x + ", " + y + ", " + ", " + maxWidth);
        createTextPaintIfNeeded();
        mTextPaint.setARGB(mFillStyleA, mFillStyleR, mFillStyleG, mFillStyleB);
        mTextPaint.setStyle(Paint.Style.FILL);

        // TODO 虣虣 阴影 begin
        int color = Color.argb(mShadowStyleA, mShadowStyleR, mShadowStyleG, mShadowStyleB);
        mTextPaint.setShadowLayer(mShadowBlur, mShadowOffsetX, mShadowOffsetX, color);
        // TODO 虣虣 阴影 end

        scaleX(mTextPaint, text, maxWidth);
        Point pt = convertDrawPoint(new Point(x, y), text);
        mCanvas.drawText(text, pt.x, pt.y, mTextPaint);
    }

}

3. 注册相关属性给JS层调用

此处为了方便些文章，我是手动写到文件里面的(相关文件 cocos/scripting/jsb-bindings/manual/jsb-cocos2dx-manual.cpp)，这里可以使用自动绑定相关功能。

// TODO 虣虣 阴影 begin
BIND_PROP_WITH_TYPE__CONV_FUNC__RETURN(CanvasRenderingContext2D, shadowColor, std::string, seval_to_std_string, setString)
BIND_PROP_WITH_TYPE__CONV_FUNC__RETURN(CanvasRenderingContext2D, shadowBlur, float, seval_to_float, setFloat)
BIND_PROP_WITH_TYPE__CONV_FUNC__RETURN(CanvasRenderingContext2D, shadowOffsetX, float, seval_to_float, setFloat)
BIND_PROP_WITH_TYPE__CONV_FUNC__RETURN(CanvasRenderingContext2D, shadowOffsetY, float, seval_to_float, setFloat)
// TODO 虣虣 阴影 end

// TODO 虣虣 阴影 begin
_SE_DEFINE_PROP(CanvasRenderingContext2D, shadowColor)
_SE_DEFINE_PROP(CanvasRenderingContext2D, shadowBlur)
_SE_DEFINE_PROP(CanvasRenderingContext2D, shadowOffsetX)
_SE_DEFINE_PROP(CanvasRenderingContext2D, shadowOffsetY)
// TODO 虣虣 阴影 end

如何解决LabelShadow组件在原生平台(IOS)无效

前面已经修改过C++部分的代码，这里不再过多的叙说,简单的说一下IOS需要修改的内容。IOS需要修改的文件在 cocos/platform/apple/CCCanvasRenderingContext2D-apple.mm文件中。

• 设置相关字体阴影属性

// CCCanvasRenderingContext2D-apple.mm
@interface CanvasRenderingContext2DImpl : NSObject {
....
    // TODO 虣虣 begin 文字阴影
    // 阴影颜色
    cocos2d::Color4F _shadowStyle;
    // 阴影模糊的宽度
    float _shadowBlur;
    // 阴影X偏移量
    float _shadowOffsetX;
    // 阴影Y偏移量
    float _shadowOffsetY;
    // TODO 虣虣 end
....
}
....
@property (nonatomic, assign) float shadowBlur;
@property (nonatomic, assign) float shadowOffsetX;
@property (nonatomic, assign) float shadowOffsetY;

@synthesize shadowBlur = _shadowBlur;
@synthesize shadowOffsetX = _shadowOffsetX;
@synthesize shadowOffsetY = _shadowOffsetY;

....

• 设置相关字体阴影的属性，共JS层调用

// CCCanvasRenderingContext2D-apple.mm
// TODO 虣虣 begin 设置相关属性,共JS调用。
// 设置字体阴影相关属性(颜色，粗细，偏移)

-(void) setShadowStyleWithRed:(CGFloat) r green:(CGFloat) g blue:(CGFloat) b
    alpha:(CGFloat) a {
    _shadowStyle.r = r;
    _shadowStyle.g = g;
    _shadowStyle.b = b;
    _shadowStyle.a = a;
}

void CanvasRenderingContext2D::set_shadowColor(const std::string &shadowColor) {
    CSSColorParser::Color color = CSSColorParser::parse(shadowColor);
    [_impl setShadowStyleWithRed:color.r/255.0f green:color.g/255.0f blue:color.b/255.0f alpha:color.a];
}

void CanvasRenderingContext2D::set_shadowBlur(float shadowBlur) {
    _shadowBlur = shadowBlur;
    _impl.shadowBlur = _shadowBlur;
}

void CanvasRenderingContext2D::set_shadowOffsetX(float shadowOffsetX) {
    _shadowOffsetX = shadowOffsetX;
    _impl.shadowOffsetX = shadowOffsetX;
}

void CanvasRenderingContext2D::set_shadowOffsetY(float shadowOffsetY) {
    _shadowOffsetY = shadowOffsetY;
    _impl.shadowOffsetY = _shadowOffsetY;
}
// TODO 虣虣 end

• 在fillText函数增加相关代码

-(void) fillText:(NSString*) text x:(CGFloat) x y:(CGFloat) y maxWidth:(CGFloat) maxWidth {
    ....

    // text color
    CGContextSetRGBFillColor(_context, _fillStyle.r, _fillStyle.g, _fillStyle.b, _fillStyle.a);
    CGContextSetShouldSubpixelQuantizeFonts(_context, false);
    CGContextBeginTransparencyLayerWithRect(_context, CGRectMake(0, 0, _width, _height), nullptr);
    CGContextSetTextDrawingMode(_context, kCGTextFill);

    // TODO 虣虣 begin
    NSColor* color = [NSColor colorWithRed:_shadowStyle.r green:_shadowStyle.g blue:_shadowStyle.b alpha:_shadowStyle.a];
    CGContextSetShadowWithColor(_context, CGSizeMake(_shadowOffsetX, _shadowOffsetY), _shadowBlur, color.CGColor);
    // TODO 虣虣 end

    ....

    CGContextEndTransparencyLayer(_context);

    [self restoreContext];
}