背景图片资源
今天周六玩了一天,现在晚上来更新一下帖子。前面几节我们学习了创建一个人物精灵节点使其移动。这节我们来学习创建背景。会用到三个图片文件。我已经上传到csdn了,链接如下:
https://download.csdn.net/download/weixin_66990397/89356894?spm=1001.2014.3001.5501
视差背景创建
这次我们不用Node2D节点,用到的节点叫ParallaxBackground,然后我们在这个节点下面创建三个名为ParallaxLayer的节点
我们把链接里的压缩包下载下来,解压,得到本节要用的三张图片。直接把文件夹拖到右下角的res中,我们就可以使用者三张图片了
然后我们把图片直接拖到预览区,左边会多出一个节点,预览区也会出现我们的图片,这就是把图片添加到左边的节点里了
我们把每个图片分别拖到一个ParallaxLayer节点下,然后点击这些图片,观察右边的属性栏,可以看到几个常用的属性:
Centered是中心点,开启的话这张图片默认定位是通过中心点来判断的,例如这张图片在(0,0)位置,那么中心点就在(0,0)
Flip H和Flip V分别是图片水平翻转和垂直翻转
Position则是图片的位置
Scale则是缩放
我们把对三张图片进行操作,Centered取消打钩,Position位置调整成(0,0),缩放都调成3.6,这样就让这几张图片刚好与我们预览区域重合,可以看到我们三张图片组合成了一个完整的背景
然后我们选择每张图片对应的ParallaxLayer节点,调整其中的Mirroring属性,这个是镜像属性,我们给他的X属性(横坐标)调整成1150,因为我们现在图片是1150个长度一张图片,我们这样改了之后就会让我们的节点按1150个坐标复制一次,这样就实现了图片的向右不停复制延展
然后我们给ParallaxBackground添加一个脚本文件,我们要让背景进行移动
我们添加相应的代码,就可以实现背景不停向左移动的动画了,代码注释已给出
代码如下:
extends ParallaxBackground
var speed = 100#定义了一个名为speed的变量,并将其初始化为100。这个变量将用来控制背景的滚动速度。
func _ready():
pass # Replace with function body.
func _process(delta):
scroll_offset.x -= speed * delta#scroll_offset是ParallaxBackground类中用来控制背景滚动的属性
#.x表示沿着水平方向的偏移量。通过每帧减去speed乘以delta的值,可以实现不断向左移动的效果
我们运行之后发现动画效果已经实现,但是每张图片的移动效果都是一样的,体现不出近大远小的视差效果,我们可以调整每个ParallaxLayer节点的Scale属性,解锁之后对X进行单独调整,第一张调成0.2,第二张0.5,第三张可以保持1不变,这样实现了每张图片移动速度不同,从而满足了我们的视差背景
预览效果如下(今天GIF转换有点问题,找了个在线网站转换,有点不清晰不过能看出效果,大家见谅,后面有空会改)
小结
本节学习了如和添加图片,对图片进行缩放,调整使其能够与屏幕对应上,我们可以结合前几节学习的给这背景添加按钮或者加个会动的人物,这样离一个游戏又进了一步,今天在外面玩了一天所以更新比较晚,文中如有不足欢迎大家指出
标签:GODOT,背景,笔记,我们,属性,speed,节点,视差,图片 From: https://blog.csdn.net/weixin_66990397/article/details/139204880