中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

BY:京京 小白

第一次著手做網(wǎng)頁(yè)游戲的UI，我們發(fā)現(xiàn)制定的視覺(jué)規(guī)范基本在輸出后普遍存在偏差?？赡苡袝r(shí)候這種幾個(gè)像素的位置偏移并不被大多數(shù)用戶(hù)在意，但是對(duì)我們而言，視覺(jué)規(guī)范就會(huì)成為只是設(shè)計(jì)師自我參考的數(shù)據(jù)，而不是實(shí)際線(xiàn)上產(chǎn)品的最終效果，這令人感到相當(dāng)惱火。

我們的設(shè)計(jì)過(guò)程，基本是從PS里開(kāi)始，在FLASH里輸出，最后前端直接提取FLASH里的文件信息制作上線(xiàn)。常理來(lái)說(shuō)，只要控制到FLASH輸出與PS效果一致，基本在線(xiàn)上就可以完全實(shí)現(xiàn)。

那我們就把精力投放到檢查PS與FLASH里對(duì)位置的問(wèn)題上。
FLASH游戲UI對(duì)位置的基礎(chǔ)原理：

這里拿最近參與的一個(gè)游戲的主界面為例，解釋下我們游戲的對(duì)位關(guān)系。前端程序就是以整個(gè)主界面的最左上角頂點(diǎn)為（0,0）坐標(biāo)。直接在FLASH中提取各個(gè)界面的左上坐標(biāo)，來(lái)定位的。
——也就是說(shuō)，關(guān)鍵在于“找到精確的（X，Y）坐標(biāo)”。

浮層、TOOLTIP是在單獨(dú)的元件里定位最左上角頂點(diǎn)為（0,0）坐標(biāo)，尋找這個(gè)坐標(biāo)相對(duì)的（X,Y）

另：由于FLASH里，坐標(biāo)都是帶小數(shù)點(diǎn)的，而PS里像素沒(méi)有小數(shù)點(diǎn)，所以數(shù)據(jù)都要確保整數(shù)。

正常標(biāo)注：

視覺(jué)稿???????????????????????????????? 規(guī)范稿

根據(jù)以上標(biāo)注，直接加加減減丟入FLASH后，出現(xiàn)如下錯(cuò)位問(wèn)題：

紅色為PS設(shè)定的正確行距，比較后偏差1-3個(gè)像素不等，累積偏差極大，整個(gè)頁(yè)面大了一圈。

1． FLASH的文本定位基點(diǎn)：

打開(kāi)FLASH，輸入一段文本，會(huì)發(fā)現(xiàn)FLASH的整個(gè)文本框比實(shí)際的可視字體范圍往各個(gè)方向各擴(kuò)展2像素。

即坐標(biāo)計(jì)算的起始點(diǎn)，原（x,y）的坐標(biāo)，會(huì)變?yōu)椋▁-2,y-2）的坐標(biāo)。

2.PS的文本：以PS14號(hào)字體為例，輸入后，可見(jiàn)其字體本身并不是14PX高，僅13PX。（以此類(lèi)推，每個(gè)字號(hào)-1是它實(shí)際高度），因?yàn)樽钕旅婵罩恍锌床灰?jiàn)的像素：下劃線(xiàn)預(yù)留位置。

（全角半角中英文在14號(hào)文本框內(nèi)的位置比對(duì)）

結(jié)論：當(dāng)FLASH里重新構(gòu)架界面的時(shí)候，可視字的尺寸在導(dǎo)入FLASH后，實(shí)際尺寸是向左向右各擴(kuò)展2像素，向下擴(kuò)展3像素。也就是在PS里，當(dāng)我們測(cè)量一個(gè)字在場(chǎng)景中的位置的時(shí)候，所得的X,Y坐標(biāo)要各減去2像素，才是輸入FLASH的正確坐標(biāo)。而遇到文本框與文本框的間距時(shí)，PS里測(cè)量出來(lái)的可視間距，要減2+2+1=5個(gè)像素（不可視但存在），才是FLASH里文本框和文本框的間距（2像素是FLASH文本框上下各擴(kuò)展的像素，1像素是因?yàn)镻S文本里看不見(jiàn)的下劃線(xiàn)）

3. 九宮格/自適應(yīng)

解決了2個(gè)軟件文本的差異性問(wèn)題，也未必都能對(duì)準(zhǔn)。這是因?yàn)榻缑嬖乩镉械牡讏D是位圖，有的是FLASH直接制作的元件。其中FLASH自己制作的元件底圖，必須打散，確保每個(gè)文件的（0,0）起始坐標(biāo)確實(shí)在它應(yīng)該在的位置上，否則后面的坐標(biāo)全體會(huì)出現(xiàn)偏差。

4.BUG

當(dāng)上述結(jié)論都確認(rèn)無(wú)誤后，我們輸出文件并截圖再做對(duì)比，發(fā)現(xiàn)除了文本框以外，其他圖素的邊緣都有點(diǎn)模糊，仔細(xì)比較發(fā)現(xiàn)，邊緣都出現(xiàn)1個(gè)像素的透明度模糊化，擴(kuò)展。對(duì)于要求畫(huà)面很銳的界面來(lái)說(shuō)，這也是不希望發(fā)生的事情。數(shù)據(jù)本身都無(wú)問(wèn)題，就是輸出后自動(dòng)變態(tài)了。難道這是天災(zāi)人禍不可抗拒因素？我們所有的坐標(biāo)都沒(méi)有小數(shù)點(diǎn)，怎么還會(huì)出問(wèn)題？

經(jīng)前輩友人指點(diǎn)，據(jù)說(shuō)這是FLASH的一個(gè)BUG,保持所有長(zhǎng)寬為整數(shù)的同時(shí)，除文本框以外，一切X,Y軸坐標(biāo)都在原來(lái)數(shù)字上加0.5。于是，最終100%達(dá)成從PS到FLASH輸出的完美實(shí)現(xiàn)。

修改前 ????????????????????????????? ? ? ? ? ? ? 修改后

5.前端的一些反饋

到上面這個(gè)部分，F(xiàn)LASH完成輸出校對(duì)。應(yīng)該來(lái)說(shuō)，程序那邊直接提取文件和數(shù)據(jù)，不會(huì)有什么問(wèn)題。但是秉持著UED的精神，還是讓前端生成了一套測(cè)試文件把大致會(huì)遇到的各種圖形文本九宮格的排列情況做了一下最終測(cè)試。確實(shí)發(fā)現(xiàn)了還有一個(gè)小麻煩。

隔行文本會(huì)出現(xiàn)1PX誤差

這是因?yàn)樾芯嘣赑S里有4個(gè)像素，但是根據(jù)文本差異的調(diào)整，減5后，在FLASH里，行距為-1像素。而-1在前端實(shí)現(xiàn)的時(shí)候，默認(rèn)壓到的那行會(huì)移一個(gè)像素。如果是-2，隔行會(huì)移動(dòng)2個(gè)像素。不過(guò)移動(dòng)的只是文字視覺(jué)位置，而非文本框。所以對(duì)我們標(biāo)注XY軸并無(wú)影響。而這個(gè)問(wèn)題，如果遇到（僅在行距為負(fù)數(shù)發(fā)生），則有前端修改處理即可，我們只需向前端標(biāo)記調(diào)整需求。

總結(jié)

1.標(biāo)注根據(jù)步驟2的結(jié)論進(jìn)行標(biāo)注。

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

3.除文本框以外，所有元件坐標(biāo)尾數(shù)+0.5。

4.有負(fù)數(shù)行距，標(biāo)注給前端。

PS視覺(jué)尺寸與FLASH之間的文本對(duì)算公式：

PS文本（可視）? 上+2PX? 下+3px???? =??? FLASH文本計(jì)算框

例如：PS文本（面板） 12號(hào)字15行距 = 3像素行距 = FLASH里 -1行距（FLASH面板里為行距：-1點(diǎn)）

PS的段落與FLASH文本框?qū)?yīng)關(guān)系：

小TIP：PS里12號(hào)字12行距=0像素間隔=FLASH里行距點(diǎn)數(shù)為0（但實(shí)際視覺(jué)上兩行看上去有1PX間隔，那是下劃線(xiàn)的位置）

以上是目前的小結(jié)，F(xiàn)LASH游戲才剛剛接觸，多有不足，發(fā)上來(lái)和大家一起探討，共同進(jìn)步。

合作人：京京

來(lái)源：http://uedc.163.com/3023.html