创建一个游戏的首页和开始菜单

无论是什么游戏在打开后,一般都是加载界面,资源加载完成后,就是主界面和主菜单。下面是一个使用godot制作这个游戏主界面的例子。实例使用的版本为godot 4.0.2。

创建一个godot项目

打开godot,在项目管理器界面中,点击【新建项目】的菜单,新建一个项目。

打开godot

在弹出的新建项目对话框中,先选择【项目路径】后面的浏览,然后在弹出对话框中选择项目的保存路径。选择好路径后,在最上方的【项目名称】中输入项目的名称,项目名任意,根据自己的需要进行名称,因为这个实例是要演示怎么创建一个主界面和怎么进入到游戏的主场景中去。故命名为game_menu。这些设置完成后,点击【创建并编辑】,这样就创建好一个项目并进入到项目的编辑界面中。

创建新项目

项目编辑界面

godot界面

创建主界面的背景

godot创建出来的项目窗口默认为1152×648像素。点击左侧【创建根节点】中的【其他节点】,在弹出的对话框中搜索ColorRect,创建一个颜色图形作为主菜单界面的背景

创建ColorRect场景

在左侧的场景标签中,选择刚才创建的场景,windows用户按【F2】键,mac用户按【enter】键,重新命名该场景的名称为background。在右侧的检查其中修改场景的颜色和大小,颜色修改为RGB都是0的纯黑色;Layout中找到Transform,修改里面的size的x值为1152,y值为648,使得场景和项目的窗口大小一致,当然也可以修改为比项目窗体的大小大的形状并修改Position使场景居中。

背景彩色矩阵参数

一个纯黑色背景的主入口界面就完成了。接下来将创建一个标题和几个菜单的按键。

创建标题和菜单按键

场景中选择Background场景,鼠标右键,选择【添加子场景】,搜索选择【Label】,添加一个Label用于作为界面的title。

添加子节点

Label的text也就是文本的内容根据自己的需要填写,演示这里是用【Geme Title】做有title的内容。还需要配置label的字体大小为120,位置position为260,100,让title的位置水平居中和垂直的位置偏上。

TitleLabel参数

使用同样的办法,添加一个ColorRect子节点,并在该子节点中添加两个子节点,一个ColorRect和一个Label。用快捷将windows下的Ctrl+D或者mac下的Command+D,复制多两份出来,效果如下图。

添加三个菜单

完成以上的步骤,一个游戏的入口主界面场景就完成了。按Ctrl+S或Command+S保存当前的场景。在弹出的对话框填写对应的文件名后保存。

保存场景

按Ctrl+R或Command+R保存当前的场景。或者点击右上方的【运行当前场景】按键。调用debug模式运行本程序

运行当前场景

运行的结果如下,这是不能做任何的操作,因为还没有添加脚本让其运行。

运行结果

添加另外两个场景

添加两个场景,一个是游戏的主场景,一个是options的游戏参数设置场景。这两个场景分别对应菜单New Game和菜单Options。这个实例只是简单的演示怎么制作主入口菜单和测试一下菜单的调整功能是否正常。所以这两个场景简单配置成下面的样子就可以了。

游戏主界面

游戏设置界面

添加GDScript代码

回到background的场景中,在左侧点击【为选中节点创建或设置脚本】,并选择脚本的保存位置。

创建脚本

选择脚本保存位置

以上步骤操作完成后,就进入到下面的脚本编辑界面。

脚本编辑界面

删除掉默认生成的_ready()和_process()两个函数。然后添加下面的代码内容

var select_menu = 0

func change_menu_color():

 $NewGame/ColorRect.color = Color("ffd0a0")
 $Options/ColorRect.color = Color("ffd0a0")
 $Quit/ColorRect.color = Color("ffd0a0")

 match select_menu:
  0:
   $NewGame/ColorRect.color = Color("dcff64")
  1:
   $Options/ColorRect.color = Color("dcff64")
  2:
   $Quit/ColorRect.color = Color("dcff64")

func _input(event):
 if Input.is_action_just_pressed("ui_down"):
  select_menu = (select_menu + 1 ) % 3
  change_menu_color()
 elif Input.is_action_just_pressed("ui_up"):
  if select_menu > 0:
   select_menu = select_menu - 1
  else:
   select_menu = 2
  change_menu_color()
 elif Input.is_action_just_pressed("ui_accept"):
  match select_menu:
   0:
    get_tree().change_scene_to_file("res://main.tscn")
   1:
    get_tree().change_scene_to_file("res://options_menu.tscn")
   2:
    get_tree().quit(0)

对代码做一下简单的说明: 首先定义一个select_menu并赋值为0,在后面的change_menu_color函数和_input函数中,会定义select_menu的三个值分别对应NewGame、Options和Quit三个菜单。 change_menu_color函数定义了菜单选择出现变化时各个菜单对应的颜色。首先初始化三个菜单按键的底色,然后再根据select_menu的值来决定选中的按键的颜色。 _input()函数监控输入事件。一共监听三个事件:ui_down监控按键方向下的按键被按下的事件,此时select_menu的值+1,因一共就三个菜单按键,故通过%3取余数来使得select_menu的值不断的在0~2之间循环,而不至于选择到不存在的按键;ui_up的原理和ui_down类似,就是select_menu的值大于0时每按下一次就-1,值是0时则返回最大值2,来实现在0~2之间循环;ui_accept默认对应的值为enter或者space键,单这个按键被按下时,再根据select_menu的值来进行场景切换或者结束游戏的运行,通过get_tree()函数的change_scene_to_file(场景保存的文件)来切换场景。通过get_tree().quit()来退出游戏的运行。

测试运行结果

运行项目,通过方向键上下对菜单进行选择,按空格键或者enter键确定选择。如果可以正常切换到指定的场景,就表示成功。

项目的源码下载地址:

链接: https://pan.baidu.com/s/1kmL8T_Lu3MAxl_KkKQ2_6A 提取码: qrw1