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

第60節 - Unity: Handling Different Screen Resolutions

這一節我會介紹如何利用Unity顯示遊戲畫面到不同大小的屏幕,而保持遊戲畫面的長寬比(Aspect Ratio - AR)。

我在第57節 - LibGDX: Handling Different Screen Resolutions介紹過如何利用LibGDX顯示遊戲畫面到不同大小的屏幕,而保持遊戲畫面的長寬比(Aspect Ratio - AR)。因為LibGDX預設有一個FitViewport Class, 它可以用來做出以下效果,如下圖:

Unity Handling Different Screen Resolutions

但unity沒有類似LibGDX 的FitViewport Class, 所以要做出以上的效果,我們可以用以下兩種方法:

方法1: Using Canvas UI Elements
方法2: Using C# Script

1.0 Result (執行結果):

以下是本節Unity: Handling Different Screen Resolutions所執行的結果:

1.1 方法1: Using Canvas UI Elements

1.2 方法2: Using C# Script

2.0 Unity: Method 1 - Using Canvas UI Elements

如果遊戲畫面只有Canvas UI elements,例如UI Text、UI Image或UI Button等,即是100%純 Canva畫面,就可以用這一個方法,如下圖:

Unity Handling Different Screen Resolutions
  1. Canvas內的UI Elements。

100%純Canva畫面,大至有以下幾種,例如: Splash Screen、 Start Screen、 Menu Screen、 Level Selection Screen和 Options Screen等,如下圖:

Unity Handling Different Screen Resolutions

2.1 Unity Setting

Unity Handling Different Screen Resolutions
  1. 建立一個新檔案。

  2. 選擇Main Camera。

  3. 選擇Blackground Colour。

  4. 選擇Orthographic,設定Orthograhic Size=2560/2=1280。

    注意: Unity預設Orthograhic Size = The amount of in-game units half of your vertical screen size takes,所以如果你的遊戲畫面設定為1440(W) x 2560(H),而你希望Camera Viewport可以看到整個遊戲畫面,我們可以設定Orthograhic Size=2560/2=1280。

  5. 在Assets區域內,加入兩個圖片。

Unity Handling Different Screen Resolutions
  1. 在Hierarchy區域內,建立兩個Image (bg和button),它們會自動建立在Canvas之內。

  2. 設定Render Mode。

  3. 把Main Camera拖放到Render Camera內。

  4. 設定Render Mode,最主要是設定Screen Match Mode = Expand

Unity Handling Different Screen Resolutions
  1. 選擇bg。

  2. 設定blackground size = 1440(W) x 2560(H)。

  3. 把圖片拖放到Source Image內。

Unity Handling Different Screen Resolutions
  1. 選擇button。

  2. 設定blackground size = 805(W) x 314(H)。

  3. 把圖片拖放到Source Image內。

2.2 Result (執行結果):

Unity Handling Different Screen Resolutions
  1. 選擇不同的裝置畫面(Device Screen)測試結果。

2.3 Set Background Color to Black

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

Unity Handling Different Screen Resolutions
  1. 選擇Main Camera。

  2. 選擇Blackground Colour。

2.4 Result (執行結果):

Unity Handling Different Screen Resolutions
  1. 選擇不同的裝置畫面(Device Screen)測試結果。

3.0 Unity: Method 2 - Using C# Script

有一些畫面不能只有Canvas UI elements, 例如: 遊戲的主畫面(Main Game Screen),因為遊戲主畫面大多數需要在Unity GameObject(2D/3D)裡加入一些特效,例如: Physics(2D/3D)或Particle System等,這些畫面就不能只用Canvas, 所以就需要用上C# Script來寫一個類似LibGDX 的FitViewport Class。

Unity Handling Different Screen Resolutions
  1. Unity GameObject (2D)裡加入一些特效,例如: Physics(2D/3D)內的Collision Detection。

3.1 Relationship between Design Screen, Camera Screen, Camera Viewport and Device Screen

以下是Design Screen, Camera Screen, Camera Viewport和Device Screen的關係:

Unity Handling Different Screen Resolutions
  1. Design Screen是你想顯示的遊戲畫面大小。

  2. 設定Orthograhic Size = Design Screen Height/2 = 2560/2=1280。

  3. 假設Device Screen Size是2000(W)x400(H)。

  4. ( W,H) = (1,1),是Device Screen的右上角。

  5. (X,Y) = (0, 0),是Device Screen的左下角。

    注意: Camera Viewport Rect最大可見區域是(X,Y - W,H)) = (0,0, - 1,1), 所以Camera Viewport Rect最大可見區域就是Device Screen的2000(W)x400(H)。

  6. Camera Screen Height = 2560 (因為Orthograhic Size = 1280),但Camera Screen Width還沒有設定,因為 Camera Screen AR = Device Screen AR,所以Camera Screen Width就可以計算出來。

  7. 最後大家可以改變Camera的背景顏色

3.2 Problem

但是如果設定Device Screen AR > 1.778 (16:9),問題就會出現,Design Screen就不能完全看見,如下圖:

Unity Handling Different Screen Resolutions
  1. Design Screen是你想顯示的遊戲畫面大小。

  2. 設定Orthograhic Size = Design Screen Height/2 = 2560/2=1280。

  3. 假設Device Screen Size是2000(W)x400(H)。

  4. (W,H) = (1,1),是Device Screen的右上角。

  5. ( X,Y) = (0, 0),是Device Screen的左下角。

    注意: Camera Viewort Rect最大可見區域是(X,Y - W,H)) = (0,0, - 1,1), 所以Camera Viewort Rect最大可見區域就是Device Screen的2000(W)x400(H)。

  6. Camera Screen Height = 2560 (因為Orthograhic Size = 1280),但Camera Screen Width還沒有設定,因為 Camera Screen AR = Device Screen AR,所以Camera Screen Width就可以計算出來。

3.3 Solution

解決方法是除了設定Orthographic Size之外,也要設定Camera Viewport Rect,如下圖:

Unity Handling Different Screen Resolutions
  1. Design Screen是你想顯示的遊戲畫面大小。

  2. 設定Orthograhic Size = Design Screen Height/2 = 2560/2=1280。

  3. 假設Device Screen Size是2000(W)x400(H)。

  4. ( W,H) = (0.1125,1),設定Camera Viewport Rect的大小,令Camera Viewport Rec AR = Design Screen AR。

  5. ( X,Y) = (0.4438, 0),設定Camera Viewport Rect的(X,Y)位置在Device Screen中間。

    注意: Camera Viewport Rect最大可見區域是(X,Y - W,H)) = (0,0, - 1,1), 所以Camera Viewport Rect最大可見區域就是Device Screen的2000(W)x400(H)。

  6. Camera Screen Height = 2560 (因為Orthograhic Size = 1280),但Camera Screen Width還沒有設定,因為 Camera Screen AR = Device Screen AR,所以Camera Screen Width就可以計算出來。

  7. 因為Main Camera已經沒了背景,所以就沒有了背景顏色,而是Device Screen的背景,預設是黑色。

Unity Handling Different Screen Resolutions
  1. Design Screen是你想顯示的遊戲畫面大小。

  2. 設定Orthograhic Size = Design Screen Height/2 = 2560/2=1280。

  3. 假設Device Screen Size是400(W)x2000(H)。

  4. (W,H) = (1,0.3556),設定Camera Viewport Rect的大小,令Camera Viewport Rec AR = Design Screen AR。

  5. (X,Y) = (0, 0.3222),設定Camera Viewport Rect的(X,Y)位置在Device Screen中間。

    注意: Camera Viewort Rect最大可見區域是(X,Y - W,H)) = (0,0, - 1,1), 所以Camera Viewport Rect最大可見區域就是Device Screen的400(W)x2000(H)。

  6. Camera Screen Height = 2560 (因為Orthograhic Size = 1280),但Camera Screen Width還沒有設定,因為 Camera Screen AR = Device Screen AR,所以Camera Screen Width就可以計算出來。

  7. 因為Main Camera已經沒有了背景,所以就沒有了背景顏色,而是Device Screen的背景,預設是黑色。

3.4 Conclusion

Unity Handling Different Screen Resolutions


3.5 Unity Setting

Unity Handling Different Screen Resolutions
  1. 建立一個新檔案。

  2. 選擇Main Camera。

  3. 選擇Blackground Colour。

  4. 選擇Orthographic,設定Orthograhic Size=2560/2=1280。

    注意: Unity預設Orthograhic Size = The amount of in-game units half of your vertical screen size takes,所以如果你的遊戲畫面設定為1440(W) x 2560(H),而你希望Camera Viewport可以看到整個遊戲畫面,我們可以設定Orthograhic Size=2560/2=1280。

  5. 在Assets區域內,加入兩個圖片。

Unity Handling Different Screen Resolutions
  1. 建立一個GameObject Sprite (bg)。

  2. 把圖片拖放到Source Image內。

Unity Handling Different Screen Resolutions
  1. 選擇圖片。

  2. 設定Pixels Per Unit = 1,即是把Camera設定為1 Pixel Per Unit,因為Orthographic Size = 1280 units,即是Camera全高是2560 units,因為Camera設定為1 Pixel Per Unit,所以就可以完整顯示Design Screen(遊戲畫面)。

Unity Handling Different Screen Resolutions
  1. 建立一個GameObject Sprite (button)。

  2. 把圖片拖放到Source Image內。

Unity Handling Different Screen Resolutions
  1. 選擇圖片。

  2. 設定Pixels Per Unit = 1,即是把Camera設定為1 Pixel Per Unit,因為Orthographic Size = 1280 units,即是Camera全高是2560 units,因為Camera設定為1 Pixel Per Unit,所以就可以完整顯示Design Screen(遊戲畫面)。

Unity Handling Different Screen Resolutions
  1. 在Assets區域內,建立一個C# Script。

  2. 建立designAR = 2560/1440 = 1.778,即是你的遊戲畫面長寬比(Aspect Ratio)。

  3. 取得deviceAR ,即是裝置畫面長寬比(Aspect Ratio)。

  4. 建立scaleHeight = designAR/DeviceAR的關係,方便程式計算之用。

  5. 取得Main Camera GameObject。

  6. 建立if-else statement,如果deviceAR>designAR(1.778)。

  7. 建立if-else statement,如果deviceAR<=designAR(1.778)。

  8. 選擇Main Camera。

  9. 把MyCamera C# Script拖放到Main Camera內。

Unity Handling Different Screen Resolutions
  1. 建立一個新的Camera GameObject。

  2. 設定Z-position = 1000,即是把Camera遠離畫面,只顯示到Camera自己的背景顏色,而不會顯示bg或button的圖片。

  3. 設定Camera的背景顏色

  4. 設定Depth=-2,因為Main Camera的Depth=-1,Main Camera在Camera的前面。

  5. 選擇2D,就可以看見Camera遠離畫面。

Unity Handling Different Screen Resolutions
  1. 儲存檔案。

3.6 Result (執行結果):

Unity Handling Different Screen Resolutions
  1. 選擇不同的裝置畫面(Device Screen)測試結果。


Download above code and sample pictures here!