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

第74節 - Unity: Convert Numbers Image to Custom Font

這一節我會介紹Unity: Convert Numbers Image to Custom Font,即是把我們自製字體(Font)的image檔案(.png、.jpeg或gif),用Unity預設的功能改變成為Custom Font,之後就可以像一般字體一樣在Unity內執行,如下圖:

Unity: Convert  Numbers Image to Custom Font

1) Result (執行結果):

以下是本節第74節 - Unity: Convert Numbers Image to Custom Font的執行結果:

2) Step By Step Tutorial

以下會詳細介紹每一個步驟:

Unity: Convert  Numbers Image to Custom Font
  1. 選擇Main Camera。

  2. 設定Orthographic Size = 300。

  3. 把三圖片拖放到Assets區域內。

Unity: Convert  Numbers Image to Custom Font
  1. 在Assets區域內,按Mouse右鍵,選擇Create>Custom Font,輸入NumbersFont。

  2. 設定Character Rect Size = 10,即設定數字0 - 9。

  3. 設定Element 0,即數字0 的所有值。

  4. 設定Advance = 100,即字體的Width,設定Advance = Vert W = 100,如果Advance>Vert W ,即兩個字體中間的Spacing會增加。

  5. 設定其他Element 2 - 9,即數字2 - 9的所有值。

Unity: Convert  Numbers Image to Custom Font
  1. 0 Ascii Code = 48。

  2. 設定Uv的所有值。

  3. 設定Vert的所有值。

Unity: Convert  Numbers Image to Custom Font
  1. 0 Ascii Code = 49。

  2. 設定Uv的所有值。

  3. 設定Vert的所有值。

Unity: Convert  Numbers Image to Custom Font
  1. ASCII Code的256個數值。

Unity: Convert  Numbers Image to Custom Font
  1. 在Assets區域內,按Mouse右鍵,選擇Create>Material,輸入NumbersMat。

  2. 在Albedo內,選擇Numbers圖片。

Unity: Convert  Numbers Image to Custom Font
  1. 選擇Shader>GUI/Text Shader。

Unity: Convert  Numbers Image to Custom Font
  1. 在Assets區域內,把NumbersMat拖放到Default Material內。

Unity: Convert  Numbers Image to Custom Font
  1. 建立一個Canvas。

  2. 選擇Main Camera,把Main Camera拖放到Render Camera內。

  3. 設定Canvas的不同值。

Unity: Convert  Numbers Image to Custom Font
  1. 建立一個UI Image - ImageBg。

  2. 設定ImageBg的Anchors位置在中間、ImageBg的座標、高度和寬度。

  3. 把numberBg圖片拖放到Image內。

Unity: Convert  Numbers Image to Custom Font
  1. 建立一個UI Image - ImageText。

  2. 設定ImageText的Anchors位置在中間、ImageText的座標、高度和寬度。

  3. 把cash圖片拖放到Image內。

Unity: Convert  Numbers Image to Custom Font
  1. 建立一個UI Text - Text。

  2. 設定Text的Anchors位置在中間、Text的座標、高度和寬度。

  3. 把NumberFont圖片拖放到Font內,並設定其他值。

Unity: Convert  Numbers Image to Custom Font
  1. 選擇Main Camera。

  2. 建立一個人C# Script - MyScript1。

  3. 把MyScript1拖放到MyScript1內,並把Text GameObject拖放到以上位置。

Unity: Convert  Numbers Image to Custom Font
  1. 建立public和private變數。

  2. 建立一個StartCoroutine()方法。

    注意: 我在第62節 - Unity: StartCoroutine, StopCoroutine, IEnumerator & Yield介紹過StartCoroutine()方法的用法。

  3. 建立一個IEnumerator Type 的counterNumber()方法。

Unity: Convert  Numbers Image to Custom Font
  1. 完成圖如上。

執行結果

Unity: Convert  Numbers Image to Custom Font
  1. 執行結果,如上。

Download above code and sample pictures here!