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

第16節 - LibGDX: Scene2d和Graphical User Interface (GUI)

這一節我會介紹LibGDX的Scene2d用法。

Scene2d是一個場景圖(Scene Graph),而場景圖是一個資料結構(Data Structure),它把不同部分以圖表形式邏輯地表示出來。

場景圖其實是一個樹形結構,常見的圖形應用程式和資料庫(Library)都在使用這種結構,比如向量(Vector)編輯工具,3D資料庫,視頻遊戲等。

為甚麼要學LibGDX的Scene2d?

我只會簡單介紹場景圖的概念,因為我們不須要用到場景圖。但是Scene2d是一個場景圖,我們要學的是Scene2d的UI,所以對場景圖有基本概念就足夠。

LibGDX Scene2d內就有我們須要用的Graphical User Interface (GUI)或User Interface (UI),在UI內就有不同的介面元件(User Interface Component or UI Component)。

注意,我會把Graphical User Interface, User Interface, User Interface Component, UI Component, Graphical Control Element, Widget等等總一叫User Interface (UI)。

我在第1節 - 簡介介紹過一個簡單應用程式可包括一些TextView, EditText和Button等介面元件,但是我們要學的是LibGDX遊戲Apps,應該不須要用到介面元件! 這是不對的,因為在Scene2d內有四個特別的類別:

  1. Stage(舞台)
  2. Group(組)
  3. Actor(演員)
  4. Actions(演出)

它們除了用來寫應用程式外,還可以把不同的圖片做出不同的動畫,用來製作LibGDX的遊戲Apps。以下是LibGDX Scene2d官方的介面元件:

Scene2D & GUI

Scene2d主要介面元件的關係如下圖:

Scene2D & GUI

甚麼是Scene Graph?

Scene2d是一個場景圖(Scene Graph),而場景圖是一個資料結構(Data Structure),它把不同部分以圖表形式邏輯地表示出來。

場景圖其實是一個樹形結構,常見的圖形應用程式和資料庫(Library)都在使用這種結構,比如向量(Vector)編輯工具,3D 庫,視頻遊戲等。

英文解釋如下:
A scene graph is a general data structure commonly used by vector-based graphics editing applications and modern computer games, which arranges the logical and often (but not necessarily) spatial representation of a graphical scene.

場景圖不單把不同部分以圖表形式邏輯地表示出來,還以圖表形式把不同部分連接起來,它們的繼承(Inheritance)和移動(Translation/Move)關係就很容易表達出來。

以下是一個簡單例子,人體的上半身(Body)包括頭(Head),左手(Left Hand)和右手(Right Hand) (下半身不討論)。

Scene2D & GUI

Scene2D & GUI
  1. Body是父類,也叫原點(Root Node)。
  2. head是Body的子類。
  3. Left Upper Arm是Body的子類,也是Left Lower Arm的父類。
  4. Left Lower Arm是Left Upper Arm的子類,也是Left Hand的父類。
  5. Left Hand是Left Lower Arm的子類。
  6. Right Upper Arm是Body的子類,也是Right Lower Arm的父類。
  7. Right Lower Arm是Right Upper Arm的子類,也是Right Hand的父類。
  8. Right Hand是Right Lower Arm的子類。
  1. 以上關係就可以看出如果Body移動,所有它的子類(Head, Left Upper Arm, Left Lower Arm, Left Hand, Right Upper Arm, Right Lower Arm和Rigth Hand)都會跟隨移動。

  2. 但Left Upper Arm移動,所有它的子類(Left Lower Arm和Left Hand)都會跟隨移動,但其他不是它的子類(Head, Right Upper Arm, Right Lower Arm和Rigth Hand)就不會移動。

所以場景圖在設計動畫或遊戲時,就十分有用。例如如果你用程式軟件寫一個模擬房屋火警的動畫,如果程式軟件支援場景圖的資料結構,這場火災就可以做出真實的焚燒效果。

User Interface (UI)

這部分我會談談User Interface (UI),除了LibGDX Scene2d外,其實大部分程式語言都有自己的UI,例如我們要學的Java, Android和LibGDX。

在UI裡當然包含許多組件(Widget),以下先介紹Java的UI:

1 - Java UI

Scene2D & GUI

以下是Java UI的一些實物圖:

Scene2D & GUI

在上圖大家可以看到,Java的介面元件類別庫有AWT(Abstract Window Toolkit)和Swing兩種,其中AWT是早期的設計,而Swing則是基於AWT基礎所設計的新視窗元件。

AWT儲存在Java的java.awt package內,而Swing則儲存在Java的javax.swing package內。

雖然AWT和Swing的工能很相似,以下列出它們一些主要的分別:

Scene2D & GUI

Swing、AWT和JFC的關係:

Scene2D & GUI

AWT和Swing的Button比較:

Scene2D & GUI

2 - Android UI

Scene2D & GUI

以下是Android UI的簡化圖,每個ViewGroup內可包含不同的介面元件,也可包括另一個ViewGroup,不過View內就不能包含其他介面元件:

Scene2D & GUI

以下是Android UI的一些實物圖,大家可以在於Eclipse內找到:

Scene2D & GUI

Scene2D & GUI

Scene2D & GUI

Scene2D & GUI

Scene2D & GUI

Scene2D & GUI

Scene2D & GUI

Scene2D & GUI

Scene2D & GUI

3 - LigGDX (Scene2d UI)

Scene2D & GUI

以下是Scene2d UI的簡化圖,與會Android相似,每個Group內可包含不同的介面元件,也可包括另一個Group,不過Actor內就不能包含其他介面元件:

Scene2D & GUI

例子1 - 開埸畫面(Splash Screen)

最後,我會介紹LibGDX遊戲開埸畫面(Splash Screen),開埸畫面通常會把遊戲的標題,公司名稱等顯示出來。

以下我會把開埸畫面做出逐漸呈現的效果(Fade in),我們可以用剛剛介紹的Scene2d UI -Stage(舞台), Actor(演員), Image(圖像)和Actions(演出)類別。

Scene2D & GUI

Stage是一個舞台,在舞台內可以有不同的Actor,而Image也是Actor的一種。

另外,Scene2d UI內還有一個Actions類別,這個類別內就有不同的Actions方法,這些方法可以用來把開埸畫面做出逐漸呈現的效果,以下列出LibGDX官方的Actions方法:

Scene2D & GUI
  1. addAction()
  2. AddListener()
  3. alpha()
  4. color()
  5. delay()
  6. fadeIn()
  7. fadeOut()
  8. forever()
  9. hide()
  10. layout()
  11. moveby()
  12. moveTo()
  13. moveToAligned()
  14. parallel()
  15. removeAction()
  16. removeActor()
  17. removeListener()
  18. repeat()
  19. rotateby()
  20. rotateTo()
  21. run()
  22. scaleBy()
  23. scaleTo()
  24. sequence()
  25. show()
  26. sizeBy()
  27. timeScale()
  28. touchable()
  29. visible()

以下就是SplashScreen.java的程式碼和執行結果,我會在第17節 - LibGDX: Splash Screen詳細介紹:

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

  2. 用Image產生一個Image物件(例如:image)然後把texture物件傳入。

  3. 在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畫面。

  4. show()方法會設定所有動作,但尚未顯示在屏幕上,我們必須在render()方法內用輪入:

    1-stage.act();-更新所有Actor。
    2-stage.draw();-把所有Actor顯示在屏幕上。
Download above code and sample pictures here!

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