第57節 - LibGDX: Handling Different Screen Resolutions
這一節我會介紹如何在不同的智能電話(Smartphone)、平板電腦(Tablet)和桌上電腦(Desktop Computer)等統一顯示LibGDX遊戲程式。
我會介紹LibGDX的FitViewport Class,它可以滿足以上的需要,當然也有他它缺點。
Result (執行結果):
以下是本節LibGDX: Handling Different Screen Resolutions所執行的結果:
Aspect Ratio (AR, 長寬比)
Aspect Ratio (AR, 長寬比)是長方形的長和闊的關係,但Aspect Ratio可以是width/height或height/width。
注意: 為了統一說明,在這節我會用Aspect Ratio=height/width作說明。
- 電視Aspect Ratio(AR)用Width/Height。
- 智能電話(Aspect Ratio(AR)用Height/Width。
Differenet Screen Resolutions
以下列出主要的Android和iPhone智能電話、平板電腦和桌上電腦的屏幕大小(Screen Size)和解像度(Resolution),大家可以發現各牌子有不同的屏幕大小和解像度,要統一顯示一個不變形和品質的遊戲畫面,不是一件容易的工作:
1. Android Smartphone
2. iPhone Smartphone
3. Tablet Device
4. Desktop PC Monitor
Summary of Different Screen Resolutions
總括以上不同的解像度,主要有以下種類,大家可以發現智能電話解像度的Aspect Ratio主要是16:9,而平板電腦就有16:9、16:10、4:3和其他不同比例:
Which screen resolution should I consider while designing an Android/iPhone(IOS) application?
常常有人問:「在開始時,用什麼解像度和Aspect Ratio去設計一隻手機應用程式或遊戲?」
答案: 是沒有一個絕對答案! 不過可以用一個比較好的方法去處理,方法如下:
- 我會選擇一個現時比較普遍的解像度和Aspect Ratio去開始,例如: 2560 X 1440 px (AR=16:9, 1.778)。
- 如果你的設備(Device)的解像度比2560 X 1440 px還高(例如:4K),就把我們以上的2560 X 1440 px圖片放大。
注意: 但要保持Aspect Ratio為16:9,否則圖片就會變形。 - 如果你的設備(Device)的解像度比2560 X 1440 px小,就把我們以上的2560 X 1440 px圖片縮小。
注意: 但要保持Aspect Ratio為16:9,否則圖片就會變形。
Case Study No.1 - App Screen 16:9(Portrait) & Device Screen 16:9(Portrait)
案例1 - 假設App Screen設計為2560 X 1440 px(Portrait),而Device Screen(例如:智能電話)為1920 X 1080 px(Portrait):
- 因為App Screen和Device Screen的Aspect Ratio都是16:9,所以只要把App Screen縮小為1920 X 1080 px即可。
Case Study No.2 - App Screen 16:9(Portrait) & Device Screen 4:3(Portrait)
案例2 - 假設App Screen設計為2560 X 1440 px(Portrait),而Device Screen(例如:智能電話)為2048 X 1536 px(Portrait):
- 因為App Screen的Aspect Ratio是16:9,但Device Screen的Aspect Ratio是4:3,所以最大 畫面是2048 X 1152 px。
注意1: 左右兩邊會出現兩行沒有用的紅色區域,這也是唯一的缺點。
注意2: 設定兩邊區域為紅色只是作示範用途,大家只要把背景設定與圖片顏色相似,例如黑色就可改善效果,如下圖:
Case Study No.3 - App Screen 16:9(Portrait) & Device Screen 16:10(Portrait)
案例3 - 假設App Screen設計為2560 X 1440 px(Portrait),而Device Screen(例如:智能電話)為1280 X 1440 px(Portrait):
- 案例3與案例2相似,因為App Screen的Aspect Ratio是16:9,但Device Screen的Aspect Ratio是10:6,所以最大畫面是1280 X 720 px。
注意: 左右兩邊會出現兩行沒有用的紅色區域。
Case Study No.4 - App Screen 16:9(Portrait) & Device Screen 21:9 (Portrait)
案例4 - 假設App Screen設計為2560 X 1440 px(Portrait),而Device Screen(例如:智能電話)為2564 X 1440 px(Landscape):
- 案例4與案例2和3相似,只是把Portrait(垂直)顯示改變為Landscape(橫向)顯示,因為App Screen的Aspect Ratio是16:9,Device Screen的Aspect Ratio都是16:9,但橫向,所以最大畫面是1440 X 810 px。
注意: 左右兩邊會出現兩行沒有用的紅色區域。
Case Study No.5 - App Screen 16:9(Portrait) & Device Screen 4K Ultra-wide PC Monitor (Landscape)
案例5 - 假設App Screen設計為2560 X 1440 px(Portrait),而Device Screen(例如:Samsung Ultra-wide PC Monitor)為3440 X 1440 px(Portrait),即是把電腦屏幕垂直看:
- 因為App Screen的Aspect Ratio是16:9,但Device Screen的Aspect Ratio都是2.389,所以最大畫面是2560 X 1440 px。
注意: 這次上下兩邊會出現兩行沒有用的紅色區域。
Conclusion
總結以上Case Study 1至5, 可以得出以下結論:
注意: 假設我們選擇App Screen設計為2560 X 1440 px(Portrait)(AR=16:9,1.778)。
Solution - LibGDX FitVeiwport Class
以上結論了如何計算出Result Screen Width和Result Screen Height。但是要在程式內寫一連串程式才可以得出以上結果,十分不便。 幸好LibGDX的FitViewport Class就可以做出以上的結果。
注意: LibGDX的FitViewport Class除了把我們設計的畫面放大或縮小外,所有畫面內的其他圖片(例如:按鈕)都會因應屏幕大小放大或縮小,圖片的坐標也會自動對應,十分有用。
Example 1
首先建立一個新的LibGDX Project - MyDemo57。
1. Set Portrait Mode
另外大家如果不想智能電話由Portrait Mode轉為Landscape Mode,可以在AndroidManifest.xml內更改android=screenOrientation="portrait":
- 在android/manifests內更改android=screenOrientation="portrait"。
2. Assets
- 在Android的assets內複製startbutton805_314.png和startscreen1440_2560.png到文件夾。
3. DesktopLauncher.java
- 我們在DesktopLauncher內設定顯示的大小為360x640px。
4. MyDemo57.java
- 建立Texture物件img1,再把圖片存入,最後把圖片鋸齒去除。
- 建立Texture物件button1,再把圖片存入,最後把圖片鋸齒去除。
- 建立Viewport物件viewport,再設定FitViewport為2560 X 1440 px。
- 建立Sprite物件sprite,再把button1存入。
- 設定sprite,則按鈕(Button)的位置。
- 最後顯示圖片。
5. Result - 執行程式結果
Set Background Color to Black
設定兩邊區域為紅色只是作示範用途,大家只要把背景設定與圖片顏色相似,例如黑色就可改善效果,如下圖: