Unity-BattleStar丨5. 给BattleStar游戏添加UI

2024-08-14 15:54:51 浏览数 (1)

准备工作:图片资源下载

1、创建Panel的UI,重命名Menu,并将Canvas重命名MainMenu

根据上篇文章内容,Meun的锚点要在Canvas中心,这样缩放屏幕时会保持相对位置不变

2、将MainMenu Inspector面板中Render Mode改为Screen Space-Overlay,Canvas Scalar-UI Scale Mode改为Scale with Screen Size,Reference Resolution X1280 Y720,Match设为0.5

Match如果不设置为0.5,则Canvas不会按照分辨率改变等比例缩放,产生如下面第一张图效果,第二张图为设置好的效果:

a.当UIScaleMode为Constant Pixel Size时,UI在任何分辨率下都不会进行缩放拉伸,只有通过改变Scale Factor才会进行缩拉,因此不推荐使用该模式(而这种模式的优点就是你可以通过写自适应算法来改变Scale Factor的值,代替unity的自适应算法)

b.当UIScaleMode为Scale With Screen Size时,相当于使用unity的自适应算法,此时unity会根据屏幕分辨率自动调节Scale Factor的值。在做自适应时,一般要先选择一种比较主流的分辨率(即比较多的机型都采用这种分辨率)进行UI的设计,例如采用1024x576,在这里就是设置Reference Resolution的值了。

c.当值为Constant Physical Size时:通过调节 Canvas 物理大小来维持缩放不变。它的意思是在任何屏幕上不改变 Canvas 的 DPI(是一个量度单位,用于点阵数码影像,指每一英寸长度中,取样、可显示或输出点的数目),而是调节 Canvas 的物理大小总是与屏幕保持一致。

3、将要使用的UI图片设置为Sprite(2D and UI)

4、将图片“MainPanel_BackGround”拖入Menu-Source Image

5、在Meun下创建名为“List”的Image,将其Color的A值改为200,锚点为Menu的中心,

MainMenu(即Canvas)和屏幕大小一致,Menu与Canvas按照锚点关系缩放,List与Menu按照锚点关系缩放,子物体按父物体缩放,锚点位置确定缩放的方法,如此继承下去

6、添加4个Button,Width130 Height30,居中间距70,将图片“Button”拖入Source Image,文字分别改为“开始游戏”、“游戏设置”、“排行榜”、“退出游戏”,添加采用“MainPanel_Title”图片的Logo

7、添加排行榜

直接Ctrl D List,删掉Logo和Button,重命名Records,隐藏List,按下图所示给Records创建Text,注意锚点都是父物体中心

8、进度条等可用Image UI的Image Type-Filled-Fill Method设置,注意其必须先添加进Source Image才可设置

9、添加点击事件,取消菜单的显示,显示排行榜栏

方法1:隐藏Records,显示List,新建“GameSettings”C#

using UnityEngine;

public class GameSettings : MonoBehaviour {

public GameObject Records,List;

public void press() { Records.SetActive(true); List.SetActive(false); }

}

想要返回的思路:

可在排行榜增加Button,或者检测空白区域是否被点击,代码采用transform.Find()方式寻找被关闭的子节点,通过这个特性可打开被关闭的主菜单List

GameObject root=GameObject.Find("Menu"); root.transform.Find("List").gameObject.SetActive(true);

方法2:设置Image Color的方式,将A值设置为0,即透明

public GameObject Image;

Image.GetComponent<Image>().color = new Color(255,255,255,0); //(R,G,B,A)

返回思路:重设为(255,255,255,255)

最终效果展示:

0 人点赞