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

第55節 - Making and Displaying App Icon

這一節我會介紹如何製作Application Icon (簡稱App Icon)和顯示在智能電話上。

App Icon就是顯示在智能電話上的小圖片,我在第1節 - 簡介介紹過LibGDX是一個跨平台(Cross-platform)的framework,Apps或遊戲可以在iOS (iPhone and iPad), Android, Windows browsers (HTML),Mac或Linux上運行,所以建議大家設計App Icon時,一次過設計一個App Icon可以在Android和iPhone(IOS)上使用。

以下是Android和iPhone(IOS)作業系統的App Icon:

1. Android App Icon

Make and Display App Icon
  1. 大家可以發現,Android App Icon可以用上不同的形狀,例如: 正方形(方角)、正方形(圓角)和其他不規則形狀。

2. iPhone(IOS) App Icon

Make and Display App Icon
  1. iPhone(IOS) 的所有App Icon就只可以用上正方形(圓角)。

    注意1: iPhone(IOS)是自動把正方形圖片加上圓角,大家不須要在設計時加上圓角。

  2. 不同版本的IOS作業系統有不同的圓角大小。

Android VS iPhone(IOS) App Icon

以下列出Android和iPhone(IOS)須要用到的App Icon大小。因為智能電話的解像度不斷提高,如果我們把以往低解像度的App Icon放在現時高解像度的智能電話上,顯示質素就會大受影響,所以我們要製作不同解像度的App Icon來應付不同高解像度的智能電話:

注意: Android和iPhone(IOS)都是一樣,只要我們製作不同解像度的App Icon,再把它們放在特定的位置(Folder)上,Android和iPhone(IOS)作業系統就會根據智能電話的型號/解像度 自動選擇合適的App Icon。

1. Android App Icon

Make and Display App Icon
  1. 以上是Android須要的App Icon大小。

    注意1: 512 X 512 px圖片是在上載遊戲到Google Play Store時所須要的圖片,用作Google Play App Publish之用。

    注意2: 總結Android App Icon,就有以下解像度圖片:

    1. 512 X 512 px (Google Play Store)
    2. 192 X 192px
    3. 144 X 144 px
    4. 96 X 96 px
    5. 72 X 72 px
    6. 48 X 48 px

2. iPhone(IOS) App Icon

Make and Display App Icon
  1. 以上是iPhone(IOS)須要的App Icon大小。

    注意1: 1024 X 1024 px圖片是在上載遊戲到App Store時所須要的圖片,用作App Store之用。

    注意2: 大家要留意points VS pixels的關係,iPhone有分non-Retina和Retina解像度,當然Retina的解像度會高些。在non-Retina iPhone上,1point=1pixel,而在Retina iPhone上,有兩個版本: 1point=2X2 pixels或1point=3X3 pixels,就是以上介紹的@2X和@3X的意思。

    注意3: 以上有重複的解像度圖片,所以最後總結有以下App Icon大小:

    1. 1024 X 1024 px (App Store)
    2. 180 X 180 px
    3. 167 X 167 px
    4. 152 X 152 px
    5. 120 X 120 px
    6. 187 X 187 px
    7. 80 X 80 px
    8. 76 X 76 px
    9. 58 X 58 px
    10. 40 X 40 px
    11. 29 X 29 px

Rounded Corners (圓角)

1. Android App Icon

大家要注意,當製作Android App Icon時,大家可以任意設計App Icon的圓角大小,如下圖:

Make and Display App Icon

2. iPhone App Icon

但是,當製作iPhone(IOS) App Icon時,就不須要自設App Icon的圓角,因為iPhone(IOS)會自動在App Icon上加上圓角,如下圖:

Make and Display App Icon

如果像Android App Icon一樣強行加上圓角,結果就會出現兩次圓角,如下圖:

Make and Display App Icon

Making App Icon

我會用Adobe Illustrator製作一張512 X 512 px的Android App Icon,再縮小圖案製作其他所須要的Android App Icon:

注意1: 我在第46節 - Adobe Illustrator: Basic Components Part 1介紹過Adobe Illustrator是一套用向量(Vector)方法處理圖像的軟件,則是所畫出來的圖案是用點、線和面再加上座標所構成的圖案。因為是向量圖,如果我們把圖案放大或縮小, 圖案不會變得模擬不清,所以製作Logo,都會用上向量軟件。

Make and Display App Icon

Display App Icon in Android

Make and Display App Icon

    按照以下步驟輸入資料:

  1. 輸入有關資料。

  2. 選擇「Desktop」、「Android」、「Ios」和「Html」。

  3. 按一下「Generate」。

  4. 直至「BUILD SUCCESSFUL」。

Make and Display App Icon
  1. 開啟Android Studio,選擇「Import project(Eclipse ADT, Gradle, etc.)」。

Make and Display App Icon
  1. 選擇「MyDemo55」。

  2. 按「OK」。

Make and Display App Icon
  1. 在電腦上選擇製作好的App Icon (e.g. 192 X 192 px)。

  2. Android Studio預設App Icon檔案名稱為"ic_launcher.png",我們可以用同一個檔案名稱。

    注意: 假設我們App Icon檔案名稱為"ic_launcher_mydemo55.png"。

  3. 選擇App Icon,再在鍵盤上按「^C」,則「Copy」,再在Android Studio的「drawable」folder內按「^V」,則「Paste」。

  4. Android Studio會自動把App Icon(192 X 192 px)放在res\drawable-hdpi\ folder內。

  5. 按「OK」。

Make and Display App Icon
  1. App Icon " ic_launcher_mydemo55.png" 就會放在(192 X 192 px)放在res\drawable-hdpi\ folder內。

  2. 在鍵盤上按「Delete」鍵,刪除Android Studio預設的App Icon " ic_launcher.png"。

Make and Display App Icon
  1. 如果大家把Android Studio預設的App Icon " ic_launcher.png"更改為" ic_launcher_mydemo55.png",就要在AndroidManifest.xml內更新App Icon名稱。

  2. 更新App Icon檔案名稱為"ic_launcher_mydemo55"。

    注意: 檔案名稱不須要加上".png"。

Make and Display App Icon
  1. 把智能電話連接電腦。

Make and Display App Icon
  1. 選擇「Run」。

  2. 再選擇「Run」。

  3. 選擇「Android」。

Make and Display App Icon
  1. 如果智能電話連接電腦成功,就可以選擇已連接的智能電話。

  2. 再按「OK」。

Make and Display App Icon
  1. 您設計的App Icon就成功顯示在智能電話上。

Make and Display App Icon
  1. 按App Icon,就會顯示LibGDX的Hello World首頁。