Genesis-3D新手入門——19.UI美化

‍

UI美化

咱們已經學會製做一個基本的UI界面，接下來學習怎麼對界面進行美化。這裏咱們使用SkinEditor對UI控鍵添加皮膚。

（1） 打開File—>Settings設置資源讀取的路徑：

（2） 點擊「Add」，添加文件路徑：

這裏有一個地方須要注意，把SkinEditor的安裝與UI工程的存放要在相同的根目錄下，這裏咱們選擇C:\Users\Admin\Documents爲二者存放的根目錄。以下圖所示，這裏會默認顯示SkinEditor軟件的安裝目錄，咱們要不停地點擊」UP「，直到跳出安裝目錄，到根目錄下：

（3） 到根目錄之後，進入路徑爲...\GenesisProjects\UI\Asset，並選擇UI工程下的UIMedia，點擊」Select「：

（4） 點擊「Resources」，添加資源路徑：

（5） 輸入資源路徑。這裏跟上一環節設置路徑不太相同，沒有提供文件選擇，咱們須要手動輸入或者複製粘貼該路徑：...\GenesisProjects\UI\Asset\UIMedia：

（6）爲了SkinEditor可以讀取出咱們想要處理的圖片，須要在…\GenesisProjects\UI\Asset\UIMedia下放入目標圖片base.png。而後咱們須要關閉SkinEditor，從新打開後才能讀取到資源路徑下的目標圖片：

（7）點擊下方「Create」，建立皮膚：

（8）點擊「Rename」，對皮膚重命名爲Background：

（9）點擊右側的Texture瀏覽後，選中base.png,點擊「OK」。base.png是一張特殊的圖片，上面聚集了多個可用於控鍵皮膚的圖片：

（10）在導入base.png以後，咱們從界面的左上角找到綠色框框，用它來截取須要的部分圖片。這裏咱們截取背景皮膚：

同理，在這個界面中建立皮膚Helloworld和Start，並用綠色框框截取相應的圖片：

（11）三個皮膚都製做完成後，點擊File——>Save as進行保存。存放路徑爲以前在Setting中設置的路徑。將其命名爲skin.xml,這裏須要注意的是命名時必定要加上後綴名xml。點擊」Save「保存：

（12）打開…\GenesisProjects\UI\Asset\UIMedia目錄，進行如下三個步驟：修改skin.xml，建立Init.xml，修改gui_core.xml：

(13)用記事本打開skin.xml，按照左側SkinEditor中的Coords欄中的數值依次修改三個皮膚的offset值：

（14）建立Init.xml。具體步驟爲：新建一個記事本文件，寫入代碼，保存並關閉後，修改其後綴名爲xml。代碼以下：

（15）修改gui_core.xml。往裏添加一條語句：

（16）打開LayoutEditor,點擊「File」—>"Setting"，設置路徑爲也爲…\GenesisProjects\UI\Asset\UIMedia，以便LayoutEditor可以訪問到以前作好的皮膚：

（17）點擊」File「—>"Load」，選擇以前作好的start.layout，點擊「Open」：

（18）選中一個Button，經過修改右側屬性欄中Skin標籤，爲其添加皮膚：

（19）咱們依次爲backgroundButton添加皮膚Background，爲startButton添加皮膚Start，helloButton添加皮膚Helloworld。所有添加完成後效果以下：

（20）添加皮膚完成後點擊File——>Save進行保存。而後將更新後的start.layout替換UIMedia目錄下原來的start.layout文件，從新在Genesis中發佈並運行UI項目，結果以下。漂亮的背景圖片上出現了」開始「：

    點擊"開始"，「開始」消失,出現」歡迎您「：

一個簡單的UI就這樣製做出來了。你還能夠根據不一樣的需求與更多的資源製做出更加豐富、美觀的UI界面來，趕快動手試試吧！

‍