Cocos2dx踩坑-ttf字符宽度精度问题+引擎源码分析

最新推荐文章于 2026-06-20 18:32:18 发布
原创 最新推荐文章于 2026-06-20 18:32:18 发布 · 393 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#cocos2d #游戏引擎

问题背景

因为项目的特殊性，需要根据web配置好的组件数据来初始化引擎中的组件，配置人员会根据web中看到的场景对组件位置进行摆放。发现使用同样的ttf字体在相同字号的情况下，web展示的文本长度和cocos渲染出来的不一致。特别遇到图文混排的时候，明明在web摆的好好的，cocos却看着比较乱。

经过排查发现，web中ttf字符宽度是准确到小数点以后的，而cocos引擎内部实现是会对ttf字符宽度进行取整。也就是每个字符宽度都会差零点几，字符数量多的情况下就比较明显了。

源码分析

CCFontAtlas.h和CCFontAtlas.cpp中的scaleFontLetterDefinition方法中可以看到letterDefinition.xAdvance是一个int类型，这个属性就是文本排布的时候，当前字符占据的宽度，也就是下一个字符需要隔xAdvance的长度后渲染。

//CCFontAtlas.h
struct FontLetterDefinition
{
    float U;
    float V;
    float width;
    float height;
    float offsetX;
    float offsetY;
    int textureID;
    bool validDefinition;
    int xAdvance;
    bool rotated;
};


//CCFontAtlas.cpp
void FontAtlas::scaleFontLetterDefinition(float scaleFactor)
{
    for (auto&& fontDefinition : _letterDefinitions) {
        auto& letterDefinition = fontDefinition.second;
        letterDefinition.width *= scaleFactor;
        letterDefinition.height *= scaleFactor;
        letterDefinition.offsetX *= scaleFactor;
        letterDefinition.offsetY *= scaleFactor;
        letterDefinition.xAdvance = (int)(letterDefinition.xAdvance * scaleFactor);
    }
}

CCFontFreeType.cpp中的getGlyphBitmap方法中可以找到对xAdvance的赋值

unsigned char* FontFreeType::getGlyphBitmap(uint64_t theChar, long &outWidth, long &outHeight, Rect &outRect,int &xAdvance)
{
    bool invalidChar = true;
    unsigned char* ret = nullptr;

    do
    {
        if (_fontRef == nullptr)
            break;

        if (_distanceFieldEnabled)
        {
            if (FT_Load_Char(_fontRef, static_cast<FT_ULong>(theChar), FT_LOAD_RENDER | FT_LOAD_NO_HINTING | FT_LOAD_NO_AUTOHINT))
                break;
        }
        else
        {
            if (FT_Load_Char(_fontRef, static_cast<FT_ULong>(theChar), FT_LOAD_RENDER | FT_LOAD_NO_AUTOHINT))
                break;
        }

        auto& metrics = _fontRef->glyph->metrics;
        outRect.origin.x = static_cast<float>(metrics.horiBearingX >> 6);
        outRect.origin.y = static_cast<float>(-(metrics.horiBearingY >> 6));
        outRect.size.width = static_cast<float>((metrics.width >> 6));
        outRect.size.height = static_cast<float>((metrics.height >> 6));
		
		//这里对xAdvance进行赋值
        xAdvance = (static_cast<int>(_fontRef->glyph->metrics.horiAdvance >> 6));

        outWidth  = _fontRef->glyph->bitmap.width;
        outHeight = _fontRef->glyph->bitmap.rows;
        ret = _fontRef->glyph->bitmap.buffer;

        if (_outlineSize > 0 && outWidth > 0 && outHeight > 0)
        {
            auto copyBitmap = new (std::nothrow) unsigned char[outWidth * outHeight];
            memcpy(copyBitmap,ret,outWidth * outHeight * sizeof(unsigned char));

            FT_BBox bbox;
            auto outlineBitmap = getGlyphBitmapWithOutline(theChar,bbox);
            if(outlineBitmap == nullptr)
            {
                ret = nullptr;
                delete [] copyBitmap;
                break;
            }

            int glyphMinX = (int)outRect.origin.x;
            int glyphMaxX = (int)(outRect.origin.x + outWidth);
            int glyphMinY = (int)(-outHeight - outRect.origin.y);
            int glyphMaxY = (int)-outRect.origin.y;

            auto outlineMinX = bbox.xMin >> 6;
            auto outlineMaxX = bbox.xMax >> 6;
            auto outlineMinY = bbox.yMin >> 6;
            auto outlineMaxY = bbox.yMax >> 6;
            auto outlineWidth = outlineMaxX - outlineMinX;
            auto outlineHeight = outlineMaxY - outlineMinY;

            auto blendImageMinX = MIN(outlineMinX, glyphMinX);
            auto blendImageMaxY = MAX(outlineMaxY, glyphMaxY);
            auto blendWidth = MAX(outlineMaxX, glyphMaxX) - blendImageMinX;
            auto blendHeight = blendImageMaxY - MIN(outlineMinY, glyphMinY);

            outRect.origin.x = (float)blendImageMinX;
            outRect.origin.y = -blendImageMaxY + _outlineSize;

            unsigned char *blendImage = nullptr;
            if (blendWidth > 0 && blendHeight > 0)
            {
                FT_Pos index, index2;
                auto imageSize = blendWidth * blendHeight * 2;
                blendImage = new (std::nothrow) unsigned char[imageSize];
                memset(blendImage, 0, imageSize);

                auto px = outlineMinX - blendImageMinX;
                auto py = blendImageMaxY - outlineMaxY;
                for (int x = 0; x < outlineWidth; ++x)
                {
                    for (int y = 0; y < outlineHeight; ++y)
                    {
                        index = px + x + ((py + y) * blendWidth);
                        index2 = x + (y * outlineWidth);
                        blendImage[2 * index] = outlineBitmap[index2];
                    }
                }

                px = glyphMinX - blendImageMinX;
                py = blendImageMaxY - glyphMaxY;
                for (int x = 0; x < outWidth; ++x)
                {
                    for (int y = 0; y < outHeight; ++y)
                    {
                        index = px + x + ((y + py) * blendWidth);
                        index2 = x + (y * outWidth);
                        blendImage[2 * index + 1] = copyBitmap[index2];
                    }
                }
            }

            outRect.size.width  = (float)blendWidth;
            outRect.size.height = (float)blendHeight;
            outWidth  = blendWidth;
            outHeight = blendHeight;

            delete [] outlineBitmap;
            delete [] copyBitmap;
            ret = blendImage;
        }

        invalidChar = false;
    } while (0);

    if (invalidChar)
    {
        outRect.size.width  = 0;
        outRect.size.height = 0;
        xAdvance = 0;

        return nullptr;
    }
    else
    {
       return ret;
    }
}

解决方案

为了和web表现一致，需要把xAdvance改成float类型，并且修改xAdvance的赋值代码。
修改CCFontAtlas.h

struct FontLetterDefinition
{
    float U;
    float V;
    float width;
    float height;
    float offsetX;
    float offsetY;
    int textureID;
    bool validDefinition;
    //这里改为float
    float xAdvance;
    bool rotated;
};

修改CCFontAtlas.cpp

void FontAtlas::scaleFontLetterDefinition(float scaleFactor)
{
    for (auto&& fontDefinition : _letterDefinitions) {
        auto& letterDefinition = fontDefinition.second;
        letterDefinition.width *= scaleFactor;
        letterDefinition.height *= scaleFactor;
        letterDefinition.offsetX *= scaleFactor;
        letterDefinition.offsetY *= scaleFactor;
        //这里把(int)去掉
        letterDefinition.xAdvance = letterDefinition.xAdvance * scaleFactor;
    }
}

修改CCFontFreeType.h

//把int &xAdvance改为float &xAdvance
unsigned char* getGlyphBitmap(uint64_t theChar, long &outWidth, long &outHeight, Rect &outRect,float &xAdvance);

修改CCFontFreeType.cpp

//这里把int &xAdvance改为float &xAdvance
unsigned char* FontFreeType::getGlyphBitmap(uint64_t theChar, long &outWidth, long &outHeight, Rect &outRect,float &xAdvance)
{
    bool invalidChar = true;
    unsigned char* ret = nullptr;

    do
    {
        if (_fontRef == nullptr)
            break;

        // @remark: glyph_index=0 means 
        auto glyph_index = FT_Get_Char_Index(_fontRef, static_cast<FT_ULong>(theChar));
        if (FT_Load_Glyph(_fontRef, glyph_index, _distanceFieldEnabled ? 
            (FT_LOAD_RENDER | FT_LOAD_NO_HINTING | FT_LOAD_NO_AUTOHINT) : 
            (FT_LOAD_RENDER | FT_LOAD_NO_AUTOHINT)))
            break;

#if defined(_DEBUG)
        if (glyph_index == 0) {
            std::u32string charUTF32(1, theChar);
            std::string charUTF8;
            cocos2d::StringUtils::UTF32ToUTF8(charUTF32, charUTF8);

            if (charUTF8 == "\n") charUTF8 = "\\n";
            cocos2d::log("The font face: %s doesn't contains char: <%s>", _fontRef->charmap->face->family_name, charUTF8.c_str());
        }
#endif

        auto& metrics = _fontRef->glyph->metrics;
        outRect.origin.x = static_cast<float>(metrics.horiBearingX >> 6);
        outRect.origin.y = static_cast<float>(-(metrics.horiBearingY >> 6));
        outRect.size.width = static_cast<float>((metrics.width >> 6));
        outRect.size.height = static_cast<float>((metrics.height >> 6));

		//这里修改xAdvance的赋值方式
        xAdvance = static_cast<float>(_fontRef->glyph->linearHoriAdvance / 65536.0f);

        outWidth  = _fontRef->glyph->bitmap.width;
        outHeight = _fontRef->glyph->bitmap.rows;
        ret = _fontRef->glyph->bitmap.buffer;

        if (_outlineSize > 0 && outWidth > 0 && outHeight > 0)
        {
            auto copyBitmap = new (std::nothrow) unsigned char[outWidth * outHeight];
            memcpy(copyBitmap,ret,outWidth * outHeight * sizeof(unsigned char));

            FT_BBox bbox;
            auto outlineBitmap = getGlyphBitmapWithOutline(theChar,bbox);
            if(outlineBitmap == nullptr)
            {
                ret = nullptr;
                delete [] copyBitmap;
                break;
            }

            int glyphMinX = (int)outRect.origin.x;
            int glyphMaxX = (int)(outRect.origin.x + outWidth);
            int glyphMinY = (int)(-outHeight - outRect.origin.y);
            int glyphMaxY = (int)-outRect.origin.y;

            auto outlineMinX = bbox.xMin >> 6;
            auto outlineMaxX = bbox.xMax >> 6;
            auto outlineMinY = bbox.yMin >> 6;
            auto outlineMaxY = bbox.yMax >> 6;
            auto outlineWidth = outlineMaxX - outlineMinX;
            auto outlineHeight = outlineMaxY - outlineMinY;

            auto blendImageMinX = MIN(outlineMinX, glyphMinX);
            auto blendImageMaxY = MAX(outlineMaxY, glyphMaxY);
            auto blendWidth = MAX(outlineMaxX, glyphMaxX) - blendImageMinX;
            auto blendHeight = blendImageMaxY - MIN(outlineMinY, glyphMinY);

            outRect.origin.x = (float)blendImageMinX;
            outRect.origin.y = -blendImageMaxY + _outlineSize;

            unsigned char *blendImage = nullptr;
            if (blendWidth > 0 && blendHeight > 0)
            {
                FT_Pos index, index2;
                auto imageSize = blendWidth * blendHeight * 2;
                blendImage = new (std::nothrow) unsigned char[imageSize];
                memset(blendImage, 0, imageSize);

                auto px = outlineMinX - blendImageMinX;
                auto py = blendImageMaxY - outlineMaxY;
                for (int x = 0; x < outlineWidth; ++x)
                {
                    for (int y = 0; y < outlineHeight; ++y)
                    {
                        index = px + x + ((py + y) * blendWidth);
                        index2 = x + (y * outlineWidth);
                        blendImage[2 * index] = outlineBitmap[index2];
                    }
                }

                px = glyphMinX - blendImageMinX;
                py = blendImageMaxY - glyphMaxY;
                for (int x = 0; x < outWidth; ++x)
                {
                    for (int y = 0; y < outHeight; ++y)
                    {
                        index = px + x + ((y + py) * blendWidth);
                        index2 = x + (y * outWidth);
                        blendImage[2 * index + 1] = copyBitmap[index2];
                    }
                }
            }

            outRect.size.width  = (float)blendWidth;
            outRect.size.height = (float)blendHeight;
            outWidth  = blendWidth;
            outHeight = blendHeight;

            delete [] outlineBitmap;
            delete [] copyBitmap;
            ret = blendImage;
        }

        invalidChar = false;
    } while (0);

    if (invalidChar)
    {
        outRect.size.width  = 0;
        outRect.size.height = 0;
        xAdvance = 0;

        return nullptr;
    }
    else
    {
       return ret;
    }
}

最后重新编译引擎就搞定了

【Cocos Creator】 使用 TTF 以及文本配置动态生成位图字体的解决方案
humanxing的专栏
07-24 4177
游戏开发，需要使用字体。 直接使用 TTF 字体，其优点是开发特别省事。 而缺点却是很要命： TTF 字体文件过大，包含了不必要的字，增大了包体，减缓了加载速度； 部分平台不支持 TTF 文件的加载；（笔者就曾遇到过这个问题：动态精简后的 ttf 文件，微信平台支持加载，在手 Q 平台和 Android 平台就不支持）； 为了解决全平台的字体加载问题，我们就不得不选择 位图字体 。 基于使用位图字体这个大前提下，来定制我们的 解决方案。 解决方案的核心问题用一句话描述就是：如何从一个文本文件（包含所需的
FairyGUI问题FairyGUI: texture ‘atlas0.png‘not found in xxx
ennotsubasa的博客
04-26 1189
1. 如果出现 FairyGUI: texture 'atlas0.png'not found in xxx 则去发布的包中将关于这个texture的meta文件删除，然后自动生成之后就可以使用了 2. 若出现 Generate Mip Maps 警告 在U3D中找到纹理生成的meta文件，去掉 Generate Mip Map ......
CocosCreator在原生平台上ttf字体显示异常的解决方案
u014206745的博客
04-30 1155
CocosCreator在原生平台上 ttf 字体显示异常的解决方案
cocos2dx-3.17渲染流程学习笔记
qq_33811591的博客
08-12 766
图形渲染简介
直升机停机坪目标检测数据集分享（适用于YOLO系列深度学习分类检测任务）
dgw25sf的博客
06-16 230
本数据集含9000张多场景航拍图，专用于直升机停机坪（单类）目标检测，已按YOLO格式精准标注并划分训练/验证/测试集，适配YOLOv5-v9等模型，支撑无人机自主降落、低空导航与应急救援等应用。
【控制篇·外传】最后的3公里：完全体指令集对 4-bit 游戏引擎的底层救赎
CgiMiFan的专栏
06-17 581
本期外传彻底扫清 4-bit 指令集最后的 5% 盲区。基于一纸外部 isa.txt 驱动，在纯 C++ 环境下合围了长短腿寻址、原子中断屏障与无分支自增减时序，向读者论证微架构指令集对《俄罗斯方块》游戏引擎的底层救赎。
从0到1构建 HarmonyOS 游戏引擎
记录从移动端、鸿蒙到物联网与AI的完整实战与思考。专注于分享可复用的工程方案与产品思维，尤其深入鸿蒙生态与全栈开发。以十年工程与管理沉淀，为你提供清晰的技术纵深路径。坚信技术的价值在于“贯通”与“落地”。
06-20 2672
摘要：本文介绍了如何在HarmonyOS上从零构建轻量级游戏引擎。作者展菲作为资深开发者，提出传统UI框架无法满足复杂游戏需求，需要基于ECS架构（实体-组件-系统）设计独立游戏Runtime。核心模块包括World（游戏宇宙）、Entity（实体容器）、Component（数据载体）、System（逻辑处理）、Scene（场景管理）等，通过主循环驱动各系统协同工作。相比直接使用页面驱动，该方案具有状态隔离、多端适配、资源统一管理等优势，尤其适合中小型游戏和互动应用开发。文章提供了ArkTS实现的关键代码片
UE5—游戏引擎开发
qq_54441756的博客
06-20 278
我在项目中实际遇到过两个性能瓶颈：一是透明物体排序的微卡顿，二是体积雾降噪的 GPU 开销。前者我用无分支三数取中解决了分支预测问题，后者我用排序网络+Shader min/max 消除了线程束分化。这两个经历让我深刻体会到，引擎底层的位运算技巧不是用来手写的玩具，而是指导我们在正确抽象层级做架构决策的思维模型。
考虑电动汽车灵活性的微网多时间尺度协调调度研究（Matlab代码实现）
06-21
考虑电动汽车灵活性的微网多时间尺度协调调度研究（Matlab代码实现）
易语言源码易语言SQLite3数据库操作类模块源码
06-21
易语言源码易语言SQLite3数据库操作类模块源码
【创新未发表】基于多元宇宙优化的分时电价需求响应 + 综合能源系统调度（Matlab代码实现）
06-21
内容概要：本文介绍了一项创新性未发表的研究，即利用多元宇宙优化算法（Multiverse Optimizer, MVO）对分时电价下的需求响应与综合能源系统调度问题进行建模与求解，旨在实现能源系统的经济性、高效性与可持续性运行。该研究构建了包含多种能源设备（如光伏、风机、燃气轮机、储能系统等）及可调节负荷的综合能源系统模型，充分考虑了用户侧的需求响应行为在分时电价机制下的响应特性，通过MVO算法对系统运行成本、能源利用率、碳排放等多目标进行协同优化，实现了日前调度计划的智能决策。研究还提供了完整的MATLAB代码实现，便于研究人员复现实验、验证算法性能，并为进一步研究提供可靠的仿真基础。; 适合人群：具备一定电力系统、优化算法及MATLAB编程基础的科研人员、研究生以及从事能源互联网、综合能源系统规划与运行的技术工程师。; 使用场景及目标：① 学习并掌握多元宇宙优化算法在复杂能源系统调度中的具体应用方法；② 研究分时电价机制如何通过需求响应引导用户参与电网互动，实现削峰填谷；③ 实现综合能源系统（IES）中冷、热、电、气等多种能源的协同优化调度，以降低运行成本、提高新能源消纳能力和系统可靠性；④ 为相关领域的学术研究提供可复现的代码实例和仿真平台。; 阅读建议：此资源以MATLAB代码为核心载体，深入剖析了算法应用与系统建模的全过程。建议读者在学习时，不仅应关注代码的实现细节，更要理解其背后的数学模型、优化目标设定和约束条件的物理意义。建议结合文档中的模型描述，逐步调试代码，观察不同参数和场景下的优化结果，从而深刻掌握综合能源系统优化调度的设计思想与关键技术。
智能机器人测试模块.py
06-21
自制的机器人程序
易语言源码易语言SQL全面操作数据库源码
最新发布
06-21
易语言源码易语言SQL全面操作数据库源码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值