Major Softwares

  INDEX PAGE

  1. 簡介
  2. Java, Android和LibGDX好書推介
  3. Java, Android和LibGDX要學的知識
  4. 用Windows寫Java程式
  5. 用Eclipse寫Java程式
  6. 用Eclipse寫Android程式
  7. 用Eclipse寫LibGDX程式
  8. Standard Java Naming Conventions
  9. System.out.println()的用法和意思
  10. Where is main() method in Android?

LibGDX - Splash & Menu Screen

  1. LibGDX: World, Texture, Background, Camera, Viewport, Screen & OpenGL
  2. LibGDX: Texture, TextureRegion, SpriteBatch & Sprite
  3. UML(Unified Modeling Language): Class Diagram
  4. Type Casting, Upcasting & Downcasting
  5. @Override的用法和意思
  6. LibGDX: Scene2d & Graphical User Interface(GUI)
  7. LibGDX: Splash Screen
  8. LibGDX: Texture Packer
  9. LibGDX: BitmapFonts, JSON & Skin
  10. Android: R.java File
  11. Android: onClick事件的5種實現方式
  12. LibGDX: Game Menu Screen
  13. LibGDX: Advanced Game Menu Screen (using Abstract Screen)
  14. LibGDX: Disposable Interface
  15. Java & LibGDX: super keyword
  16. LibGDX: Advanced Game Menu Screen (using AssetManager)
  17. Java: Array, Arrays, List, ArrayList & LibGDX: Array
  18. LibGDX: File I/O (Preferences)
  19. LibGDX: Game Level Selection Screen
  20. LibGDX: Advanced Game Level Selection Screen (using AssetManager)

LibGDX - Tiled 2D Platform Game

  1. LibGDX: Lifecylce (Render() Method)
  2. LibGDX: Delta Time
  3. LibGDX: Animation & Spritesheet
  4. LibGDX: Keyboard, Mouse & Touch Screen Control
  5. Input Control (Polling VS Event Driven Input)
  6. LibGDX: Tiled (Background and Foreground)
  7. LibGDX: Jumping Action
  8. LibGDX: Tiled (Collision Detection)
  9. LibGDX: Tiled (Bullet Class)
  10. LibGDX: Audio (Sound & Music)
  11. LibGDX: Tiled (Scrollable Background with Camera & HUD)
  12. LibGDX: WorldController & WorldRenderer Class

LibGDX/Java - Card Game No.1 - Blackjack

  1. LibGDX: Install & Setup Android Studio IDE
  2. LibGDX: Use Android Studio to Run Java Hello World
  3. LibGDX: Use Android Studio to Run LibGDX Hello World
  4. Adobe Illustrator: Basic Components Part 1
  5. Adobe Illustrator: Basic Components Part 2
  6. Adobe Illustrator: BlackJack Table & Cards
  7. LibGDX: Blackjack Animation
  8. LibGDX: Interpolation
  9. Java: toString() Method
  10. Java: Blackjack Shuffle Methods
  11. LibGDX: Blackjack Shuffle Method
  12. Java: Blackjack Card Game

LibGDX - Others

  1. Making and Displaying App Icon
  2. LibGDX: Displaying Traditional and Simplified Chinese Characters
  3. LibGDX: Handling Different Screen Resolutions

Unity Game Engine & C#

  1. Visual Studio: C# Hello World
  2. Unity: C# Hello World
  3. Unity: Handling Different Screen Resolutions
  4. Unity: Life Cycle
  5. Unity: StartCoroutine, StopCoroutine, IEnumerator & Yield
  6. Unity: Splash Screen
  7. Unity: Fonts, Traditional and Simplified Chinese Characters
  8. Unity: GameObject, Class Object, new & Instantiate
  9. Unity: Start Screen with Glowing Animated Button
  10. Unity: C# Get & Set Modifier
  11. Unity: Delegates & Events
  12. Unity: File I/O, Read & Write Text File & PlayerPrefs
  13. Unity: Game Level Selection Screen
  14. Unity: Game Menu Screen & ScreenManager
  15. Unity: Encrypt and Decrypt Text File
  16. Unity: Options Menu Screen
  17. Unity: Convert Numbers Image to Custom Font

Unity - Card Game No.1 - Blackjack

  1. Unity: Blackjack Card Game - Part 1 (Full Game)
  2. Unity: Blackjack Card Game - Part 2
  3. Unity: Blackjack Card Game - Part 3
  4. Unity: Blackjack Card Game - Part 4
  5. Unity: Blackjack Card Game - Part 5
  6. Unity: Blackjack Card Game - Part 6
  7. Unity: Blackjack Card Game - Part 7

以下是預告-Coming soon!


Secret Weapon No.1

  1. Unity: Card Game No.2

Advanced Programming

  1. Unity: GPS Programming
  2. Unity: User Login System
  3. Unity: Augmented Reality (AR)

Secret Weapon No.2

  1. Unity: GPS & AR Application

第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/heightheight/width

注意: 為了統一說明,在這節我會用Aspect Ratio=height/width作說明。

LibGDX: Handling Different Screen Resolutions
  1. 電視Aspect Ratio(AR)用Width/Height。

  2. 智能電話(Aspect Ratio(AR)用Height/Width。

Differenet Screen Resolutions

以下列出主要的Android和iPhone智能電話、平板電腦和桌上電腦的屏幕大小(Screen Size)和解像度(Resolution),大家可以發現各牌子有不同的屏幕大小和解像度,要統一顯示一個不變形和品質的遊戲畫面,不是一件容易的工作:

1. Android Smartphone

LibGDX: Handling Different Screen Resolutions

2. iPhone Smartphone

LibGDX: Handling Different Screen Resolutions

3. Tablet Device

LibGDX: Handling Different Screen Resolutions

4. Desktop PC Monitor

LibGDX: Handling Different Screen Resolutions

Summary of Different Screen Resolutions

總括以上不同的解像度,主要有以下種類,大家可以發現智能電話解像度的Aspect Ratio主要是16:9,而平板電腦就有16:9、16:10、4:3和其他不同比例:

LibGDX: Handling Different Screen Resolutions

Which screen resolution should I consider while designing an Android/iPhone(IOS) application?

常常有人問:「在開始時,用什麼解像度和Aspect Ratio去設計一隻手機應用程式或遊戲?」

答案: 是沒有一個絕對答案! 不過可以用一個比較好的方法去處理,方法如下:

LibGDX: Handling Different Screen Resolutions
  1. 我會選擇一個現時比較普遍的解像度和Aspect Ratio去開始,例如: 2560 X 1440 px (AR=16:9, 1.778)。

  2. 如果你的設備(Device)的解像度比2560 X 1440 px還高(例如:4K),就把我們以上的2560 X 1440 px圖片放大。

    注意: 但要保持Aspect Ratio為16:9,否則圖片就會變形。

  3. 如果你的設備(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):

LibGDX: Handling Different Screen Resolutions
  1. 因為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):

LibGDX: Handling Different Screen Resolutions
  1. 因為App Screen的Aspect Ratio是16:9,但Device Screen的Aspect Ratio是4:3,所以最大 畫面是2048 X 1152 px。

    注意1: 左右兩邊會出現兩行沒有用的紅色區域,這也是唯一的缺點。

    注意2: 設定兩邊區域為紅色只是作示範用途,大家只要把背景設定與圖片顏色相似,例如黑色就可改善效果,如下圖:

LibGDX: Handling Different Screen Resolutions

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):

LibGDX: Handling Different Screen Resolutions
  1. 案例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):

LibGDX: Handling Different Screen Resolutions
  1. 案例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),即是把電腦屏幕垂直看:

LibGDX: Handling Different Screen Resolutions
  1. 因為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)。

LibGDX: Handling Different Screen Resolutions

Solution - LibGDX FitVeiwport Class

以上結論了如何計算出Result Screen Width和Result Screen Height。但是要在程式內寫一連串程式才可以得出以上結果,十分不便。 幸好LibGDX的FitViewport Class就可以做出以上的結果。

注意: LibGDX的FitViewport Class除了把我們設計的畫面放大或縮小外,所有畫面內的其他圖片(例如:按鈕)都會因應屏幕大小放大或縮小,圖片的坐標也會自動對應,十分有用。

LibGDX: Handling Different Screen Resolutions

Example 1

首先建立一個新的LibGDX Project - MyDemo57。

1. Set Portrait Mode

另外大家如果不想智能電話由Portrait Mode轉為Landscape Mode,可以在AndroidManifest.xml內更改android=screenOrientation="portrait":

LibGDX: Handling Different Screen Resolutions

  1. 在android/manifests內更改android=screenOrientation="portrait"。

2. Assets

LibGDX: Handling Different Screen Resolutions

  1. 在Android的assets內複製startbutton805_314.png和startscreen1440_2560.png到文件夾。

3. DesktopLauncher.java

LibGDX: Handling Different Screen Resolutions

  1. 我們在DesktopLauncher內設定顯示的大小為360x640px。

4. MyDemo57.java

LibGDX: Handling Different Screen Resolutions

  1. 建立Texture物件img1,再把圖片存入,最後把圖片鋸齒去除。

  2. 建立Texture物件button1,再把圖片存入,最後把圖片鋸齒去除。

  3. 建立Viewport物件viewport,再設定FitViewport為2560 X 1440 px。

  4. 建立Sprite物件sprite,再把button1存入。

  5. 設定sprite,則按鈕(Button)的位置。

  6. 最後顯示圖片。

5. Result - 執行程式結果

LibGDX: Handling Different Screen Resolutions

Set Background Color to Black

設定兩邊區域為紅色只是作示範用途,大家只要把背景設定與圖片顏色相似,例如黑色就可改善效果,如下圖:

LibGDX: Handling Different Screen Resolutions


Download above code and sample pictures here!