Cocos2dx 3.0 过渡篇 （二十一）自从Label有了freeType做靠山以后...enableShadow

2023-10-22 12:30
文章标签 label 二十一 3.0 以后 过渡 cocos2dx freetype enableshadow 靠山

本文主要是介绍Cocos2dx 3.0 过渡篇 （二十一）自从Label有了freeType做靠山以后...enableShadow，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Cocos2dx 3.0 过渡篇 （二十一）自从Label有了freeType做靠山以后...

分类： cocos2d-x学习笔记 2014-03-27 20:25  3818人阅读  评论(14)  收藏  举报
cocos2d-x 3.0 Label
cocos2dx 3.0版本之前，我们一直都是用CCLabelTTF，CCLabelBMFont,CCLabelAtlas来创建文本标签， 但是！3.0版本放出来后...看到这里你心里是不是又颤抖了一下？别害怕嘛，我要说的是： 3.0版本出来后这些标签也都是还可以用的啦，只是说我们有了更好的选择。

cocos2dx3.0添加了一种新的文本标签，这种标签不同的地方有：使用freetype来使它在不同的平台上有相同的视觉效果；由于使用更快的缓存代理，它的渲染也将更加快速；同时它还提供了绘边、阴影等特性。


所以因为Label，我决定离开abelTTF和LabelBMFont（这个开头你猜到了么？）
---------------------------------------------------

常用的接口一览（因为很多接口都与LabelTTFT等一样，所以就列一些我所了解的“异类”）

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. //创建普通的文本标签，效果和CCLabelTTF::create(...);一样。TTFConfig是什么？下面会介绍  
  2. static Label * create(const std::string& text, const std::string& fontName, float fontSize,  
  3.         const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,  
  4.         TextVAlignment vAlignment = TextVAlignment::TOP);  
  5.           
  6. //通过读取TTFConfig配置的方式创建标签，  
  7. static Label* createWithTTF(const TTFConfig& ttfConfig, const std::string& text, TextHAlignment alignment = TextHAlignment::LEFT, int lineWidth = 0);  
  8.   
  9. //使用.fnt的方式创建标签，类似CCLabelBMFont:create();      
  10. static Label* createWithBMFont(const std::string& bmfontFilePath, const std::string& text,  
  11.         const TextHAlignment& alignment = TextHAlignment::LEFT, int lineWidth = 0,   
  12.         const Point& imageOffset = Point::ZERO);  
  13.           
  14. //使用.png的方式创建标签，类似CCLabelAtlas::create();  
  15. static Label * createWithCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);  
  16.           
  17. virtual void enableShadow(const Color3B& shadowColor = Color3B::BLACK,const Size &offset = Size(2,-2), float opacity = 0.75f, int blurRadius = 0);  
  18. virtual void enableOutline(const Color4B& outlineColor,int outlineSize = -1);//只支持TTF  
  19. virtual void enableGlow(const Color3B& glowColor);//只支持 TTF   
  20.   
  21. virtual void disableEffect();//取消所有特效  
  22.   
  23. //特效的种类有一下四种：  
  24. enum class LabelEffect {  
  25.   
  26.     NORMAL,     //普通标签（纯粹的、脱离了低级趣味的label）  
  27.     OUTLINE,    //文艺标签（有描边）  
  28.     SHADOW,     //2B标签  （有阴影）  
  29.     GLOW        //土豪标签（有荧光）  
  30. };  
稍微提一下一个新东西：TTFConfig

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. //TTFConfig 是一个结构体，里面包含了你要创建一个ttf的label常用配置，如下所示  
  2. typedef struct _ttfConfig  
  3. {  
  4.     std::string fontFilePath;   //文件路径  
  5.     int fontSize;               //字体大小，默认12  
  6.     GlyphCollection glyphs;     //使用的字符集，默认DYNAMIC  
  7.     const char *customGlyphs;   //呵呵  
  8.     bool distanceFieldEnabled;  //我对这个的理解是：是否让文字显得紧凑？默认为false  
  9.     int outlineSize;            //字体描边的大小，默认为0  
  10.       
  11.     //构造函数  
  12.     ...  
  13.     //注意：当outlineSize初始化的值大于0时，distanceFieldEnabled则为false  
  14. }TTFConfig;  
  15.   
  16. //GlyphCollection有四种类型：  
  17. enum class GlyphCollection {  
  18.       
  19.     DYNAMIC,  
  20.     NEHE,  
  21.     ASCII,  
  22.     CUSTOM  
  23. };  

下面简单介绍Label的用法

1、使用.ttf
1）创建

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. TTFConfig config2("fonts/Marker Felt.ttf",30);//初始化TTFConfig，第一个参数为字库的路径，第二个参数为字体大小  
  2. auto label2 = Label::createWithTTF(config2,"createWithTTF",TextHAlignment::LEFT);//创建label，并向左对其  
  3. label2->setPosition(Point(visibleSize.width/2,300));  
  4. label2->setAnchorPoint(Point::ANCHOR_MIDDLE);//设置锚点居中  
  5. this->addChild(label2,2);  
当然了，也可以用Label创建普通的标签，效果和用CCLabelTTF::create()的一样

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. auto label4 = Label::create("create","Marker Felt",30);//  
效果如图所示：


2）另字体看起来紧凑点，也就是设置distanceFieldEnabled = true
直接修改config里的distanceFieldEnabled，方式如下：

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. TTFConfig config2("fonts/Marker Felt.ttf",30,GlyphCollection::DYNAMIC,nullptr,true);//修改config的第五个参数为true  


3）设置glow（荧光）效果，（我也不知道该怎么描述glow这词...）

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. label2->enableGlow(Color3B::GREEN);//荧光颜色为绿色  
效果如图所示。这里有个地方要注意下，想要显示荧光效果，必须令distanceFieldEnabled = true，否则看不到效果。


4）设置描边

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. label2->enableOutline(Color4B(255,125,0,255),8);//第一个参数为描边的颜色，第二个参数为描边的大小  
效果如图所示。注意，使用描边效果后，distanceFieldEnabled 将变成 false，这也意味着在有描边的情况下是显示不了荧光效果的（我想太多了...)


5）设置阴影

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. label2->enableShadow(Color3B::RED,Size(2,-2),0.2,0.5);//第一个参数为阴影颜色，第二个参数为阴影相对于标签的坐标，第三个参数设置透明度，第四个参数与模糊有关  


2、使用.fnt 的label
1）创建

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. auto label3 = Label::createWithBMFont("fonts/bitmapFontTest.fnt", "createWithBMFont");  
  2. label3->setPosition(Point(visibleSize.width/2,250));  
  3. label3->setAnchorPoint(Point::ANCHOR_MIDDLE);  
  4. this->addChild(label3,2);  
  5. label3->enableShadow();  


2）设置阴影（描边和荧光只能用在.ttf 上）

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. label3->enableShadow(Color3B::RED);  
效果如图，可以与上图对比一下。


3、使用.png
加入我们有这么一张图，使用方法如下：


1）创建

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. auto label4= Label::createWithCharMap("fonts/costFont.png",30,44,'/');//参数分别为：路径;每个字符的宽和高，起始字符  
  2. label4->setPosition(Point(visibleSize.width/2,200));  
  3. label4->setAnchorPoint(Point::ANCHOR_MIDDLE);  
  4. label4->setString("10");//设置显示的内容为”10“  
  5. this->addChild(label4,2);  


2）设置阴影

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. label4->enableShadow(Color3B::RED);  


4、取消所有特效
[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. label->disableEffect();//取消所有特效  


恩，就介绍到这里。具体的用法可以参考testCpp。

这篇博文内容虽比较简单，但却是极耗精力的....

尊重原创，转载请注明来源：http://blog.csdn.net/start530/article/details/22313087

这篇关于Cocos2dx 3.0 过渡篇 （二十一）自从Label有了freeType做靠山以后...enableShadow的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/261450。

相关文章

4B参数秒杀GPT-3.5：MiniCPM 3.0惊艳登场！

4B参数秒杀GPT-3.5：MiniCPM 3.0惊艳登场！

​ 面壁智能 在 AI 的世界里，总有那么几个时刻让人惊叹不已。面壁智能推出的 MiniCPM 3.0，这个仅有4B参数的"小钢炮"，正在以惊人的实力挑战着 GPT-3.5 这个曾经的AI巨人。 MiniCPM 3.0 MiniCPM 3.0 MiniCPM 3.0 目前的主要功能有： 长上下文功能：原生支持 32k 上下文长度，性能完美。我们引入了
阅读更多...
lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局，其中 label 控件位于 image 控件下方，你可以使用 lv_obj_set_flex_flow 来设置布局为垂直，并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例： 创建父容器：首先创建一个容器对象，该对象将作为布局的基础。设置容器为垂直布局：使用 lv_obj_set_flex_flow 设置容器
阅读更多...
Cmake之3.0版本重要特性及用法实例(十三)

Cmake之3.0版本重要特性及用法实例(十三)

简介： CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布：《Android系统多媒体进阶实战》🚀 优质专栏： Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏： 多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程：AAOS车载系统+AOSP14系统攻城狮入门视频实战课 🚀 人生格言： 人生从来没有捷径，只有行动才是治疗恐惧
阅读更多...
以后写代码都是AI自动写了，Cursor+Claude-3.5-Sonnet，Karpathy 点赞的 AI 代码神器。如何使用详细教程

以后写代码都是AI自动写了，Cursor+Claude-3.5-Sonnet，Karpathy 点赞的 AI 代码神器。如何使用详细教程

Cursor 情况简介 AI 大神 Andrej Karpathy 都被震惊了！他最近在试用 VS Code Cursor +Claude Sonnet 3.5，结果发现这玩意儿比 GitHub Copilot 还好用！ Cursor 在短短时间内迅速成为程序员群体的顶流神器，其背后的原因在于其默认使用 OpenAI 投资的 Claude-3.5-Sonnet 模型，这一举动不仅改变了代码生成
阅读更多...
Nuxt3入门：过渡效果（第5节）

Nuxt3入门：过渡效果（第5节）

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。 Nuxt 利用 Vue 的 <Transition> 组件在页面和布局之间应用过渡效果。 一、页面过渡效果 你可以启用页面过渡效果，以便对所有页面应用自动过渡效果。 nuxt.config.js export default defineNuxtConfig({app: {pageTransition: {name: 'fade',mode
阅读更多...
【C-实践】文件服务器（3.0）

【C-实践】文件服务器（3.0）

文件服务器1.0文件服务器2.0文件服务器4.0 概述 使用了 tcp + epoll + 线程池 + 生产者消费者模型，实现文件服务器 有两个进程，主进程负责接收退出信号用来退出整个程序；子进程负责管理线程池、客户端连接以及线程池的退出 子进程中的主线程生产任务，其他子线程消费任务 功能 主要功能：客户端连接服务器，然后自动下载文件 注意 实际传输速度
阅读更多...
HTMX：用HTML属性实现AJAX、CSS过渡和WebSockets

HTMX：用HTML属性实现AJAX、CSS过渡和WebSockets

前言 在现代 Web 开发中，用户界面的交互性和响应性是至关重要的。 用户期望网站和应用程序能够即时响应他们的操作，提供流畅和直观的体验。 传统的 JavaScript 库虽然功能强大，但往往伴随着复杂的配置和庞大的文件大小，这可能会影响应用的性能和开发效率。 介绍 htmx 是一个轻量级的 JavaScript 库，它允许开发者使用简单的 HTML 属性来实现复杂的交互功能。 它
阅读更多...
[vue小白]npm run运行以后无法关闭

[vue小白]npm run运行以后无法关闭

开启vue任务后，关闭git bash窗口发现端口仍然被占用，程序没有关闭 通过查询资料，大部分都说ctrl+c就可以了，但是经过实践发现并不可行，目测大部分都是复制粘贴的答案。 经过尝试，最终发现可能只能暴力关闭了 1.在cmd中输入netstat -ano查询占用端口号的pid 2. 然后在任务管理器中查询对应的任务并关闭 3. 在linux系统中更简单，直接kill -9 pid即可
阅读更多...
如何为 MongoDB 3.0.4 以下版本选择合适的 PyMongo 版本

如何为 MongoDB 3.0.4 以下版本选择合适的 PyMongo 版本

在使用 MongoDB 时，开发者通常会使用 Python 的 pymongo 库来与 MongoDB 进行交互。然而，不同版本的 MongoDB 需要匹配相应版本的 pymongo 才能正常运行。如果你的 MongoDB 版本较低（例如 3.0.4 以下），而使用了不兼容的 pymongo 版本，就会遇到连接失败或功能异常的问题。 在这篇文章中，我们将介绍如何为 MongoDB 3.0.4 以
阅读更多...
数据标注：批量转换json文件，出现AttributeError: module ‘labelme.utils‘ has no attribute ‘draw_label‘错误

数据标注：批量转换json文件，出现AttributeError: module ‘labelme.utils‘ has no attribute ‘draw_label‘错误

labelme版本更换为3.11.2 "D:\Anaconda3\Lib\site-packages\labelme\utils\draw.py"缺失？： import ioimport os.path as ospimport numpy as npimport PIL.Imageimport PIL.ImageDrawimport PIL.ImageFontdef label_co
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2