2016年4月18日 星期一

開發日誌-0104 Roll Turtle - Preview Video 完成


Roll Turtle 的 app store Preview Video 製作完成 \(^o^)/
前一次製作 Roll Turtle 的影片是去年(2015)準備參加東京電玩展時,
看了一下 Youtube 上顯示的日期,
一轉眼已經是7個月前的事啦!

當時的影片是屬於 Trailer 預告片的形式,
主要是報名時用來提供給東京電玩展的審查委員看看這是什麼樣的遊戲,
並且可以在展場的攤位上播放給參觀的民眾看,
影片時間長度由自己任意發揮,格式也沒有任何限制,
簡單說就是愛怎麼做就怎麼做,自己爽就好 (゚∀゚ )
所以做了一隻1分14秒的影片。

Roll Turtle - Official Trailer Tokyo Game Show 2015 

而這次製作的是要放在 app store 上的 Preview Video,
除了影片長度限制在30秒內,
包括尺寸,影像壓縮比,音樂編碼等格式,apple 都有嚴謹的規範需要遵守,
當然 apple 官方也提供了詳細的文件資料供參考,

這個東西看起來簡單,
但真的實際做下去就會發現,
要做到好,做到完美符合全機種規範,還蠻花時間的 @@"


如同這張官方的說明圖片,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 ,
剛好可以借來錄製遊戲畫面素材,有沒有這麼剛好哈哈哈 ( ´∀`)
真的太感謝她了 (o゚ω゚o)

理想的製作順序是由大到小,
如果先製作 1080x1920 的話,
就可以拿 1080x1920 的尺寸轉出一樣是 16:9 的 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 影片(・∀・)

只有30秒,要專心看,不小心眨個眼睛可能就播完啦。



2 則留言:

  1. 好讚喔!想下載來玩~
    昨天有看當您在Gamesalad上發文!期待完成品上架><"

    回覆刪除
    回覆
    1. 很高興你喜歡 Roll Turtle :)
      正在做最後的上架準備相關工作,
      Gamesalad的官方論壇有很多有用的資料,也有很多熱心的高手,
      遇到問題我也蠻常去那邊晃晃,通常都會滿載而歸!

      刪除