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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
Java中Timer的用法详解
Oct 21 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
JS监听Esc 键触发事键
Apr 14 #Javascript
jQuery实现影院选座订座效果
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
JavaScript实现复选框全选功能
js实现上传图片到服务器
Apr 11 #Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
You might like
zend framework多模块多布局配置
2011/02/26 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
详解python时间模块中的datetime模块
2016/01/13 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
OpenCV 边缘检测
2019/07/10 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Python 如何查找特定类型文件
2020/08/17 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
CSS3 边框效果
2019/11/04 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
技校学生个人职业生涯规划范文
2014/03/03 职场文书
干部下基层实施方案
2014/03/14 职场文书
美术指导求职信
2014/03/17 职场文书
节能环保口号
2014/06/12 职场文书
大学生标准自荐书
2014/06/15 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
Java基础-封装和继承
2021/07/02 Java/Android
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技