Cocos2d-x shader学习3: sprite描边(Outline)
Cocos2d-x 3.x的label使用了freetype字体引擎(http://www.freetype.org/),可以很轻松的实现描边和阴影效果。所以本篇文章只针对于sprite
来实现描边效果。
官方demo中描边shader没有看懂,看效果好像是有点问题,透明的部分变成了黑色。作者也没有怎么解释,直接丢了一个网址出来(http://www.idevgames.com/forums/thread-3010.html),看样子是参考了这个帖子。
后来从网上别人的博客中找到了一遍关于描边shader的文章,这篇文章用的方法跟我想的差不多,优点是很容易理解,缺点是相对于官方demo给的描边shader效率上差了点。原文地址:http://blog.csdn.net/u011281572/article/details/44999609。
原文的代码考虑了label的描边,这个对于现在的cocos3.x版本来说有点多余,我就对原文的代码做了些改动,去掉了label描边的那块儿代码,有些逻辑也做了一些改变,使得更容易理解一些。
下面是我改动后的代码:
varying vec4 v_fragmentColor; // vertex shader传入,setColor设置的颜色
varying vec2 v_texCoord; // 纹理坐标
uniform float outlineSize; // 描边宽度,以像素为单位
uniform vec3 outlineColor; // 描边颜色
uniform vec2 textureSize; // 纹理大小(宽和高),为了计算周围各点的纹理坐标,必须传入它,因为纹理坐标范围是0~1
// 判断在这个角度上距离为outlineSize那一点是不是透明
int getIsStrokeWithAngel(float angel)
{
int stroke = 0;
float rad = angel * 0.01745329252; // 这个浮点数是 pi / 180,角度转弧度
vec2 unit = 1.0 / textureSize.xy;//单位坐标
vec2 offset = vec2(outlineSize * cos(rad) * unit.x, outlineSize * sin(rad) * unit.y); //偏移量
float a = texture2D(CC_Texture0, v_texCoord + offset).a;
if (a >= 0.5)// 我把alpha值大于0.5都视为不透明,小于0.5都视为透明
{
stroke = 1;
}
return stroke;
}
void main()
{
vec4 myC = texture2D(CC_Texture0, v_texCoord); // 正在处理的这个像素点的颜色
if (myC.a >= 0.5) // 不透明,不管,直接返回
{
gl_FragColor = v_fragmentColor * myC;
return;
}
// 这里肯定有朋友会问,一个for循环就搞定啦,怎么这么麻烦!其实我一开始也是用for的,但后来在安卓某些机型(如小米4)会直接崩溃,查找资料发现OpenGL es并不是很支持循环,while和for都不要用
int strokeCount = 0;
strokeCount += getIsStrokeWithAngel(0.0);
strokeCount += getIsStrokeWithAngel(30.0);
strokeCount += getIsStrokeWithAngel(60.0);
strokeCount += getIsStrokeWithAngel(90.0);
strokeCount += getIsStrokeWithAngel(120.0);
strokeCount += getIsStrokeWithAngel(150.0);
strokeCount += getIsStrokeWithAngel(180.0);
strokeCount += getIsStrokeWithAngel(210.0);
strokeCount += getIsStrokeWithAngel(240.0);
strokeCount += getIsStrokeWithAngel(270.0);
strokeCount += getIsStrokeWithAngel(300.0);
strokeCount += getIsStrokeWithAngel(330.0);
if (strokeCount > 0) // 四周围至少有一个点是不透明的,这个点要设成描边颜色
{
myC.rgb = outlineColor;
myC.a = 1.0;
}
gl_FragColor = v_fragmentColor * myC;
}
大致的逻辑是:
先判断当前像素是否透明,如果不透明则直接返回。如果是透明像素,就判断这个点周围12个方向,每个方向距离当前像素距离是outlineSize的像素点是否透明,只要有一个是非透明像素,就把当前像素点设为描边的颜色,并设置成非透明。
效果如下:
Cocos2d-x shader学习3: sprite描边(Outline)的更多相关文章
- 基于Shader实现的UGUI描边解决方案
基于Shader实现的UGUI描边解决方案 前言 大扎好,我系狗猥.当大家都以为我鸽了的时候,我又出现了,这也是一种鸽.创业两年失败后归来,今天想给大家分享一个我最近研究出来的好康的,比游戏还刺激,还 ...
- 【Unity Shaders】Shader学习资源和Surface Shader概述
写在前面 写这篇文章的时候,我断断续续学习Unity Shader半年了,其实还是个门外汉.我也能体会很多童鞋那种想要学好Shader却无从下手的感觉.在这个期间,我找到一些学习Shader的教程以及 ...
- Unity Shader 学习之旅
Unity Shader 学习之旅 unityshader图形图像 纸上学来终觉浅,绝知此事要躬行 美丽的梦和美丽的诗一样 都是可遇而不可求的——席慕蓉 一.渲染流水线 示例图 Tips:什么是 GP ...
- Unity Shader 学习之旅之SurfaceShader
Unity Shader 学习之旅之SurfaceShader unity shader 图形图像 如果大地的每个角落都充满了光明 谁还需要星星,谁还会 在夜里凝望 寻找遥远的安慰——江河 官方文档 ...
- Shader 学习工具篇 可视化公式工具ZGrapher
大家好,我是怒风,本篇介绍公式可视化公式工具ZGrapher,尝试通过可视化的方式分析一下Shader中应用的公式,以求帮助初学者快速理解Shader编程中的一些常用公式 本篇的目的两个, 第一,介绍 ...
- Shader学习笔记
Shader学习笔记 例子: Shader "SrfShader1"{ //定义显示在Inspector中的变量,并从Inspector中获取值 Properties{ _Colo ...
- 第四章 开始Unity Shader学习之旅(2)
目录 1. 强大的援手:Unity提供的内置文件和变量 1.1 内置的包含文件 1.2 内置的变量 2. Unity提供的Cg/HLSL语义 2.1 什么是语义 2.2 Unity支持的语义 2.3 ...
- Cocos2d-x shader学习1: 灰度shader
灰度shader 最近在学习shader,就把cocos2d-x 3.x版本中的很简单也很常用的灰度shader拿出来学习一下. #ifdef GL_ES precision mediump floa ...
- cocos2d&cocos2dx学习资源
汇总一下自己学习Cocos2d和cocos2dx认为比較好的一些资源: 书籍: <iPhone&iPad cocos2d游戏开发实战> Steffen Itterheim < ...
随机推荐
- Angular - - ngIf、ngSwitch、ngHide/ngShow
在组合这些ng指令写到一篇文章里的时候,基本是有规则的,野兽把功能相似相近的一类大多会组合到一起,方便理解和记忆. 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断. ...
- 转:找不到include xgpio.h;Unresolved include xgpio.h
这个文档讲解的是在SDK下出现的问题,如果在ISE下编译是有错的,不能正常进入SDK,那这篇文档不适合你. 问题是这样的.根据教程<XILINX FPGA Verilog编程大全>做SOC ...
- win10新特性,ubuntu子系统(安装及配置)
最新版win10下可以直接跑ubuntu镜像,直接入正题. 这里如果你没有可能是你的版本不是最新的,我这里是最新的win10直接是有这个功能的.勾选后会要求重启,确定即可. 然后win键弹出搜索,输入 ...
- iOS 之 alcatraz (插件管理器)
1. 安装 1.1. 打开命令行 curl -fsSL https://raw.githubusercontent.com/supermarin/Alcatraz/deploy/Scripts/ins ...
- 清除delphi 控件DBgrid 的记录
http://blog.csdn.net/windhaunting/article/details/4751560 1.TTable(DBGrid1.DataSource.DataSet).Empty ...
- Java线程:线程中断
interrupt方法可以用来请求终止线程. 当对一个线程调用interrupt方法时,线程的中断状态被置位.这时每个线程都有boolean标志.每个线程都应该不时的检查这个标志,以判断线程是否被中断 ...
- Java中的集合类型的继承关系图
Java中的集合类型的继承关系图
- mybatis springmvc调用oracle存储过程,返回记录集
参考: http://bbs.csdn.net/topics/390866155 辅助参考: http://www.2cto.com/kf/201307/226848.html http://blog ...
- 浅谈js代码规范
要放假了 后天就可以 回家,心里很高兴,忙里偷闲写篇博客吧!!!! 声明:这是我自己总结的,如果有不对的地方请大家不要较真 一 .变量声明 对所有的变量声明,我们都应该指定var,如果没有指定var ...
- 简单加解密算法 - vb.net
Public Class Form1 Dim charAarray() As Char '加密 Private Sub Btn_En_Click(sender As System.O ...