• 近日一直被3.0的字体描边所困扰,在安卓手机下字体没问题,挺好看,但是在iphone手机上显示特别不清晰,一直很怪异的感觉,尤其是白色的label,后来我同事兼师父将底层改了下,貌似cocos2dx3.2及以后就不存在这个...

    </pre></h4><p><pre name="code" class="cpp">

        近日,一直被3.0的字体描边所困扰,在安卓手机下字体没问题,挺好看,但是在iphone手机上显示特别不清晰,一直很怪异的感觉,尤其是白色的label,后来我的同事兼师父将底层改了下(3.2之后的版本貌似就不存在这个问题了)。

           方法:找到项目/cocos2d/cocos/2d/platform目录下的       CCDevice.h文件   的静态gettexturedatafortext方法改成这个(即加一个参数)

    static Data getTextureDataForText(const char * text, const FontDefinition& textDefinition, TextAlign align, int &width, int &height, bool& hasPremultipliedAlpha);
    ,然后把相应平台的这个函数分别增一个参数(因为只有ios好像有这个问题,所以其他的平台暂时不用改,但是需要在功能函数添加一个实参):

    ios/CCDevice.mm

    Data Device::getTextureDataForText(const char * text, const FontDefinition& textDefinition, TextAlign align, int &width, int &height, bool& hasPremultipliedAlpha)
    {
        Data ret;
        
        do {
            tImageInfo info = {0};
            info.width                  = textDefinition._dimensions.width;
            info.height                 = textDefinition._dimensions.height;
            info.hasShadow              = textDefinition._shadow._shadowEnabled;
            info.shadowOffset.width     = textDefinition._shadow._shadowOffset.width;
            info.shadowOffset.height    = textDefinition._shadow._shadowOffset.height;
            info.shadowBlur             = textDefinition._shadow._shadowBlur;
            info.shadowOpacity          = textDefinition._shadow._shadowOpacity;
            info.hasStroke              = textDefinition._stroke._strokeEnabled;
            info.strokeColorR           = textDefinition._stroke._strokeColor.r / 255.0f;
            info.strokeColorG           = textDefinition._stroke._strokeColor.g / 255.0f;
            info.strokeColorB           = textDefinition._stroke._strokeColor.b / 255.0f;
            info.strokeSize             = textDefinition._stroke._strokeSize;
            info.tintColorR             = textDefinition._fontFillColor.r / 255.0f;
            info.tintColorG             = textDefinition._fontFillColor.g / 255.0f;
            info.tintColorB             = textDefinition._fontFillColor.b / 255.0f;
            
            if (! _initWithString(text, align, textDefinition._fontName.c_str(), textDefinition._fontSize, &info))
            {
                break;
            }
            height = (short)info.height;
            width = (short)info.width;
            ret.fastSet(info.data,width * height * 4);
            hasPremultipliedAlpha = true;
        } while (0);
        
        return ret;
    }

    win32/CCDevice.cpp

    Data Device::getTextureDataForText(const char * text, const FontDefinition& textDefinition, TextAlign align, int &width, int &height, bool& hasPremultipliedAlpha)
    {
        Data ret;
        do 
        {
            BitmapDC& dc = sharedBitmapDC();
    
            if (! dc.setFont(textDefinition._fontName.c_str(), textDefinition._fontSize))
            {
                log("Can't found font(%s), use system default", textDefinition._fontName.c_str());
            }
    
            // draw text
            SIZE size = {textDefinition._dimensions.width, textDefinition._dimensions.height};
            CC_BREAK_IF(! dc.drawText(text, size, align));
    
            int dataLen = size.cx * size.cy * 4;
            unsigned char* dataBuf = (unsigned char*)malloc(sizeof(unsigned char) * dataLen);
            CC_BREAK_IF(! dataBuf);
    
            struct
            {
                BITMAPINFOHEADER bmiHeader;
                int mask[4];
            } bi = {0};
            bi.bmiHeader.biSize = sizeof(bi.bmiHeader);
            CC_BREAK_IF(! GetDIBits(dc.getDC(), dc.getBitmap(), 0, 0, 
                NULL, (LPBITMAPINFO)&bi, DIB_RGB_COLORS));
    
            width    = (short)size.cx;
            height   = (short)size.cy;
    
            // copy pixed data
            bi.bmiHeader.biHeight = (bi.bmiHeader.biHeight > 0)
                ? - bi.bmiHeader.biHeight : bi.bmiHeader.biHeight;
            GetDIBits(dc.getDC(), dc.getBitmap(), 0, height, dataBuf, 
                (LPBITMAPINFO)&bi, DIB_RGB_COLORS);
    
            // change pixel's alpha value to 255, when it's RGB != 0
            COLORREF * pPixel = NULL;
            for (int y = 0; y < height; ++y)
            {
                pPixel = (COLORREF *)dataBuf + y * width;
                for (int x = 0; x < width; ++x)
                {
                    COLORREF& clr = *pPixel;
                    clr = (0xffffff | (GetRValue(clr) << 24));
                    ++pPixel;
                }
            }
    
            ret.fastSet(dataBuf,dataLen);
        } while (0);
        return ret;
    }

    最后,将CCTexture2D.cpp的initWithString(const char *text, const FontDefinition& textDefinition)方法改成:

    bool Texture2D::initWithString(const char *text, const FontDefinition& textDefinition)
    {
        if(!text || 0 == strlen(text))
        {
            return false;
        }
        
    #if CC_ENABLE_CACHE_TEXTURE_DATA
        // cache the texture data
        VolatileTextureMgr::addStringTexture(this, text, textDefinition);
    #endif
        
        bool ret = false;
        Device::TextAlign align;
        
        if (TextVAlignment::TOP == textDefinition._vertAlignment)
        {
            align = (TextHAlignment::CENTER == textDefinition._alignment) ? Device::TextAlign::TOP
            : (TextHAlignment::LEFT == textDefinition._alignment) ? Device::TextAlign::TOP_LEFT : Device::TextAlign::TOP_RIGHT;
        }
        else if (TextVAlignment::CENTER == textDefinition._vertAlignment)
        {
            align = (TextHAlignment::CENTER == textDefinition._alignment) ? Device::TextAlign::CENTER
            : (TextHAlignment::LEFT == textDefinition._alignment) ? Device::TextAlign::LEFT : Device::TextAlign::RIGHT;
        }
        else if (TextVAlignment::BOTTOM == textDefinition._vertAlignment)
        {
            align = (TextHAlignment::CENTER == textDefinition._alignment) ? Device::TextAlign::BOTTOM
            : (TextHAlignment::LEFT == textDefinition._alignment) ? Device::TextAlign::BOTTOM_LEFT : Device::TextAlign::BOTTOM_RIGHT;
        }
        else
        {
            CCASSERT(false, "Not supported alignment format!");
            return false;
        }
        
    #if (CC_TARGET_PLATFORM != CC_PLATFORM_ANDROID) && (CC_TARGET_PLATFORM != CC_PLATFORM_IOS)
        CCASSERT(textDefinition._stroke._strokeEnabled == false, "Currently stroke only supported on iOS and Android!");
    #endif
        
        PixelFormat      pixelFormat = g_defaultAlphaPixelFormat;
        unsigned char* outTempData = nullptr;
        ssize_t outTempDataLen = 0;
        
        int imageWidth;
        int imageHeight;
        auto textDef = textDefinition;
        auto contentScaleFactor = CC_CONTENT_SCALE_FACTOR();
        textDef._fontSize *= contentScaleFactor;
        textDef._dimensions.width *= contentScaleFactor;
        textDef._dimensions.height *= contentScaleFactor;
        textDef._stroke._strokeSize *= contentScaleFactor;
        textDef._shadow._shadowEnabled = false;
        
        bool hasPremultipliedAlpha;
        Data outData = Device::getTextureDataForText(text, textDef, align, imageWidth, imageHeight, hasPremultipliedAlpha);
        if(outData.isNull())
        {
            return false;
        }
        
        Size  imageSize = Size((float)imageWidth, (float)imageHeight);
        pixelFormat = convertDataToFormat(outData.getBytes(), imageWidth*imageHeight*4, PixelFormat::RGBA8888, pixelFormat, &outTempData, &outTempDataLen);
        
        ret = initWithData(outTempData, outTempDataLen, pixelFormat, imageWidth, imageHeight, imageSize);
        
        if (outTempData != nullptr && outTempData != outData.getBytes())
        {
            free(outTempData);
        }
        _hasPremultipliedAlpha = hasPremultipliedAlpha;
        
        return ret;
    }


    展开全文
  • cocos中,设置字体描边可以用enableOutline(cc.c4b(30, 10, 0, 255), 2)函数设置,第一个参数是字体颜色,第二个参数是描边轮廓大小,单位是2个像素, 我在使用过程中遇到了一个坑,就是父节点使用九宫格的时候,...

    在cocos中,设置字体描边可以用enableOutline(cc.c4b(30, 10, 0, 255), 2)函数设置,第一个参数是字体颜色,第二个参数是描边轮廓大小,单位是2个像素,

    我在使用过程中遇到了一个坑,就是父节点使用九宫格的时候,字体描边会缺失,这个是cocos底层的bug。

     

    使用九宫格的效果:

     

    正常效果:

     

    转载于:https://www.cnblogs.com/HemJohn/p/5580177.html

    展开全文
  • 从论坛上面看到的,没试过效果,先收着。http://stackoverflow.com/questions/12469990/simple-glsl-convolution-shader-is-atrociously-slowI've done this exact thing myself, and I see several things that ...

    从论坛上面看到的,没试过效果,先收着。

    http://stackoverflow.com/questions/12469990/simple-glsl-convolution-shader-is-atrociously-slow

    I've done this exact thing myself, and I see several things that could be optimized here.

    First off, I'd remove the enableTexture conditional and instead split your shader into two programs, one for the true state of this and one for false. Conditionals are very expensive in iOS fragment shaders, particularly ones that have texture reads within them.

    Second, you have nine dependent texture reads here. These are texture reads where the texture coordinates are calculated within the fragment shader. Dependent texture reads are very expensive on the PowerVR GPUs within iOS devices, because they prevent that hardware from optimizing texture reads using caching, etc. Because you are sampling from a fixed offset for the 8 surrounding pixels and one central one, these calculations should be moved up into the vertex shader. This also means that these calculations won't have to be performed for each pixel, just once for each vertex and then hardware interpolation will handle the rest.

    Third, for() loops haven't been handled all that well by the iOS shader compiler to date, so I tend to avoid those where I can.

    As I mentioned, I've done convolution shaders like this in my open source iOS GPUImage framework. For a generic convolution filter, I use the following vertex shader:

    attribute vec4 position;
     attribute vec4 inputTextureCoordinate;
    
     uniform highp float texelWidth; 
     uniform highp float texelHeight; 
    
     varying vec2 textureCoordinate;
     varying vec2 leftTextureCoordinate;
     varying vec2 rightTextureCoordinate;
    
     varying vec2 topTextureCoordinate;
     varying vec2 topLeftTextureCoordinate;
     varying vec2 topRightTextureCoordinate;
    
     varying vec2 bottomTextureCoordinate;
     varying vec2 bottomLeftTextureCoordinate;
     varying vec2 bottomRightTextureCoordinate;
    
     void main()
     {
         gl_Position = position;
    
         vec2 widthStep = vec2(texelWidth, 0.0);
         vec2 heightStep = vec2(0.0, texelHeight);
         vec2 widthHeightStep = vec2(texelWidth, texelHeight);
         vec2 widthNegativeHeightStep = vec2(texelWidth, -texelHeight);
    
         textureCoordinate = inputTextureCoordinate.xy;
         leftTextureCoordinate = inputTextureCoordinate.xy - widthStep;
         rightTextureCoordinate = inputTextureCoordinate.xy + widthStep;
    
         topTextureCoordinate = inputTextureCoordinate.xy - heightStep;
         topLeftTextureCoordinate = inputTextureCoordinate.xy - widthHeightStep;
         topRightTextureCoordinate = inputTextureCoordinate.xy + widthNegativeHeightStep;
    
         bottomTextureCoordinate = inputTextureCoordinate.xy + heightStep;
         bottomLeftTextureCoordinate = inputTextureCoordinate.xy - widthNegativeHeightStep;
         bottomRightTextureCoordinate = inputTextureCoordinate.xy + widthHeightStep;
     }
    

    and the following fragment shader:

     uniform mediump mat3 convolutionMatrix;
    
     varying vec2 textureCoordinate;
     varying vec2 leftTextureCoordinate;
     varying vec2 rightTextureCoordinate;
    
     varying vec2 topTextureCoordinate;
     varying vec2 topLeftTextureCoordinate;
     varying vec2 topRightTextureCoordinate;
    
     varying vec2 bottomTextureCoordinate;
     varying vec2 bottomLeftTextureCoordinate;
     varying vec2 bottomRightTextureCoordinate;
    
     void main()
     {
         mediump vec4 bottomColor = texture2D(inputImageTexture, bottomTextureCoordinate);
         mediump vec4 bottomLeftColor = texture2D(inputImageTexture, bottomLeftTextureCoordinate);
         mediump vec4 bottomRightColor = texture2D(inputImageTexture, bottomRightTextureCoordinate);
         mediump vec4 centerColor = texture2D(inputImageTexture, textureCoordinate);
         mediump vec4 leftColor = texture2D(inputImageTexture, leftTextureCoordinate);
         mediump vec4 rightColor = texture2D(inputImageTexture, rightTextureCoordinate);
         mediump vec4 topColor = texture2D(inputImageTexture, topTextureCoordinate);
         mediump vec4 topRightColor = texture2D(inputImageTexture, topRightTextureCoordinate);
         mediump vec4 topLeftColor = texture2D(inputImageTexture, topLeftTextureCoordinate);
    
         mediump vec4 resultColor = topLeftColor * convolutionMatrix[0][0] + topColor * convolutionMatrix[0][1] + topRightColor * convolutionMatrix[0][2];
         resultColor += leftColor * convolutionMatrix[1][0] + centerColor * convolutionMatrix[1][1] + rightColor * convolutionMatrix[1][2];
         resultColor += bottomLeftColor * convolutionMatrix[2][0] + bottomColor * convolutionMatrix[2][1] + bottomRightColor * convolutionMatrix[2][2];
    
         gl_FragColor = resultColor;
     }

    The texelWidth and texelHeight uniforms are the inverse of the width and height of the input image, and the convolutionMatrix uniform specifies the weights for the various samples in your convolution.

    On an iPhone 4, this runs in 4-8 ms for a 640x480 frame of camera video, which is good enough for 60 FPS rendering at that image size. If you just need to do something like edge detection, you can simplify the above, convert the image to luminance in a pre-pass, then only sample from one color channel. That's even faster, at about 2 ms per frame on the same device.



    展开全文
  •  cocos2dx的文字描边一直有问题,ios和android的显示都不正确,后者是描边很黑,遇见细的文字就直接一团黑了;前者是完全没有效果。  先聊android,底层用于实现此功能的类是Cocos2dxBitmap.java,他的实现很简单...

            很久以前做过的事了,突然想到就拿出来分享下,也顺便复习复习。

            cocos2dx的文字描边一直有问题,ios和android的显示都不正确,后者是描边很黑,遇见细的文字就直接一团黑了;前者是完全没有效果。

            先聊android,底层用于实现此功能的类是Cocos2dxBitmap.java,他的实现很简单,就是两层文字,上层为正常的文字,下层根据strokeSize画出描边,然后用上层压住下层就好。但是他的底层写错了,写成了下层压住上层,由于本该被上层盖住的黑色部分反而漏了出来,直接导致描边很粗,很丑,该回去之后再对位置粗细适当调整就能做出正确的描边。

            再说ios,这个是由CCImage.mm(2.x版本,3.x换到了CCDevice.mm里)实现的,这货更好压根就没实现描边,drawInRect就调用了一次,oc不是很懂,就用了比较蠢的办法,再调用一次drawInRect把新的文字放大一点置黑,压在前者下面,近似实现效果。

            大概想到这么多,希望有帮助。

    展开全文
  • cocos2dx字体描边

    2019-06-19 15:41:31
    LabelTTF::create("fds", "...这样fontname那不填表示使用设备默认字体 std::string lvstr = FunctionUtil::getChinese("guanka"); lvLabel = LabelTTF::create(lvstr.c_str(), "", 24); lvLabel->setCol...
    LabelTTF::create("fds", "", 24);

    这样fontname那不填表示使用设备默认字体

    std::string lvstr = FunctionUtil::getChinese("guanka");
        lvLabel = LabelTTF::create(lvstr.c_str(), "", 24);
        lvLabel->setColor(Color3B::WHITE);
        lvLabel->enableStroke(Color3B::BLACK, 1);
        //lvLabel->setTextColor(Color4B::WHITE);
        //lvLabel->enableOutline(Color4B::BLACK, 1);
        lvLabel->setAnchorPoint(Vec2::ANCHOR_BOTTOM_LEFT);
        this->addChild(lvLabel);
        lvLabel->setPosition(Vec2(2, s.height - 100))

    可以用enableStroke描边,3.x的是用enableOutline描边

    转载于:https://www.cnblogs.com/as3lib/p/3976352.html

    展开全文
  • Cocos2d-x 2.X实现的一基于CCLabelTTF + Shader的字体描边效果,具体可以参考这篇博客,http://blog.csdn.net/oktears/article/details/43200757
  • COCOS2D-X字体描边

    2017-11-01 12:06:08
    cocos2d-x3.16版本,原有的描边函数enableOutline会在渐出时出错,文字消失了描边停留在那里。 所以自己在网上找了个描边的函数,另外修改了一部分,做成了一个COCOS2D的工具类。 LabelWithStroke.h #...
  • 这里以quick_cocos2dx_3.3为例说明一下cocos2dx的Label描边问题以及个人想到的一个不是很完美的解决办法。 先上一段程序:  local label = display.newTTFLabel({ text="你好",  font="arial",--系统自带的字体...
  • #ifdef GL_ES precision highp float; #endif uniform sampler2D u_texture; varying vec2 v_texCoord; varying vec4 v_fragmentColor;...//模糊blur的步长,这里只是demo,正式使用...const vec2 step = vec2(0.00...
  • cocos2dx描边shader

    2019-10-11 09:58:59
    Cocos2d-x 3.x的label使用了freetype字体引擎(http://www.freetype.org/),可以很轻松的实现描边和阴影效果。所以本篇文章只针对于sprite来实现描边效果。 varying vec4 v_fragmentColor; // vertex shader传入,...
  • 关于字体描边的实现,不考虑效果和效率的话,是有三种方式: ... ③ 利用shader来实现,使用cocos2dx中CCGLProgram类与OpenGl绘图机制中的着色器交互来实现  第三种方式我没试过,不过基于shader的强大特效功
  • cocos2dx 描边(lua实现)

    2014-06-10 16:59:29
    local mytool = {} mytool.DEFAULT_TTF_FONT = "Arial" mytool.DEFAULT_TTF_FONT_SIZE = 24 mytool.TEXT_ALIGN_LEFT = kCCTextAlignmentLeft mytool.TEXT_ALIGN_CENTER = kCCTextAlignmentCenter ...
  • 关于字体描边的实现,不考虑效果和效率的话,是有三种方式: ... ③ 利用shader来实现,使用cocos2dx中CCGLProgram类与OpenGl绘图机制中的着色器交互来实现  第三种方式我没试过,不过基于shader的强大特效功
  • 本身text用的描边方式跟label的一致,但是调用的时候偶尔会发现无效,今天仔细观察了下现象,发现如果text不调用setFontName设置字体库的话就会出现无效,具体原因不知。
  • 由于Cocos2d-x 2.x版本对描边支持的不好,3.X的基于Freetype的字库的描边效果还是不错的,但项目用的是旧版本引擎,又需要用到描边字,最近也研究了几种描边的方法,想分享一下。 在网上找了很多种描边的方式,各有...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 1. Cocos2d-x 3.x中,字体用FreeType库,字体描边可以用FreeType自带的描边功能,实际效果没测过,但只能用于字体。 2. 用RenderTexture,方法大概是把原图做一圈的偏移,渲染到同一张纹理上,他们相隔中心点的...
  • localexp_label = “创建字体”:enableOutline(cc.c4b(0,0,0,255), 1) --描边 exp_label:setColor(cc.c3b(255,255,255)) exp_label:enableShado...
  • 图片描边需求如下: 1. 可指定描边宽度 2. 可指定描边颜色3.... ...图片描边我所知道的方式有以下几...1. Cocos2d-x 3.x中,字体用FreeType库,字体描边可以用FreeType自带的描边功能,实际效果没测过,但只能用于字体。
1 2 3 4 5 ... 11
收藏数 205
精华内容 82
热门标签
关键字:

2dx设置字体描边 cocos