2014年9月18日 星期四

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需求了。

10 則留言:

  1. 我看蘋果發佈會時,應該有說到這一段,只要是之前是基於iphone5的16:9而製作的app,就算是不調整app的任何東西,直接放進iphone6/6 plus裡,都可以完好沒黑邊的填滿畫面,那一段是拿CNN的app來當例子說明的,是否真如我理解的這樣?要不要重看一遍發佈會影片求證看看?

    回覆刪除
    回覆
    1. 沒有錯,
      iPhone6 / iPhone6 plus比例跟iPhone5非常接近,
      只差在解析度不同.

      要做到看起來更漂亮,
      圖的解析度就要下功夫.

      刪除
  2. 您好像繪圖是用flash cs來畫的??圖的解析度要下功夫,最方便的方法,好像就只能用flash和illustrator這兩套來畫了吧?(我的app也是用flash來畫),您知道有更好的繪圖工具可另選擇嗎?

    回覆刪除
    回覆
    1. 對,我是用flash,
      主要是向量圖放大縮小不失真,
      要修改的彈性也比較大,
      要製作高解析的2D遊戲,
      用向量圖是比較理想的做法,

      當然點陣圖也不是不行,
      不過花費的精力會更多.
      但是完成的效果往往也更吸引人.

      向量工具很多,
      但最有名的而且比較多人用的據我所知就是你說的這兩套了.

      刪除
    2. flash cs雖最有名,但它真的超吃記憶體,像我mac只有4G記憶體(硬體限制,無法再加大了),每次打開它都要等好久,彩球狂轉,還要關掉很多其他的軟體才能跑,蠻討厭的,畢竟flash並不是單純的繪圖軟體,它還有做動畫和寫程式碼的功能要載入,,所以不知您知不知道還有什麼體積比較小的單純向量繪圖軟體可以用?最好繪圖方式也和flash的方式一樣,也最好是免費,mac上用的,我上網找,好像資料不是很清楚,,謝謝您了。^_^

      刪除
    3. 真的愈更新愈肥,
      所以我其實有保留早期的flash8,也是我個人最喜歡的版本
      開起來速度很快,執行效能也很好,
      反正目前也用不到as來做東西,
      純粹要畫圖的話8就很夠用了,軟體不見得愈新愈好

      至於其他套向量軟體我就真的不太清楚了,
      有聽過一些但都沒留意也沒記住,
      因為一直以來還是falsh的泛用性最高,
      如果你有找到不錯用的,
      也請分享一下吧:)

      刪除
    4. 我知道的是,有一套ipad上的向量圖繪圖軟體,叫做inkpad,是免費的,我一直沒時間去try,所以不知道好不好用,您要不要當白老鼠試試看 ^_^,用ipad軟體應該就沒載入過慢過肥的問題了,還可隨時作畫,只是做畫完要把圖導入電腦這一動作罷了。

      刪除
    5. iPad的話用手指頭粗粗的我沒辦法作畫@@"
      iPad的觸控筆其實也很粗,
      真的要到能在平板上畫圖,
      一定要動到硬體的費用,還是要買wacom HD才好用.
      那個價錢很驚人,等之後有賺錢才能考慮..

      刪除
  3. 謝謝,這篇文章對我幫助很大:D

    回覆刪除