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

第19節 - LibGDX: Bitmap Fonts, JSON & Skin

這一節我會介紹Bitmap Fonts, JSON和Skin。簡單來說Bitmap Fonts就是在屏幕上顯示文字,JSON就是一個文字檔案,把Texture Packer的圖片和Bitmap Fonts的文字加入特效設定,再顯示在屏幕上,就好像製作網頁的CSS(Cascading Style Sheets )一樣。而Skin就是把JSON文字檔案傳入,再套在不同的UI components(例如:Button)上。

以下是Texture Packer, Bitmap Font, JSON和Skin用在LibGDX的關係圖:

Bitmap Fonts, JSON & Skin

1 - Texture Packer

我在第18節 - LibGDX: Texture Packer介紹過,Texture Packer把不同的圖片儲存在一個.png檔案上,再傳到GPU作其他程式處理,這樣做就會大大減少記憶體的資源。

以下例子就把兩個Button圖片(button1.png和button2.png)用Texture Packer軟件產生兩個檔案(button.png和button.pack):

Bitmap Fonts, JSON & Skin

2 - Bitmap Font

Bitmap Font的原理和Texture Packer很相似,Bitmap Font把一種字體的A至Z和其他字符儲存在一個.png檔案上,再傳到GPU作其他程式處理,這樣做也是為了減少記憶體的資源。

以下例子就把Google Font-Carter One內的A至Z和其他字符用Hiero軟件產生兩個檔案(carterone.png和carterone.fnt):

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

3 - JSON

JSON全名是JavaScript Object Notation,它是一個以純文字檔案去儲存和傳送簡單結構資料,是一種輕量級的數據交換語言(Extensible Markup Language, XML),你可以透過特定的格式去儲存任何資料(字串,數字,陣列,物件),也可以透過物件或陣列來傳送較複雜的資料。它的用途十分廣闊,在這裡我只會針對LibGDX而論。

以下就是LibGDX預設uiskin.json文字檔的內容:

Bitmap Fonts, JSON & Skin
  1. 第1段設定Bitmap Font的預設字體(default-font)和字體路徑。
  2. 第2段設定不同顏色(Color)。
  3. 第3至第15段設定不同介面元件的特性。我會已TextButton介面元件作詳細介紹。

注意,如果我們只須要用到uiskin.json文件內的幾個特性,我們可以簡略內容,如下圖:

Bitmap Fonts, JSON & Skin
  1. 第1段設定Bitmap Font的預設字體(default-font)和字體路徑。
  2. 第2段設定不同顏色(Color)。
  3. 第3段設定不同介面元件的特性。我會已TextButton介面元件作詳細介紹。

4 - Skin類別, TextButton類別, Stage類別和SpriteBatch類別

以下是Skin類別, TextButton類別, Stage類別和SpriteBatch類別的關係:

Bitmap Fonts, JSON & Skin
  1. 首先我們建立一個Skin物件(skin),skin可把JSON檔案傳入,例如:簡化的JSON檔案(uiskin-simple.json)。
  2. 建立一個TextButton物件(button),我們可以把以下三個引數傳入:
    1. 顯示文字內容,例如: "Click me"。
    2. 傳入skin,則是間接傳入了JSON檔案內容,亦則是間接傳入了Texture Packer圖片和Bitmap Font字體。
    3. 傳入default,則是把JSON檔案內的default設定傳入button。
  3. 建立一個Stage物件(stage),用stage.addActor()方法把button傳入。
    注意,button也是Actor物件。
  4. 最後,建立一個SpriteBatch物件(batch),它用來把stage設定好的圖像(圖片和文字)顯示在屏幕上。

Google Fonts - Carter One

以下介紹如何把我們喜歡的字體下載,我會已Google Fonts - Carter One作解釋:

Bitmap Fonts, JSON & Skin

1.&2. 在以上Google網站,下載Google Fonts - Carter One


Bitmap Fonts, JSON & Skin

1.&2. 按"下載"按鈕


Bitmap Fonts, JSON & Skin

1.&2. 下載Zip File和按"儲存"按鈕


Bitmap Fonts, JSON & Skin

1. 把Zip File解壓,會得到一個CarterOne.ttf檔案。


Bitmap Fonts, JSON & Skin

1. 把CarterOne.ttf檔案儲存到"C:\Windows\Fonts"內,任何Windows軟件內就會多了Carter One的字體。


Bitmap Font - Hiero

以下介紹如何把Carter One字體製作成Bitmap Font,我會已Hiero軟件作解釋:

Bitmap Fonts, JSON & Skin

1. 在以上LibGDX官方網站下載Hiero.jar。


Bitmap Fonts, JSON & Skin
  1. 按Hiero.jar開啟Hiero軟件。
  2. 在Hiero內選擇Carter One的字體。

Bitmap Fonts, JSON & Skin

1., 2.&3. 設定Background顏色為灰色,再按"OK"按鈕。


Bitmap Fonts, JSON & Skin

1.至6. 設定outline顏色為綠色,可以在"RGB"設定內輸入Color Code為"358E15"


Bitmap Fonts, JSON & Skin

1.&2. 把Carter One字體儲存成Bitmap Font檔案。


Bitmap Fonts, JSON & Skin

1. Bitmap Font檔案: carterone.png和carteron.fnt就會產生。


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

LibGDX - Default Files

LibGDX預設了五個可用檔案:

Bitmap Font:

  1. default.fnt
  2. default.png

Texture Packer:

  1. uiskin.atlas
  2. uiskin.png

JSON:

  1. uiskin.json
Bitmap Fonts, JSON & Skin

以上五個檔案可以在LibGDX的網站下載,如下圖:

Bitmap Fonts, JSON & Skin
  1. LibGDX的預設Bitmap Font檔案(default.fnt和default.png)。
  2. LibGDX的預設Texture Packer和JSON檔案(uiskin.atlas, uiskin.png和uiskin.json)。

注意,LibGDX的預設檔案是".atlas",而用Texture Packer產生的檔案是".pack",兩種也可以接受。


以下是這五個檔案用在LibGDX時的關係:

Bitmap Fonts, JSON & Skin
  1. LibGDX的預設Bitmap Font檔案(default.fnt和default.png)。
  2. LibGDX的預設Texture Packer檔案(uiskin.atlas和uiskin.png)。
  3. LibGDX的預設JSON檔案(uiskin.json)。
    在uiskin.json檔案內主要包括三個部分: Bitmap Font, Color和14種UI Components。
  4. 建立一個Skin物件(skin),skin可把JSON檔案傳入,例如: 簡化的JSON檔案(button.json)。
  5. 建立一個TextButton物件(button),把skin傳入。
  6. 建立一個Stage物件(stage),用stage.addActor()方法把button傳入。
  7. 最後,建立一個SpriteBatch物件(batch),它用來把stage設定好的圖像(圖片和文字)顯示在屏幕上。

以下就是LibGDX的預設JSON檔案(uiskin.json),在uiskin.json檔案內主要包括三個部分:Bitmap Font, Color和14種UI Components。

Bitmap Fonts, JSON & Skin

LibGDX - Create Your Own Files

如果我們希望用自己的宇字體和圖片,我們可以建立自己的Bitmap Font, Texture Packer和JSON檔案。

我們自建的五個檔案:

Bitmap Font:

  1. carterone.fnt
  2. carterone.png

Texture Packer:

  1. button.pack
  2. button.png

JSON:

  1. button.json
Bitmap Fonts, JSON & Skin

以下是這五個檔案用在LibGDX時的關係:

Bitmap Fonts, JSON & Skin
  1. 我們自建的Bitmap Font檔案(carterone.fnt和carterone.png)。
  2. 我們自建的Texture Packer檔案(button.pack和button.png)。
  3. 我們自建的JSON檔案(button.json)。
    在button.json檔案內也包括三個主要部分: Bitmap Font, Color和1種UI Components(TextButton)。
  4. 建立一個Skin物件(skin),skin可把JSON檔案傳入,例如: 簡化的JSON檔案(button.json)。
  5. 建立一個TextButton物件(button),把skin傳入。
  6. 建立一個Stage物件(stage),用stage.addActor()方法把button傳入。
  7. 最後,建立一個SpriteBatch物件(batch),它用來把stage設定好的圖像(圖片和文字)顯示在屏幕上。

以下就是我們自建的JSON檔案(button.json),在button.json檔案內也包括三個主要部分:Bitmap Font, Color和1種UI Components(TextButton)。

Bitmap Fonts, JSON & Skin
  1. 第1段設定Bitmap Font的預設字體(default-font)和字體路徑。
  2. 第2段設定不同顏色(Color)。
  3. 第3段設定不同介面元件的特性。我會已TextButton介面元件作詳細介紹。

例子1

第1個例子不須要用Bitmap Font, Texture Packer和JSON檔案,只用SpriteBatch物件(sprite)顯示字串在屏幕上。

Bitmap Fonts, JSON & Skin

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


Bitmap Fonts, JSON & Skin
  1. 在MyDemo19.java內建立有關的Member Variables。
  2. 在create()方法內建立一個BitmpaFont物件(font1),再設定顏色為黑色。
  3. 顯示"Hello World"字串在屏幕上,字串的位置為(200,350)。
  4. 最後別忘記把在dispose()方法內輸入batch.dispose()和font1.dispose()。

執行程式,結果如下圖:

Bitmap Fonts, JSON & Skin

Download above code and sample pictures here!

例子2

第2個例子只會用到Bitmap Font的Carter One字體,不須要用Texture Packer和JSON檔案,再用SpriteBatch物件(sprite)顯示字串在屏幕上。

Bitmap Fonts, JSON & Skin
  1. 在Android的assets內建立"fonts"文件夾,複製carterone.fnt和carterone.png到文件夾。
  2. DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為500x700px。

Bitmap Fonts, JSON & Skin
  1. 在MyDemo19.java內建立有關的Member Variables。
  2. 在create()方法內建立一個BitmpaFont物件(font1),再設定顏色為黑色。
    再建立一個BitmpaFont物件(font2),把carterone.fnt和carterone.png傳入。
  3. 顯示"Hello World"字串在屏幕上,字串的位置為(200,350)。
    顯示"START"字串在屏幕上,字串的位置為(200,450)。
  4. 最後別忘記把在dispose()方法內輸入batch.dispose(), font1.dispose()和font2.dispose()。

執行程式,結果如下圖:

Bitmap Fonts, JSON & Skin

Download above code and sample pictures here!

例子3

第3個例子會用LibGDX預設的5個檔案:

  1. default.fnt
  2. default.png
  3. uiskin.atlas--->uiskin-simple.atlas
  4. uiskin.png--->uiskin-simple.png
  5. uiskin.json--->uiskin-simple.json

注意1,我會示範更改LibGDX預設的uiskin.atlas檔案,只留下須要的部分。

注意2,更改完uiskin.atlas的內容後,如果須要改名(例如: 把uiskin.altas改為uiskin-simple.altas),其他檔案最好一同改名:

  1. uiskin.atlas--->uiskin-simple.atlas
  2. uiskin.png--->uiskin-simple.png
  3. uiskin.json--->uiskin-simple.json

注意3,除了以上檔案名外,uiskin-simple.altas內的uiskin.png也要改為uiskin-simple.png,如下圖:

Bitmap Fonts, JSON & Skin

1.&2. 在uiskin-simple.altas內的uiskin.png也要改為uiskin-simple.png


Bitmap Fonts, JSON & Skin
  1. 在Android的assets內建立"fonts"文件夾,複製default.fnt和default.png到文件夾。
    在Android的assets內建立"data"文件夾,複製uiskin-simple.atlas, uiskin-simple.png和uiskin-simple.json到文件夾。
  2. DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為500x700px。

Bitmap Fonts, JSON & Skin
  1. 在MyDemo19_2.java內建立有關的Member Variables。
  2. 在create()方法內建立一個Skin物件(skin),再把uiskin-simple.json傳入。
  3. 再建立一個TextButton物件(button),我們可以把以下三個引數傳入:
    1-顯示文字內容""Click me"
    2-傳入skin,則是間接傳入了JSON檔案內容,亦則是間接傳入了Texture Packer圖片和Bitmap Font字體。
    3-傳入default,則是把JSON檔案內的default設定傳入button。
  4. 設定button的大小為200x20px。
    注意1,我們是用LibGDX的預設uiskin-simple.atlas檔案,在這檔案的TextButton內,當按下按鈕,圖片會用default-round-down; Mouse放開時,圖片會用default-round。
    注意2,圖片default-round-down和default-round的大小不是固定的,我們可以用以下設定button的大小。:
    1-button.setwidth();
    2-button.setheight();
    設定button的左下角位置為(-100,-10)px。
  5. 用button介面元件的button.addListener()方法監聽Mouse按下按鈕時要作出的動作。
    在這例子裡,當Mouse按下按鈕時,button元件上的字串就會由"Click me"轉為"Go to Next Screen"
    注意,我會在第21節 - Android: onClick事件的5種實現方式介紹有關Click Listener的用法。
  6. 建立一個Stage物件(stage),用stage.addActor()方法把button傳入。
    再把stage傳入Gdx.input.setInputProcessor()方法內,這方法可以設定Mouse, Keyboard或Touchpad等輸入裝置。
  7. 建立一個SpriteBatch物件(batch),它用來把stage設定好的圖像(圖片和文字)顯示在屏幕上。
  8. 最後別忘記把在dispose()方法內輸入batch.dispose(), stage.dispose()和skin.dispose()。

以下解釋LibGDX預設的按鈕圖片,當按下按鈕時,圖片會用default-round-down(紅色); Mouse放開時,圖片會用default-round(灰色)。

Bitmap Fonts, JSON & Skin


Bitmap Fonts, JSON & Skin



執行程式,結果如下圖:

Bitmap Fonts, JSON & Skin


用Mouse按一下按鈕,結果如下圖:

Bitmap Fonts, JSON & Skin

Download above code and sample pictures here!

例子4

例子4會用我們自建的5個檔案:

  1. carterone.fnt
  2. carterone.png
  3. button.pack
  4. button.png
  5. button.json
Bitmap Fonts, JSON & Skin
  1. 在Android的assets內建立"fonts"文件夾,複製carterone.fnt和carterone.png到文件夾。
    在Android的assets內建立"data"文件夾,複製button.pack, button.png和button.json到文件夾。
  2. DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為459x600px。

Bitmap Fonts, JSON & Skin
  1. 在MyDemo19_3.java內建立有關的Member Variables。
  2. 在create()方法內建立一個Skin物件(skin),再把button.json和button.pack傳入。
  3. 再建立一個TextButton物件(button),我們可以把以下三個引數傳入:
    1. 顯示文字內容"Start"
    2. 傳入skin,則是間接傳入了JSON檔案內容,亦則是間接傳入了Texture Packer圖片和Bitmap Font字體。
    3. 傳入carterone,則是把JSON檔案內的carterone設定傳入button。
    設定button的左下角位置為(-100,-10)px。
  4. 用button介面元件的button.addListener()方法監聽Mouse按下按鈕時要作出的動作。
    在這例子裡當Mouse按下按鈕時,button元件上的字串是"Start",Mouse放開時,button元件上的字串會保持在"Start"
    注意,我會在第21節 - Android: onClick事件的5種實現方式介紹有關Click Listener的用法。
  5. 建立一個Stage物件(stage),用stage.addActor()方法把button傳入。
    再把stage傳入Gdx.input.setInputProcessor()方法內,這方法可以設定Mouse, Keyboard或Touchpad等輸入裝置。
  6. 建立一個SpriteBatch物件(batch),它用來把stage設定好的圖像(圖片和文字)顯示在屏幕上。
  7. 最後別忘記把在dispose()方法內輸入batch.dispose(), stage.dispose()和skin.dispose()。

執行程式,結果如下圖:

Bitmap Fonts, JSON & Skin


用Mouse按一下按鈕,結果如下圖:

Bitmap Fonts, JSON & Skin

Download above code and sample pictures here!