【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版

本章节效果图

【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第1张图片

原理

这种方法是通过Shader的UV动画实现的

步骤

1. 重新导入素材

Godot默认的图片导入模式是非重复的,由于我们要移动UV,因此要把"back.png"设为Repeat然后将它重新导入一下
【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第2张图片

2.写Shader

新建一个叫“Shaders”的文件夹,专门存放着色器代码
【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第3张图片

创建Shader文件
【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第4张图片

【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第5张图片
命名为“2d_uv_scroll.shader”
【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第6张图片

【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第7张图片

“2d_uv_scroll.shader” 的代码

shader_type canvas_item;
render_mode unshaded;
uniform float speed : hint_range(0.00,1.00) = 0.0;
void vertex(){
	UV.x += speed*TIME;
}
3. 新建材质

为”Floor“新建材质,来覆盖默认材质
【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第8张图片
【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第9张图片

【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第10张图片

把"2d_uv_scroll.shader"赋给Floor的材质
【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第11张图片
把数值调整到合适大小
【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第12张图片

于是就得到了效果图的样子
【手把手带你Godot游戏开发】FlappyBird:4.3无限地面之文艺青年(shader)版_第13张图片

小结

Shader版是个人最推荐的版本

  1. 它实现了装饰性效果和游戏逻辑的解耦合
  2. 不需要复制多余的“Floor”节点
  3. “2d_uv_scroll.shader”可以重复利用,简单地调整一下数值就可以方便地多重滚动的效果

你可能感兴趣的:(Godot笔记,老王的游戏开发教程,#,Godot,实践,游戏开发,godot,shader)