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

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

}

}


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末谭梗,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子宛蚓,更是在濱河造成了極大的恐慌激捏,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,542評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凄吏,死亡現(xiàn)場(chǎng)離奇詭異远舅,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)痕钢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門图柏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人盖喷,你說我怎么就攤上這事爆办。” “怎么了课梳?”我有些...
    開封第一講書人閱讀 163,912評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵距辆,是天一觀的道長(zhǎng)余佃。 經(jīng)常有香客問我,道長(zhǎng)跨算,這世上最難降的妖魔是什么爆土? 我笑而不...
    開封第一講書人閱讀 58,449評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮诸蚕,結(jié)果婚禮上步势,老公的妹妹穿的比我還像新娘。我一直安慰自己背犯,他們只是感情好坏瘩,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著漠魏,像睡著了一般倔矾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上柱锹,一...
    開封第一講書人閱讀 51,370評(píng)論 1 302
  • 那天哪自,我揣著相機(jī)與錄音,去河邊找鬼禁熏。 笑死壤巷,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的瞧毙。 我是一名探鬼主播胧华,決...
    沈念sama閱讀 40,193評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼升筏!你這毒婦竟也來(lái)了撑柔?” 一聲冷哼從身側(cè)響起瘸爽,我...
    開封第一講書人閱讀 39,074評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤您访,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后剪决,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體灵汪,經(jīng)...
    沈念sama閱讀 45,505評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評(píng)論 3 335
  • 正文 我和宋清朗相戀三年柑潦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了享言。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,841評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡渗鬼,死狀恐怖览露,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情譬胎,我是刑警寧澤差牛,帶...
    沈念sama閱讀 35,569評(píng)論 5 345
  • 正文 年R本政府宣布命锄,位于F島的核電站,受9級(jí)特大地震影響偏化,放射性物質(zhì)發(fā)生泄漏脐恩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評(píng)論 3 328
  • 文/蒙蒙 一侦讨、第九天 我趴在偏房一處隱蔽的房頂上張望驶冒。 院中可真熱鬧,春花似錦韵卤、人聲如沸骗污。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)身堡。三九已至,卻和暖如春拍鲤,著一層夾襖步出監(jiān)牢的瞬間贴谎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工季稳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留擅这,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,962評(píng)論 2 370
  • 正文 我出身青樓景鼠,卻偏偏與公主長(zhǎng)得像仲翎,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子铛漓,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評(píng)論 2 354

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

  • 一.實(shí)驗(yàn)?zāi)康模?深入了解Unity 5.X中常用GUI控件的功能和使用方法 作業(yè)內(nèi)容:從自己熟悉的游戲中選取感興趣...
    LunarShade閱讀 494評(píng)論 0 0
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,112評(píng)論 25 707
  • 我家買了只美短銀虎斑男貓溯香,滿足兒子孤單無(wú)伴的需要,并給它起名叫“雪糕”浓恶。由于此動(dòng)議出自于兒子玫坛,所以“雪糕”...
    紫雨true閱讀 556評(píng)論 2 5
  • 記錄旅途點(diǎn)滴 感悟人生百味 大家好,我是“十九”包晰,我在路上湿镀! 謹(jǐn)以此篇,獻(xiàn)給我親愛的“楊娜”…… 遇上煙雨朦朧的張...
    十八加一閱讀 682評(píng)論 8 7
  • 今天把《通往財(cái)富自由之路》看完了伐憾,可是看完之后勉痴,一方面很興奮,懂得了很多知識(shí)改變树肃,另一方面很苦惱焦急蒸矛,自己的無(wú)知,...
    40歲重生閱讀 209評(píng)論 1 0