Cocos Creator | 通过 effect 实现卷轴展开和收拢效果

源码获取请关注公众号：

// 号外 //

本公众号由我和 honmono 共同维护，honmono 目前主要分享一些神奇的 shader 效果，各位大佬敬请期待

// 开发工具 //

creator 实现卷轴展开和收拢效果. 版本2.4.4. 源码位于文章末位, 需要的可以自取.

效果预览

实现方案

两种方案

通过自定义顶点+顶点着色器实现.
通过片元做色器实现.

2方案二片元做色器实现

看图, 其实只需要考虑卷曲部分, 正常部分正常赋值就可以了.

对于卷曲部分, 可以分为五种情况

终点位于第四象限
终点位于第一象限
终点位于第二象限
终点位于第三象限
卷曲部分已经超出一圈

· 终点位于第四象限

假设圆形半径为r, a表示卷曲部分的水平距离.

那么圆形的周长为 primeter = 2.0 * PI * radius,

这个时候在片元着色器中, 就有三种情况

当uv.x小于a的部分时, 我们就正常取值, 直接使用uv.x的值.
当uv.x的值处于a的部分时, 我们重新计算uv.x的值, 使其取到卷曲起来部分的像素值.
当uv.x的值超出a的部分, 那么就不渲染该像素.

上代码.

progress表示开始卷曲的位置, outLen表示卷曲部分的长度,radius表示圆的半径. realX表示重新计算后的uv.x坐标

if(outLen <= primeter * 0.25) {    // 判断终点是否在第四象限  if(offset > sin(outLen / radius) * radius) {    draw = false;                  // 第三种情况  }else {                          // 第二种情况    realX = asin(offset / radius) * radius + progress;  }}

· 当终点处于第一象限时

当终点处于第一象限时, 这个时候即可以取到a ~ r部分, 也可以取到0 ~ a部分的区域, 所以情况会比第一种要复杂一些.

分为四种情况

当uv.x小于a区域, 那么还是正常取值, 直接使用uv.x的值.
当uv.x处于0 ~ a区域, 那么和第四象限一样取值.
当uv.x处于a ~ r区域, 那么重新计算uv.x, 使其取到卷曲部分的值, 并且标记这一部分为背面.
当uv,x大于a ~ r区域, 丢弃

上代码, 一些变量的意思同上文.

if(outLen < primeter * 0.5 && offset < cos((outLen - primeter * 0.25) / radius) * radius) {  // 第二种情况  realX = asin(offset / radius) * radius + progress;}else if(offset >= radius) {  // 第四种情况  draw = false;}else {  // 第三种情况  realX = acos(offset / radius) * radius + progress + primeter * .25;  useTexture2 = true;}

· 当终点处于第二象限时

当终点处于第二象限时, 这个时候0 ~ r区域的就只显示背面图片了, 取值方式同上面终点位于第一象限时的a ~ r区域.

在-r ~ 0区域, 这个时候也会出现和终点位于第一象限时的两种情况.

还是分为四种情况.

当uv.x小于a区域时, 正常取值, 直接使用uv.x.
当uv,x处于a区域时, 我们重新计算uv.x的取值.
当uv.x处于0 ~ r区域时, 计算方式同终点位于第一象限的背面算法.
当uv.x大于r时, 丢弃

上代码.

// 判断是否处于第二象限if(outLen < primeter * 0.75) {  outLen = outLen - primeter * 0.5;  if(offset < -sin(outLen / radius) * radius) {    // 第一种情况    realX = realX;  }else {    // 第二种情况    realX = asin(-offset / radius) * radius + progress + primeter * 0.5;    useTexture2 = true;  }}

· 当终点处于第三象限

当终点处于第三象限时, 这个时候-r ~ 0区域的取值和第二象限一致了

分四种情况

uv.x小于-r ~ 0时, 还是正常取值, 直接使用uv.x
uv.x处于-r ~ 0区域时, 取值方式同第二象限的方式.
uv.x处于0 ~ r区域时, 取值方式同第一象限的方式.
uv.x大于0 ~ r区域时, 丢弃

// 判断是否处于第三象限或者已经被卷在里面了if(outLen > primeter * 0.75) {  if(offset < -radius) {    //第一种情况    realX = realX;  }else {    //第二种情况    realX = asin(-offset / radius) * radius + progress + primeter * 0.5;    useTexture2 = true;  }}

· 卷曲部分已经超出一圈

当卷曲部分已经超过一圈时, 因为里面的图被外面的图挡住了, 所以这个时候不需要在进行特殊处理, 只需要按照第二三种情况取值即可.

卷曲部分的处理到这里就结束了, 最后只需要动态的调整开始卷曲的位置, 就可以实现卷轴展开和收拢的效果了.

· 缺点

目前不支持有透明区域的图片, 因为计算实际uv.x时, 会去取透明区域的像素.而实际情况应该是当在第一,第二象限取值为透明像素时, 应该在去取第四,第三象限对应位置的纹理. 但是对于卷曲了好几层的图片这个方案也不奏效.

不过使用方案一可以解决这个问题.

1消失的方案一自定义顶点+顶点做色器

· 实现方法

方案一的方式比较朴实无华, 通过自定义顶点将图片每间隔几个像素取一个顶点的方式, 得到一个几百*几百的顶点. 类似mesh, 或者可以直接看sprite的九宫格模式(九宫格就是做了一个4*4的顶点). 然后计算对应的顶点索引.

let width = comp.texture.width;let height = comp.texture.height;let step = comp.step;this.row = Math.floor(height / step) + 1;this.col = Math.floor(width / step) + 1;this.stepRow = height / (this.row-1);this.StepCol = width / (this.col - 1);this.verticesCount = this.row * this.col;this.indicesCount = (this.row-1) * (this.col - 1) * 6;this._renderData['clear']();this.initData();

最后在顶点着色器中, 通过

if(x > centerX) {  if(outLen < primeter * range) {    float radian = (x - centerX) / radius;    pos.x = centerX + sin(radian) * radius + texturePos.x;  }else {    if(x > centerX + primeter * range) {      float radian = ((1.0-range) * primeter) / radius;      pos.x = centerX - sin(radian) * radius + texturePos.x;      pos.z = 0.0;    }else {      float radian = (primeter - (x - centerX)) / radius;      pos.x = centerX - sin(radian) * radius + texturePos.x;    }  }}

计算每一个顶点经过卷曲处理后的对应位置即可.

· 效果

可以看到这个是支持有透明区域的图片的.

· 缺点

可以明显看出和方案二在弯曲位置存在着差距, 毕竟这个方案是将图片分为了很多个小的三角形, 对这些三角形的处理, 而方案二是对片元的处理, 看起来更丝滑.

项目代码:

https://github.com/kirikayakazuto/CocosCreator_UIFrameWork

运行起来后, 进入卷轴效果后即可预览.

主要代码文件位于assets/Shader/EScroll.effect.

作者：honmono

排版：渡鸦

Cocos Creator | 通过 effect 实现卷轴展开和收拢效果相关推荐

Cocos Creator 2D Effect 入门 (1)
首先先创建一个Effect,将其命名为FirstShaders.再创建一个Material,将其命名为FirstShaderMat. 选中FirstEffectMat,在属性检查器中,设置Effect ...
Cocos Creator Effect 高斯模糊 (带算法)
通常,图像处理软件会提供"模糊"(blur)滤镜,使图片产生模糊的效果. "模糊"的算法有很多种,其中有一种叫做"高斯模糊"(Gaussia ...
Effect Exporter：一款 2D3D 特效编辑器插件，专为 Cocos Creator 深度定制
随着 Cocos Creator 3.x 版本的发布,Cocos Creator 的 3D 功能更加完善.开发者 Oreo大魔王着手制作了一款支持 Shader 2D&3D 的特效编辑器插件 ...
Cocos Creator 3D 材质系统：曲面效果如何实现？
引言前不久发布的 Cocos Creator 1.0.2 版本中正式加入了对 OPPO 小游戏.vivo 小游戏以及华为快游戏平台的支持,在诸多 Creator 3D 制作的小游戏案例中,<猪 ...
cocos creator实例--3D 足球
体育类游戏,3D 足球射门 ,Cocos Creator 3D 实现,附源码! 效果预览游戏介绍点击屏幕,松开手指,足球就会被踢出去,还缺少力度和方向控制,同时也缺少力度和方向的界面展现,后期会继 ...
用 shader effect 实现雨滴落水效果！Cocos Creator 3D !
最近逛论坛时,看到一位大佬在分享各种 shader 特效.基于其中的水波 shader ,白玉无冰写了一个玩水效果!文章底部获取完整代码!还可以试试水哦! 先一起看看效果- 点击任意位置,会在该位置生 ...
【Cocos Creator 3.x】ShaderToy 中的 iTime 对应 Cocos Effect 中是什么？
前言在网上 ShaderToy 中找了很久的一个 Shader 效果,不知道怎么移至到 Cocos Creator 中. 介绍 ShaderToy 中的 iTime 是 Shader 着色器播放时间 ...
如何用 Cocos Creator 3D 如何实现小姐姐的发丝高光？
Introduction PRB 材质改变了人们对于引擎实时渲染画面的理解,让玩家在游戏中,也能够体验到锈蚀的金属,厚重的皮革,精细的纹理,感受更加真实的世界.在正式发布的 Cocos Creator ...
cocoscreator3d 模型透明_用 Cocos Creator 3D 实现小姐姐的发丝高光
本文作者:武云潇 Cocos Creator 3D 引擎开发工程师 >>作者知乎:YunHsiao Wu >>作者其他文章:<It's not a bug, it's ...

Cocos Creator | 通过 effect 实现卷轴展开和收拢效果

Cocos Creator | 通过 effect 实现卷轴展开和收拢效果相关推荐

最新文章

热门文章