GameDesign 板


LINE

無音樂好讀圖文網誌版 http://kirafugames.blogspot.tw/2016/04/0104-roll-turtle-preview-video.html ==================== 開發日誌-0104 Roll Turtle - Preview Video 完成 Roll Turtle 的 app store Preview Video 製作完成 \(^o^)/ 前一次製作 Roll Turtle 的影片是去年(2015)準備參加東京電玩展時, 看了一下 Youtube 上顯示的日期, 一轉眼已經是7個月前的事啦! 當時的影片是屬於 Trailer 預告片的形式, 主要是報名時用來提供給東京電玩展的審查委員看看這是什麼樣的遊戲, 並且可以在展場的攤位上播放給參觀的民眾看, 影片時間長度由自己任意發揮,格式也沒有任何限制, 簡單說就是愛怎麼做就怎麼做,自己爽就好 (゚∀゚ ) 所以做了一隻1分14秒的影片。 https://youtu.be/bKcBOzYxZhk
Roll Turtle - Official Trailer Tokyo Game Show 2015 而這次製作的是要放在 app store 上的 Preview Video, 除了影片長度限制在30秒內, 包括尺寸,影像壓縮比,音樂編碼等格式,apple 都有嚴謹的規範需要遵守, 當然 apple 官方也提供了詳細的文件資料供參考, iTunes Connect Developer Guide App Preview Resolutions 這個東西看起來簡單, 但真的實際做下去就會發現, 要做到好,做到完美符合全機種規範,還蠻花時間的 @@" 如同這張官方的說明圖片,apple一共有5個機型為大方向, 扣掉 Roll Turtle 目前不會上架的 apple tv 後可以歸納出4種影片尺寸, 5 Series > 640 x 1136 iPad and iPad Pro > 900 x 1200 iPhone6 > 750 x 1334 iPhone 6 Plus > 1080 x 1920 一開始是覺得, 只要做一種,就可以用那一種去自動產出其他尺寸的,應該不難。 但是實際上並沒有辦法這麼做, 仔細觀察後會發現,比例大致上分成4:3與16:9兩種, 4:3 的是 iPad and iPad Pro(900x1200) 16:9的是 5 Series(640x1136)、iPhone 6 Plus (1080 x 1920) 其中又有一個 iPhone 6 是不屬於4:3跟16:9任一種, 自己有著特殊的尺寸比例。 也就是說即使是採取最有效率的做法, 同樣的內容也要做三次,4:3、16:9、750 x 1334 當然如果不在乎影片在不同的裝置上有黑邊,沒有填滿畫面, 那就直接不管它,用一個格式硬轉再去塞全部裝置就好, 但那並不是一個好的做法 ( ̄ー ̄) 由於以上種種, 再加上手邊只有 iPod Touch 5,所以只能先從 640x1136 開始做起, 然後再用佩宜的 iPad mini2 製作 900x1200 的尺寸, 1080x1920 的尺寸只有透過 iPhone 6 plus 才能錄製, 因為手邊並沒有 iPhone 6 plus, 原本打算放棄,想用 640x1136 的去輸出成 1080x1920, 但佩宜的朋友剛好來家裡玩,剛好用的是 iPhone 6 plus , 剛好可以借來錄製遊戲畫面素材,有沒有這麼剛好哈哈哈XD 真的太感謝她了 (o゚ω゚o) 理想的製作順序是由大到小, 如果先製作 1080x1920 的話, 就可以拿 1080x1920 的尺寸轉出 640x1136 , 這樣倒過來做的話變成多做一次, 但是先前已經分別先做過2次,640 x1136 跟 900x1200 的了, 分鏡已經熟到不能再熟, 當天下午只花1個多小時就把要使用的遊戲畫面素材錄製完成。 最後就是 iPhone 6 的 750 x 1334, 由於沒有 iPhone 6,再加上實在不想再剪一次了(一樣的東西已經剪3次了) 所以開始動歪腦筋, 它等於是再長高一點的16:9,跟16:9真的只差一點點, 就算用改格式的方式去硬轉, 在保持原比例的狀態,等於只要裁切掉上下方一點點就可以了, 比起4:3與16:9的差距,是真的很難讓人察覺出來的, 剛好找到國外有人分享,使用 Quick Time 7 pro, 可以在不改變影片編碼,固定比例的情形直接custom size, 到此為止,終於搞定全部版本的 app store Preview Video了。 Quick Time 7 pro 的方便功能 除此之外, 以往都是使用 adobe 的 Premiere 來編輯與輸出影片, 這一次經過獨立遊戲開發者朋友的推薦,用了 iMovie 來製作, 真的是超方便超直覺超好用的, 最棒的一點是預覽超快速,正確一點來說根本就不需要預覽, 直接游標移上去就是所見即所得,連點都不用點 (°Д°) 軟體也很輕量化,做什麼動作速度都超快! 比起 Premiere,用 iMovie 製作影片真的是一種享受, 而且 iMovie 就是 apple 自家的工具, 直接內建了 "app Preview Video" 的選項, 選這個項目開始製作, 就完全不用煩惱輸出時的影像編碼以及聲音格式問題, 完全都幫你貼心設定好好的符合 apple 標準, 編輯介面與功能也超級好用超直覺, 不只是 app store Preview Video, 以後不管是需要製作什麼類型的影片, 應該都會用 iMovie 來做為主要的影片編輯工具了(^ω^) 如果不是用 iMovie 的話,要照這個apple規範的格式來製作 App Rreview iMovie 裡面的專案類型直接就有 App Preview 輸出類型也有 App Preview, 按下去就一鍵輸出成apple要求的格式,不用煩惱其他問題啦^^ 接下來就是關於 Roll Turtle 的 Preview Video 內容的製作了, 由於只有短短的 30 秒, 要放進什麼內容真的是很讓人苦惱的一件事, Roll Turtle 一共有 5 個不同的世界, 製作方向是,每個世界至少都要在影片中呈現到,各挑一個關卡出來, 光是這樣,如果時間平均分配,每個世界就只有不到 6 秒能呈現 Σ(°Д°; 再加上把 Boss 關這個重要的特色也放進去, 最後再秀一下標題,每個世界就只剩個3~4秒了, 原本擔心這樣時間分配會不會太短, 但是完成後實際看起來的感覺比起東京電玩展的 Trailer 緊湊很多, 結果比預想的好耶 (≧∀≦) 只有30秒就不要想放什麼故事去鋪陳啦,打個噴涕的時間影片就跑完了... 音樂與音效的部份是比較費工的, 必須等畫面的部份完成後再配上去,而不是直接使用遊戲中的音樂音效, 一來是因為透過傳輸線接 QuickTime 錄製裝置畫面會有電波雜音, 一來是這樣的串接方式,背景音樂不太可能跟著3~4秒就切換一次, 那樣會讓音樂聽起來非常奇怪, 所以包括音效在內的音軌,都直接分離刪除後重新對時間軸放上去, 音樂的部份還好,挑一個30秒左右想要的區段,做好淡入淡出即可整段放上, 音效就比較麻煩一點,必須一個影格一個影格去對準後再放上時間軸。 最後就來看看完成後的 Roll Turtle - Preview Video 影片(・∀・) https://youtu.be/1L-FVWvXaBY
只有30秒,要專心看,不小心眨個眼睛可能就播完啦。 ============================================================== Roll Turtle官網 http://rollturtle.strikingly.com 對rollTurtle開發進度有興趣的朋友歡迎到facebook專頁按讚追蹤喔:) https://www.facebook.com/RollTurtle -- 我有一顆熱愛A.C.G的心 千萬別忘了當初選擇這條路的決心和感動! http://kirafugames.blogspot.tw --



※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.85.51.214
※ 文章網址: https://webptt.com/m.aspx?n=bbs/GameDesign/M.1460990998.A.5E1.html ※ 編輯: waldfantasy (219.85.51.214), 04/18/2016 22:50:23 ※ 編輯: waldfantasy (219.85.51.214), 04/18/2016 22:58:29 ※ 編輯: waldfantasy (219.85.51.214), 04/18/2016 23:01:19 ※ 編輯: waldfantasy (219.85.51.214), 04/18/2016 23:13:04
1F:推 dreamnook: 04/19 01:33
2F:推 BeStronger: 嗚喔,好棒! 04/19 13:03
3F:→ waldfantasy: 感謝樓上喜歡 ^^ 04/20 10:39







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燈, 水草

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

TOP