标题界面制作:用AnimationPlayer切换标题选项的方案

1、首先创建一个游戏场景,取名为GameTitle,作为标题界面的场景。

2、再创建一个游戏对象,对象名称取为TitleControl,模板选择空对象。这个对象会在之后用来承载UI和操作的对象。

3、在TitleControl中将MoveAndJumpSetting里的重力设置为0。

image

添加Sprite2d节点,在其中添加游戏标题界面的背景图。

4、再添加三个Panel节点,两个Label节点。

两个label节点分别作为开始游戏和退出游戏的文字显示,调整字号到合适的大小。

添加的Panel2作为开始游戏的背景,Panel3作为退出游戏的背景,在这两个panel的 主题覆盖–样式 里,选择StyleBoxFlat,将下面的背景色选为纯黑色。

将最先添加的panel拿来作为两个选项的背景框,完成后呈现效果应该是这样的。

5、新建一个AnimationPlayer节点。

添加第一个动画,取名为InitStart,用于默认选择界面,时长改为0.1,吸附改为0.1。
将开始游戏的字体颜色改为一个不同的颜色,我这里改为了绿色,K帧,
将退出游戏的字体颜色直接K帧,
将Panel2(就是开始游戏的背景)下 可见性–调制 K帧,
将Panel3(就是退出游戏的背景)下 可见性–调制,改为透明,K帧。

设置完应该是这样的:

6、添加第二个动画,命名为QuitSelect,用于玩家选择到退出游戏时的动画。

时长改为0.2,吸附改为0.1。
在动画开头,将开始游戏、退出游戏的字体颜色K帧,Panel2和Panel3的可见性-调制K帧。

拉到动画末尾。

将开始游戏的字体颜色改回默认的白色,K帧,
将退出游戏的字体颜色改为绿色,K帧,
将Panel2(就是开始游戏的背景)下 可见性–调制,改为透明 K帧,
将Panel3(就是退出游戏的背景)下 可见性–调制,改为不透明,K帧。

做完应该是这样的:

7、添加第三个动画,命名为StartSelect,用于玩家选择到开始游戏时的动画。

一样时长改为0.2,吸附改为0.1。
在动画开头,将开始游戏、退出游戏的字体颜色K帧,Panel2和Panel3的可见性-调制K帧。

拉到动画末尾。

将开始游戏的字体颜色改为绿色,K帧,
将退出游戏的字体颜色改回默认的白色,K帧,
将Panel2(就是开始游戏的背景)下 可见性–调制,改为不透明 K帧,
将Panel3(就是退出游戏的背景)下 可见性–调制,改为透明,K帧。

做完应该是这样的:

8、然后我们对TitleControl这个节点添加一个VS脚本。

脚本创建状态图为下方图示:(默认状态设置为初始状态)

(1)选择开始选项状态下,发送信号:anima_StartSelect,播放切换选项的音效
(2)选择退出选项状态下,发送信号:anima_QuitSelect,播放切换选项的音效
(3)进入游戏状态下,添加可执行动作:结束场景
(4)退出游戏状态下,添加可执行动作:退出游戏

连接设计:
在项目设置里添加上下和确认三个输入映射。

(1)默认、选择开始选项–》选择退出选项:有输入:down
(2)默认、选择开始选项–》进入游戏:有输入:确认
(3)选择退出选项–》退出游戏:有输入:确认
(4)选择退出选项–》选择开始选项:有输入:up

9、回到TitleControl下的AnimationPlayer,添加一个gdscript脚本。

点击TitleControl节点,右侧找到信号条目,会发现已经有了我们刚刚创建的两个信号。

分别将两个信号都双击连接到AnimationPlayer的脚本里。

AnimationPlayer的脚本自动创建了两个信号方法,在两个信号方法里分别写入如图所示的对应动画的播放脚本。

这里也提供一段代码可以直接复制过去覆盖。

extends AnimationPlayer

func _on_title_control_anima_quit_select(signal_name: String, value: Variant) -> void:
	play("QuitSelect")
	pass # Replace with function body.


func _on_title_control_anima_start_select(signal_name: String, value: Variant) -> void:
	play("StartSelect")
	pass # Replace with function body.

10、切换到我们最开始的GameTitle场景里,在UI节点下的UIObjectRoot下,实例化TitleControl。

image

11、切换到SceneTransition界面下,添加GameTitle和游戏开始后要切换过去的场景,连接起来。

设置GameTitle为初始场景,连接到下一个场景,连接的切换条件为前一场景已结束。

OK,一个利用动画切换和简单两行信号脚本、大部分依靠于无代码状态脚本的标题制作方式,就已经完成了。动画效果可以根据自己需要进行更改。

接下来是一些可以做的优化。

1、在TItleControl里,在选项下面添加一个Label节点,提示玩家“按回车键确认”。

2、标题场景要播放背景音乐:
先进入项目数据库的音频数据库,添加需要播放的音乐为BGM。
进入TitleControl的VS脚本里,默认状态里添加可执行动作,播放声音,选择添加好的音乐即可。这样一运行游戏就有背景音乐。

3、切换场景时切换音乐:
在切换场景的连接条件下, 切换前演出 选择 BGM效果 为停止,切换后演出 选择 BGM效果 为播放,选择需要的音乐即可。

2 Likes

支持!分享了这么有用的文章。