Major Softwares

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

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?

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

31. LibGDX: Lifecylce (Render() Method)
32. LibGDX: Delta Time
33. LibGDX: Animation & Spritesheet
34. LibGDX: Keyboard, Mouse & Touch Screen Control
35. Input Control (Polling VS Event Driven Input)
36. LibGDX: Tiled (Background and Foreground)
37. LibGDX: Jumping Action
38. LibGDX: Tiled (Collision Detection)
39. LibGDX: Tiled (Bullet Class)
40. LibGDX: Audio (Sound & Music)
41. LibGDX: Tiled (Scrollable Background with Camera & HUD)
42. LibGDX: WorldController & WorldRenderer Class

43. LibGDX: Install & Setup Android Studio IDE
44. LibGDX: Use Android Studio to Run Java Hello World
45. LibGDX: Use Android Studio to Run LibGDX Hello World
46. Adobe Illustrator: Basic Components Part 1
47. Adobe Illustrator: Basic Components Part 2
48. Adobe Illustrator: BlackJack Table & Cards
49. LibGDX: Blackjack Animation
50. LibGDX: Interpolation
51. Java: toString() Method
52. Java: Blackjack Shuffle Methods
53. LibGDX: Blackjack Shuffle Method
54. Java: Blackjack Card Game

55. Making and Displaying App Icon
56. LibGDX: Displaying Traditional and Simplified Chinese Characters
57. LibGDX: Handling Different Screen Resolutions

58. Visual Studio: C# Hello World
59. Unity: C# Hello World
60. Unity: Handling Different Screen Resolutions
61. Unity: Life Cycle
62. Unity: StartCoroutine, StopCoroutine, IEnumerator & Yield
63. Unity: Splash Screen
64. Unity: Fonts, Traditional and Simplified Chinese Characters
65. Unity: GameObject, Class Object, new & Instantiate
66. Unity: Start Screen with Glowing Animated Button
67. Unity: C# Get & Set Modifier
68. Unity: Delegates & Events
69. Unity: File I/O, Read & Write Text File & PlayerPrefs
70. Unity: Game Level Selection Screen
71. Unity: Game Menu Screen & ScreenManager
72. Unity: Encrypt and Decrypt Text File
73. Unity: Options Menu Screen
74. Unity: Convert Numbers Image to Custom Font

75. Unity: Blackjack Card Game - Part 1 (Full Game)
76. Unity: Blackjack Card Game - Part 2
77. Unity: Blackjack Card Game - Part 3
78. Unity: Blackjack Card Game - Part 4
79. Unity: Blackjack Card Game - Part 5
80. Unity: Blackjack Card Game - Part 6
81. Unity: Blackjack Card Game - Part 7

82. Unity: Card Game No.2

83. Unity: GPS Programming
84. Unity: User Login System
85. Unity: Augmented Reality (AR)

86. Unity: GPS & AR Application

第22節 - LibGDX: Game Menu Screen

這一節我會介紹Game Menu Screen。我在第17節 - LibGDX: Splash Screen介紹過Splash Screen的製作，現在會繼續把Splash Screen跳到Game Menu Screen，再按不同按鈕跳到不同的畫面，如下圖:

以下是LibGDX-Game Menu Screen程式執行的結果:

LibGDX的主要章節

我會用以下介紹過的主要章節，大家如果對以下任何章節有不明白地方，請閱讀多幾次:

1. 第13節 - UML(Unified Modeling Language): Class Diagram
2. 第16節 - LibGDX: Scene2d & Graphical User Interface(GUI)
3. 第17節 - LibGDX: Splash Screen
4. 第18節 - LibGDX: Texture Packer
5. 第19節 - LibGDX: BitmapFonts, JSON & Skin
6. 第21節 - Android: onClick事件的5種實現方式

UML - Class Diagram

我在第17節 - LibGDX: Splash Screen介紹過Splash Screen的Class Diagram。以下是Game Menu Screen的Class Diagram:

1. Start Screen, Options Screen, Credits Screen和Facebook Link都是Class，Meun Screen是Class，所以它們的關係是Association。因為畫面可以向前或向後，所以是Bi-directional(雙向)
2. 因為Start Screen, Options Screen, Credits Screen和Facebook Link都須要是Screen類別，它們須要實作Sceen介面。

AbstractScreen Class

大家可以在以上的Class Diagram看到，每一個Screen類別都要實作Screen介面(綠色部分)，我們可以建立一個抽象類別(Abstract Class)叫AbstractScreen，它可以把畫面相同部分放在AbstractScreen類別內，這樣做就可以簡化Class Diagram和程式，我會在第23節 - LibGDX: Advanced Game Menu Screen (Using Abstract Screen)詳細介紹，這一節不會用到。

1. 建立一個AbstractScreen抽象類別，再實作Screen介面。AbstractScreen抽象類別內就包含所有start Screen, Options Screen, Credits Screen和Facebook Link相同的方法。
2. 把Start Screen, Options Screen, Credits Screen和Facebook Link繼承AbstractScreen抽象類別。

製作Game Menu Screen

首先我們要準備以下文件:

Assets圖片檔案:

1. fonts/carterone.fnt
2. fonts/carterone.png
3. mainmenu.pack
4. mainmenu.png
5. mainmenu2.png
6. mainmenu3.png
7. mainmenu.json

程式檔案:

1. DesktopLauncher.java
2. MyDemo22.java
3. SplashScreen.java
4. MenuScreen.java
5. LevelScreen.java
6. OptionsScreen.java
7. CreditsScreen.java
8. Facebook Website Link

carterone.fnt和carterone.png

我在第19節 - LibGDX: BitmapFonts, JSON & Skin介紹過Bitmap Fonts的製作，這裡不會詳細介紹。

注意1-我會把carterone.fnt和carterone.png放在Android/assets/fonts/的文件夾內。

注意2-其實這一節我們只會用到Button和Image類別，不須要用到Bitmap Fonts，但因為我們要製作mainmenu.json檔案，我習慣把carterone.fnt和carterone.png放在JSON檔案內，大家可以在JSON檔案內刪除carterone.fnt和carterone.png的設定。

1. carterone.png把Carter One字體的A至Z和其他字符儲存在carterone.png檔案內。
2. carterone.fnt是一個文字檔案，它把carterone.png檔案內的A至Z和其他字符的資料記錄下來。

mainmenu.pack，mainmenu.png，mainmenu2.png和mainmenu3.png

我在第19節 - LibGDX: BitmapFonts, JSON & Skin介紹過Texture Packer的製作，這裡不會詳細介紹。

注意1-用Texture Packer軟件製作合併圖片時，如圖片太大，Texture Packer軟件會自動產生幾個.png檔案，例如:mainmenu.png，mainmenu2.png和mainmenu3.png。

注意2-我會把mainmenu.pack，mainmenu.png，mainmenu2.png和mainmenu3.png放在Android/assets/的文件夾內。

注意3-我加入了一個backbutton.png，它是用來把畫面跳回前一個畫面。

1. 以上是mainmenu.pack，mainmenu.png，mainmenu2.png和mainmenu3.png檔案內的內容。

mainmenu.json

我在第19節 - LibGDX: BitmapFonts, JSON & Skin介紹過JSON檔案，這裡不會詳細介紹。

注意1-我會把mainmenu.json放在Android/asset/的文件夾內。

1. 第1段設定Bitmap Font的字體(carterone-font)和字體路徑。
2. 第2段設定不同顏色(Color)。
3. 第3段設定Button介面元件的特性，按下Mouse(down)或放開Mouse(up)，都是用相同的按鈕。

Android/assets

別忘記把Asset圖片檔案放在Android/assets內:

1. fonts/carterone.fnt
2. fonts/carterone.png
3. mainmenu.pack
4. mainmenu.png
5. mainmenu2.png
6. mainmenu3.png
7. mainmenu.json

1. 建立文件夾fonts，把carterone.fnt和carterone.png傳入assets/fonts/內。
2. 把mainmenu.pack，mainmenu.png，mainmenu2.png，mainmenu3.png和mainmenu.json傳入assets/內。
3. 在MyDemo22-core/src/com.hkprogram.mydemo22/內建立所有.java程式檔案。

DesktopLauncher.java

1. DesktopLauncher是PC Desktop的Starter Class，我們在DesktopLauncher內設定顯示的大小為500x700px。

MyDemo22.java

1. 在MyDemo22.java內把MyDemo22 extends Game。
   
   在Game類別內，create()是未定義內容，所以在MyDemo22 class內必須定義內容。


2. 定義create()方法，在create()方法內用setScreen()方法把畫面跳到splashScreen。
   

SplashScreen.java

我在第17節 - LibGDX: Splash Screen介紹過Splash Screen的製作，Splash Screen跳到Game Menu Screen，再按不同按鈕跳到不同的畫面。

1. 用Texture產生一個Texture物件(例如:texture)然後把圖片(splashScreen.png)傳入。
   用Image產生一個Image物件(例如:splashImage)然後把texture物件傳入。


2. 在show()方法內，把image加入Stage舞台內，再用Stage內還有一個addAction()方法把開埸畫面做出逐漸呈現的效果。
   
   1-Actions.alpha(0)-設定alpha=0，則把image設定為全透明。
   2-Actions.fadein(0.5f)-把image做出逐漸呈現的效果。
   3-Actions.delay(2)-把動作延遲2秒。
   4-Actions.run()-把現時splashScreen畫面跳到menuScreen畫面。


3. show()方法會設定所有動作，但尚未顯示在屏幕上，我們必須在render()方法內用輪入:
   
   1-stage.act();-更新所有Actor。
   2-stage.draw();-把所有Actor顯示在屏幕上。
   


4. 注意，Screen介面的dispose()方法和Game類別的dispose()方法不同，根據LibGDX官方文件解釋，Screen介面的dispose()方法是不會自動執行，所以我們必須在畫面轉換時在hide()執行dispose()方法，我會在第24節 - LibGDX: Disposable Interface詳細介紹。


5. 最後別忘記把在dispose()方法內輸入texture.dispose();和stage.dispose()。

MainScreen.java

我們會用第17節的MenuScreen.java檔案再加入"Button Click"事件處理。

1. Button "Start"會把畫面跳到Level Screen。
2. Button "Options"會把畫面跳到Options Screen。
3. Button "Credits"會把畫面跳到Credits Screen。
4. Button "Share Facebook"會把畫面跳到Facebook網頁。

以下列出MenuScreen.java的操作原理:

1. 設定所有Member Variables。
2. 建立Skin物件(skin)，把mainmenu.json和mainmenu.pack傳入。
3. 建立Image物件(bg)，把skin和bg圖片傳入。
   再建立Button物件(startbutton, optionsbutton, creditsbutton和facebookbutton)，把skin和(startButton, optionsButton, creditsButton和facebookButton)圖片傳入。
4. 設定它們的位置。
5. 用介面元件的addListener()方法監聽"Click"事件。
   注意，facebookbutton按鈕會把畫面跳到一個預設的網站，我用www.hkprogram.com作例子。
6. 用介面元件的addActor()方法把所有Image物件和Button物件傳入stage內。
7. 用setInputProcessor()方法把stage傳入，再設定touch和key input事件。
8. show()方法會設定所有動作，但尚未顯示在屏幕上，我們必須在render()方法內用輪入:
   
   1-stage.act();-更新所有Actor。
   2-stage.draw();-把所有Actor顯示在屏幕上。
   


9. 注意，Screen介面的dispose()方法和Game類別的dispose()方法不同，根據LibGDX官方文件解釋，Screen介面的dispose()方法是不會自動執行，所以我們必須在畫面轉換時在hide()執行dispose()方法，我會在第24節 - LibGDX: Disposable Interface詳細介紹。
10. 最後別忘記把在dispose()方法內輸入skin.dispose();和stage.dispose()。

LevelScreen.java

以下是LevelScreen.java程式，當"Start"按鈕被按下，程式就會跳到Game Level Selection Screen，我會在其他章節詳細介紹Game Level Selection Screen:

1. 設定所有Member Variables。
2. 建立Skin物件(skin)，把mainmenu.json和mainmenu.pack傳入。
3. 建立Image物件(levelScreen)，把skin和levelScreen圖片傳入。
   再建立Button物件(backButton)，把skin和backbutton圖片傳入。
4. 設定它們的位置。
5. 用介面元件的addListener()方法監聽"Click"事件。
6. 用介面元件的addActor()方法把Image物件和Button物件傳入stage內。
7. 用setInputProcessor()方法把stage傳入，再設定touch和key input事件。
8. show()方法會設定所有動作，但尚未顯示在屏幕上，我們必須在render()方法內用輪入:
   
   1-stage.act();-更新所有Actor。
   2-stage.draw();-把所有Actor顯示在屏幕上。
   


9. 注意，Screen介面的dispose()方法和Game類別的dispose()方法不同，根據LibGDX官方文件解釋，Screen介面的dispose()方法是不會自動執行，所以我們必須在畫面轉換時在hide()執行dispose()方法，我會在第24節 - LibGDX: Disposable Interface詳細介紹。
10. 最後別忘記把在dispose()方法內輸入skin.dispose();和stage.dispose()。

OptionsScreen.java

以下是Options.java程式，當"Options"按鈕被按下，程式就會跳到Game Options Screen，我會在其他章節詳細介紹Game Opitons Screen:

1. 設定所有Member Variables。
2. 建立Skin物件(skin)，把mainmenu.json和mainmenu.pack傳入。
3. 建立Image物件(optionsScreen)，把skin和optionsscreen圖片傳入。
   再建立Button物件(backButton)，把skin和backbutton圖片傳入。
4. 設定它們的位置。
5. 用介面元件的addListener()方法監聽"Click"事件。
6. 用介面元件的addActor()方法把Image物件和Button物件傳入stage內。
7. 用setInputProcessor()方法把stage傳入，再設定touch和key input事件。
8. show()方法會設定所有動作，但尚未顯示在屏幕上，我們必須在render()方法內用輪入:
   
   1-stage.act();-更新所有Actor。
   2-stage.draw();-把所有Actor顯示在屏幕上。
   


9. 注意，Screen介面的dispose()方法和Game類別的dispose()方法不同，根據LibGDX官方文件解釋，Screen介面的dispose()方法是不會自動執行，所以我們必須在畫面轉換時在hide()執行dispose()方法，我會在第24節 - LibGDX: Disposable Interface詳細介紹。
10. 最後別忘記把在dispose()方法內輸入skin.dispose();和stage.dispose()。

CreditsScreen.java

以下是Credits.java程式，當"Credits"按鈕被按下，程式就會跳到Game Credits Screen，我會在其他章節詳細介紹Game Credits Screen:

1. 設定所有Member Variables。
2. 建立Skin物件(skin)，把mainmenu.json和mainmenu.pack傳入。
3. 建立Image物件(creditsScreen)，把skin和creditsScreen圖片傳入。
   再建立Button物件(backButton)，把skin和backbutton圖片傳入。
4. 設定它們的位置。
5. 用介面元件的addListener()方法監聽"Click"事件。
6. 用介面元件的addActor()方法把Image物件和Button物件傳入stage內。
7. 用setInputProcessor()方法把stage傳入，再設定touch和key input事件。
8. show()方法會設定所有動作，但尚未顯示在屏幕上，我們必須在render()方法內用輪入:
   
   1-stage.act();-更新所有Actor。
   2-stage.draw();-把所有Actor顯示在屏幕上。
   


9. 注意，Screen介面的dispose()方法和Game類別的dispose()方法不同，根據LibGDX官方文件解釋，Screen介面的dispose()方法是不會自動執行，所以我們必須在畫面轉換時在hide()執行dispose()方法，我會在第24節 - LibGDX: Disposable Interface詳細介紹。
10. 最後別忘記把在dispose()方法內輸入skin.dispose();和stage.dispose()。

FacebookScreen.java

以下是Facebook.java程式，當"Share to Facebook"按鈕被按下，程式就會跳到Facebook指定的網頁:

1. 建立Texture物件(texture)，把facebookScreen.png圖片傳入。
2. 建立SpriteBatch物件(batch)，把texture傳入。
3. 再用batch.draw()，把texture傳入和設定顯示位置，最後顯示在屏幕上。
4. 注意，Screen介面的dispose()方法和Game類別的dispose()方法不同，根據LibGDX官方文件解釋，Screen介面的dispose()方法是不會自動執行，所以我們必須在畫面轉換時在hide()執行dispose()方法，我會在第24節 - LibGDX: Disposable Interface詳細介紹。
5. 最後別忘記把在dispose()方法內輸入texture.dispose();和batch.dispose()。

圖片的座標位置

注意，我們用的是Actor類別的setPosition()方法，沒有用到Camera Viewport，所以用的座標系統是(左X，上Y)，而中心(0,0)是設在左下角。

Main Menu Screen

Level Screen

Options Screen