創作內容

12 GP

【Unity】UI按鈕製作

作者:短腿肥貓│2017-01-10 17:42:31│贊助:24│人氣:16121
嗨嗨OωO/  小短腿總算順利地熬過一學期啦......
這學期學了不少新東西,腦袋整個都快燒掉了。
主要新接觸的是Unity這款軟體,也因此查了不少資料起來
所以~~ 來整理製作筆記!
怕我忘東忘西,煩惱了好久的程式碼要是忘記理由就慘了=口=
(儘管我都有寫註解的好習慣)

目前餅乾城這個遊戲,只有完成最基本的功能而已。因為很多時間上的問題沒辦法在學期結束前做好Orz
但我和組員們還是很有心要把它完成的!
嘛OWO/ 總之先把目前為止的進度整理好吧~

至於小短腿在分工上是程式當家~~因此美術圖都不是我畫的
但我有先詢問過對方的同意、才截圖下來美化版面www

===============



首先就是閃亮亮的標題畫面囉~ 美術的用心程度讓我不禁落下了兩行淚水
(到現在都還沒辦法穩定畫風的可憐人)
封面UI使用到的是Unity裡面內建的按鈕功能

以關卡Level1來舉例:


當滑鼠游標移動到按鈕上面時,會替換成下面黃色底的圖案
點擊之後就會跳轉到第一個關卡

1.  Hierarchy視窗上右鍵 > UI > Button 創造一個新的按鈕物件
場景中第一次產生的會自動生成一個Canvas(畫布)和EventSystem
而Button底下也會有Text(文字)這個子物件,但這次使用的按鈕是原本圖片上就有文字,所以用不到Text
2.  Inspector視窗中可以設定這個按鈕的屬性:
     Rect Trandform 可改變按鈕的大小、位置、旋轉、還有中心點
3.  Image(Script)裡面的Source Image可換上準備好的按鈕素材,color可用來調整透明度或是統一色調,Image type則選擇Simple(因為是使用預先切好的按鈕圖片)
4.  Button(Script)算是按鈕的核心,本次使用的Transition是Sprite Swap,裏頭的Hightlighted Sprite就是按鈕被啟動時會替換成的圖片。
5.  再下面的Onclick()是要設定按鈕被點擊之後會發生什麼事情。利用+號新增之後,選擇當前的按鈕物件,並在底下AddComponent新增一個按鈕腳本enterL1:

6.  之後再在Onclick()那邊,選取enterL1.click,告訴系統這個按鈕點選時、執行enterL1裡面的click()程式。
Application.LoadLevel(1); 是Unity內建切換場景的功能,在輸出的時候第一個開啟的場景編號是0,之後的場景編號依照需求遞增,所以這邊的(1)指的是、切換到編號1的場景,也就是設定裡的第一個關卡。


總結來說大概是上面這個樣子,就完成了第一個按鈕的設定~~~

====================

至於其他的按鈕呢? 可以用相同的方法複製,只要改圖片和腳本內容就可以了。
為了統整方便,所有的介面UI使用的按鈕腳本整理在同一個Script裡面
所以連結上可能要換個寫法:

1.  新增一個UIbutton的C# Script,將enterL1.2.3和exit的腳本整理進來
2.  腳本內容大概像這個樣子:

3.重新設定每個按鈕和腳本之間的關聯性

這樣整理好之後,以後有新增關卡或是按鈕什麼的~ 只要更改UIbutton這個腳本就可以了,不用再每次都新增一個按鈕專屬的腳本!
補充:Application.Quit(); 只要執行了就會關閉遊戲程式,但在編輯視窗中沒辦法模擬效果

============

標題畫面大概就先這個樣子OwO/
因為當初這個UI介面不是我做的,所以不確定有沒有漏標記什麼東西Orz
接下來就是關卡1啦~
裡面有超多刺激的東西要做紀錄... 不曉得寫不寫得完XD

下次見OWO/   (可憐兮兮的檢查有沒有因為我的更動而跳出來的Bug)
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=3443731
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 1 篇留言

御安鴨鴨
謝謝大佬的無私奉獻
頃接受我的膜拜

09-22 03:42

我要留言提醒:您尚未登入,請先登入再留言

12喜歡★winnie840613 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:【RPG Maker V... 後一篇:【Unity】Anima...

追蹤私訊切換新版閱覽

作品資料夾

umi0508大家
小說刊載,歡迎大家來小屋看看唷!看更多我要大聲說7小時前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】