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

第49節 - LibGDX: Blackjack Animation

這一節我會介紹LibGDX: Blackjack的動畫製作,我會介紹以下Scene2d的Class(類別):

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

還有以下Actions類別的的addAction()方法:

  1. Actions類別的addAction()方法

執行結果:

以下是本節LibGDX: Blackjack Animation所有例子的執行結果:

Scene2d的關係圖

我在第16節 - LibGDX: Scene2d和Graphical User Interface (GUI)介紹過Scene2d的關係圖:

LibGDX: Blackjack Animation

Scene2d UI的簡化圖

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

LibGDX: Blackjack Animation

我會用到Scene2d的Stage(舞台), Actor(演員), Image(圖像)和Actions(演出)類別來製作LibGDX: Blackjack的動畫。

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

注意2: Actions是令一個類別,它不是在Stage類別之內,Actions類別可以用來製作不同的動畫效果,我會在這節詳細介紹。

LibGDX: Blackjack Animation

Actions類別

另外,Scene2d UI內還有一個Actions類別,這個類別內就有不同的Actions方法,以下列出LibGDX官方的Actions方法:

LibGDX: Blackjack Animation
  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()

這一節我們會用到以的Actions方法:

  1. addAction()
  2. AddListener()
  3. delay()
  4. fadeIn()
  5. fadeOut()
  6. forever()
  7. moveTo()
  8. parallel()
  9. rotateby()
  10. scaleTo()
  11. sequence()

sequence()和parallell()方法

以上Actions類別內有兩個方法: squence()和parallel()方法,這兩個方法會時常用到,它們主要用來控制動畫是順序同步執行。

1. sequence() method

以下就是sequence()方法的例子,它用來控制動畫順序執行的:

LibGDX: Blackjack Animation
  1. 用moveTo()方法把Image物件直線移動到目的地位置(484, 343)。

    注意1: 括號的第三個數字就是時間的長度,0.5f = 0.5s,f = float。

    注意2: 我們可以把sequence()內的動作在一行內表示,也可以分成幾行表示,結果是一樣的。

  2. 用delay()方法把時間延遲 0.5s。

  3. 用rotateBy()方法把Image物件在0.3s內逆時針轉動90度。

2. parallel() method

以下就是parallel()方法的例子,它用來控制動畫同步執行的:

LibGDX: Blackjack Animation
  1. 用moveTo()方法把Image物件直線移動到目的地位置(484, 343)。

    注意1: 括號的第三個數字就是時間的長度,0.5f = 0.5s,f = float。

    注意2: 我們可以把parallel()內的動作在一行內表示,也可以分成幾行表示,結果是一樣的。

  2. 用delay()方法把時間延遲 0.5s,這次因為用了parallel()方法,所以變成了同步

  3. 用rotateBy()方法把Image物件在0.3s內逆時針轉動90度,這次因為用了parallel()方法,所以變成了同步

3. Combined sequence() and parallel() method

以下把sequence()和parallel()方法合併的例子:

LibGDX: Blackjack Animation
  1. 用moveTo()方法把Image物件直線移動到目的地位置(484, 343)。

    注意1: 括號的第三個數字就是時間的長度,0.5f = 0.5s,f = float。

  2. 用delay()方法把時間延遲 0.5s,這次因為用了parallel()方法,所以變成了同步

  3. 用rotateBy()方法把Image物件在0.3s內逆時針轉動90度,這次因為用了sequence()方法,所以變成了順序

Blackjack Animation例子1 - Playing Card Linear Movement

例子1會介紹Playing Card Linear Movement,則是把紙牌直線移動到目的地,結果如下圖:

LibGDX: Blackjack Animation
  1. 把紙牌在原本的位置(716, 606)直線移動到目的地位置(484, 343)。

程式部分

LibGDX: Blackjack Animation
  1. DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為1024 X 768 px。

LibGDX: Blackjack Animation
  1. 把以上圖片(png)儲存到Android的assets文件夾內。

LibGDX: Blackjack Animation
  1. 把所有圖片(png)存入Texture物件內。

  2. 把紙牌Texture物件存入Actor的Image物件內。

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

  3. 建立一個Stage物件(stage)。

  4. 把紙牌Image物件存入Stage物件(stage)內。

  5. 用Image物件的addAction()方法加入moveTo()方法,這樣做就可以把紙牌在原本的位置(716, 606)直線移動到目的地位置(484, 343)。

    注意1: sequence()方法是把addAction()方法內的所有動作順序執行,但這個例子裡我們只有一個moveTo()動作,所以可以忽略。

    注意2: 另外除了sequence()方法外,還有parallel()方法,parallel()方法是把addAction()方法內的所有動作同步執行,但這個例子裡我們只有個moveTo()動作,所以可以忽略。

  6. 把背景Texture物件(bgTexture)用SpriteBatch物件(batch)在於Render()方法內顯示出來。

  7. 1-stage.act(); - 更新所有Actor,這個例子裡我們只有一個紙牌物件(cardImage1)。
    2-stage.draw(); - 把所有Actor顯示在屏幕上,這個例子裡我們只有一個紙牌物件(cardImage1)。

Blackjack Animation例子2 - Playing Card Flip

例子2會介紹Playing Card的Flip動畫效果,結果如下圖:

LibGDX: Blackjack Animation
LibGDX: Blackjack Animation
  1. 把紙牌在原本的位置(716, 606)直線移動到目的地位置(484, 343)。

  2. 用scaleTo()方法把紙牌的闊度(x direction)由1改變為0

  3. 用scaleTo()方法把紙牌的闊度(x direction)由0改變為1

程式部分

LibGDX: Blackjack Animation
  1. DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為1024 X 768 px。

LibGDX: Blackjack Animation
  1. 把以上圖片(png)儲存到Android的assets文件夾內。

LibGDX: Blackjack Animation
  1. 把所有圖片(png)存入Texture物件內。

  2. 把紙牌Texture物件(紙牌的正面和底面)存入Actor的Image物件內。

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

  3. 建立一個Stage物件(stage)。

  4. 把紙牌Image物件存入Stage物件(stage)內。

  5. 用Image物件的addAction()方法:

    i) 紙牌的底面(cardImage1)- 用moveTo()方法: (716, 606) to (484, 343),時間: 0.5s。

    ii) 紙牌的底面(cardImage1) - 用delay()方法: 延遲時間: 0.5s。

    iii) 紙牌的底面(cardImage1)- 用scaleTo()方法: 把紙牌的闊度(x direction)由1改變為0,時間: 0.1s。

    iv) 紙牌的正面(cardImage2)- 用scaleTo()方法: 把紙牌的闊度(x direction)由0改變為1

    v) 紙牌的正面(cardImage2) - 用delay()方法: 延遲時間: 0.6s。

    vi) 紙牌的底面(cardImage2)- 用scaleTo()方法: 把紙牌的闊度(x direction)由0改變為1,時間: 0.1s。

  6. 把背景Texture物件(bgTexture)用SpriteBatch物件(batch)在於Render()方法內顯示出來。

  7. 1-stage.act(); - 更新所有Actor,這個例子裡我們有兩個紙牌物件(cardImage1, cardImage2)。
    2-stage.draw(); - 把所有Actor顯示在屏幕上,這個例子裡我們有兩個紙牌物件(cardImage1, cardImage2)。

Blackjack Animation例子3 - Glowing Button

例子3會介紹閃爍按鈕(Glowing Button)效果,當按下按鈕,動畫才會開始,結果如下圖:

LibGDX: Blackjack Animation
  1. 閃爍按鈕(Glowing Button)效果。

  2. 把紙牌在原本的位置(716, 606)直線移動到目的地位置(484, 343)。

程式部分

LibGDX: Blackjack Animation
  1. DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為1024 X 768 px。

LibGDX: Blackjack Animation
  1. 把以上圖片(png)儲存到Android的assets文件夾內。

  2. 注意,背景圖片(table2_1024_768.png)刪除了左下角的HIT按鈕。

  3. 製作兩張以上HIT的按鈕,再用fadeIn()和fadeOut緩)方法就可以做出閃爍按鈕(Glowing Button)效果。
LibGDX: Blackjack Animation
  1. 把所有圖片(png)存入Texture物件內。

  2. 把紙牌Texture物件(紙牌的正面和底面)存入Actor的Image物件內。

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

  3. 建立一個Stage物件(stage)。

  4. 把按鈕Image物件存入Stage物件(stage)內。

  5. 用Image物件的addAction()方法:

    i) HIT按鈕(buttonImage2)- 用fadeIn()方法,時間: 0.5s。

    ii) HIT按鈕(buttonImage2)- 用fadeOut()方法,時間: 0.6s。

    注意1: HIT按鈕(buttonImage2)是故定在HIT按鈕(buttonImage1)之上,當HIT按鈕(buttonImage2)用fadeOut()方法消失後,下面的HIT按鈕(buttonImage1)就會呈現出來,做出閃爍按鈕(Glowing Button)的效果。

    注意2: forever()方法可以用來不斷重複動作。

  6. 用Image物件的addListener()方法,當按下按鈕,動畫才會開始:

    i) 每次按下按鈕時,首先重設(Reset)Image物件的設定。

    ii) 把紙牌Image物件存入Stage物件(stage)內。

    iii) 紙牌的底面(cardImage1)- 用moveTo()方法: (716, 606) to (484, 343),時間: 0.5s。

    iv) 紙牌的底面(cardImage1) - 同步用rotateBy()方法: 逆時針轉動90度。

    v) 紙牌的底面(cardImage1) - 用delay()方法: 延遲時間: 0.5s。

    vi) 紙牌的底面(cardImage1)- 用scaleTo()方法: 把紙牌的闊度(x direction)由1改變為0,時間: 0.1s。

    vii) 紙牌的正面(cardImage2) - 用delay()方法: 延遲時間: 0.6s。

    iv) 紙牌的正面(cardImage2)- 用scaleTo()方法: 把紙牌的闊度(x direction)由0改變為1,時間: 0.1s。

  7. 設定監聽動作Gdx.input.setInputProcessor(stage),把Stage物件存入。

  8. 把背景Texture物件(bgTexture)用SpriteBatch物件(batch)在於Render()方法內顯示出來。

  9. 1-stage.act(); - 更新所有Actor。
    2-stage.draw(); - 把所有Actor顯示在屏幕上。

Blackjack Animation例子4 - Playing Card Shuffle

例子4會做出洗紙牌(Shuffle)效果,當按下按鈕,動畫才會開始,結果如下圖:

LibGDX: Blackjack Animation
  1. 每次按下按鈕時,首先重設(Reset)Image物件的設定

  2. 把紙牌在原本的位置(716, 606)直線移動到目的地位置,單數在左面(484, 343),雙數在右面(584, 343)。

  3. 把紙牌逆時針轉動90度,再移動到中間位置。

  4. 把紙牌回到原本的位置(716, 606)。

程式部分

LibGDX: Blackjack Animation
  1. DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為1024 X 768 px。

LibGDX: Blackjack Animation
  1. 把以上圖片(png)儲存到Android的assets文件夾內。

LibGDX: Blackjack Animation
  1. 建立Image物件, 用Array儲存52張牌 (0-51)。

  2. 把所有圖片(png)存入Texture物件內。

  3. 把紙牌Texture物件(紙牌的正面和底面)存入Actor的Image物件內。

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

  4. 把紙牌Texture物件存入Image物件, 用Array儲存52張牌 (0-51)。

  5. 建立一個Stage物件(stage)。

  6. 把按鈕Image物件存入Stage物件(stage)內。

  7. 用Image物件的addAction()方法:

    i) HIT按鈕(buttonImage2)- 用fadeIn()方法,時間: 0.5s。

    ii) HIT按鈕(buttonImage2)- 用fadeOut()方法,時間: 0.6s。

    注意1: HIT按鈕(buttonImage2)是故定在HIT按鈕(buttonImage1)之上,當HIT按鈕(buttonImage2)用fadeOut()方法消失後,下面的HIT按鈕(buttonImage1)就會呈現出來,做出閃爍按鈕(Glowing Button)的效果。

    注意2: forever()方法可以用來不斷重複動作。

  8. 用Image物件的addListener()方法,當按下按鈕,動畫才會開始:

    i) 每次按下按鈕時,首先重設(Reset)Image物件的設定。

  9. 把紙牌在原本的位置(716, 606)直線移動到目的地位置,單數在左面(484, 343),雙數在右面(584, 343)。

  10. 注意: 這次在moveTo()方法內加入了第四個參數(pow5Out),這叫做Interpolation (Bounce, Circle, Elastic, Linear, Power, Sine等等),它是用來做出不同的動畫動作。

    關於Interpolation的用法,我第50節 - LibGDX: Interpolation會在下一節,詳細介紹。


  11. 把紙牌逆時針轉動90度,再移動到中間位置。

  12. 把紙牌回到原本的位置(716, 606)。

  13. 設定監聽動作Gdx.input.setInputProcessor(stage),把Stage物件存入。

  14. 把背景Texture物件(bgTexture)用SpriteBatch物件(batch)在於Render()方法內顯示出來。

  15. 1-stage.act(); - 更新所有Actor。
    2-stage.draw(); - 把所有Actor顯示在屏幕上。

Blackjack Animation例子5 - Slide-in Message Box

例子5會做出遊戲中段插入動畫效果,當按下按鈕,動畫才會開始,結果如下圖:

LibGDX: Blackjack Animation
  1. 用scaleTo()方法把以上的slidebox高度(y direction)由0改變為1,這樣做就可以做出開關的效果。

  2. 用moveTo()方法把以上的Image物件(lasebeam)由右至左快速移動。

  3. 用moveTo()方法把以上的Image物件(blackjack_text)由左至右快速移動。

程式部分

LibGDX: Blackjack Animation
  1. DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為1024 X 768 px。

LibGDX: Blackjack Animation
  1. 把以上圖片(png)儲存到Android的assets文件夾內。

LibGDX: Blackjack Animation
  1. 把所有圖片(png)存入Texture物件內。

  2. 把紙牌Texture物件(紙牌的正面和底面)存入Actor的Image物件內。

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

  3. 建立一個Stage物件(stage)。

  4. 把按鈕Image物件存入Stage物件(stage)內。

  5. 用Image物件的addAction()方法:

    i) HIT按鈕(buttonImage2)- 用fadeIn()方法,時間: 0.5s。

    ii) HIT按鈕(buttonImage2)- 用fadeOut()方法,時間: 0.6s。

    注意1: HIT按鈕(buttonImage2)是故定在HIT按鈕(buttonImage1)之上,當HIT按鈕(buttonImage2)用fadeOut()方法消失後,下面的HIT按鈕(buttonImage1)就會呈現出來,做出閃爍按鈕(Glowing Button)的效果。

    注意2: forever()方法可以用來不斷重複動作。

  6. 用Image物件的addListener()方法,當按下按鈕,動畫才會開始:

    i) 每次按下按鈕時,首先重設(Reset)Image物件的設定。

  7. 在Image物件的addListener()方法內:

    把slidebox, laserbeam和blackjack_text Image物件存入Stage物件(stage)內。

  8. 在Image物件的addListener()方法內:

    i) slidebox Image物件 - 用scaleTo()方法: 把slidebox的高度(y direction)由0改變為1,時間: 0.3s。

    ii) laserbeam Image物件1 - 用delay()方法: 延遲時間: 0.3s。

    iii) laserbeam Image物件1 - 用moveTo()方法把以上的Image物件(lasebeam)由右至左快速移動。

    iv)複製第二條laserbeam Image物件 - 用delay()方法: 延遲時間: 0.3s。

    v) 第二條laserbeam Image物件 - 用moveTo()方法把以上的Image物件(lasebeam)由右至左快速移動。

    vi) blackjack_text Image物件 - 用delay()方法: 延遲時間: 0.3s。

    vii) 用moveTo()方法把以上的Image物件(blackjack_text)由左至右快速移動。

  9. 在Image物件的addListener()方法內:

    i) slidebox Image物件 - 用delay()方法: 延遲時間: 2s。

  10. ii) slidebox Image物件 - 用scaleTo()方法: 把slidebox的高度(y direction)由1改變為0,時間: 0.2s,這樣做就可以做出消失的效果。

  11. 設定監聽動作Gdx.input.setInputProcessor(stage),把Stage物件存入。

  12. 把背景Texture物件(bgTexture)用SpriteBatch物件(batch)在於Render()方法內顯示出來。

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