CocosCreator如何实现划过的位置显示纹理


Posted in Javascript onApril 14, 2021

1、项目需求

项目需要有一个功能:是当一个光点走过的路径,这个路径的位置就都亮起来的功能。

2、资料内容

功能类似这位大神的橡皮擦功能:https://forum.cocos.org/t/2-0-8/74246

CocosCreator如何实现划过的位置显示纹理

但是,项目的需求还要经过的路径周围有模糊的外边——也就是从中心到边缘越来越暗。

所以对于借鉴了网上大神的shader例子,类似以下的示例:

CocosCreator如何实现划过的位置显示纹理

在大神的肩膀上做了一些改动,来实现项目的需求。

3、项目示例

以下是我自己的测试项目的示例:

CocosCreator如何实现划过的位置显示纹理

(请忽略这渣渣的画质,懒得装录屏软件了)

4、项目代码

SliderPointLight.ts

const {
	ccclass,
	property
} = cc._decorator;


@ccclass

export default class Follow_spot extends cc.Component {

	@property(cc.Node)

	bg: cc.Node = null;

	material: cc.Material = null;

	center: number[] = [0.5, 0.5];

	testArr: number[] = [];


	onLoad() {

		this.material = this.bg.getComponent(cc.Sprite).getMaterial(0);

		this.material.setProperty('wh_ratio', this.bg.width / this.bg.height);

		this.material.setProperty('center', this.center);


		//js 中最重要是这一句,这里参数是数组长度*数组里向量的维度

		this.material.setProperty('colorArr', new Float32Array(400));

		//这里设置的时候需要把数组里向量的分量展开到一个一维数组

		this.material.setProperty('colorArr', []);


		this.bg.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);

	}


	touchMoveEvent(evt: cc.Event.EventTouch) {

		this.center[0] = evt.getLocation().x / this.bg.width;

		this.center[1] = 1 - evt.getLocation().y / this.bg.height;

		console.log(this.center);

		this.material.setProperty('center', this.center);

		if (this.testArr.length >= 400) {

			this.testArr.shift();

			this.testArr.shift();

		}

		this.testArr.push(this.center[0]);

		this.testArr.push(this.center[1]);



		//js 中最重要是这一句,这里参数是数组长度*数组里向量的维度

		this.material.setProperty('colorArr', new Float32Array(this.testArr));

		//这里设置的时候需要把数组里向量的分量展开到一个一维数组

		this.material.setProperty('colorArr', this.testArr);

	}

}



SliderPointLight.effect


CCEffect % {

		techniques:

			-passes:

			-vert: vs

		frag: fs

		blendState:

			targets:

			-blend: true

		rasterizerState:

			cullMode: none

		properties:

			texture: {
				value: white
			}

		wh_ratio: {

			value: 1.78,

			editor: {

				tooltip: "宽高比"

			}

		}

		blur: {

			value: 0.35,

			editor: {

				tooltip: "光圈模糊程度"

			}

		}

		radius: {

			value: 0.5,

			editor: {

				tooltip: "光圈半径"

			}

		}

		center: {

			value: [0.5, 0.5],

			editor: {

				tooltip: "光圈起点"

			}

		}

		colorArr: {
			value: [0.5, 0.5, 0.5, 0.5]
		}

	} %



	CCProgram vs % {

		precision highp float;


		#include <cc-global>

		#include <cc-local>


		in vec3 a_position;

		in vec4 a_color;

		out vec4 v_color;


		#if USE_TEXTURE

		in vec2 a_uv0;

		out vec2 v_uv0;

		#endif


		void main() {

			vec4 pos = vec4(a_position, 1);


			#if CC_USE_MODEL

			pos = cc_matViewProj * cc_matWorld * pos;

			#else

			pos = cc_matViewProj * pos;

			#endif


			#if USE_TEXTURE

			v_uv0 = a_uv0;

			#endif


			v_color = a_color;


			gl_Position = pos;

		}

	} %


	CCProgram fs % {


		precision highp float;


		#include <alpha-test>


		in vec4 v_color;


		#if USE_TEXTURE

		in vec2 v_uv0;

		uniform sampler2D texture;

		#endif


		uniform ARGS {

			float radius;

			float blur;

			vec2 center;

			float wh_ratio;

		};


		//effect定义

		uniform Metaball {

			vec4 colorArr[100];

		};


		void main() {

			vec4 o = vec4(1, 1, 1, 0);

			o *= texture(texture, v_uv0);

			o *= v_color;

			float circle = radius * radius;

			for (int i = 0; i < 100; i++) {

				float colorX = colorArr[i].x;

				float colorY = colorArr[i].y;

				float rx = colorX * wh_ratio;

				float ry = colorY;

				float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y - ry) * (v_uv0.y - ry);


				o.a = smoothstep(circle, circle - blur, dis) + o.a;

			}


			gl_FragColor = o;

		}

	}%

以上就是CocosCreator如何实现划过的位置显示纹理的详细内容,更多关于CocosCreator资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript 类与静态类的实现(续)
Apr 02 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
angularJS提交表单(form)
Feb 09 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
js实现上传图片到服务器
Apr 11 Javascript
JS监听Esc 键触发事键
Apr 14 #Javascript
jQuery实现影院选座订座效果
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
JavaScript实现复选框全选功能
js实现上传图片到服务器
Apr 11 #Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
You might like
php调用mysql存储过程
2007/02/14 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
用js编写留言板
2020/03/17 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
学习python的几条建议分享
2013/02/10 Python
Python中asyncore的用法实例
2014/09/29 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python3实现购物车功能
2018/04/18 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python的debug实用工具 pdb详解
2019/07/12 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python字典按照value排序方法
2020/12/28 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
机械设计制造专业个人求职信
2013/09/25 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
离婚协议书怎么写
2015/01/26 职场文书
对学校的意见和建议
2015/06/04 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
Django实现聊天机器人
2021/05/31 Python
Redis 限流器
2022/05/15 Redis
MySQL GTID复制的具体使用
2022/05/20 MySQL