10（完結）：Demo之四處找死（五）_UI · 【笨木頭Unity】入門之旅

UI是[游戲](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=%D3%CE%CF%B7&k0=%D3%CE%CF%B7&kdi0=0&luki=6&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)里必不可少的元素，在Unity里添加UI是比較輕松的事情，但要玩好它，可就不那么輕松了。沒關系，先入門。 > 笨木頭花心貢獻，啥？花心？不，是用心。 > 轉載請注明，原文地址：[http://www.benmutou.com/archives/2196](http://www.benmutou.com/archives/2196) > 文章來源：[笨木頭與游戲開發](http://www.benmutou.com/blog/) ### 1.創建UI 很早之前也介紹過怎么創建UI，這里簡單再回顧一下。在Hierarchy窗口中點擊右鍵，依次選擇【UI】-【Text】。我們會看到窗口中，多了一個Canvas和Text： ![](https://box.kancloud.cn/2016-06-06_575541ed7cccd.png) ### 2.讓UI跟隨物體移動由于我們要創建的UI是屬于BugPlayer的，所以，首先要把整個Canvas拖動到BugPlayer身上： ![](https://box.kancloud.cn/2016-06-06_575541ed8fe3c.png) 此時的Canvas雖然是在BugPlayer之下，但是…它的心是不屬于BugPlayer的，它是屬于[攝像機](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=%C9%E3%CF%F1%BB%FA&k0=%C9%E3%CF%F1%BB%FA&kdi0=0&luki=2&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)的。要想Canvas隨著物體移動，很簡單，修改Canvas屬性，如下圖： ![](https://box.kancloud.cn/2016-06-06_575541eda2218.png) 將Canvas的Render Mode屬性改為【World Space】，很好，這樣UI就能跟著物體移動了（具體原理不解釋）。此時的Canvas十分龐大，也許是我們的場景太小了。沒關系，我們修改Canvas的屬性，讓它的Scale變小一些： ![](https://box.kancloud.cn/2016-06-06_575541edb65dc.png) 由于UI是平面的，所以只需要縮小X和Y，Z可以忽略（Z：特么的….）我還偷偷把Canvas的X、Y、Z坐標設為0了，因為這樣它才會出現在BugPlayer的正中心。 ### 3.調整UI大小和樣式接下來的操作有些小繁瑣，我只能用gif圖來展示了： ![u009_5.gif](https://box.kancloud.cn/2016-06-06_575541edd056a.gif) 我只要做了幾件事情： a.把Text的高度修改為50 b.把Text的文本內容改為“我很好” c.把Text的字體大小改為25 d.把Text的顏色改為紅色現在，運行[游戲](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=%D3%CE%CF%B7&k0=%D3%CE%CF%B7&kdi0=0&luki=6&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)，UI是能跟著BugPlayer移動的。 ![u009_6.gif](https://box.kancloud.cn/2016-06-06_575541ee223bb.gif) 現在UI的方向不對，我們可以把Canvas旋轉一下，讓方向變正確，這個我就不演示了，大家自己折騰。 ### 4.在代碼中操作UI 最后要做的事情，就是在代碼里操作UI了。其實和操作物體是差不多的，主要就是怎么找到這個UI，之前所說的各種找GameObject方式都可以用在UI身上。不過，這次，我們有稍微一點點的不同。打開BugPlayerLogic腳本，加上一個屬性和兩個[函數](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=%BA%AF%CA%FD&k0=%BA%AF%CA%FD&kdi0=0&luki=5&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)，如下所說： ~~~ using?UnityEngine; using?UnityEngine.UI; public?class?BugPlayerLogic?:?MonoBehaviour?{ ???public?Text?txt?=?null; ???public?void?XChange() ???{ ???????txt.text?=?“啊，我的X！”; ???} ???public?void?ZChange() ???{ ???????txt.text?=?“啊，我的Y！不，是我的Z！”; ???} } ~~~ 我把using語句也貼出來了，為什么呢？因為要使用UI對象，就要引入UnityEngine.UI命名空間，否則是找不到這些UI類的。我們現在了一個Text屬性，沒錯，我們使用的是之前的其中一種方式，用屬性來保存對象。同時增加了兩個函數，等會會用到。現在，回到編輯器，把Text拖動到BugPlayer的BugPlayerLogic腳本組件上的txt屬性里（小若：特么的，這是語文四級考試嗎？） ![u009_7.gif](https://box.kancloud.cn/2016-06-06_575541ee40a2d.gif) 接下來，當然就是修改SomethingGGD腳本了，如下： ~~~ ??void?OnTriggerEnter(Collider?other) ???{ ???????Debug.Log(“OnTriggerEnter”); ???????BugPlayerLogic?playerLogic?=?other.gameObject.GetComponent<BugPlayerLogic>(); ???????int?rand?=?(int)Random.Range(1,?100); ???????if(rand?<?50) ???????{ ???????????other.[game](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=game&k0=game&kdi0=0&luki=7&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)Object.transform.position?=?new?Vector3( ???????????other.gameObject.transform.position.x, ???????????other.gameObject.transform.position.y, ???????????other.gameObject.transform.position.z?–?20 ???????????); ???????????playerLogic.XChange(); ???????} ???????else ???????{ ???????????other.gameObject.transform.position?=?new?Vector3( ???????????other.gameObject.transform.position.x?+?20, ???????????other.gameObject.transform.position.y, ???????????other.[game](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=game&k0=game&kdi0=0&luki=7&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)Object.transform.position.z ???????????); ???????????playerLogic.ZChange(); ???????} ???} ~~~ 只需修改OnTriggerEnter函數。我做了什么事情呢？我調用了other.[game](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=game&k0=game&kdi0=0&luki=7&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)Object的GetComponent函數，這個函數可以獲取GameObject上的組件對象。這是很強大的功能，我們只要擁有了GameObject對象，就可以獲取到它所有的[組件](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=%D7%E9%BC%FE&k0=%D7%E9%BC%FE&kdi0=0&luki=4&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)對象了。既然已經能獲取BugPlayerLogic對象了，那自然可以調用它的函數了。我們在不同的if條件里分別調用了XChange和ZChange[函數](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=%BA%AF%CA%FD&k0=%BA%AF%CA%FD&kdi0=0&luki=5&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)。 OK，運行[游戲](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=%D3%CE%CF%B7&k0=%D3%CE%CF%B7&kdi0=0&luki=6&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)，看看我們的效果吧： ![u009_8.gif](https://box.kancloud.cn/2016-06-06_575541ee5d533.gif) 哦，對不起，我玩得太入迷了，一不小心[多玩](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=%B6%E0%CD%E6&k0=%B6%E0%CD%E6&kdi0=0&luki=1&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)了一會。細心的笨蛋一定已經發現了，好像有些文字沒有顯示出來，這是因為Text的寬度不夠大，這個大家自己解決，太簡單，不想說。 ### 5.結束特么的，終于結束了。這個Demo結束了，木頭的Unity入門之旅系列教程也結束了，耗時將近一個月。我相信，對于入門，這些知識已經夠用了，接下來就需要大家自己去折騰，去看其他的教程了。 Unity其實入門是很難的，我是指入門的前幾天，拖幾個物體、建個場景當然很輕松，但想真正寫一個Demo級別的[小游戲](http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=930fbe77ee6efa13&k=%D0%A1%D3%CE%CF%B7&k0=%D0%A1%D3%CE%CF%B7&kdi0=0&luki=3&mcpm=0&n=10&p=baidu&q=25013069_cpr&rb=0&rs=1&seller_id=1&sid=13fa6eee77be0f93&ssp2=1&stid=0&t=tpclicked3_hc&td=1682305&tu=u1682305&u=http%3A%2F%2Fwww%2Ebenmutou%2Ecom%2Farchives%2F2196&urlid=0)，似乎都會很迷茫。而度過前面的幾天之后，其實就輕松多了，習慣了Unity的操作方式，看教程也會容易理解很多。但，入門后的1個月、2個月、1年、2年，也許會越來越難，畢竟，Unity太強大了，有很多東西值得去研究。請原諒木頭精力有限，無法持續輸出教程，最近公司也到了比較緊張的時期，我得多花心思在公司上面。 OK，很高興我能堅持完成這個系列的教程（雖然后面幾篇有點乏力），希望以后還能繼續多寫教程。如果大家有什么想要了解的，也不妨給我留言，我嘗試去折騰，然后寫成教程。太難的就別為難我了，畢竟我還處于Unity初級階段。以上。本篇源碼：[Unity_benmutou_010.7z](http://www.benmutou.com/wp-content/uploads/2015/11/wpid-a0749d0b9d58504b74a1b7d2c8e121f7_Unity_benmutou_010.7z)[](#)