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

第33節 - LibGDX: Animation & Spritesheet

這一節我會介紹LibGDX的Animation & Spritesheet。

我在第31節 - LibGDX: Lifecycle (Render() Method)介紹過圖片(hero1.png)向右移動的簡單例子,但圖片(hero1.png)是一幅靜態圖片,沒有動畫。

要做出動畫效果,我們須要一張SpriteSheet和用到LibGDX預設的Animation類別

製作Spritesheet

LibGDX: Animation & Spritesheet
  1. 我在第18節 - LibGDX: Texture Packer介紹過如何用Texture Packer軟件把不同的圖片(.png)合併成一張sprite sheet。以上用了三張簡單圖片做出行路(Walking)動作。

gif動畫 :

以下用gif動畫模擬Animation動畫:

LibGDX: Animation & Spritesheet

製作動畫 - Animation Class

LibGDX: Animation & Spritesheet
  1. 把Spritesheet(hero1Atlas.pack)傳入TextureAtlas物件(hero1Atlas)內。

  2. 把hero1Atlas的所有格數用getRegions()方法傳入Animation物件(animation)內。

  3. 用animation.getKeyFrame()方法把animationTime變數傳入,這個方法可以自動計算animationTime的聚積時間值,並自動顯示正確的格數。

  4. 把sprite顯示在屏幕上。

例子1 - Animation

這個例子會介紹如何用Animation類別建立一個靜態動畫:

DesktopLauncher.java

LibGDX: Animation & Spritesheet
  1. 把hero1Atlas.pack和hero1Atlas.png儲存到Android的Assets文件夾內。

MyDemo33.java

LibGDX: Animation & Spritesheet
  1. 設定屏幕尺寸。

  2. 設定動畫一秒的格數,通常一秒15-60格( 16-60 FPS),15格就用1/15.0f, f=float type。

  3. 把Spritesheet(hero1Atlas.pack)傳入TextureAtlas物件(hero1Atlas)內。

  4. 把hero1Atlas的所有格數用getRegions()方法傳入Animation物件(animation)內。

  5. 用LibGDX的Gdx.graphics.getDeltaTime(),它可以敢得兩格(two frames)動畫之間的時間,用來控制動畫的速度。+=是用來聚積animationTime時間值。

  6. 用animation.getKeyFrame()方法把animationTime變數傳入,這個方法可以自動計算animationTime的聚積時間值,並自動顯示正確的格數。

  7. 把camera傳入SpriteBatch物件(batch)內。再更新camera(例如位置改變),注意,現時位置是固定的,所以camera.update()可以忽略。

  8. 把sprite顯示在屏幕上。

  9. 因為我們有用到Viewport類別,當屏幕呎寸改變時,就須要更新Viewport。

  10. 最後呼叫dispose()方法,執行batch.dispose();和hero1Atlas.dispose();,釋放資源。

執行程式:

LibGDX: Animation & Spritesheet

例子2 - Animation & Horizontal Movement

例子2除了會建立一個靜態動畫,還會把動畫向右移動:

MyDemo33-1.java

LibGDX: Animation & Spritesheet
  1. 建立一個speed變數(float type),並設定值為150。

  2. 建立一個xPosition變數(float type)。

  3. 建立一個deltaTime變數(float type)。

  4. 設定xPosition的初始值為-(1920/2)。

  5. Gdx.graphics.getDeltaTime()方法敢得 兩格(two frames)動畫之間的時間,再傳入deltaTime變數內。

  6. 設定sprite位置的初始值。

  7. 根據最新deltaTime的值,更新xPosition位置。

執行程式:

LibGDX: Animation & Spritesheet

以下是LibGDX: Animation & Spritesheet程式執行的動畫:


Download above code and sample pictures here!