前言

  到目前为止,我们游戏中只有一个游戏场景,我们还需要制作一个游戏菜单场景,让玩家可以选择开始游戏。


创建游戏菜单场景

  首先,我们在顶部菜单栏选择File->New Scene,然后按快捷键Ctrl + S将创建的场景保存至Assets\Scenes文件夹下,并将其命名为GameMenuScene。接着,我们创建一个用于绘制UI的Canvas:

创建Canvas的步骤如下:

  1. Hierarchy窗口中右击鼠标,选择UI->Canvas在场景中新建一个Canvas,然后将其重命名为UICanvas
  2. 接着修改UICanvasCanvas Scaler组件
    Canvas Scaler组件的属性
    • UI Scale Mode: Scale With Screen Size
    • Reference Resolution: X(1920), Y(1080)
    • Screen Match Mode: Match Width or Height
    • Match: 0.5

  创建完UICanvas之后,我们开始添加UI,添加UI的步骤如下:

添加UI的步骤:

  1. UICanvas物体下新建一个Panel,然后将其重名为BackgroundPanel,然后删除BackgroundPanelImage组件
  2. BackgroundPanel物体下新建一个Panel,然后其重名为Background

    Background物体需要修改的组件属性:

    • Image:
      • Source Image: Assets\Sprites\Environment文件夹下的env_bg图片
      • Color: (255, 255, 255, 255)
  3. BackgroundPanel物体下新建一个Panel,然后其重名为Gherkin

    Gherkin物体需要修改的组件属性:

    • Image:
      • Source Image: Assets\Sprites\Environment文件夹下的env_Gherkin图片
      • Color: (255, 255, 255, 255)
  4. BackgroundPanel物体下新建一个Panel,然后其重名为BigBen

    BigBen物体需要修改的组件属性:

    • Image:
      • Source Image: Assets\Sprites\Environment文件夹下的env_BigBen图片
      • Color: (255, 255, 255, 255)
  5. BackgroundPanel物体下新建一个Panel,然后其重名为Bank

    Bank物体需要修改的组件属性:

    • Image:
      • Source Image: Assets\Sprites\Environment文件夹下的env_Bank图片
      • Color: (255, 255, 255, 255)
  6. BackgroundPanel物体下新建一个Panel,然后其重名为River

    River物体需要修改的组件属性:

    • Rect Transform:
      • Left: 0
      • Top: 1000
      • Right: 0
      • Bottom: 0
    • Image:
      • Source Image: Assets\Sprites\Environment文件夹下的env_RiverBase图片
      • Color: (255, 255, 255, 255)
  7. UICanvas物体下新建一个Image,然后其重名为OptionWindow

    OptionWindow物体需要修改的组件属性:

    • Rect Transform:
      • Anchors: 点击Rect Transform组件左上角的方框,然后选择middle-left
      • PosX: 500
      • PosY: -55
      • Width: 540
      • Height: 720
    • Image:
      • Source Image: Assets\Sprites\UI文件夹下的SF Window图片
      • Color: (8, 68, 225, 110)
  8. OptionWindow物体下新建一个Button,然后其重名为StartButton

    StartButton物体需要修改的组件属性:

    • Rect Transform:
      • PosX: 0
      • PosY: 110
      • Width: 320
      • Height: 120
    • Image:
      • Source Image: Assets\Sprites\UI文件夹下的SF Button图片
  9. 修改StartButton物体下的子物体Text

    Text物体需要修改的组件属性:

    • Text:
      • Text: Start
      • Font: Assets\Fonts下的BradBunR字体文件
      • Font Size: 80
      • Color: (255, 255, 255, 255)
  10. OptionWindow物体下新建一个Button,然后其重名为ExitButton

    ExitButton物体需要修改的组件属性:

    • Rect Transform:
      • PosX: 0
      • PosY: -110
      • Width: 320
      • Height: 120
    • Image:
      • Source Image: Assets\Sprites\UI文件夹下的SF Button图片
  11. 修改ExitButton物体下的子物体Text

    Text物体需要修改的组件属性:

    • Text:
      • Text: Exit
      • Font: Assets\Fonts下的BradBunR字体文件
      • Font Size: 80
      • Color: (255, 255, 255, 255)
  12. UICanvas物体下新建一个Text,然后其重名为Title

    Title物体需要修改的组件属性:

    • Rect Transform:
      • Anchors: 点击Rect Transform组件左上角的方框,然后选择top-center
      • PosX: 0
      • PosY: -100
      • Width: 600
      • Height: 180
    • Text:
      • Text: Potato Glory
      • Font: Assets\Fonts下的BradBunR字体文件
      • Font Size: 120
      • Alignment: 水平居中,垂直居中
      • Color: (255, 255, 255, 255)
  13. UICanvas物体下新建一个Text,然后其重名为Author

    Author物体需要修改的组件属性:

    • Rect Transform:
      • Anchors: 点击Rect Transform组件左上角的方框,然后选择bottom-right
      • PosX: -200
      • PosY: 115
      • Width: 340
      • Height: 80
    • Text:
      • Text: @RainbowCyan
      • Font: Assets\Fonts下的BradBunR字体文件
      • Font Size: 60
      • Alignment: 水平居中,垂直居中
      • Color: (119, 119, 119, 255)

  至此,我们就完成了游戏菜单场景的UI制作,其效果图如下:

添加UI之后的游戏菜单场景
添加UI之后的游戏菜单场景

在UI上添加能动的物体

  添加完游戏菜单场景的UI之后,我们发现整个界面的右边比较空旷,影响美感,因此我们希望能在右边加上一些会动的物体来装饰界面。因为加入的物体需要能动,使用Unity提供的UI难以实现,所以我们选择可以使用动画的GameObject作为我们的装饰物

添加装饰物的步骤:

  1. 在场景中新建一个名为DecorationEmpty GameObject,并将其Position设置为(0, 0, 0)
  2. Assets\Prefabs\Character文件夹下的Player这一Prefab拖拽到Decoration物体上成为其子物体

    Player物体的操作如下:

    1. 设置Position(0.53, -0.85, 0)Rotation(0, 0, 14.5)
    2. 移除Player物体上除了Animator组件外,的其他所有组件(有依赖关系,注意先移除脚本,再移除其他组件)
    3. 删除Player物体下的HealthBarDisplayGroundCheckGroundCheck子物体
  3. Assets\Prefabs\Character文件夹下的AlienSlug这一Prefab拖拽到Decoration物体上成为其子物体

    AlienSlug物体的操作如下:

    1. 设置Position(2.84, 1.31, 0)Scale(-1, 1, 1)
    2. 移除AlienSlug物体上除了Animator组件外,的其他所有组件(有依赖关系,注意先移除脚本,再移除其他组件)
    3. 删除AlienSlug物体下的FrontCheck子物体
  4. Assets\Prefabs\Character文件夹下的AlienShip这一Prefab拖拽到Decoration物体上成为其子物体

    AlienShip物体的操作如下:

    1. 设置Position(6.3, 1.6, 0)Scale(-1, 1, 1)
    2. 移除AlienShip物体上除了Animator组件外,的其他所有组件(有依赖关系,注意先移除脚本,再移除其他组件)
    3. 删除AlienShip物体下的FrontCheck子物体
  5. Assets\Sprites\Environment文件夹下的env_PlatformUfo图片拖拽到Decoration物体上成为其子物体

    env_PlatformUfo物体的操作如下:

    1. 设置Position(5.32, -0.72, 0)Rotation(0, 0, 18.2)Scale(0.2, 0.2, 0.2)
  6. Assets\Sprites\Environment文件夹下的env_UfoLegs图片拖拽到env_PlatformUfo物体上成为其子物体

    env_UfoLegs物体的操作如下:

    1. 设置Position(0, 3.8, 0)Rotation(0, 0, 0)Scale(1, 1, 1)

  添加完毕之后,我们发现在Game窗口中看不到我们添加的GameObject。如何让GameObject显示在Canvas之上?这里,我们想到了前面提到的Canvas绘制方式中的Screen Space - Camera。因此,我们需要将UICanvas物体上Canvas组件的Render Mode设置为Screen Space - Camera,并将Canvas组件的Render Camera设置为场景中的Main Camera。最后,我们发现装饰物偏大,因此我们将Main Camera物体上Camera组件的Size设置为6.8。此时,我们发现已经能在Game窗口中看到我们添加的GameObject了。

添加GameObject之后的游戏菜单场景
添加GameObject之后的游戏菜单场景

加入控制代码

  在场景中添加GameObject作为装饰物之后,我们还需要添加控制代码。首先,我们在Assets\Scrpits\Manager文件夹下创建一个名为MenuSceneManager的C#脚本,然后编辑MenuSceneManager.cs:

MenuSceneManager.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MenuSceneManager : MonoBehaviour {
// 加载SinglePlayerGameScene场景开始游戏
public void StartGame() {
SceneManager.LoadScene("SinglePlayerGameScene");
}

// 退出应用
public void ExitGame() {
Application.Quit();
}
}

  编辑完MenuSceneManager.cs之后,我们在场景中创建一个名为MenuSceneManagerEmpty GameObject,然后为MenuSceneManager添加MenuSceneManager.cs。接着,我们来设置OptionWindow物体的子物体StartButton的点击事件。

StartButton点击事件的设置步骤:

  1. 选中StartButton物体,然后点击其Button组件上On Click()下的+号增加一个空点击事件
  2. 将场景中的MenuSceneManager拖拽至On Click()下的GameObject赋值框处
  3. 点击No Function下拉菜单,选择MenuSceneManager下的StartGame函数
设置StartButton的点击事件
设置StartButton的点击事件

  最后,我们按照相同的步骤,将OptionWindow物体的子物体ExitButton的点击事件设置为MenuSceneManager下的ExitGame函数


修改GameStateManager.cs并修改BuildSetting

  在前面的文章中,因为我们还没有创建游戏菜单场景,所有GameStateManager.cs中用于返回游戏菜单场景的Back函数我们留空了。现在我们已经创建好了游戏菜单场景,因此我们需要补全GameStateManager.csBack函数

GameStateManager.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...

[RequireComponent(typeof(AudioSource))]
public class GameStateManager : MonoBehaviour {
...

#region 外部调用函数
...

// 返回主菜单
public void Back() {
// 恢复游戏的Time.timeScale
Time.timeScale = 1f;

SceneManager.LoadScene("GameMenuScene");
}
#endregion
}

  修改完成之后,我们运行游戏,点击Start按钮,发现场景并没有跳转。这是因为我们还没有将我们创建好的GameMenuSceneSinglePlayerGameScene添加至Build Setting中。选择顶部菜单栏的File->Build Settings...打开Build Setting窗口,然后同时选中Assets\Scenes文件夹下的GameMenuSceneSinglePlayerGameScene将它们拖拽至Build Setting窗口的Scenes In Build(游戏运行时,会默认加载下标为0的场景,因此我们要确保GameMenuScene的下标为0)

将创建好的场景添加到Build Setting
将创建好的场景添加到Build Setting

  再次运行游戏,点击Start按钮,此时场景跳转到SinglePlayerGameScene场景。在SinglePlayerGameScene中点击BackButton按钮,然后再点击Yes按钮,场景则跳转回GameMenuScene场景。


后言

  至此,我们就已经完成了制作游戏菜单场景的所有工作。最后,本篇文章所做的修改,可以在PotatoGloryTutorial这个仓库的essay19分支下看到,读者可以clone这个仓库到本地进行查看。