Cocos 字体加粗放大清晰度测试

 

目录

一  加粗、放大、outline测试

二 冒险大作战 

三 字体渲染流程

四 总结 

五 问题

 

一  加粗、放大、outline、字体大小测试

使用的默认字体Arial

outline：目前设置outline2比较好，1非常的细。总结：outline设置为2。

放大：size*05，fontSize*2，放大会增加清晰度，但是每个cc.Label都去放大很麻烦。总结：为了方便就不放大了，除非个别特别小的字。

加粗：浏览器不加粗正常还好，但在有outline的情况会模糊。手机上加粗看不出变化。总结：主要场景在手机，使用char类型加粗不生效，可以直接使用略粗的字体font，总结不需要加粗。

 

在浏览器上，最清晰效果是放大+加粗+outline4

 

在手机上，最清晰效果放大+outline4

 

普通字体大小在22-26就能看清

 

 

二 冒险大作战

浏览器中可以看到大字基本都是加粗的，有可能使用了本来就粗的字体，小字在浏览器非常不清晰。

 

三 字体渲染流程(通义千问)

Cocos Creator 中字体渲染的基本原理涉及以下几个关键步骤：

1. 字体加载：

   • 在Cocos Creator中，当创建一个Label组件或设置其文本属性时，首先需要加载指定的字体资源。字体可以是系统字体或自定义的TTF（TrueType Font）/OTF（OpenType Font）字体文件。字体资源通过在编辑器中配置或通过代码动态加载完成加载过程。

2. 文本处理：

   • 设置好Label组件的文本内容后，引擎会将文本字符串拆分成字符数组，并对字符进行一系列处理，比如计算字符的宽高、行距、字间距等布局信息。这个过程中还会考虑到文本的对齐方式、换行规则等。

3. 字形生成与映射：

   • 对于每个字符，Cocos Creator会查询字体文件获取字形（glyph）信息，包括字形的轮廓、大小、位置等。这些信息用于在纹理上绘制字符。如果是位图字体，则直接查找对应的位图；对于矢量字体（如TTF），则需在运行时根据矢量数据生成字形图片。

4. 纹理渲染：

   • 生成的字形会被渲染到一个或多个纹理上。每个字符可能占用纹理上的一个或多个像素。对于较长的文本或特定布局要求，可能需要将多个字符渲染到同一张纹理上，以减少所需的Draw Call数量。这个过程还可能包括纹理的合并，以优化渲染性能。

5. 纹理映射与显示：

   • 渲染好的纹理随后被映射到屏幕上适当的四边形网格上，通过UV坐标控制字符在纹理上的位置，从而实现文本的最终显示。纹理的渲染利用了WebGL或其他图形API的纹理映射功能。

6. 优化措施：

   • 为了提高性能，Cocos Creator还可能采取一些优化策略，如纹理集（Texture Atlas）来合并小纹理，减少切换纹理的次数（即Draw Call），以及动态调整纹理尺寸以适应不同长度的文本，避免不必要的内存消耗和渲染开销。

总的来说，Cocos Creator的字体渲染是一个从字体资源加载到最终屏幕显示的复杂过程，它旨在平衡渲染效率和文本质量，同时提供开发者灵活的文本布局和样式控制能力。

 

四 总结

字体采用不放大不加粗，outline为2，普通字体大小22-26。

 

五 问题

1 为什么cocos的字体会模糊，而采用scale=0.5，fontSize*2就能够清晰，既然能够清晰为什么官方不这么做？？？

字体模糊主要是游戏分辨率太低了，游戏分辨率高一点的话，目前3.x版本已经不会模糊了。比如以前1134x640，可以改成1334x750。