Unity游戏开发日记(一):独自开发2d横板游戏:Small man(MainMenu主界面)基本构建

发布于:2022-11-08 ⋅ 阅读:(773) ⋅ 点赞:(0)

目录

一、独自开发想法 

前言;

开发构想;

二、主要内容:MainMenu主界面基本构建

(一)预想功能

(二)功能实现

1、主界面UI设计

2、Option功能设计

3、TypeOption功能设计

4、面板之间切换

(1)设计问题;

(2)思路;

(3)实现;

5、进入主界面渐变动画及主界面面板延迟出现

(1)思路;

(2)实现;

 6、按钮点击音效设计

(1)思路;

(2)实现;

7、最终效果


一、独自开发想法

前言:

开始学习unity是在最近的几个月,说长不长说短不短。unity学习几乎自学,独自开发游戏,一是为了练习所学的知识,运用到实践中,而是为了朝更深入的方向学习,有了问题就会有学习的方向,像我这样几乎自学的程序猿,这样的方法很重要,写这个博客系列,也是为了记录我的学习成果,当然也是为了督促我的学习。(此博文写自主界面功能实现完成后)

开发构想:

学习完基本的unity的游戏开发,完成了小狐狸系列游戏,自己早有摩拳擦掌之势。小白unity游戏开发入门教学,良心推荐b站up主M_Studio  M_Studio的个人空间_哔哩哔哩_bilibili

开发的游戏类型是横板像素格斗游戏,类似终结的百合花。

 二、主要内容:MainMenu主界面基本构建

(一)预想功能

开始游戏 Play

游戏设置 Option

{

音量设置

其它(根据之后可能会加上分辨率,按键等)

}

退出游戏 Cancel

(二)功能实现

1、主界面UI设计

主界面的场景构建都是UI,主要的UI就是面板Panel

UI创建会自动创建Cavans和EventSystem,Canvans一定要作为UI的父级。给创建好的面板命名为Background

Bcakground作为我们主界面的背景图 

 在Image中的Source Image和Material分别选择背景图和材质,当然根据需求这些也可以不选,背景图素材来源于Unity资源商城Underwater Fantasy | 2D 水 | Unity Asset Store

 同样新建一个Panel,这个Panel用来承载我们的按钮,让UI设计更加完美,给它命名为MainMenuPanel(主界面面板),同样创建3个Button(按钮)UI作为我们Play,Option(Option没有这个按钮的素材。我是自己在按钮文本下自行设置编辑的),Excel的三个功能按钮,创建一个文本UI给我们的游戏显示出游戏名

 

 2、Option功能设计

Option设计:一般的游戏,在主界面打开设置的时候,我们在不改变主界面背景的情况下,可以出现Option的具体设置操作,列入声音,操纵,图像的功能按钮,这需要一个新的面板,这个面板上有这些按钮,这个设计方法和主界面设计是一样的,最终设计成这样:

 对应:

OptionPanel——>Panel

Volumechange——>Button

backOption——>Button

后续根据功能,可能会继续加上其它具体Option设置

3、TypeOption功能设计

这里的设计就是打开Option内子功能的具体功能。例如打点击Option后,进入OptionType面板,点击面板上的“VOLUME”(声音)按钮,进入到声音的具体设置界面,为了后续的便利,我将声音的功能放在一个空物体上,将这个空物体作为TypeOption的子级,因为还有其它的功能没准日后就要设计。

 

 4、面板之间切换

(1)设计问题:

设计好三个面板之后,到了核心的一步,那就是如何让三个面板能够切换,主界面通过Option按钮切换到OptionType界面,通过OptionType界面的“VOLIME”按钮切换到TypeOption界面,又可以通过OptionType和TypeOption上的backOption按钮回到上一个面板。

(2)思路:

要实现这样的功能,我们就需要用代码实现了。面板和面板之间的切换,只要我们激活和关闭它们,就可以实现面板的开和关,这就是为什么我将Panel作为每个功能实现的父级。激活或是关闭父级,那么子级如按钮,图像,文本都会被激活或是关闭。

(3)实现:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Unity.Engine.SceneManager
public class ButtonChange : MonoBehaviour
{
    public GameObject MainMenu, OptionType, typeOption;   /*定义MainMenu,Option,设置内容面板*/
    public void Option()    //点击设置Option按钮
    {
        MainMenu.SetActive(false);    //关闭MainMenu面板
        OptionType.SetActive(true);    //激活Option面板
    }
    public void TypeOption()       //打开设置内容面板
    {
       OptionType.SetActive(false);   //关闭Option面板
      typeOption.SetActive(true);     //激活设置内容面板
    }
    public void backMainMenu()     //从Option面板回到MainMenu面板
    {
        MainMenu.SetActive(true);    //激活MainMenu面板
        OptionType.SetActive(false);   //关闭Option面板
    }
    public void backOptionType()     //从设置内容面板回到Option面板
    {
       OptionType.SetActive(true);    //激活Option面板
       typeOption.SetActive(false);   //关闭设置内容面板
    }
    public void StartGame()    //开始游戏
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
    }
    public void CancelGame()   //退出游戏
    {
        Application.Quit();
    }
}

代码完成后,将代码挂载在哪个对象下呢?我是直接挂载在Canvas下的,同时我给主界面,设置界面,设置内容界面都创建了一个父级的空物体,便于我来管理,分别命名为MainMenu,OptionType,TypeOption。

然后在对应的按钮下设置按钮操作,

将OptionType和TypeOption在项目设置中关闭

5、进入主界面渐变动画及主界面面板延迟出现

(1)思路:

 主界面是一个Panel,我们同样用一个Panel,用动画器来设置其渐变动画,图层的遮罩会为我们实现进入主界面是渐变出现的错觉。而延迟动画,我们只要在渐变动画结束后做一个动画事件,就可以让主界面面板在背景图出现后出现。

(2)实现:

创建一个新的面板,这个面板设置合适的颜色和透明度,打开我们的动画,为这个面板设置动画,这里要用到录制功能。

 

 将MainMenu作为新增加的Panel的子级并关闭MainMenu(因为是Panel动画结束后我们才激活MainMenu面板)

 现在我们要改一下之前的代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class ButtonChange : MonoBehaviour
{
    public GameObject MainMenu, OptionType, typeOption;
    public void Gamestart()                     //动画结束,让主界面面板激活
    {
        GameObject.Find("Canvas/Panel/MainMenu").SetActive(true);
    }
    public void Option()
    {
        MainMenu.SetActive(false);
        OptionType.SetActive(true);
    }
    public void TypeOption()
    {
       OptionType.SetActive(false);
      typeOption.SetActive(true);
    }
    public void backMainMenu()
    {
        MainMenu.SetActive(true);
        OptionType.SetActive(false);
    }
    public void backOptionType()
    {
       OptionType.SetActive(true);
       typeOption.SetActive(false);
    }
    public void StartGame()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
    }
    public void CancelGame()
    {
        Application.Quit();
    }
}

 设置的动画实践函数,就是我们新增加的GameStart()

函数,在动画事件里选择它

 6、按钮点击音效设计

(1)思路:

按钮能切换面板,当然我们点击的时候也能发出音效啦。但是每个面板的按钮数不同,我们还要编写代码来实现音效的播放,要在每个按钮下都添加组件和脚本吗?就没有更轻松的方法吗?还记得我之前是将ButtonChange的脚本放在谁的下面了吗?对了,就是Canvas下。那我们能不能就用这一个脚本,用着一个对象,实现我们的音效呢?当然是可以的了。只要我们在脚本定义一个函数,这个函数用来播放音效,我们为Canvas添加一个AudioSource的组件,让脚本播放这一个音效就行。因为我们的按钮音效都是一样的,然后我们在每个按钮下添加按钮操作,只要调用函数不就可以实现了吗?

(2)实现:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class ButtonChange : MonoBehaviour
{
    public GameObject MainMenu, OptionType, typeOption;
    [SerializeField] private AudioSource audioSource;   //定义一个静态的音源
    public void ButtonVideo()   //音效函数
    {
        GetComponent<AudioSource>().Play();   //获得对象的组件AudioSource,并进行播放
    }
    public void Gamestart()
    {
        GameObject.Find("Canvas/Panel/MainMenu").SetActive(true);
    }
    public void Option()
    {
        MainMenu.SetActive(false);
        OptionType.SetActive(true);
    }
    public void TypeOption()
    {
       OptionType.SetActive(false);
      typeOption.SetActive(true);
    }
    public void backMainMenu()
    {
        MainMenu.SetActive(true);
        OptionType.SetActive(false);
    }
    public void backOptionType()
    {
       OptionType.SetActive(true);
       typeOption.SetActive(false);
    }
    public void StartGame()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
    }
    public void CancelGame()
    {
        Application.Quit();
    }
}

设置:

记得关闭Audio Source里的Play On Awake和Loop

接下来为每个按钮设置能调用ButtonVideo函数

 这样我们所有基本的功能就都实现了。

哦!对了,我们还少了一个BGM不是么。

为我们的背景Panel(Background)添加Audio Source组件,选择我们的AudioClip文件,记得勾选上Play On Awake和Loop哦~

7、最终效果:

https://live.csdn.net/v/252499

我是米芝鱼,一个奋斗中的咸鱼


网站公告

今日签到

点亮在社区的每一天
去签到