一.实验目的:
深入了解Unity 5.X中常用GUI控件的功能和使用方法
作业内容:从自己熟悉的游戏中选取感兴趣一个或多个GUI界面,并尝试进行模拟实现
(1)选取的GUI界面至少要包含三种及以上的不同类别的GUI对象,比如:按钮、文本输入、单选、多选、滚动条、滑块、下拉框等。
(2)在模仿过程中参考Unity官方文档对相关GUI控件的使用和配置方法进行详细说明
(3)给出模式实现的效果、关键配置的截图或相关的代码。
(4)DOC文档格式
二.实验步骤:
I.选取模仿程序对象:本次实验模仿对象并未选择游戏(单纯从GUI开发角度来讲部分简单游戏的GUI设计要比程序设计要简单很多,因此为了程序的复杂性选择了一个手机APP进行模仿。)模仿对象为IOS平台的MAX+,该软件可以从外部接口获取游戏数据并以非常直观的图表/六边形等形式展示出来。
II.选择模仿部分:考虑到设计难度,选择了按钮/文本输入/滑块/滚动条四个部分进行模仿;其中设计主要难度在于构建多层场景并完成场景间的互相切换。
II.选择UI部分进行设计:参考原APP的各层设计,对几个关键场景进行模仿:
ID/用户设置界面:
战绩查询主界面:
用户ID主界面:
单英雄查询界面:
人物ID搜索界面:
搜索靶向界面:
三.设计内容:
1.为绝大部分的场景切换设计了Button按钮,其中为了使浅色按钮的点击反馈更明显选择了对原截图进行剪切-----和Button所在位置重合-----将Button的Image组件改为图片的Sprite格式文件----改变点击颜色的步骤,完成后按钮的操作截图如下:
黑色/深色按钮则不需要这种复杂的改变,只需要在反馈区域添加Button组件---将组件的Image选项改为透明的UI-Mask,并将Color选项改为黑色/深色即可。
经过对6个场景的构建和布置,总共使用了20个左右的Button实现场景间的互相切换,并利用代码进行了构建。例如每个场景左上角的Return箭头按钮会返回上一层/返回主界面,而点击每个Button可以前往下一层。
完成代码后,将Script组件导入到该Button中,并通过OnBtnClick组件进行场景间的切换。
2.除去复杂的场景切换,本应用还通过InputField功能实现了输入和查找。在该软件主界面Main区域有添加关注按钮,点击按钮后切换到AddFollow场景中:
该场景布置同样是Image导入手机截图作为背景,之后在手机的输入框内添加一个InputField组件(下方的苹果键盘是JPG格式,在app端貌似无法取消。。。
添加Scrollbar后通过代码构建;并通过OnBtnClick关联代码:
完成关联后可以发现,在框内输入Talia#51738会跳转到Talia玩家界面;并在Debug界面输出:读取 Talia 信息
如果未输入该信息,则在Debug界面输出:未找到该玩家。
3.在设置界面还添加了音量调节/画质调节选项,虽然该APP并没有该功能,但是为了证明我会做滚动条我就添加了这两个并没有什么实际意义的功能。。。
界面如右图:
在设置下方加入两个Text和一个ScrollBar和一个Slider组件,并为音量组件加入一个Audio Source功能并加入一段音乐:
勾选Play On Awake和循环选项,并将Slider的值调节为1-100,并利用On Value Change方法将代码和组件关联起来。完成后运行程序,将滑块从0向右滑动就可以听到逐渐变大的背景音乐声。
Scroll Bar同理,不过为了易于理解我将值域缩减为三个数:
之后将脚本与On Value Change方法关联,运行程序后滑动滑块,会在Debug界面显示三个值对应的画质:低画质/中画质/高画质。
四.代码构建:
本程序一共使用了四个Script文件:
分别实现音量控制/按钮/输入框键入文字/滑块调节画质:
按钮的功能实现代码如下:
publicclassButtonReact:MonoBehaviour{
publicButtonReturnToMenu;
publicButtonDetails;
publicButtonGetAll;
publicButtonSoilder;
publicButtonSoilderReturn;
publicButtonMyIdButton;
publicButtonAddFollow;
publicButtonSettings;
publicvoidLoadLevelMainMenu()
{
Debug.Log ("读取主界面");
Application.LoadLevel("Main");
}
publicvoidLoadLevelID()
{
Debug.Log("读取ID界面");
Application.LoadLevel("IDpage");
}
publicvoidLoadLevelSoilder()
{
Debug.Log("读取Soilder界面");
Application.LoadLevel("Soilder");
}
publicvoidLoadLevelAddFollow()
{
Debug.Log("读取添加关注界面");
Application.LoadLevel("AddFollow");
}
publicvoidLoadLevelSettings()
{
Debug.Log("读取个人设置界面");
Application.LoadLevel("Settings");
}
}
音量控制代码实现如下:
usingSystem.Collections;
usingSystem.Collections.Generic;
usingUnityEngine;
usingUnityEngine.UI;
publicclassAudioControl:MonoBehaviour{
publicSliderVolumeControll;
// Use this for initialization
voidStart() {
}
// Update is called once per frame
voidUpdate() {
}
publicvoidVolumeChange()
{
GetComponent().volume = VolumeControll.value;
}
}
搜索ID代码实现如下:
publicclassLogIn:MonoBehaviour{
publicInputFieldUserName;
// Use this for initialization
voidStart() {
}
// Update is called once per frame
voidUpdate() {
}
publicvoidLogin()
{
if(UserName.text =="Talia#51738")
Debug.Log("查找玩家名:"+ UserName.text);
Application.LoadLevel("Talia");
else
Debug.Log("查询不到该玩家!");
Application.LoadLevel("Main");
}
}
画质滑块代码实现如下:
usingSystem.Collections;
usingSystem.Collections.Generic;
usingUnityEngine;
usingUnityEngine.UI;
publicclassPictureQuality:MonoBehaviour{
publicScrollbarChangeQuality;
publicvoidChangePictureQuality()
{
GetComponent().value = ChangeQuality.value;
if(ChangeQuality.value < 0.35)
Debug.Log("低画质");
if(ChangeQuality.value > 0.35 || ChangeQuality.value < 0.7)
Debug.Log("中画质");
if(ChangeQuality.value > 0.7)
Debug.Log("高画质");
}
}