本文教大家如何使用shader让描边动起来。实质就是间隔一定时间改变描边的颜色。难点:如何通过程序把颜色传给shader。想在quick2.25里面尝试的朋友,参考quick2.25精灵变灰配置一下环境。

一、shader代码。都是cocos官方自带的

//outLiner.vsh
#ifdef GL_ES
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
#else
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
#endif
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color; void main()
{
gl_Position = CC_MVPMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
} //outLiner.fsh #ifdef GL_ES
precision mediump float;
#endif
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
uniform vec3 u_outlineColor;
uniform float u_threshold;
uniform float u_radius;
uniform sampler2D CC_Texture0; void main()
{
float radius = u_radius;
vec4 accum = vec4(0.0);
vec4 normal = vec4(0.0);
normal = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y));
//获取上下左右四个像素的纹理
accum += texture2D(CC_Texture0, vec2(v_texCoord.x - radius, v_texCoord.y - radius));
accum += texture2D(CC_Texture0, vec2(v_texCoord.x + radius, v_texCoord.y - radius));
accum += texture2D(CC_Texture0, vec2(v_texCoord.x + radius, v_texCoord.y + radius));
accum += texture2D(CC_Texture0, vec2(v_texCoord.x - radius, v_texCoord.y + radius)); accum *= u_threshold;
accum.rgb = u_outlineColor * accum.a;
accum.a = 0.0; normal = ( accum * (1.0 - normal.a)) + (normal * normal.a); gl_FragColor = v_fragmentColor * normal;
}

二、shader调用

local color = {{,,},{,,},{,,}}
local index = self.sp = display.newSprite("img_248.png"):addTo(self)
self:outLiner(self.sp) local scheduler = require("framework.scheduler")
scheduler.scheduleGlobal(handler(self,self.changeColor),0.1) --每间隔0.1秒改变一下颜色 function MainScene:changeColor()
if index> then
index =
end
local color = color[index]
local p = self.sp:getShaderProgram()
local outlineColor = p:getUniformLocationForName("u_outlineColor"); --对应ps里面的u_outlineColor变量
p:use() --注意必须加这个 否则不管用
p:setUniformLocationWith3fv(outlineColor,color,) -- 给u_outlineColor赋值
index = index +
end
--实质上getUniformLocationForName里面调用opengl的glGetUniformLocation(m_uProgram, name);
--setUniformLocationWith3fv调用opengl 的glUniform3iv();
--作用就是给shader里面的uniform变量赋值
function MainScene:outLiner(node)
local pProgram = CCGLProgram:createWithFilenames("res/shader/outLiner.vsh","res/shader/outLiner.fsh")
pProgram:addAttribute("a_position", )
pProgram:addAttribute("a_color", )
pProgram:addAttribute("a_texCoord", )
pProgram:link()
pProgram:updateUniforms()
local threshold = pProgram:getUniformLocationForName("u_threshold");
pProgram:setUniformLocationWith1f(threshold,1.75)
local radius = pProgram:getUniformLocationForName("u_radius");
pProgram:setUniformLocationWith1f(radius,0.001)
node:setShaderProgram(pProgram)
end

特别注意:导出的setUniformLocationWith3fv函数,传的第二个参数有问题,需要做如下修改:(大家以后从lua中传数组给C++ 也可以参考此方法)

附上最终效果图:

[原]quick2.25让描边闪起来的更多相关文章

  1. [原]quick2.25精灵变灰

    由于quick2.25没有导出shader相应的接口,所以2.25无法直接使用shader. 本文简单介绍如何导出相应接口,同时教大家使用shader 实现精灵变灰 一.编写静态函数,以供导出使用(直 ...

  2. FlashBack 闪回

    [学习目标] Flashback Database 功能非常类似与RMAN的不完全恢复,它可以把整个数据库回退到 过去的某个时点的状态,这个功能依赖于Flashback log日志.比RMAN 更快速 ...

  3. Unity3d游戏角色描边

    本文发布于游戏程序员刘宇的个人博客,欢迎转载,请注明来源https://www.cnblogs.com/xiaohutu/p/10834491.html 游戏里经常需要在角色上做描边,这里总结一下平时 ...

  4. [原]quick集成spine动画

    更新说明: 新增了骨骼绑定node用法 参考:http://blog.csdn.net/n5/article/details/21795265 在SkeletonRenderer.h 和cpp里面新加 ...

  5. 【DG】利用闪回数据库(flashback)修复Failover后的DG环境

    利用闪回数据库(flashback)修复Failover后的DG环境 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能, ...

  6. 6. Oracle闪回特性

    Oracle 闪回 (flashback)是9i版本提供的新特性.这一特性:其他数据库(PostgreSQL,Mysql)是羡慕不已.对数据恢复提供非常便捷的方式.闪回技术通常用于快速简单恢复数据库中 ...

  7. 移动端web开发技巧

    META相关 1. 添加到主屏后的标题(IOS)

  8. 移动端WEB开发备忘录

    META相关 1. 添加到主屏后的标题(IOS)  <meta name="apple-mobile-web-app-title" content="标题" ...

  9. Hive性能优化

    1.概述 继续<那些年使用Hive踩过的坑>一文中的剩余部分,本篇博客赘述了在工作中总结Hive的常用优化手段和在工作中使用Hive出现的问题.下面开始本篇文章的优化介绍. 2.介绍 首先 ...

随机推荐

  1. SOA问题处理

    R12.1: How To Generate SOA Log For Debugging SOA Provider Issues (文档 ID 828753.1) 转到底部 In this Docum ...

  2. Apache Mina(一)

    原文链接:http://www.cnblogs.com/xuekyo/archive/2013/03/06/2945826.html Apache Mina是一个能够帮助用户开发高性能和高伸缩性网络应 ...

  3. HTML5 Canvas实现黑客帝国文字掉落效果

    效果: 原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列. 代码: HTML: <canvas id="c"></canvas> ...

  4. CSS扇形展开效果

    知识点预备: [1]CSS3中特别重要的transform中的rotate(),现在transform可以将元素进行2D和3D变形. 2D transform常用的transform-function ...

  5. Beta分布和Dirichlet分布

    在<Gamma函数是如何被发现的?>里证明了\begin{align*} B(m, n) = \int_0^1 x^{m-1} (1-x)^{n-1} \text{d} x = \frac ...

  6. .net使用FluentValidation进行服务端验证。

          背景 最近使用asp.mvc 做一个在线口语系统项目,在服务端验证问题遇到了一些小问题. 自己根据数据库表user定义一个数据库表实体对象UserDbEntity [Table(" ...

  7. 分析Linux内核中进程的调度(时间片轮转)-《Linux内核分析》Week2作业

    1.环境的搭建: 这个可以参考孟宁老师的github:mykernel,这里不再进行赘述.主要是就是下载Linux3.9的代码,然后安装孟宁老师编写的patch,最后进行编译. 2.代码的解读 课上的 ...

  8. git在分支上创建目录和文件

    创建一个空目录,在其中初始化git git init 创建一个新文件,此时默认在master分支上 touch file1.txt add到staging area git add file1.txt ...

  9. oprofile

    一.原理 在关注事件发生一定次数时,进行一次采样,记录下需要的信息(比如指令寄存器或栈寄存器信息). 二.参数 项 说明 eventname   要关注的事件名称,常用的事件名称及功能如下:   CP ...

  10. Advanced Puppet 系列的前言

    什么是Advanced 在网络上,你能找到大量关于Puppet的安装,配置以及基础用法的文章和博客.你在通过一段时间的实战后,熟练掌握了Puppet基础用法,随着你管理的集群日益扩大,你的部署逻辑越来 ...