一個圖元都不能少 -從PS到FLASH到前端的對位實現

BY:京京 小白

第一次著手做網頁遊戲的UI，我們發現制定的視覺規範基本在輸出後普遍存在偏差。 可能8630.html">有時候這種幾個圖元的位置偏移並不被大多數使用者在意，但是對我們而言，視覺規範就會成為只是設計師自我參考的資料，而不是實際線上產品的最終效果，這令人感到相當惱火。

我們的設計過程，基本是從PS裡開始，在FLASH裡輸出，最後前端直接提取FLASH裡的檔資訊製作上線。 常理來說，只要控制到FLASH輸出與PS效果一致，基本線上上就可以完全實現。

那我們就把精力投放到檢查PS與FLASH裡對位置的問題上。
FLASH遊戲UI對位置的基礎原理：

這裡拿最近參與的一個遊戲的主介面為例，解釋下我們遊戲的對位關係。 前端程式就是以整個主介面的最左上角頂點為（0,0）座標。 直接在FLASH中提取各個介面的左上座標，來定位的。
——也就是說，關鍵在於「找到精確的（X，Y）座標」。

浮層、TOOLTIP是在單獨的元件裡定位最左上角頂點為（0,0）座標，尋找這個座標相對的（X,Y）

另：由於FLASH裡，座標都是帶小數點的，而PS裡圖元沒有小數點，所以資料都要確保整數。

正常標注：

視覺稿&HTTP://www.aliyun.com/zixun/aggregation/37954.html">nbsp;                                規範稿

根據以上標注，直接加加減減丟入FLASH後，出現如下錯位問題：

紅色為PS設定的正確行距，比較後偏差1-3個圖元不等，累積偏差極大，整個頁面大了一圈。

1． FLASH的文本定位基點：

打開FLASH，輸入一段文本，會發現FLASH的整個文字方塊比實際的可視字體範圍往各個方向各擴展2圖元。

即座標計算的起始點，原（x,y）的座標，會變為（x-2,y-2）的座標。

2.PS的文本：以PS14號字體為例，輸入後，可見其字體本身並不是14PX高，僅13PX。 （以此類推，每個字型大小-1是它實際高度），因為最下面空著一行看不見的圖元：底線預留位置。

結論：當FLASH裡重新構架介面的時候，可視字的尺寸在導入FLASH後，實際尺寸是向左向右各擴展2圖元，向下擴展3圖元。 也就是在PS裡，當我們測量一個字在場景中的位置的時候，所得的X,Y座標要各減去2圖元，才是輸入FLASH的正確座標。 而遇到文字方塊與文字方塊的間距時，PS裡測量出來的可視間距，要減2+2+1=5個圖元（不可視但存在），才是FLASH裡文字方塊和文字方塊的間距（2圖元是FLASH文字方塊上下各擴展的圖元，1圖元是因為PS文本裡看不見的底線）

3. 九宮格/自我調整

解決了2個軟體文本的差異性問題，也未必都能對準。 這是因為介面元素裡有的底圖是點陣圖，有的是FLASH直接製作的元件。 其中FLASH自己製作的元件底圖，必須打散，確保每個檔的（0,0）起始座標確實在它應該在的位置上，否則後面的座標全體會出現偏差。

4.BUG

當上述結論都確認無誤後，我們輸出檔案並截圖再做對比，發現除了文字方塊以外，其他圖素的邊緣都有點模糊，仔細比較發現，邊緣都出現1個圖元的透明度模糊化，擴展。 對於要求畫面很銳的介面來說，這也是不希望發生的事情。 資料本身都無問題，就是輸出後自動變態了。 難道這是天災人禍不可抗拒因素？ 我們所有的座標都沒有小數點，怎麼還會出問題？

經前輩友人指點，據說這是FLASH的一個BUG,保持所有長寬為整數的同時，除文字方塊以外，一切X,Y軸座標都在原來數位上加0.5。 於是，最終100%達成從PS到FLASH輸出的完美實現。

修改前                                           修改後

5.前端的一些回饋

到上面這個部分，FLASH完成輸出校對。 應該來說，程式那邊直接提取檔和資料，不會有什麼問題。 但是秉持著UED的精神，還是讓前端生成了一套測試檔案把大致會遇到的各種圖形文本九宮格的排列情況做了一下最終測試。 確實發現了還有一個小麻煩。

隔行文本會出現1PX誤差

這是因為行距在PS裡有4個圖元，但是根據文本差異的調整，減5後，在FLASH裡，行距為-1圖元。 而-1在前端實現的時候，預設壓到的那行會移一個圖元。 如果是-2，隔行會移動2個圖元。 不過移動的只是文字視覺位置，而非文字方塊。 所以對我們標注XY軸並無影響。 而這個問題，如果遇到（僅在行距為負數發生），則有前端修改處理即可，我們只需向前端標記調整需求。

總結

1.標注根據步驟2的結論進行標注。

2.底圖是AI FLASH檔，記得打散。

3.除文字方塊以外，所有元件座標尾數+0.5。

4.有負數行距，標注給前端。

PS視覺尺寸與FLASH之間的文本對算公式：

PS文本（可視）  上+2PX  下+3px     =    FLASH文本計算框

例如：PS文本（面板） 12號字15行距 = 3圖元行距 = FLASH裡 -1行距（FLASH面板裡為行距：-1點）

PS的段落與FLASH文字方塊對應關係：

小TIP：PS裡12號字12行距=0圖元間隔=FLASH裡行距點數為0（但實際視覺上兩行看上去有1PX間隔，那是底線的位置）

以上是目前的小結，FLASH遊戲才剛剛接觸，多有不足，發上來和大家一起探討，共同進步。

合作人：京京

來源：HTTP://uedc.163.com/3023.html