创建场景
-
新建四个场景
![![[Pasted image 20250126023836.png]]](https://i-blog.csdnimg.cn/direct/16d79d009d714561aae6457645f3894b.png)
-
打开构建配置文件
![![[Pasted image 20250126023930.png]]](https://i-blog.csdnimg.cn/direct/23d9152a7cbb4fdeb548676e43954e58.png)
-
将新创建的四个场景依次添加到列表里
![![[Pasted image 20250126024042.png]]](https://i-blog.csdnimg.cn/direct/5bd21041152b4b59bea7fab66b82256d.png)
MainMenu主菜单
-
创建UI-图像
![![[Pasted image 20250126024235.png]]](https://i-blog.csdnimg.cn/direct/f3fd336d302948afbbb82ff3517e93e9.png)
-
其中一个命名为BG背景,再复制一个命名为Botton按钮组
![![[Pasted image 20250126024405.png]]](https://i-blog.csdnimg.cn/direct/983ca80be7934a2293dd0fe5b5446d7e.png)
-
把BG和Botton的位置都调成0,0,0
![![[Pasted image 20250126024740.png]]](https://i-blog.csdnimg.cn/direct/f3e7bc83f56949829e1cab4515b55264.png)
-
给BG下面创建一个UI-图像
![![[Pasted image 20250126024713.png]]](https://i-blog.csdnimg.cn/direct/cb80c1ce88ec46469ce066b5431e891a.png)
-
把背景1添加到源图像
![![[Pasted image 20250126024905.png]]](https://i-blog.csdnimg.cn/direct/ad28d82736a546d193f3d42517c6c1af.png)
-
点击设置原生大小,调整大小如图,把BG和Botton的Image勾掉,去掉白色图块
![![[Pasted image 20250126025351.png]]](https://i-blog.csdnimg.cn/direct/88907adc267e49a8a5ef4fbf719a8361.png)
-
依次添加背景的四个部分
![![[Pasted image 20250126030349.png]]](https://i-blog.csdnimg.cn/direct/5758fadd56e343e5b81720942f78a239.png)
![![[Pasted image 20250126030354.png]]](https://i-blog.csdnimg.cn/direct/b53cb85f23cb4289b0690cb254afb2c9.png)
-
调整背景颜色,选中MainCamera,将颜色改为土黄色
![![[Pasted image 20250126030925.png]]](https://i-blog.csdnimg.cn/direct/808751b767404bfe94bd3c4dc85fc0ba.png)
-
创建Logo、人物、光圈,背景
![![[Pasted image 20250126032545.png]]](https://i-blog.csdnimg.cn/direct/fae1bf7dd9e94338be7a3473b2ff54c7.png)
主菜单动画
-
添加角色呼吸动画,选中Role,按下ctrl+6
![![[Pasted image 20250126082153.png]]](https://i-blog.csdnimg.cn/direct/c9de3e8b42794630bd920e66af9a1dc3.png)
-
创建一个Animations文件夹
![![[Pasted image 20250126082247.png]]](https://i-blog.csdnimg.cn/direct/04c74528eb2c4777b80d7b2a2d631789.png)
-
点击创建,在Animations文件夹底下,Role.anim
![![[Pasted image 20250126082433.png]]](https://i-blog.csdnimg.cn/direct/ed04777af5174c949a29dba8b6ba763a.png)
-
点击录制
![![[Pasted image 20250126111236.png]]](https://i-blog.csdnimg.cn/direct/4f6c5ae012aa42da9d5effb55d367763.png)
-
在0秒将Role变得瘦高,在1秒使变得矮胖
![![[Pasted image 20250126111617.png]]](https://i-blog.csdnimg.cn/direct/685e8874b44d46cbbe485ed7744c5264.png)
-
点击关闭录制,将第一帧的内容复制到第120帧
![![[Pasted image 20250126111952.png]]](https://i-blog.csdnimg.cn/direct/1e1eb665528d41659fd8d343ba042589.png)
-
同理,给BGFront和BGBack添加左右移动动画,Front在240帧和480帧添加帧,使其从左向右再返回,Back正好相反
![![[Pasted image 20250126112518.png]]](https://i-blog.csdnimg.cn/direct/d4a06b4a48c04c98ade11a078403800d.png)
按钮设置
-
在Botton下面新建一个按钮
![![[Pasted image 20250126155957.png]]](https://i-blog.csdnimg.cn/direct/8fbb757af9744d0ea4ee7c204b137bb6.png)
-
给Buttons再右边添加Vertical Layout Group组件
![![[Pasted image 20250126160223.png]]](https://i-blog.csdnimg.cn/direct/4179bf12f25e4807ab249fe7b1e0669c.png)
-
点击字体资产创建工具
![![[Pasted image 20250126160732.png]]](https://i-blog.csdnimg.cn/direct/36982d22b87241b48a596c116f83415d.png)
-
点击创建字体
![![[Pasted image 20250126160927.png]]](https://i-blog.csdnimg.cn/direct/0870502d559247c78f20a06c65dd725a.png)
-
选中Text,在右边选择Alibaba字体
![![[Pasted image 20250126161502.png]]](https://i-blog.csdnimg.cn/direct/af373167e60c45c6b608303366bb9e0d.png)
-
替换按钮的正常颜色为RGB8,7,8,文字颜色换为白色
![![[Pasted image 20250126161638.png]]](https://i-blog.csdnimg.cn/direct/272900ad0f9d450b930516740237828d.png)
-
复制出3个按钮
![![[Pasted image 20250126162148.png]]](https://i-blog.csdnimg.cn/direct/8a3dafdf53d84ac79b1b4c21eca9b68d.png)
-
通过Vertical组件调整按钮间距
![![[Pasted image 20250126162251.png]]](https://i-blog.csdnimg.cn/direct/7a519d04b84d402e995affd470d400ae.png)
-
更改其他按钮的内容
![![[Pasted image 20250126162445.png]]](https://i-blog.csdnimg.cn/direct/27d977efbbf14206b5c417c8485fc43d.png)
按钮交互
- 新建一个Scripts文件夹,新建一个CommonButton脚本吗,将其挂载到四个按钮组件上
![![[Pasted image 20250126164325.png]]](https://i-blog.csdnimg.cn/direct/6dd64a1260374a3f88115540123b4f05.png)
using TMPro;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class CommonButton : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
private Image image;
private TextMeshProUGUI text;
private void Awake()
{
image = GetComponent<Image>();
text = GetComponentInChildren<TextMeshProUGUI>();
}
public void OnPointerEnter(PointerEventData eventData)
{
image.color = new Color(255, 255, 255);
text.color = Color.black;
}
public void OnPointerExit(PointerEventData eventData)
{
image.color = Color.black;
text.color = new Color(255, 255, 255);
}
}
![![[Pasted image 20250126165902.png]]](https://i-blog.csdnimg.cn/direct/1caf4c6dda01423bb3ee692976013981.png)
按钮跳转
-
将Button重命名为MainMneuPanel
![![[Pasted image 20250201034507.png]]](https://i-blog.csdnimg.cn/direct/c68b61b71a98479c93d47d25b7d15202.png)
-
创建一个同名脚本
![![[Pasted image 20250201034631.png]]](https://i-blog.csdnimg.cn/direct/e09d1fb6a7bc45389db731fff3744005.png)
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;
public class MainMenuPanel : MonoBehaviour
{
private Button startButton;
private Button settingsButton;
private Button progressButton;
private Button exitButton;
private void Awake()
{
startButton = GameObject.Find("StartButton").GetComponent<Button>();
settingsButton = GameObject.Find("SettingsButton").GetComponent<Button>();
progressButton = GameObject.Find("ProgressButton").GetComponent<Button>();
exitButton = GameObject.Find("ExitButton").GetComponent<Button>();
}
// Start is called once before the first execution of Update after the MonoBehaviour is created
void Start()
{
startButton.onClick.AddListener(() =>
{
SceneManager.LoadScene("02-LevelSelect");
});
}
// Update is called once per frame
void Update()
{
}
}
- 将其挂载到MainMenuPanel上
![![[Pasted image 20250201040621.png]]](https://i-blog.csdnimg.cn/direct/0911c4c17d324e3ea6f01ba527e5a679.png)
![![[Pasted image 20250201042103.png]]](https://i-blog.csdnimg.cn/direct/bf07a2ecff1a4b35b98685162db0da16.png)
Unity游戏开发教程:土豆兄弟1复刻
5万+

被折叠的 条评论
为什么被折叠?



