快速轉化PSD為Unity3D 使用的 UI介面

2021-08-21 02:31:18 字數 1734 閱讀 1105

fairygui官網

如何提高遊戲介面開發效率,是業界不斷**的乙個問題。傳統製作模式(美術出圖,程式設計師在unity裡拼介面)需要占用大量的程式設計師時間用於簡單的拼介面工作,所以程式設計師也開動腦筋製作了很多輔助工具,例如將美術的psd原始檔直接轉化為ui介面的預製。我們可以在網上查詢到不少針對ngui或ugui的psd2ui方案,而今天我給大家介紹的是應用於另外一款越來越流行的ui引擎fairygui的psd2ui方案。

事實上,如果你使用fairygui作為你的ui解決方案,得益於強大的fairygui編輯器,程式設計師已經不再需要在unity裡拼介面,取而代之的是,策劃、美術也可以拼出質量高,直接能用的介面。所以對於fairygui來說,psd2ui的方案反而有點繁瑣。無論如何,需求總是複雜的,有總比沒有好,而且用作第一次的自動生成,還是能提高一定效率的。

安裝

這個工具的名稱叫psd2fgui,它是乙個nodejs的應用。所以安裝方式很簡單,在命令列模式下執行:

npm install -g psd2fgui安裝完成後,我們就可以直接使用psd2fgui命令了。

準備psd檔案

如上圖所示,使用圖層名稱或組名稱來表達它的型別和用途。以下是約定的細節:

**@up **這個圖層只在按鈕的up狀態顯示

@over這個圖層只在按鈕的over狀態顯示

**@down **這個圖層只在按鈕的down狀態顯示

**@selectedover **這個圖層只在按鈕的selectedover狀態顯示

**@title **文字用作按鈕的標題

**@icon **用作按鈕的圖示

元件 組的名稱以com開始表示這個組是乙個元件。元件可以巢狀。

執行轉換

psd2fgui test.psd

如果成功轉換,輸出為:

在下方選擇要匯入的位置,可以匯入到乙個新包,也可以匯入到當前的包指定的目錄。

以下是匯入的結果:

然後ui製作人員可以開始在fairygui編輯器進行介面的其它調整。

高階選項

psd2fgui還提供了一些開關調整轉換的細節:

例如://使用上次轉換結果的buildid重新轉換

psd2fgui test.psd --ignore-font #mlmjpf0dc7zp

定製

目前對於psd裡結構的約定,未必能符合每個人專案的需求。遇到這種情況,可以自行修改psd2fgui的原始碼進行定製。原始碼託管在

Unity3D如何快速入門?

一句話說明下unity是什麼,unity是乙個開發遊戲,主要用於手機遊戲開發的引擎,什麼是引擎,引擎就是工具的意思。在我看來,b 站是乙個非常牛逼的學習 真心的 上面的內容包羅永珍,應有盡有。比如 這套課程從基礎的資料型別講起,到後期的物件導向,正規表示式,包含委託事件特性等高階課程等。非常全面,他...

Unity3D開發(九) Unity3d流光效果

遊戲開 壇 hello game 遊戲開發群 201276069 之前曾經注意過material 中紋理的屬性都有 tiling 和offset 但沒有深究過其用途,今天才知道竟然可以利用 offset做uv 動畫,從而完成各種有趣的動畫,比如流光效果!流過效果即通常一條高光光在物體上劃過,模擬高光...

Unity3d時鐘指令碼

var tu1 texture2d var time1 float 0 function fixedupdate function ongui function gettime time float string var lasttime string var hour mathf.floortoi...