MacDev 板


LINE

紀錄一下自己實際製作universal版app的一點心得. 分享給有興趣的朋友參考:) 好讀無音樂網誌版 http://kirafugames.blogspot.tw/2014/09/universalappiphone6.html 這篇網誌的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需求了。 -- 我有一顆熱愛A.C.G的心 千萬別忘了當初選擇這條路的決心和感動! http://kirafugames.blogspot.tw --



※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.85.51.214
※ 文章網址: http://webptt.com/m.aspx?n=bbs/MacDev/M.1411008211.A.8FC.html
1F:→ nobody1: 推 09/18 18:02
2F:推 pttppp: 推。universal 裡的pad好像給漏掉了XD 09/20 09:38
3F:→ waldfantasy: 768x1024的解析度就是pad的:) 09/20 13:58
4F:→ TarHeel: 先3倍再除以1.15... 這不是搞死人嗎 系統縮圖就不完美了 09/21 19:27







like.gif 您可能會有興趣的文章
icon.png[問題/行為] 貓晚上進房間會不會有憋尿問題
icon.pngRe: [閒聊] 選了錯誤的女孩成為魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一張
icon.png[心得] EMS高領長版毛衣.墨小樓MC1002
icon.png[分享] 丹龍隔熱紙GE55+33+22
icon.png[問題] 清洗洗衣機
icon.png[尋物] 窗台下的空間
icon.png[閒聊] 双極の女神1 木魔爵
icon.png[售車] 新竹 1997 march 1297cc 白色 四門
icon.png[討論] 能從照片感受到攝影者心情嗎
icon.png[狂賀] 賀賀賀賀 賀!島村卯月!總選舉NO.1
icon.png[難過] 羨慕白皮膚的女生
icon.png閱讀文章
icon.png[黑特]
icon.png[問題] SBK S1安裝於安全帽位置
icon.png[分享] 舊woo100絕版開箱!!
icon.pngRe: [無言] 關於小包衛生紙
icon.png[開箱] E5-2683V3 RX480Strix 快睿C1 簡單測試
icon.png[心得] 蒼の海賊龍 地獄 執行者16PT
icon.png[售車] 1999年Virage iO 1.8EXi
icon.png[心得] 挑戰33 LV10 獅子座pt solo
icon.png[閒聊] 手把手教你不被桶之新手主購教學
icon.png[分享] Civic Type R 量產版官方照無預警流出
icon.png[售車] Golf 4 2.0 銀色 自排
icon.png[出售] Graco提籃汽座(有底座)2000元誠可議
icon.png[問題] 請問補牙材質掉了還能再補嗎?(台中半年內
icon.png[問題] 44th 單曲 生寫竟然都給重複的啊啊!
icon.png[心得] 華南紅卡/icash 核卡
icon.png[問題] 拔牙矯正這樣正常嗎
icon.png[贈送] 老莫高業 初業 102年版
icon.png[情報] 三大行動支付 本季掀戰火
icon.png[寶寶] 博客來Amos水蠟筆5/1特價五折
icon.pngRe: [心得] 新鮮人一些面試分享
icon.png[心得] 蒼の海賊龍 地獄 麒麟25PT
icon.pngRe: [閒聊] (君の名は。雷慎入) 君名二創漫畫翻譯
icon.pngRe: [閒聊] OGN中場影片:失蹤人口局 (英文字幕)
icon.png[問題] 台灣大哥大4G訊號差
icon.png[出售] [全國]全新千尋侘草LED燈, 水草

請輸入看板名稱,例如:Tech_Job站內搜尋

TOP