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

第12節 - LibGDX: Texture, TextureRegion, SpriteBatch & Sprite

這一節我會介紹Texture(紋理),TextureRegion,SpriteBatch & Sprite的分別。

它們都是Class(類別)。

1 - Texture

Texture(紋理)就是把圖片(e.g .png圖片)從原始格式解碼並上傳到GPU就被稱為Texture。

以下是Texture工作的簡化圖,首先Texture會產生一個Texture物件(例如:texture)然後把圖片(bg1920_1080.png)傳入。

Texture,TextureRegion,SpriteBatch & Sprite

注意,不要忘記把背景圖片(bg1920_1080.png)複製到MyDemo12-android內的assets Folder內,如下圖:

Texture,TextureRegion,SpriteBatch & Sprite

TextureRegion(紋理區域)

TextureRegion就是在一張圖片(e.g .png圖片)內只選擇其中一部分,再把原始格式解碼並上傳到GPU就被稱為TextureRegion。

以下是TextureRegion工作的簡化圖:

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

  2. 用TextureRegion產生一個TextureRegion物件(例如:textureRegion)然後把texture物件傳入,再設定區域位置和大小。

注意,以下例子選擇圖片的左上角500x500px區域,我在第11節 - Texture, TextureRegion, SpriteBatch & Sprite解釋過,圖片座標系統是(左X,下Y),而顯示在屏幕上是(左X,上Y)。

Texture,TextureRegion,SpriteBatch & Sprite

SpriteBatch

SpriteBatch最主要把Texture物件(例如:texture)或TextureRegion物件(例如:textureRegion)顯示在屏幕上。

LibGdx使用SpriteBatch來完成Texture Mapping並在屏幕上顯示。

要把texture或textureRegion顯示在屏幕上,最主要在Render()內輸入以下三行:

batch.begin();
batch.draw(texture,0,0);
batch.end();

你可以通過在begin()和end()來繪製多個圖形,繪製次序是根據draw()的次序,所以如果有重疊的部分,後來的圖片會在覆蓋在先前的圖片上面。

以下例子會先繪製texture1然後繪製texture2,所以texture2會覆蓋texture1片圖面。

batch.begin();
batch.draw(texture1,0,0);
batch.draw(texture2,0,0);
batch.end();

Texture,TextureRegion,SpriteBatch & Sprite

Sprite

Sprite類別繼承自TextureRegion類別,所以Sprite類別也是TextureRegion的加強版,比TextureRegion多了一些功能,例如:可以指定位置、顏色、旋轉等。

Texture,TextureRegion,SpriteBatch & Sprite

Texture,TextureRegion,SpriteBatch & Sprite

Power of Two (2的N次方,2^n)

注意,所有圖片尺寸建意(不一定須要)是2個N次方(如16X16,64X256等),再複製到MyDemo12-android內的assets Folder內。

為什麼圖片尺寸建意是2的N次方的圖片呢?

LibGDX或Android是用OpenGL for Embedded Systems (OpenGL ES或GLES)畫圖,OpenGL ES有多個版本:OpenGL ES 1.x,OpenGL ES 2.0和OpenGL ES 3.x 。

它們之間的一個重要區別就是: OpenGL ES 1.x的圖片大小必須是2的N次方(整數),而 OpenGL ES 2.0和OpenGL ES 3.x 則無此要求。而libgdx在早期使用OpenGL ES 1.x的版本,所以只支援2的N次方圖片,並一直沿用至今,LibGDX新版本(0.9.8以上)允許開發者使用OpenGL ES 2.0,所以圖片尺寸是2的N次方就不一定須要。

但是為了不同版本,建意大家用2的N次方圖片。

2的N次方:

1. 2^0=1
2. 2^2=4
3. 2^3=8
4. 2^4=16
5. 2^5=32
6. 2^6=64
7. 2^7=128
8. 2^8=256
9. 2^9=512
10. 2^10=1024等等

注意,圖片是2的N次方,可任意組,例如:64x64,64x128,128x256等等。

Interface - Disposable

注意,Texture和SpriteBatch類別須要在程式結束時在dispose()內進行銷毀,如下圖:

Texture,TextureRegion,SpriteBatch & Sprite

但是Sprite類別就不須要在程式結束時在dispose()內進行銷毀,原因會在下面解釋。

1 - Texture

首先,我們先來看一下LigGDX官方API文件,如下圖:

Texture,TextureRegion,SpriteBatch & Sprite

Texture類別存放在com.badlogic.gdx.graphics下,繼承自Object,實現了Disposable介面(interface),凡是實現了Disposable介面,都應該在程序結束時對該類進行銷毀。

2 - SpriteBatch

首先,我們先來看一下LigGDX官方API文件,如下圖:

Texture,TextureRegion,SpriteBatch & Sprite

SpriteBatch類別存放在com.badlogic.gdx.graphics.g2d下,繼承自Object,實現了Disposable介面(interface),凡是實現了Disposable介面,都應該在程序結束時對該類進行銷毀。

3 - Sprite

首先,我們先來看一下LigGDX官方API文件,如下圖:

Texture,TextureRegion,SpriteBatch & Sprite

SpriteBatch類別存放在com.badlogic.gdx.graphics.g2d下,繼承自Object,沒有實現了Disposable介面(interface),所以Sprite類別就不須進行銷毀。

Texture(或TextureRegion)與Sprite繪圖的分別

以下列出Texture(或TextureRegion)與Sprite繪圖的分別。

Texture,TextureRegion,SpriteBatch & Sprite
  1. 1a-用Texture產生一個Texture物件(例如:texture)然後把圖片(bg1920_1080.png)傳入。
  2. 所有圖片設定,例如:位置、顏色、旋轉等,都不會在這裡設定。

  3. 1b-用Texture產生一個Texture物件(例如:texture)然後把圖片(bg1920_1080.png)傳入。

    用Sprite產生一個Sprite物件(例如:sprite)然後把texture物件傳入。

    所有圖片設定,例如:位置、顏色、旋轉等,都會在這裡設定。

  4. 2a-Texture或TextureRegion會在Render()內用batch.draw()進行繪圖。

  5. 2b-而Sprite會在Render()內用sprite.draw()進行繪圖。

    注意,在Sprite.java程式內可以看到sprite.draw()內其實最後也是把texture傳入batch.draw()內。

Texture,TextureRegion,SpriteBatch & Sprite

用Sprite繪圖的好處和壞處

以下是LibGDX官方對Sprite繪圖的好處:

Sprite makes it convenient to have a single object that describes everything. Also, because Sprite stores the geometry and only recomputes it when necessary, it is slightly more efficient if the scale, rotation, or other properties are unchanged between frames.

意思是我們可以建立一個Sprite物件(例如:sprite),sprite就用來記錄所有圖片的幾何資料,再在有更新幾何資料的情況下才把圖片繪製到屏幕上.

以下是LibGDX官方對Sprite繪圖的壞處:

Note that Sprite mixes model information (position, rotation, etc) with view information (the texture being drawn). This makes Sprite inappropriate when applying a design pattern that wishes to strictly separate the model from the view. In that case, using Texture or TextureRegion may make more sense.

壞處是我們在製作一隻LibGDX遊戲,如果用到Modle-View-Controller(MVC)模式,把圖片的幾何資料在create()內處理,就會把程式員和美術繪圖員的工作混合起來,這便會減低製作一隻大型遊戲的效率。通常製作一隻遊戲程式員和美術繪圖員的工作是分開的。

Case 1 - 用Texture和SpriteBatch繪圖

  1. 用Texture會產生一個Texture物件(例如:texture)然後把圖片(bg1920_1080.png)傳入。
  2. 在Render()內運用batch.begin(),batch.draw()和batch.end()來繪製texture物件顯示在屏幕上。
  3. 注意,圖片座標系統是(左X,下Y),而顯示在屏幕上是(左X,上Y)。
  4. 在dispose()內把Texture類別進行銷毀。
Texture,TextureRegion,SpriteBatch & Sprite

Case 2 - 用TextureRegion和SpriteBatch繪圖

  1. 用Texture產生一個Texture物件(例如:texture)然後把圖片(bg1920_1080.png)傳入。
  2. 用TextureRegion產生一個TextureRegion物件(例如:textureRegion)然後把texture物件傳入,再設定區域大小為500x500px。
  3. 在Render()內運用batch.begin(),batch.draw()和batch.end()來繪製textureRegion物件顯示在屏幕上。
    注意,圖片座標系統是(左X,下Y),而顯示在屏幕上是(左X,上Y)。
  4. 在dispose()內把Texture和SpriteBatch類別進行銷毀。
Texture,TextureRegion,SpriteBatch & Sprite

Case 3 - 用Texture,SpriteBatch和Sprite繪圖

  1. 用Texture產生一個Texture物件(例如:texture)然後把圖片(bg1920_1080.png)傳入。
  2. 用Sprite產生一個Sprite物件(例如:sprite)然後把texture物件傳入。
  3. 在Render()內運用batch.begin(),sprite.draw()和batch.end()來繪製texture物件顯示在屏幕上。
    注意,圖片座標系統是(左X,下Y),而顯示在屏幕上是(左X,上Y)。
  4. 在dispose()內把Texture和SpriteBatch類別進行銷毀,Sprite類別不須要進行銷毀。
Texture,TextureRegion,SpriteBatch & Sprite

Case 4 - 用Texture,TextureRegion, SpriteBatch和Sprite繪圖

  1. 用Texture產生一個Texture物件(例如:texture)然後把圖片(bg1920_1080.png)傳入。
  2. 用TextureRegion產生一個TextureRegion物件(例如:textureRegion)然後把texture物件傳入,再設定區域大小為500x500px。
  3. 用Sprite產生一個Sprite物件(例如:sprite)然後把textureRegion物件傳入。
  4. 在Render()內運用batch.begin(),batch.draw()和batch.end()來繪製sprite物件顯示在屏幕上。
    注意,圖片座標系統是(左X,下Y),而顯示在屏幕上是(左X,上Y)。

  5. 在dispose()內把Texture和SpriteBatch類別進行銷毀,Sprite類別不須要進行銷毀。
Texture,TextureRegion,SpriteBatch & Sprite