我的戰(zhàn)艦這款游戲各位玩家經(jīng)常會(huì)遇到一種情況,就是UI錯(cuò)位,那玩家要怎么解決這種情況呢?小編今天為大家?guī)?lái)了全屏幕UI尺寸算法的攻略,希望能對(duì)各位玩家有所幫助,如果大家再遇到UI錯(cuò)位的情況,大家就可以嘗試著自己矯正了,那一起來(lái)看看吧
我的戰(zhàn)艦UI錯(cuò)位攻略
以18:9與8:9的手機(jī)(平板電腦)屏幕為
游戲內(nèi)的尺寸標(biāo)準(zhǔn)是將屏幕的Y邊長(zhǎng)度規(guī)定為1000,X邊因屏幕而異,18:9的屏幕X邊長(zhǎng)就為2000,8:9的屏幕X邊長(zhǎng)就近似于1000
不信可以驗(yàn)證一下,若將UI尺寸的Y值設(shè)置為1000(UI坐標(biāo)的Y值必須為0.5,UI坐標(biāo)的基礎(chǔ)知識(shí)詳見(jiàn)https://www.taptap.com/topic/11087941)
可以看到左側(cè)的按鈕幾乎觸及了屏幕的上下邊,但還是有距離,產(chǎn)生距離的原因是官方為了避免UI連接導(dǎo)致不美觀,將UI縮小了一定的比例
我的手機(jī)長(zhǎng)寬比是2:1,上圖中,中間縱向排列的UI沒(méi)有間距,但橫向排列的UI出現(xiàn)了一個(gè)很大的間距,剛好可以再容納一個(gè)(100,100)尺寸的UI,如果在中間再放一個(gè)UI,那么在長(zhǎng)寬比為8:9的屏幕上就一定會(huì)出現(xiàn)UI錯(cuò)位
【算法教學(xué)】
首先得到屏幕的尺寸,X為長(zhǎng)值,Y為寬值,然后將長(zhǎng)寬比算出來(lái)
因?yàn)槊恳粋(gè)屏幕的Y值都是1000長(zhǎng)度(官方硬性規(guī)定),X值會(huì)根據(jù)每個(gè)屏幕長(zhǎng)寬比的不同而變化,所以要將Y作為一個(gè)標(biāo)準(zhǔn)值,也就是分母
算完以后的長(zhǎng)寬比,就可以直接用來(lái)計(jì)算不同屏幕中UI尺寸的實(shí)際X值
如果你想在長(zhǎng)寬比為1:1的屏幕上顯示一個(gè)尺寸為(100,100)的UI,因?yàn)閅值大家都是一樣的,所以Y就是100,X值因屏幕而異,所以要用長(zhǎng)寬比乘以100算出該尺寸的實(shí)際X值。
效果可以參考下方兩張圖片中的右上角按鈕
這個(gè)算法的尺寸是1:1屏幕的效果,在2:1的屏幕上,UI的X值就會(huì)自動(dòng)變成200
使用這個(gè)方法設(shè)計(jì)UI時(shí),UI是1:1屏幕的布局和尺寸(可以拿張紙畫一個(gè)正方形表格,在紙上進(jìn)行設(shè)計(jì),再輸入到手機(jī)上)
舉個(gè)例子,想要在1:1屏幕上顯示一個(gè)尺寸為(200,100)的UI按鈕,X值設(shè)置為200乘以長(zhǎng)寬比,Y設(shè)置為100,這個(gè)按鈕在1:1的屏幕上顯示出來(lái)的實(shí)際尺寸就為(200,100),在2:1的屏幕上顯示出來(lái)的實(shí)際尺寸就為(400,100),在3:1的屏幕上顯示出來(lái)的實(shí)際尺寸就為(600,100)
用這個(gè)方法可以保證UI在不同的屏幕上所在占有的面積百分比是相同的,以防止UI的錯(cuò)位
支持( 1 ) 蓋樓(回復(fù))