十、cocos2d-x 字体描边和制作阴影
关于字体描边的实现,不考虑效果和效率的话,是有三种方式:
① 利用CCLabelTTF制作文字描边和阴影效果
② 利用CCRenderTexture渲染文理的方式生成带有描边效果的文字
③ 利用shader来实现,使用cocos2dx中CCGLProgram类与OpenGl绘图机制中的着色器交互来实现
第三种方式我没试过,不过基于shader的强大特效功能,实现起来是没问题的,后面我还会写一篇关于shader来实现改变纹理颜色做特殊效果的文章。现在我们主要研究一下前两种。前两种方式从原理来说都是利用多个CCLabelTTF的重叠来做的,只不过第二种方式是使用CCLabelTTF绘制了一个带有描边效果的文字图片。
利用CCLabelTTF制作文字描边和阴影效果
网上大量博客都讲了这种方式,写的很好,这里给一个链接:http://blog.csdn.net/song_hui_xiang/article/details/17375279
原理就是创建了4个描边用的CCLabelTTF和一个正文主体CCLabelTTF,先画描边的label,颜色设置成要用的描边色,分别在目标位置出做上下左右4个方向偏移,然后在盖上我们的正文主体label即可。
- /*string 文本
- *fontName 文本字体类型
- *fontSize 文本大小
- *color3 文本颜色
- *lineWidth 所描边的宽度
- */
- CCLabelTTF* HelloWorld::textAddStroke(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float lineWidth)
- {
- /* 正文CCLabelTTF */
- CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);
- center->setColor(color3);
- /* 描边CCLabelTTF 上 */
- CCLabelTTF* up = CCLabelTTF::create(string, fontName, fontSize);
- up->setColor(ccBLACK);
- up->setPosition(ccp(center->getContentSize().width*0.5, center->getContentSize().height*0.5+lineWidth));
- center->addChild(up,-1);
- /* 描边CCLabelTTF 下 */
- CCLabelTTF* down = CCLabelTTF::create(string, fontName, fontSize);
- down->setColor(ccBLACK);
- down->setPosition(ccp(center->getContentSize().width*0.5, center->getContentSize().height*0.5-lineWidth));
- center->addChild(down,-1);
- /* 描边CCLabelTTF 左 */
- CCLabelTTF* left = CCLabelTTF::create(string, fontName, fontSize);
- left->setPosition(ccp(center->getContentSize().width*0.5-lineWidth, center->getContentSize().height*0.5));
- left->setColor(ccBLACK);
- center->addChild(left,-1);
- /* 描边CCLabelTTF 右 */
- CCLabelTTF* right = CCLabelTTF::create(string, fontName, fontSize);
- right->setColor(ccBLACK);
- right->setPosition(ccp(center->getContentSize().width*0.5+lineWidth,center->getContentSize().height*0.5));
- center->addChild(right,-1);
- return center;
- } <span style="font-family: verdana, Arial, Helvetica, sans-serif;"> </span>
阴影效果就更简单了,只需要两个label,一个阴影用的label和正文label,只需要设置阴影label:颜色、透明度和位置偏移即可。
- /*string 文本
- *fontName 文本字体类型
- *fontSize 文本大小
- *color3 文本颜色
- *shadowSize 阴影大小
- *shadowOpacity 阴影透明度
- */
- CCLabelTTF* HelloWorld::textAddShadow(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float shadowSize,float shadowOpacity)
- {
- /* 阴影label */
- CCLabelTTF* shadow = CCLabelTTF::create(string, fontName, fontSize);
- shadow->setColor(ccBLACK);
- shadow->setOpacity(shadowOpacity);
- /* 正文label */
- CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);
- center->setColor(color3);
- center->setPosition(ccp(shadow->getContentSize().width*0.5-shadowSize,shadow->getContentSize().height*0.5+shadowSize));
- shadow->addChild(center);
- return shadow;
- } <span style="font-family: verdana, Arial, Helvetica, sans-serif;"> </span>
这里提到一点,就是具体要创建几个label是不一定的,创建的越多,效果是描边越粗越亮但是效率越低,比如创建了40个描边用的label,4个方向各10个,互相之间有微小的偏移不完全重叠,这样的效果是label更加的粗且亮,阴影效果等同。
利用CCRenderTexture渲染文理的方式生成带有描边效果的文字
这种方式难点在于,很多人不了解OpenGl的绘图着色机制,不过也不要紧,这里只用到了一点着色知识,就是颜色的混合,这个大多数的人都知道,红色和绿色混合会变成黄色,黑色和任何颜色混合还是黑色(0*任何数=0),任何颜色和白色的混合不改变颜色。
绘图时,OpenGL 会把源颜色和目标颜色各自取出,并乘以一个系数(源颜色乘以的系数称为“源因子”,目标颜色乘以的系数称为“目标因子”),然后做运算得到新的颜色值,并按照新的颜色来绘制。
比如,RGB格式,原来的颜色是(255,0,0)--红色,目标颜色是(0,255,0)--绿色,加入系数为{1,0},运算方式为颜色的叠加,这意味着新的颜色为(255,0,0)*1+(0,255,0)*0 = (255,0,0)--红色,就是完全不用目标颜色的值,相当于没变色, 系数中源因子为前者:1,目标因子为后者:0,这是{1,0}的混合机制。
好了,那么我们来了解一下cocos2dx的渲染是怎么做的。
在cocos2dx中的可渲染的节点都是CCNode的子类,如精灵、场景、文本,CCNode有一个渲染混色的函数glBlendFunc()和setBlendFunc(),操作的是ccBlendFunc,ccBlendFunc有两个调节变量,ccBlendFunc func = { GL_SRC_ALPHA, GL_ONE},这个调节变量就是前面说的系数:
GL_SRC_ALPHA:表示使用源颜色的alpha值来作为源因子。
GL_ONE: 表示使用1.0作为因子,实际上相当于完全的使用了这种颜色参与混合运算。
这类参数有很多,自己可以跟踪引擎代码内部去看。
再介绍一下,CCRenderTexture生成描边字体的原理,CCRenderTexture可以理解为一张纹理画布,我们可以再这张画布上涂鸦,当我们收工的时候,这张画就算画好了,即生成一张纹理。因此,我们是在画布上,用一个label在不同的位置不断的去画,类似第一种方式,我们在画布上绘制label的时候,在目标位置处的360个方向画多个label,重叠,最后通过画布就生成带有描边文字的一张纹理图,然后用这张纹理图生成一个精灵放到场景里,完毕。
下面先把代码贴上来:
- CCTexture2D* FlyBloodLabel::createStrokeTexture(const char* value,float strokeValue,ccColor3B color)
- {
- // float fontSize = m_fontSize - 2 * strokeSize;
- /* 创建一个CCLabelTTF,含有期望字体样式,作为画笔 */
- CCLabelTTF *label = CCLabelTTF::create(value,"Arial",EFFECT_LABEL_FONT_SIZE);
- /* 通过label的大小来设置最终生成的纹理图片的大小,strokeValue为描边字体的偏移量,影响粗细 */
- CCSize textureSize = label->getContentSize();
- textureSize.width += 2 * strokeValue;
- textureSize.height += 2 * strokeValue;
- /* 监测OpenGl的错误状态 */
- glGetError();
- /* 创建一张纹理画布 */
- CCRenderTexture *rt = CCRenderTexture::create(textureSize.width, textureSize.height);
- if(!rt)
- {
- CCLog("create render texture failed !!!!");
- addChild(label);
- return 0;
- }
- /* 设置描边的颜色 */
- label->setColor(color);
- /*
- *拿到源文字的混色机制,存储以备恢复,并设置新的目标混色机制
- *混色机制设为:源颜色透明度(影响亮度)和目标颜色(影响颜色)
- */
- ccBlendFunc originalBlend = label->getBlendFunc();
- ccBlendFunc func = { GL_SRC_ALPHA, GL_ONE};
- label->setBlendFunc(func);
- /* 这是自定义的一些调整,倾斜了一点 */
- label->setAnchorPoint(ccp(0.5, 0.5));
- label->setRotationX(15);
- /* 张开画布,开始绘画 */
- rt->begin();
- for(int i = 0; i < 360; i += 5)//每变化5度绘制一张
- {
- float r = CC_DEGREES_TO_RADIANS(i); //度数格式的转换
- label->setPosition(ccp(textureSize.width * 0.5f + sin(r) * strokeValue,textureSize.height * 0.5f + cos(r) * strokeValue));
- /* CCRenderTexture的用法,在begin和end之间visit的纹理,都会画在CCRenderTexture里面 */
- label->visit();//画了一次该label
- }
- /* 恢复原始的label并绘制在最上层 */
- label->setColor(ccWHITE);
- label->setBlendFunc(originalBlend);
- label->setPosition(ccp(textureSize.width * 0.5f, textureSize.height * 0.5f));
- label->visit();
- /* 在画布上绘制结束,此时会生成一张纹理 */
- rt->end();
- /* 取出生成的纹理,添加抗锯齿打磨,并返回 */
- CCTexture2D *texture = rt->getSprite()->getTexture();
- texture->setAntiAliasTexParameters();// setAliasTexParameters();
- return texture;
- }
除此之外,还有一种方式就是Shader,这个还在研究,不过它的特效功能着实强大,以后逐步学习。
出处:http://blog.csdn.net/ys5773477/article/details/39521959
十、cocos2d-x 字体描边和制作阴影相关推荐
- cocos2d-x 全面总结--字体描边和制作阴影
关于字体描边的实现,不考虑效果和效率的话,是有三种方式: ① 利用CCLabelTTF制作文字描边和阴影效果 ② 利用CCRenderTexture渲染文理的方式生成带有描边效果的文字 ③ 利用sha ...
- PHP生成海报 文字描边,海报字体 怎么为海报字体添加描边样式?海报文字描边怎么做?海报字体描边样式制作...
今天是十月的最后一天啦,转眼2019年只剩下两个月了,这时间啊,走得真快,还没好好感受呢,都快要2020年了.而小编倒好,还觉得现在是2018年呢~哈哈.好啦,不说废话了,还是来看看今天的教程方案吧! ...
- 基于全球谷歌卫星影像的大字体挂图打印制作方法
1. 概述 万能地图下载器下载的卫星影像除了可以应用于测绘项目或GIS系统中之外,还有一个非常简单的应用,那就是制作一幅可贴在办公室墙上的挂图.我们可以根据自己的需要在影像上叠加现有矢量数据或手动标注 ...
- ttf字体库裁剪工具制作与使用 sfntly,FontSubsetGUI,FontPruner
https://blog.csdn.net/linxinfa/article/details/88427808 关于字体剥离和精简工具 FontSubsetGUI 和 FontPruner 的比较. ...
- canvas中实现字体描边
在做项目的时候,我使用了text-strok这个css属性实现了字体描边的效果,但是当用html2canvas将DOM元素转成为canvas的时候却发现字体描边是没有出现的,当然,canvas2htm ...
- CSS实现字体描边的方法
我们经常做的边框以及分割线之类的是基于盒子模型的,一般使用border就可以搞定,但是在某些时候需要做一些字体的描边的功能, 比如像这种的,在CSS中也确实是有一个属性可以添加字体描边的, -webk ...
- HTML文字描边像素,css怎么实现字体描边效果?
css怎么实现字体描边效果?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS3 中有text-stroke属性,加上-webkit-前缀兼容性也还不 ...
- mooc课程下载_如何使用十大商学院的免费课程制作MOOC“ MBA”
mooc课程下载 by Laurie Pickard 通过劳里·皮卡德(Laurie Pickard) 如何使用十大商学院的免费课程制作MOOC" MBA" (How to mak ...
- unity怎么在文本中修改字体_[专栏作家]UGUI中CustomFont字体使用与制作
原标题:[专栏作家]UGUI中CustomFont字体使用与制作 前言: 如何在UGUI中使用自定义的数字图片.在开发过程中,美术同学会给出类似艺术数字图片如下图: 那在UGUI系统中如何使用呢? U ...
最新文章
- 微软 Surface Pro、Studio、Laptop 全线更新
- 汇编语言 实验10.1 显示字符串
- Python编程基础:第四节 类型转换Type Cast
- HDU2608 0 or 1
- css 设置背景图片模糊,内容不模糊
- VGA光端机技术原理及应用领域介绍
- go语言一天入门(下)
- 攀钢告诉你:钢铁是怎样用AI炼成的?
- amd显卡风扇调节_中端游戏显卡新晋黑马,华硕ROG STRIX RX5600XT O6G GAMING拆解评测...
- Perl 语言流行度处于历史最低点
- Eclipse Spring Tool Suite常用配置
- iView admin网站后台管理系统模板v2.5.0
- 计算机装固态硬盘,电脑怎么装固态硬盘?电脑加装固态硬盘步骤教程
- iOS开发:唯一标志符
- HTML移动端 实现刻度尺效果
- android studio中的apk位置
- 这108道 JavaOOP 面试题 你是不是都会了?
- 一台计算机连接两个投影,事实:如何将两个外接显示器连接到笔记本电脑以同时实现三个屏幕?...
- scanf()函数用法规则探索——c语言,以及%c和%s的语法特性
- 10以内加减法编程_500字以内的面向对象编程。
热门文章
- Unity报错之【发布UWP显示“Could not find any supported UWP SDK installations”】
- ASP.NET MVC5 使用NPOI导出ExceL 返回浏览器下载
- windows ------ 证书导入(安装)
- ABP应用——修改EF Core
- Vue+Webpack打造todo应用(慕课学习笔记)
- Scout - 可扩展的服务器和应用监控服务
- FPGA控制AD7606进行数据采集
- 转:CEO, CFO, CIO, CTO, CSO是什么
- Julia中的numerator()函数
- 若干物联网无线技术 - NB-IOT、LoRa、433、GPRS、2.4G、PKE近场通信,基础理论与开发点滴总结