Unity: GUI控件的使用總結(jié) BMS

一.實驗?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ì)");

}

}


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末秀鞭,一起剝皮案震驚了整個濱河市趋观,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌锋边,老刑警劉巖皱坛,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異豆巨,居然都是意外死亡剩辟,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進店門往扔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來贩猎,“玉大人,你說我怎么就攤上這事萍膛】苑” “怎么了?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵蝗罗,是天一觀的道長艇棕。 經(jīng)常有香客問我,道長串塑,這世上最難降的妖魔是什么沼琉? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮桩匪,結(jié)果婚禮上打瘪,老公的妹妹穿的比我還像新娘。我一直安慰自己傻昙,他們只是感情好闺骚,可當(dāng)我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著妆档,像睡著了一般葛碧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上过吻,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天,我揣著相機與錄音蔗衡,去河邊找鬼纤虽。 笑死,一個胖子當(dāng)著我的面吹牛绞惦,可吹牛的內(nèi)容都是我干的逼纸。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼济蝉,長吁一口氣:“原來是場噩夢啊……” “哼杰刽!你這毒婦竟也來了菠发?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤贺嫂,失蹤者是張志新(化名)和其女友劉穎滓鸠,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體第喳,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡糜俗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了曲饱。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片悠抹。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖扩淀,靈堂內(nèi)的尸體忽然破棺而出楔敌,到底是詐尸還是另有隱情,我是刑警寧澤驻谆,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布卵凑,位于F島的核電站,受9級特大地震影響旺韭,放射性物質(zhì)發(fā)生泄漏氛谜。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一区端、第九天 我趴在偏房一處隱蔽的房頂上張望值漫。 院中可真熱鬧,春花似錦织盼、人聲如沸杨何。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽危虱。三九已至,卻和暖如春唐全,著一層夾襖步出監(jiān)牢的瞬間埃跷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工邮利, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留弥雹,地道東北人。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓延届,卻偏偏與公主長得像剪勿,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子方庭,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容