universal版app我流製作心得＆iPhone6 解析度揭密

這篇網誌的iPhone6的資料主要是參考國外的這篇"iPhone 6 Screens Demystified"介紹，
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
加上個人製作unversal版的心得匯整紀錄。

前幾天是一年一度的apple發表會，
對app/遊戲開發者來說最重要的就是iPhone6 / iPhone6 plus的發表，
又多了一個新的螢幕規格＠＠"
(iPhone6的解析度連在搞怪的Android都很少見)

對於要製作universal(通用)版本的開發者來說，
最好是提前就把所有可能的螢幕規格尺寸及比例在初期就事先考慮進去，
這樣在做UI跟整體美術畫面發想的時候，
可以預先做設計，
絕對會比事後看到再修改調整的好。

基本上現在的各種開發工具都很方便，
大部份都可以做到在模擬的環境中即時預覽不同解析度的效果，
但是對於想做到Universal的app or 遊戲，
每多一個解析度，
就需要多測試一次，
就算工具很方便,
但是還是要不斷切換測試確認，
但好處就是完成之後就可以一次發佈到多個平台。

關於iOS目前的解析度共有：

iPhone4/s:      640x960       (320x480   retina 2倍密畫素)
iPhone5/s:      640x1136     (320x568   retina 2倍密畫素)
iPhone6:         750x1334     (375x667   retina 2倍密畫素)
iPhone6plus:  1080x1920   (414x736   retina 3倍密畫素)

可以看到新增的iPhone6plus最特別!
它的螢幕尺寸是1080x1920，
但是仔細看原始解析度414x736跟1080x1920對不起來，
414x736的3倍密畫素是1242x2208，
所以iPhone6plus其實是先3倍密畫素後再縮小一些塞進1080x1920的螢幕裡，
這樣理論上來說畫質是會更細膩，
雖然還沒看過實機，但我想比起有沒有retina2倍密畫素，
retina2倍密跟retina3倍密肉眼其實應該不太容易辨識吧@@"

個人認為實際在製作圖像時，
如果想節省檔案容量，
用414x736的2倍818x1472去做，
在iPhone6 plus上應該看起來就很接近retina了。

而比例部份，
iPhone6跟iPhone6 plus雖然又變大變長了，
但幸好比例很接近iPhone5的16:9，
所以大致上來說只要在雛形圖設計時有做到4:3跟16:9的考量，
4:3用1024x768，16:9用640x1136，
(個人習慣再加一個640x960)
這樣比較方便放在同一張圖裡檢視，
如下圖，

再換用色塊來看會更清楚各各解析度的尺寸差異

重疊在一起

這樣就可以確定哪些需要滿版的物件在三種不同比例框線的範圍會如何呈現了，
而有需要retina的部份在輸出時在做放大2倍的動作(針對向量圖)，
基本上只要做到這幾個比例都能做到填滿畫面，沒有黑邊，
(簡單來說就是背景圖的部份要能填滿畫面，
HUD抬頭顯示器的部份就用device width減去留白的寬度動態調整)
就能做到兼顧所有iOS跟Android的Universal需求了。