准备工作:图片资源下载
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)
最终效果展示: