Godot根据遮罩图移动粒子

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

前言

目前UI粒子特效unity引擎比较多也好找资料但是一般都是利用模型使用3D粒子伪装2D效果。

Godot中也可以做到这一点并且Godot有专门的2D粒子系统可以通过一张遮罩图对粒子的位置进行设置。

godot粒子教程

准备阶段

1、使用ps新建256*256的工程。

2、将左下角两个颜色变成纯黑和纯白

3、使用钢笔工具勾勒出路径并在打开路径面板

4、修改画笔设置勾选颜色动态控制改为渐隐后面的值需要手动不停调有可能不会出效果是因为值不对。

5、点击路径面板下面的第二个按钮用画笔描边路径

就可以得到这样一张遮罩图了。由黑变白

参考链接

原理讲解

godot的粒子shader可以设置粒子的位置如果每帧每个粒子读取这张图使用texelFetch每个像素判断颜色是否等于n如果等于则将获取到的位置赋予粒子。

texelFetch函数有三个参数纹理图位置不知道是啥填0即可

返回的是指定位置像素颜色vec4。

实际操作

新建2D gpu粒子创建粒子材质加载发射遮罩。

这时把上面两张图保存并记住12571是此图的尺寸。

加载发射遮罩教程

然后你就得到了两张图

一张是存的图片位置一张是存的图片颜色。

这时我们新建一个粒子shader并填入以下代码

shader_type particles;

uniform sampler2D img;

uniform int emission_texture_point_count;
uniform sampler2D emission_texture_color : hint_white;
uniform sampler2D emission_texture_points : hint_black;

uniform int point : hint_range(0,12571) = 0;
uniform float offset : hint_range(0.0,1.0) = 1.0;


void vertex(){
	CUSTOM.y += DELTA / LIFETIME;
	
	//int point = min(emission_texture_point_count - 1, int(1.0 * float(emission_texture_point_count)));
	ivec2 emission_tex_size = textureSize(emission_texture_points, 0);
	//2048
	ivec2 emission_tex_ofs = ivec2(point % emission_tex_size.x, point / emission_tex_size.x);
	//0~2048 0123
	
	ivec2 pos = ivec2(0,0);
	while(true){
		pos.x = pos.x + 1;
		if(pos.x > 2048){
			pos.x = 0;
			pos.y = pos.y + 1;
			if(pos.y >3){
				pos.x = 0;
				pos.y = 0;
				pos = ivec2(0,0);
				break;
			}
		}
		vec4 p = texelFetch(emission_texture_color, pos, 0);
		if(abs(p.r - offset) < 0.03){
			break;
		}
	}
	
	//texelFetch使用整数坐标获取单个纹素
	TRANSFORM[3].xyz = texelFetch(emission_texture_points, pos, 0).xyz;
	//float size = (1.-CUSTOM.y) * 0.5;
	//TRANSFORM[0].x = size;
	//TRANSFORM[1].y = size;
	//COLOR = texelFetch(emission_texture_color, pos, 0);
}

注意上面那个while循环改的话小心容易把电脑弄崩。

如果要自动根据粒子寿命播放修改if(abs(p.r - offset) < 0.03){这一句里面的offset为CUSTOM.y即可。