Unity屏幕自適應原理


本節記錄內容來自於siki學院的“暗黑戰神”系列

  先講一下自適應問題的來源:

  

  如上圖所示,我們現在的畫布里有兩個按鈕,且當前屏幕分辨率設為了1334*750。

  假如我們改變一下屏幕分辨率,改為2668*1500后,效果如下圖所示:

     

  這代表當我們實際使用不同尺寸的手機屏幕時,會出現圖片顯示不全的情況,顯然這是不行的。

  來看一下問題的根源:

  

  如上圖所示,左側和右側分別是當分辨率被設為1334*750和2668*1500時對應的畫布控件的Inspector面板,可以看到,隨着分辨率的調節,畫布的寬度和高度也被自動地調節了,這就是為什么會不匹配的原因,畫布被自動調節到2倍寬高,兩個按鈕位置自然也不對了

  那么現在有兩種解決方案:一是當分辨率改變時,讓畫布進行特定的縮放,而不是死板地只讓畫布的寬高與分辨率相同。二是讓兩個按鈕維持原先大小,但移動位置,仍舊固定在左下角和右上角。我們應該用哪一種呢?

  先看第一種,第一種方案主要通過修改上圖中的Canvas Scaler(Script)面板來實現,比如:

  如上面兩張圖所示,此時我們調節了Scale Factor為2,可以看到雖然屏幕分辨率為2668*1500,但顯示仍舊正常,再仔細看一下,發現此時畫布的寬高為1334*750,而不是2668*1500,已經與屏幕分辨率不同了,這個Scale Factor可以使你的畫布的寬高與屏幕分辨率保持一個固定比例。

  顯然,利用這個Scale Factor,假如我們寫一個腳本,獲取屏幕的分辨率,然后算出一個相對我們設計時參考屏幕尺寸的比值,然后對應去修改Scale Factor,可以完成方案一。

  但其實Unity有內置的機制來完成方案一:在Canvas Scaler(Script)面板中,有個UI Scale Mode選項卡,可以選Scale With Screen Size(默認為Constant Pixel Size),意思是根據實際屏幕的尺寸來自動調節畫布縮放因子Scale Factor,選擇后要設置一個參考尺寸,下面有個Match選項,可以選擇是以高度還是寬度為參考,如下圖所示:

比如這里設置了參考尺寸是1334*750,而且是以高度為參考,意思是當實際屏幕尺寸不等於參考尺寸的高度(這里是750)時,會按比例設置縮放因子。這時如果再調節分辨率為2668*1500,由於1500/750=2,相當於自動設置了縮放因子為2,因此會發現完美適配,對應的畫布寬高仍為1334*750。

 

但這就帶來了新的問題,縮放因子是以寬或高中的一種作為參考來設置的,如果像上面那樣,等比例縮放還好,假若寬高比不同呢?比如若屏幕分辨率是1024*768,按照之前的說法,此時畫布的寬度會變成1024/(768/750)=1000,高度為750,我們來驗證一下: 

  如上圖所示,畫布的寬度變成了999.9999近似1000,沒問題。

  但很明顯,現在這個策略就會出現問題,等比例縮放后兩個按鈕已經看不到了,怎么辦呢?

  顯然,這就必須要配合第二種方案,即讓兩個按鈕位置移動,維持在兩個角落。

  

  在說第二種方案前,先要考慮這樣一個問題:自適應的時候能不能只使用第二種方案,也就是說只固定兩個按鈕到邊界的距離,完全不用第一種方案,不使用縮放?

  答案是不行,仔細想想就知道,這樣就會出現屏幕尺寸整體擴大后,兩個按鈕顯得過小的問題,所以縮放是必須要的。

  那么到底應該以寬度為准,還是以高度為准?

  我們知道,當前的手機屏幕,各種不同大小屏幕的手機,在豎屏高度上差別挺大的,在寬度上變化就小很多。那么對應的,當設計橫屏游戲時,可以認為不同機型的橫屏寬度變化很大,高度變化很小。那么顯然我們以高度為縮放標准更合適,這樣不同機型的縮放程度也就不大,對應UI的尺寸變化也就不大,當然,同理地,當設計豎屏游戲時,就應該以寬度為縮放標准

  那我們已經決定了在設計橫屏游戲時以高度為縮放基准,那么就要解決之前說的實際寬高比與基准寬高比不同的問題了。

  這個問題可以通過設置錨點來解決,如下圖所示:

   

  對左下角的按鈕,設置錨點在左下角,右上角的設置在右上角即可,此時效果如下: 

  

  可以看到,即使在1024*768的分辨率下,依舊適配良好。

  但需要注意的一點是,實際開發中,會有很多界面,比如登錄界面,注冊界面等等,為了更好的區分這些界面,防止不同界面的UI發生混淆,通常的手法是在場景中創建一個空物體,把該界面的UI元素都掛載到該空物體下,這樣當開發下一個界面時,我們只需要簡單地讓開發好的界面的空物體不顯示即可。如下圖所示,panel就是那個空物體

  但這樣會在屏幕適配的時候碰到問題,如果把兩個Button分別錨定到左上角和右下角,會固定到它們的父物體上,也就是這個panel空物體上,顯然這樣就無法固定到左下角和右上角了。

  解決的方案是把這個空物體鋪滿整個畫布,操作如下圖所示:

  

  為空物體選擇伸展方式后,記得設置左右上下為0,這代表該物體離父物體(這里是畫布)的左,右,上,下邊的距離,設為0就是完全鋪滿畫布。這樣就完成了,具體效果圖就不展示了,完美自適應。

  

  這樣就結束了嗎?NoNoNo。

  對於普通控件,這樣無疑已經夠了,但假如我們在界面里放了張背景圖,這個圖片作了以高度為基准的自適應,且用錨點鋪滿了整個畫布。這個時候假如屏幕的高度發生了變化,按照之前說的,若以高度為基准,則高度不變,畫布會自動對寬度進行縮放,而這時由於背景圖片已經被錨定鋪滿了整個畫布,因此背景圖片會出現拉伸或壓縮。這會影響觀感,該怎么辦呢?

  通常的實際項目開發做法如下:對界面中的其它元素,仍按之前說的,用空物體容納,空物體錨定並鋪滿畫布,這些元素就錨定到空物體上。而對於背景圖,則特殊處理,不要讓它錨定並鋪滿畫布,而是讓它使用默認的鋪展方式,即居中,如下圖所示:

  

  而且這個背景圖需要做得比畫布更大一些,假設是以高度為基准的縮放,那么此時高度會一直維持,寬度會根據屏幕進行縮放,所以只需要把背景圖的寬度做得比參考尺寸大即可,這樣,一開始我們不會展示全部的背景圖,當屏幕的高度發生改變時,比如高度變小了,按之前說的,由於是高度為基准,因此畫布會進行縮放,即高度維持基准值,而為了保證寬高比不變,必然導致畫布寬度增大。就可以展示更多的內容,而且不會有圖片被壓縮的問題。

   示意圖如下:

 

  

最上面一張是初始圖,此時分辨率為1334*750,背景的紅色圖片高度與畫布相同,寬度要大於畫布,此時僅展示了一部分背景。

下面兩張圖是把屏幕高度調節后的結果圖,左邊那張是把高度調低了,此時由於以高度為基准縮放的原因,畫布高度一致保持不變,為了保持寬高比,畫布的寬度會增加,到超過極限后畫布的寬度會大於背景圖的寬度,導致顯示出問題,因此設計背景圖大小時要注意,預留出的寬度(以高度為縮放基准的情況下)要考慮到屏幕的極限情況,保證預留寬度要滿足即使在實際屏幕寬高比最極限的情況下圖片也能正常顯示。

同理,右邊那張就是高度調高后的情況,調高后為了讓畫布高度保持不變,在寬高比的限制下會導致寬度減小,就是右圖的樣子了。

 

完畢。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM