《土豆荣耀》重构笔记（二十一）制作游戏菜单场景

前言

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

创建游戏菜单场景

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

创建Canvas的步骤如下：

  1. 在Hierarchy窗口中右击鼠标，选择UI->Canvas在场景中新建一个Canvas，然后将其重命名为UICanvas
  2. 接着修改UICanvas下Canvas 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，然后删除BackgroundPanel的Image组件
  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之后，我们发现整个界面的右边比较空旷，影响美感，因此我们希望能在右边加上一些会动的物体来装饰界面。因为加入的物体需要能动，使用Unity提供的UI难以实现，所以我们选择可以使用动画的GameObject作为我们的装饰物。

添加装饰物的步骤：

  1. 在场景中新建一个名为Decoration的Empty 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物体下的HealthBarDisplay、GroundCheck和GroundCheck子物体
  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作为装饰物之后，我们还需要添加控制代码。首先，我们在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之后，我们在场景中创建一个名为MenuSceneManager的Empty GameObject，然后为MenuSceneManager添加MenuSceneManager.cs。接着，我们来设置OptionWindow物体的子物体StartButton的点击事件。

StartButton点击事件的设置步骤：

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

设置StartButton的点击事件

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

修改GameStateManager.cs并修改BuildSetting

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

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按钮，发现场景并没有跳转。这是因为我们还没有将我们创建好的GameMenuScene和SinglePlayerGameScene添加至Build Setting中。选择顶部菜单栏的File->Build Settings...打开Build Setting窗口，然后同时选中Assets\Scenes文件夹下的GameMenuScene和SinglePlayerGameScene将它们拖拽至Build Setting窗口的Scenes In Build处(游戏运行时，会默认加载下标为0的场景，因此我们要确保GameMenuScene的下标为0)。

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

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

后言

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

教程 > 《土豆荣耀》
#Unity #教程
《土豆荣耀》重构笔记（二十一）制作游戏菜单场景
https://asancai.github.io/posts/15dea16/
作者
RainbowCyan
发布于
2019年1月31日
许可协议