飘扬的旗帜!shader 编程实战!Cocos Creator!
用 shader mesh 立个 flag 吧! 文章底部获取完整代码!
效果预览
使用方法
- 创建一个空节点
- 添加用户脚本组件
mesh-texture-flag
- 添加图片
- 修改对应属性
实现原理
概括来说就是创建 mesh 网格模型,通过顶点着色器对顶点坐标不断的修改,达到飘动的效果。关于 mesh 的介绍,可以参考上一篇文章。
确定顶点坐标
为了让顶点着色器里有多个顶点可以改变位置,需要把一个形状分割成多个方形(三角形)。分割数量越大,效果越精细,但需要消耗更多的性能消耗。下图是分割成两行三列的例子。
根据分割的行列数和节点大小,节点锚点,从左到右从上到下,算出每个顶点的位置信息。可以先算出相对左上角的位置,然后再根据锚点偏移,参考代码如下。
const x = (_col - this._col * this.node.anchorX) * _width / this._col;
const y = (_row - this._row * this.node.anchorY) * _height / this._row;
确定纹理uv坐标
纹理uv坐标系在左上角,u
轴是向右,v
轴是向下,范围是 0-1。而我们的坐标系是根据锚点确定的,x
轴向右,y
轴向上。
根据锚点求出位置坐标在左下角的占比,然后再翻转一下v就可以求出对应的uv坐标了。参考代码如下。
const u = (pt.x this.texture.width * this.node.anchorX this.offset.x) / this.texture.width;
const v = 1.0 - (pt.y this.texture.height * this.node.anchorY this.offset.y) / this.texture.height;
确定顶点索引
从网格左上角的格子开始,依次确定三角形顶点画法。下图是分割成两行两列的索引。
每个格子有两个三角形,参考代码如下。
// 计算顶点索引
let ids = [];
let getIndexByRowCol = (_row, _col) => {return _row * (this._col 1) _col;
}
for (let _row = 0; _row < this._row; _row ) {for (let _col = 0; _col < this._col; _col ) {ids.push(getIndexByRowCol(_row, _col), getIndexByRowCol(_row, _col 1), getIndexByRowCol(_row 1, _col));ids.push(getIndexByRowCol(_row 1, _col), getIndexByRowCol(_row 1, _col 1), getIndexByRowCol(_row, _col 1));}
};
顶点着色器编写
使用的是sin
函数对顶点进行修改。
一个波浪就是一个 PI
, 所以要把位置坐标变化幅度映射到 wave * PI
。通过求出占宽度比就可以得到 sin
函数的角度了。
通过内置变量 cc_time
可以使坐标随着时间变化。不过得在非编辑器下才能预览到,因为默认是不会赋值的。
参考代码如下。
float angleSpanH = wave * 3.14159265;
float pz = amplitude * sin(cc_time.x * speed - (a_position.x - startPos.x a_position.y - startPos.y) / textureWidth * angleSpanH);
vec4 position = vec4(a_position.x, a_position.y pz, a_position.z, 1);
小结
以上为白玉无冰使用 Cocos Creator v2.2.2 开发 “飘扬的旗帜!” 的技术分享。有想法欢迎留言!如果这篇对你有点帮助,欢迎分享给身边的朋友。
完整代码
原文链接
飘扬的旗帜!shader 编程实战!Cocos Creator!相关推荐
- java适合舰旗_飘扬的旗帜!shader 编程实战!Cocos Creator!
> 用 shader + mesh 立个 flag 吧! 文章底部获取完整代码! 效果预览 使用方法 创建一个空节点 添加用户脚本组件 mesh-texture-flag 添加图片 修改对应属性 ...
- 手把手教你成为Shader编程实战达人—GPU
GPU编程市场应用 GPU全称是Graphics Processing Unit,中文成为图形处理器,所以GPU编程也叫图形学编程,它是针对的显卡中的芯片编程,游戏引擎的更新换代发展的一个重要阶段是显 ...
- 研究了3天,终于将 Shader 移植到 Cocos Creator 2.2.0 上了
01 预览 扫光特效-Fluxay2 马赛克像素特效-Mosaic 过渡效果-Transfer Shawn 花了3天时间,研究了Cocos Creator 2.2.0 的 Effect 语法,终于在1 ...
- 微信小游戏实战--cocos creator实现wordle游戏(六)
就wordle游戏本身而言它已经完成了,但我并不打算就到此为止."麻雀虽小五脏俱全",从"完整"的角度来看,它还缺少一些"必不可少"的功能: ...
- 微信小游戏实战--cocos creator实现wordle游戏(一)
前言 前段时间赋闲在家,整理电脑上的资料时才发现从业这么多年都是在给公司打工,没为自己写过点什么,所以决定为自己写一个完整的"产品".同时,为了检验一下自己的学习能力,选择了从未接 ...
- 微信小游戏实战--cocos creator实现wordle游戏(五)
到目前为止我们已经实现了整个游戏的界面以及"空格"和键盘按钮的动画,接下来完成游戏的基础玩法流程. 完整代码 一.初始化游戏 由于在游戏中"空格"的背景和Lab ...
- 欢乐水杯(happy glass)的流体实现! Cocos Creator!
用 shader + camera 实现流体效果 !文章底部附完整代码! 效果预览 实现原理 整体思路是参考论坛中的一个帖子.(链接:https://forum.cocos.org/t/happy-g ...
- 物体随机飞溅运动! Cocos Creator!
大量物体以随机初速度的飞溅运动!文章底部附完整代码! 效果预览 像火山喷发.烟花等等运动,都是物体随机飞溅运动. 这个运动其实是抛物运动. 抛物运动也可以看成是匀加速运动. 假设一个物体的初速度为v_ ...
- 麒麟子Cocos Creator 3D研究笔记九:初尝Shader并实现边缘光(RimLight)
零.先看一些图 图1:边缘光因子检查 图2:黄色,一般用于霸体效果 图3:红色,一般用于特殊技能特效 图4:白色,一般用于受击效果 图5:绿色,一般用于人物,NPC选中时高亮 看着群里的小伙伴们都很热 ...
- 用 shader effect 实现雨滴落水效果!Cocos Creator 3D !
最近逛论坛时,看到一位大佬在分享各种 shader 特效.基于其中的水波 shader ,白玉无冰写了一个玩水效果!文章底部获取完整代码!还可以试试水哦! 先一起看看效果- 点击任意位置,会在该位置生 ...
最新文章
- Activiti 6.x【6】StartEvent(上)
- 使用Python实现Hadoop MapReduce程序
- c#基础知识第十一节
- Laravel 学习笔记之 Query Builder 源码解析(下)
- Java JUC工具类--Master-Worker
- 学计算机的人玩什么游戏,亲戚眼中的大学专业:学的计算机啊,游戏打的肯定贼好吧...
- Intellij插件之JRebel
- 随便讲讲自己了解的ajax在JQ中的应用
- CSS Position(定位)
- 协程实现多边同时交互原理
- pdf转换html乱码怎么办,pdf转word后乱码怎么办?
- 反馈电路反馈类型的快速判断
- 程序人生:我是一只小小鸟
- android 音乐播放器关于歌词的处理
- 什么是梯度?为什么梯度的方向总是指向函数值增大的方向?
- VB下载地址:Eview下载地址;Java下载地址和安装教程
- 直插DC插头内部分解,哪个是正哪个是负
- 光纤光缆纵览——国内外
- Python之Mail编程(电子邮件编程)
- “物联网开发实战”学习笔记-(五)根据土壤湿度、环境温湿度和光照强度自动浇花