一.實(shí)驗(yàn)?zāi)康模?br>
深入了解Unity 5.X中常用GUI控件的功能和使用方法
作業(yè)內(nèi)容:從自己熟悉的游戲中選取感興趣一個(gè)或多個(gè)GUI界面,并嘗試進(jìn)行模擬實(shí)現(xiàn)
(1)選取的GUI界面至少要包含三種及以上的不同類別的GUI對(duì)象,比如:按鈕誊爹、文本輸入蚌铜、單選处面、多選钳降、滾動(dòng)條漾根、滑塊泰涂、下拉框等。
(2)在模仿過程中參考Unity官方文檔對(duì)相關(guān)GUI控件的使用和配置方法進(jìn)行詳細(xì)說明
(3)給出模式實(shí)現(xiàn)的效果辐怕、關(guān)鍵配置的截圖或相關(guān)的代碼逼蒙。
(4)DOC文檔格式
二.實(shí)驗(yàn)步驟:
I.選取模仿程序?qū)ο螅罕敬螌?shí)驗(yàn)?zāi)7聦?duì)象并未選擇游戲(單純從GUI開發(fā)角度來(lái)講部分簡(jiǎn)單游戲的GUI設(shè)計(jì)要比程序設(shè)計(jì)要簡(jiǎn)單很多,因此為了程序的復(fù)雜性選擇了一個(gè)手機(jī)APP進(jìn)行模仿寄疏。)模仿對(duì)象為IOS平臺(tái)的MAX+是牢,該軟件可以從外部接口獲取游戲數(shù)據(jù)并以非常直觀的圖表/六邊形等形式展示出來(lái)。
II.選擇模仿部分:考慮到設(shè)計(jì)難度赁还,選擇了按鈕/文本輸入/滑塊/滾動(dòng)條四個(gè)部分進(jìn)行模仿妖泄;其中設(shè)計(jì)主要難度在于構(gòu)建多層場(chǎng)景并完成場(chǎng)景間的互相切換驹沿。
II.選擇UI部分進(jìn)行設(shè)計(jì):參考原APP的各層設(shè)計(jì)艘策,對(duì)幾個(gè)關(guān)鍵場(chǎng)景進(jìn)行模仿:
ID/用戶設(shè)置界面:
戰(zhàn)績(jī)查詢主界面:
用戶ID主界面:
單英雄查詢界面:
人物ID搜索界面:
搜索靶向界面:
三.設(shè)計(jì)內(nèi)容:
1.為絕大部分的場(chǎng)景切換設(shè)計(jì)了Button按鈕,其中為了使淺色按鈕的點(diǎn)擊反饋更明顯選擇了對(duì)原截圖進(jìn)行剪切-----和Button所在位置重合-----將Button的Image組件改為圖片的Sprite格式文件----改變點(diǎn)擊顏色的步驟渊季,完成后按鈕的操作截圖如下:
黑色/深色按鈕則不需要這種復(fù)雜的改變朋蔫,只需要在反饋區(qū)域添加Button組件---將組件的Image選項(xiàng)改為透明的UI-Mask,并將Color選項(xiàng)改為黑色/深色即可却汉。
經(jīng)過對(duì)6個(gè)場(chǎng)景的構(gòu)建和布置驯妄,總共使用了20個(gè)左右的Button實(shí)現(xiàn)場(chǎng)景間的互相切換,并利用代碼進(jìn)行了構(gòu)建合砂。例如每個(gè)場(chǎng)景左上角的Return箭頭按鈕會(huì)返回上一層/返回主界面青扔,而點(diǎn)擊每個(gè)Button可以前往下一層。
完成代碼后翩伪,將Script組件導(dǎo)入到該Button中微猖,并通過OnBtnClick組件進(jìn)行場(chǎng)景間的切換。
2.除去復(fù)雜的場(chǎng)景切換缘屹,本應(yīng)用還通過InputField功能實(shí)現(xiàn)了輸入和查找凛剥。在該軟件主界面Main區(qū)域有添加關(guān)注按鈕,點(diǎn)擊按鈕后切換到AddFollow場(chǎng)景中:
該場(chǎng)景布置同樣是Image導(dǎo)入手機(jī)截圖作為背景轻姿,之后在手機(jī)的輸入框內(nèi)添加一個(gè)InputField組件(下方的蘋果鍵盤是JPG格式犁珠,在app端貌似無(wú)法取消逻炊。。犁享。
添加Scrollbar后通過代碼構(gòu)建余素;并通過OnBtnClick關(guān)聯(lián)代碼:
完成關(guān)聯(lián)后可以發(fā)現(xiàn),在框內(nèi)輸入Talia#51738會(huì)跳轉(zhuǎn)到Talia玩家界面炊昆;并在Debug界面輸出:讀取 Talia 信息
如果未輸入該信息溺森,則在Debug界面輸出:未找到該玩家。
3.在設(shè)置界面還添加了音量調(diào)節(jié)/畫質(zhì)調(diào)節(jié)選項(xiàng)窑眯,雖然該APP并沒有該功能屏积,但是為了證明我會(huì)做滾動(dòng)條我就添加了這兩個(gè)并沒有什么實(shí)際意義的功能。磅甩。炊林。
界面如右圖:
在設(shè)置下方加入兩個(gè)Text和一個(gè)ScrollBar和一個(gè)Slider組件,并為音量組件加入一個(gè)Audio Source功能并加入一段音樂:
勾選Play On Awake和循環(huán)選項(xiàng)卷要,并將Slider的值調(diào)節(jié)為1-100渣聚,并利用On Value Change方法將代碼和組件關(guān)聯(lián)起來(lái)。完成后運(yùn)行程序僧叉,將滑塊從0向右滑動(dòng)就可以聽到逐漸變大的背景音樂聲奕枝。
Scroll Bar同理,不過為了易于理解我將值域縮減為三個(gè)數(shù):
之后將腳本與On Value Change方法關(guān)聯(lián)瓶堕,運(yùn)行程序后滑動(dòng)滑塊隘道,會(huì)在Debug界面顯示三個(gè)值對(duì)應(yīng)的畫質(zhì):低畫質(zhì)/中畫質(zhì)/高畫質(zhì)。
四.代碼構(gòu)建:
本程序一共使用了四個(gè)Script文件:
分別實(shí)現(xiàn)音量控制/按鈕/輸入框鍵入文字/滑塊調(diào)節(jié)畫質(zhì):
按鈕的功能實(shí)現(xiàn)代碼如下:
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("讀取添加關(guān)注界面");
Application.LoadLevel("AddFollow");
}
publicvoidLoadLevelSettings()
{
Debug.Log("讀取個(gè)人設(shè)置界面");
Application.LoadLevel("Settings");
}
}
音量控制代碼實(shí)現(xiàn)如下:
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代碼實(shí)現(xiàn)如下:
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");
}
}
畫質(zhì)滑塊代碼實(shí)現(xiàn)如下:
usingSystem.Collections;
usingSystem.Collections.Generic;
usingUnityEngine;
usingUnityEngine.UI;
publicclassPictureQuality:MonoBehaviour{
publicScrollbarChangeQuality;
publicvoidChangePictureQuality()
{
GetComponent().value = ChangeQuality.value;
if(ChangeQuality.value < 0.35)
Debug.Log("低畫質(zhì)");
if(ChangeQuality.value > 0.35 || ChangeQuality.value < 0.7)
Debug.Log("中畫質(zhì)");
if(ChangeQuality.value > 0.7)
Debug.Log("高畫質(zhì)");
}
}