【Godot4自学手册】第三十九节利用shader(着色器)给游戏添加一层雾气效果

今天,主要是利用shader给游戏给地宫场景添加一层雾气效果,增加一下气氛,先看一下效果:

一、新建ParallaxBackground根节点

新建场景,根节点选择ParallaxBackground,命名为Fog,然后将该场景保存到Component文件夹下。ParallaxBackground 使用一个或多个 ParallaxLayer 子节点来创建视差效果。每个 ParallaxLayer 可以使用 ParallaxLayer.motion_offset 以不同的速度移动。这在 2D 游戏中可以创造一种深度错觉。如果没有与 Camera2D 一起使用,你必须手动计算 scroll_offset。

在其检查器面板中Scroll -> Ignore Camera Zoom属性勾选,表示该节点的子元素不受相机缩放的影响。Layer->Layer设置为2,表示该节点浮于其他节点之上。

二、添加ParallaxLayer子节点。

ParallaxLayer 必须是 ParallaxBackground 节点的子节点。每个 ParallaxLayer 都可以设置为相对于相机移动或 ParallaxBackground.scroll_offset 值。该节点的子节点将受其滚动偏移量的影响。

在其检查器窗口,将Motion->Mirroring设置为(320,180)。

给节点添加ColorRect子节点。

添加完该子节点后,主编辑器中会出现四个白色的矩形,如下的样子:

在ColorRect节点的检查器中,将size属性设置为(320,180),这样就会铺满整个屏幕,如下:

三、给ColorRect节点添加shader材质。

在ColorRect节点属性面板中,找到CanvasItem -> Material->Material属性,单击后方的下拉菜单小箭头选择新建ShaderMaterial。

选中刚才新建的ShaderMaterial,然后单击其Shader属性后方的下拉菜单小箭头选择新建新建着色器。

在弹出的创建着色器对话框中,类型选择Shader;模式选择Canvas Item(表示2D游戏着色器);路径选择Component文件夹下,其他不变,单击创建。

这样就可以在着色器编辑器中编辑代码了。

四、编写着色器(Shader)代码

复制代码
shader_type canvas_item;
//噪声纹理
//uniform用于逻辑语言(GDScript/C#等)和着色器之间传递数据。
//注意:这个传递是单向的,即只能由逻辑语言传给着色器,反之不行。
uniform sampler2D noise_teture:repeat_enable,filter_nearest;
//设置云层透明度,值越接近1越不透明
uniform float density:hint_range(0.0, 1.0, 0.1)=0.25;
//云层移动速度
uniform vec2 speed = vec2(0.02,0.01);
void fragment() {
	//设置云层移动
	vec2 uv = UV + speed * TIME;
	//从噪声纹理采样
	float noise = texture(noise_teture,uv).r;
	//将噪声的范围(0.0,1.0)范围调整到(-1.0,1.0)
	float fog = noise*2.0-1.0;
	//将范围在调整回(0.0,1.0)目的是不是云层的地方变为透明
	fog = clamp(fog,0.0,1.0);
	//应用薄雾效果
	COLOR.a *=fog*density;
}

uniform的定义表示传递给着色器参数,定义的noise_teture为传入的纹理,定义完成后会在检查器面板出现该参数

单击noise_teture后方的下拉按钮选择新建NoiseTexture2D选项。

对其属性进行设置:width:320;Hieght:180;Seamless启用,表示该纹理可以无缝衔接;seamless_blend_skirt设置为0.75,表示接缝混合的距离;Noise选择新建FastNoiseLite。

FastNoiseLite的Frequeny属性设置为0.0075,表示噪声的频率,值越大产出的噪声越粗糙,颗粒越大。

这样就完成了。

五、underground引入薄雾

进入underground场景,单击实例化子场景,将我们刚才新建的场景实例化到underground场景。

这样我们的地宫就有了雾气效果。如下:

相关推荐
皮皮虾12341 天前
诛仙手游多开最多几开?用什么云手机比较好?
游戏·智能手机
资源分享助手1 天前
三网H5小游戏夜市餐厅搭建教程、H5游戏服务端、Win服务端部署
游戏
码农阿豪1 天前
Docker 部署 XiuXianGame 文字修仙游戏:极空间 NAS 上随时挂机刷资源
游戏·docker·容器
谙弆悕博士1 天前
【附C语言源码】从零实现命令行贪吃蛇游戏
c语言·开发语言·学习·游戏·游戏程序·小游戏·贪吃蛇
游乐码2 天前
Unity(十六)切换场景及鼠标相关
unity·游戏引擎
电子科技圈2 天前
XMOS将亮相台北国际电脑展并演示其在边缘AI和创新音频与互联等领域内的新方案
人工智能·游戏·计算机视觉·视觉检测·音视频·语音识别·实时音视频
XX風2 天前
OpenGL 着色器语言特性
着色器
FakeEnd2 天前
Unity开发笔记6
笔记·unity·游戏引擎
游乐码2 天前
Unity(十七)Unity随机数及Unity委托
unity·游戏引擎
RPGMZ2 天前
RPGMZ游戏引擎 一个窗口 文本居中显示
开发语言·javascript·游戏引擎·rpgmz