欢乐水杯(happy glass)中流体的一种实现!图文视频讲解 ! Cocos Creator!
使用cocos creator v2.2.2 实现流体效果 ! 图文+视频讲解!
效果预览
实现原理
整体思路是参考论坛中的一个帖子
这款游戏中水的粘连效果在Construct3中利用图层很容易实现,就是每个水滴都是挂了两个圆形图片素材,其中一个是水滴本来的蓝色,另一个是其他颜色且素材边缘是半透明的。当几个水滴靠近时让半透明素材边缘相互重叠,这时原本半透明的边缘透明度变低。通过在当前图层中使用Shader,并设定Alpha阈值——小于Alpha阈值部分按全透明处理,大于Alpha阈值部分则按不透明处理——这样一来,一个单独孤立的水滴,其半透明边缘全部被处理成全透明,以此表现一个孤立的水滴,而挤在一起的几个水滴,其重叠的边缘就会处理成不透明,从而形成水滴粘连的效果,代表汇集在一起的水滴,并模拟水的张力。
由于Cocos Creator没有Construct3中的图层Layer概念,不能对一个图层中全部的图片素材整体使用一个Shader,因此上述方法并不适用。
那么问题就是——有没有别的办法让Cocos Creator实现上述水的效果?
上面一段是论坛原文。顺着思路走,这里准备一张特殊的图片。这个图片从内到外alpha
(不透明度)逐渐变小。
当两张图片靠近时,重叠区域的透明度会变小。小于alpha阈值部分按全透明处理,大于alpha阈值部分则按不透明处理。这样就能实现水滴连接效果了。
cocos creator 中已经内置了ALPHA_TEST
函数。
所以我们只要加一个不透明处理就可以了,shader
的主要代码如下:
ALPHA_TEST(o);
o.a = 1.0;
现在我们就要让这些水滴在同一个层级上使用这段shader
。该如何做呢?
我们需要添加一个新的摄像机,让这个摄像机专门拍摄水滴节点,然后再把拍摄好的图片放在一个sprite
节点,再对这个sprite
节点作shader
处理。
把摄像机绑定在一张图的代码参考如下:
const texture = new cc.RenderTexture();
texture.initWithSize(this.sp_water_show.node.width, this.sp_water_show.node.height);
const spriteFrame = new cc.SpriteFrame();
spriteFrame.setTexture(texture);
this.camera_water.targetTexture = texture;
this.sp_water_show.spriteFrame = spriteFrame;
最后,给水滴添加物理组件,在场景内布置一些物理节点,随手写几行水滴生成代码,就可以看到水滴落下的效果了。
学会思考,拆解需求,解决问题。
以上为白玉无冰使用 Cocos Creator v2.2.2
开发"流体效果"
的技术分享。如果对你有点帮助,欢迎分享给身边的朋友。
欢乐水杯(happy glass)中流体的一种实现!图文视频讲解 ! Cocos Creator!的更多相关文章
- Java中UIManager的几种外观的详细讲解
Java'中的几种Look and Feel 1.Metal风格 (默认) String lookAndFeel = "javax.swing.plaf.metal.MetalLookAnd ...
- Cocos Creator 中 _worldMatrix 到底是什么(上)
Cocos Creator 中 _worldMatrix 到底是什么(上) 1. (矩阵)Matrix是什么,有什么用 (矩阵)Matrix一个神奇的存在?在开发过程中对里边各项值的含义是不是抓耳挠腮 ...
- 【原】实时渲染中常用的几种Rendering Path
[原]实时渲染中常用的几种Rendering Path 本文转载请注明出处 —— polobymulberry-博客园 本文为我的图形学大作业的论文部分,介绍了一些Rendering Path,比较简 ...
- 解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&q ...
- Android中Button的五种监听事件
简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activ ...
- 转载:WinForm中播放声音的三种方法
转载:WinForm中播放声音的三种方法 金刚 winForm 播放声音 本文是转载的文章.原文出处:http://blog.csdn.net/jijunwu/article/details/4753 ...
- PHP中常见的五种设计模式
设计模式只是为 Java架构师准备的 — 至少您可能一直这样认为.实际上,设计模式对于每个人都非常有用.如果这些工具不是 “架构太空人” 的专利,那么它们又是什么?为什么说它们在 PHP 应用程序中非 ...
- Jquery中each的三种遍历方法
Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...
- C#中常用的几种读取XML文件的方法
1.C#中常用的几种读取XML文件的方法:http://blog.csdn.net/tiemufeng1122/article/details/6723764/
随机推荐
- python 内置方法、数据序列化
abc(*args, **kwargs) 取绝对值 def add(a,b,f): return f(a)+f(b) res = add(3,-6,abs) print(res) all(*args, ...
- 垃圾回收GC
每种语言都有自己的垃圾回收机制.接下来我们来讲一下python的垃圾回收机制. 小整数对象池:python对小整数的定义为[-5,257),这些整数对象是提前建立好的,不会被垃圾回收.单个字母也一 ...
- nginx 代理第三方邮件站点
需求:公司业务服务器使用的是阿里云,要求内网(仅有内网IP)所有流量走网关服务器(有外网IP及内网IP),内网服务器需要调用一个公网上的第三方邮件站点.在参考了https://www.linuxba. ...
- Seeing AI:计算机视觉十年磨一剑,打造盲人的“瑞士军刀”
Mary Bellard(左)和AnneTaylor(右)是Seeing AI开发团队的成员,SeeingAI成果的背后是计算机视觉数十年研究的支持. 当Anne Taylor走进一个房间时,她像其 ...
- Mongodb 对于Sort排序能够支持的最大内存限制查看和修改
MongoDB Server对于Sort排序能够支持的最大内存限制查看: > use admin switched to db admin >db.runCommand({ getPara ...
- 06.深入浅出 Spring Boot - 数据访问之Druid
代码下载:https://github.com/Jackson0714/study-spring-boot.git 一.Druid是什么? 1.Druid是数据库连接池,功能.性能.扩展性方面都算不错 ...
- 死磕Lambda表达式(二):Lambda的使用
城市就是森林,每一个男人都是猎手,每一个女人都是陷阱.--<三体> 在哪使用Lambda表达式? 在上一篇文章(传送门)中介绍了Lambda表达式的基本语法,其中的举了一个Lambda表达 ...
- MVC三层架构
需求: 注册登录: # 知识补充: >> MVC模型: |-- M 模型: |-- V 视图: |-- >> 基本概念: |-- 层级之间的调用关系: |-- V层接收前台数据 ...
- Spring事务Transactional和动态代理(二)-cglib动态代理
系列文章索引: Spring事务Transactional和动态代理(一)-JDK代理实现 Spring事务Transactional和动态代理(二)-cglib动态代理 Spring事务Transa ...
- Webpack 核心开发者 Sean Larkin 盛赞 Vue
dev.io 近日邀请了 Webpack 核心开发者 Sean Larkin 回答开发者提问,其中几个问提比较有意思,和掘金的小伙伴们分享一下. 先上点前菜: 有一个开发者问 Sean 如何成为一个热 ...