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

 更新时间:2021年04月14日 15:04:16   作者:鱼儿-1226  
这篇文章主要介绍了CocosCreator纹理shader的一些知识,想了解shader的同学,一定要看下,并且亲自动手实践

1、项目需求

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

2、资料内容

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

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

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

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

3、项目示例

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

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

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中this关键字的一些小知识

    Javascript中this关键字的一些小知识

    这篇文章主要介绍了Javascript中this关键字的一些小知识,本文讲解了this的隐性绑定、var that = this两部份内容,需要的朋友可以参考下
    2015-03-03
  • JavaScript与HTML的结合方法详解

    JavaScript与HTML的结合方法详解

    这篇文章主要介绍了JavaScript与HTML的结合方法,利用实例向大家介绍JavaScript与HTML是如何结合的,内容很详细,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • bootstrap-table后端分页功能完整实例

    bootstrap-table后端分页功能完整实例

    这篇文章主要介绍了bootstrap-table后端分页功能,结合完整实例形式分析了bootstrap-table后端请求、数据分页功能具体步骤与实现技巧,需要的朋友可以参考下
    2020-06-06
  • javascript版2048小游戏

    javascript版2048小游戏

    本文给大家分享的是使用javascript制作的2048小游戏的代码,仅仅是想锻炼下自己的编程代码风格,尽量做的规范些,小伙伴们多多给些建议。
    2015-03-03
  • JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    这篇文章主要介绍了JavaScript DOM节点操作,结合实例形式总结分析了JS操作DOM实现新建与删除HTML元素的具体步骤与相关技巧,需要的朋友可以参考下
    2017-01-01
  • javascript innerHTML、outerHTML、innerText、outerText的区别

    javascript innerHTML、outerHTML、innerText、outerText的区别

    这篇文章主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下
    2008-11-11
  • js 获取经纬度的实现方法

    js 获取经纬度的实现方法

    下面小编就为大家带来一篇js 获取经纬度的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js数组去重的方法总结

    js数组去重的方法总结

    今天小编就为大家分享一篇关于js数组去重的方法总结,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Javascript函数式编程语言

    Javascript函数式编程语言

    JavaScript 是近年来非常受瞩目的一门编程语言,它既支持面向对象编程,也支持函数式编程。本文专门介绍JavaScript函数式编程的特性。
    2015-10-10
  • js在HTML的三种引用方式详解

    js在HTML的三种引用方式详解

    这篇文章主要介绍了js在HTML的三种引用方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08

最新评论