第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
- 大家可以發現,Android App Icon可以用上不同的形狀,例如: 正方形(方角)、正方形(圓角)和其他不規則形狀。
2. iPhone(IOS) App Icon
- iPhone(IOS) 的所有App Icon就只可以用上正方形(圓角)。
注意1: iPhone(IOS)是自動把正方形圖片加上圓角,大家不須要在設計時加上圓角。
- 不同版本的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
- 以上是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
- 以上是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的圓角大小,如下圖:
2. iPhone App Icon
但是,當製作iPhone(IOS) App Icon時,就不須要自設App Icon的圓角,因為iPhone(IOS)會自動在App Icon上加上圓角,如下圖:
如果像Android 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,都會用上向量軟件。
Display App Icon in Android
- 輸入有關資料。
- 選擇「Desktop」、「Android」、「Ios」和「Html」。
- 按一下「Generate」。
- 直至「BUILD SUCCESSFUL」。
按照以下步驟輸入資料:
- 開啟Android Studio,選擇「Import project(Eclipse ADT, Gradle, etc.)」。
- 選擇「MyDemo55」。
- 按「OK」。
- 在電腦上選擇製作好的App Icon (e.g. 192 X 192 px)。
- Android Studio預設App Icon檔案名稱為"ic_launcher.png",我們可以用同一個檔案名稱。
注意: 假設我們App Icon檔案名稱為"ic_launcher_mydemo55.png"。 - 選擇App Icon,再在鍵盤上按「^C」,則「Copy」,再在Android Studio的「drawable」folder內按「^V」,則「Paste」。
- Android Studio會自動把App Icon(192 X 192 px)放在res\drawable-hdpi\ folder內。
- 按「OK」。
- App Icon " ic_launcher_mydemo55.png" 就會放在(192 X 192 px)放在res\drawable-hdpi\ folder內。
- 在鍵盤上按「Delete」鍵,刪除Android Studio預設的App Icon " ic_launcher.png"。
- 如果大家把Android Studio預設的App Icon " ic_launcher.png"更改為" ic_launcher_mydemo55.png",就要在AndroidManifest.xml內更新App Icon名稱。
- 更新App Icon檔案名稱為"ic_launcher_mydemo55"。
注意: 檔案名稱不須要加上".png"。
- 把智能電話連接電腦。
- 選擇「Run」。
- 再選擇「Run」。
- 選擇「Android」。
- 如果智能電話連接電腦成功,就可以選擇已連接的智能電話。
- 再按「OK」。
- 您設計的App Icon就成功顯示在智能電話上。
- 按App Icon,就會顯示LibGDX的Hello World首頁。