一.實驗?zāi)康模?br>
深入了解Unity 5.X中常用GUI控件的功能和使用方法
作業(yè)內(nèi)容:從自己熟悉的游戲中選取感興趣一個或多個GUI界面恩急,并嘗試進行模擬實現(xiàn)
(1)選取的GUI界面至少要包含三種及以上的不同類別的GUI對象杉畜,比如:按鈕、文本輸入假栓、單選寻行、多選、滾動條匾荆、滑塊、下拉框等杆烁。
(2)在模仿過程中參考Unity官方文檔對相關(guān)GUI控件的使用和配置方法進行詳細說明
(3)給出模式實現(xiàn)的效果牙丽、關(guān)鍵配置的截圖或相關(guān)的代碼。
(4)DOC文檔格式
二.實驗步驟:
I.選取模仿程序?qū)ο螅罕敬螌嶒災(zāi)7聦ο蟛⑽催x擇游戲(單純從GUI開發(fā)角度來講部分簡單游戲的GUI設(shè)計要比程序設(shè)計要簡單很多兔魂,因此為了程序的復(fù)雜性選擇了一個手機APP進行模仿烤芦。)模仿對象為IOS平臺的MAX+,該軟件可以從外部接口獲取游戲數(shù)據(jù)并以非常直觀的圖表/六邊形等形式展示出來析校。
II.選擇模仿部分:考慮到設(shè)計難度构罗,選擇了按鈕/文本輸入/滑塊/滾動條四個部分進行模仿;其中設(shè)計主要難度在于構(gòu)建多層場景并完成場景間的互相切換智玻。
II.選擇UI部分進行設(shè)計:參考原APP的各層設(shè)計遂唧,對幾個關(guān)鍵場景進行模仿:
ID/用戶設(shè)置界面:
戰(zhàn)績查詢主界面:
用戶ID主界面:
單英雄查詢界面:
人物ID搜索界面:
搜索靶向界面:
三.設(shè)計內(nèi)容:
1.為絕大部分的場景切換設(shè)計了Button按鈕,其中為了使淺色按鈕的點擊反饋更明顯選擇了對原截圖進行剪切-----和Button所在位置重合-----將Button的Image組件改為圖片的Sprite格式文件----改變點擊顏色的步驟吊奢,完成后按鈕的操作截圖如下:
黑色/深色按鈕則不需要這種復(fù)雜的改變盖彭,只需要在反饋區(qū)域添加Button組件---將組件的Image選項改為透明的UI-Mask,并將Color選項改為黑色/深色即可。
經(jīng)過對6個場景的構(gòu)建和布置召边,總共使用了20個左右的Button實現(xiàn)場景間的互相切換铺呵,并利用代碼進行了構(gòu)建。例如每個場景左上角的Return箭頭按鈕會返回上一層/返回主界面隧熙,而點擊每個Button可以前往下一層片挂。
完成代碼后,將Script組件導(dǎo)入到該Button中贞盯,并通過OnBtnClick組件進行場景間的切換音念。
2.除去復(fù)雜的場景切換,本應(yīng)用還通過InputField功能實現(xiàn)了輸入和查找邻悬。在該軟件主界面Main區(qū)域有添加關(guān)注按鈕症昏,點擊按鈕后切換到AddFollow場景中:
該場景布置同樣是Image導(dǎo)入手機截圖作為背景,之后在手機的輸入框內(nèi)添加一個InputField組件(下方的蘋果鍵盤是JPG格式父丰,在app端貌似無法取消肝谭。。蛾扇。
添加Scrollbar后通過代碼構(gòu)建攘烛;并通過OnBtnClick關(guān)聯(lián)代碼:
完成關(guān)聯(lián)后可以發(fā)現(xiàn),在框內(nèi)輸入Talia#51738會跳轉(zhuǎn)到Talia玩家界面镀首;并在Debug界面輸出:讀取 Talia 信息
如果未輸入該信息坟漱,則在Debug界面輸出:未找到該玩家。
3.在設(shè)置界面還添加了音量調(diào)節(jié)/畫質(zhì)調(diào)節(jié)選項更哄,雖然該APP并沒有該功能芋齿,但是為了證明我會做滾動條我就添加了這兩個并沒有什么實際意義的功能。成翩。觅捆。
界面如右圖:
在設(shè)置下方加入兩個Text和一個ScrollBar和一個Slider組件,并為音量組件加入一個Audio Source功能并加入一段音樂:
勾選Play On Awake和循環(huán)選項麻敌,并將Slider的值調(diào)節(jié)為1-100栅炒,并利用On Value Change方法將代碼和組件關(guān)聯(lián)起來。完成后運行程序术羔,將滑塊從0向右滑動就可以聽到逐漸變大的背景音樂聲赢赊。
Scroll Bar同理,不過為了易于理解我將值域縮減為三個數(shù):
之后將腳本與On Value Change方法關(guān)聯(lián)级历,運行程序后滑動滑塊释移,會在Debug界面顯示三個值對應(yīng)的畫質(zhì):低畫質(zhì)/中畫質(zhì)/高畫質(zhì)。
四.代碼構(gòu)建:
本程序一共使用了四個Script文件:
分別實現(xiàn)音量控制/按鈕/輸入框鍵入文字/滑塊調(diào)節(jié)畫質(zhì):
按鈕的功能實現(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("讀取個人設(shè)置界面");
Application.LoadLevel("Settings");
}
}
音量控制代碼實現(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代碼實現(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ì)滑塊代碼實現(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ì)");
}
}