搜索
第六章動畫媒體備註：可依進度點選小節6-1動畫原理簡介6-22D動畫簡介6-33D動畫簡介第六章動畫媒體第六章動畫媒體動畫已經成為一種新興時尚的必需品，而且已經無所不在地融入了現代人的生活，不論在影視媒體、網站畫面或廣告畫面的開場中都可以看見它的蹤影，甚至連各位的手機中，也能看到活靈活現的動畫佳作。尤其在目前年輕人最風靡的電玩遊戲，更是將動畫的表現發揮得淋灕盡致。通常比較精緻的遊戲，都會在遊戲中加入美侖美奐的開場動畫，或者為了遊戲關卡與關卡間的串場，常常也需要一些動畫來間接提昇遊戲的質感，並可藉由動畫劇情的展現，為遊戲加入一些令人感動的元素。＜圖6-1知名遊戲巴冷公主的開場動畫＞從廣義的角度來看，動畫原理和視訊類似，都是利用視覺暫留原理來產生畫面上的連續動作效果，並透過剪接、配樂與特效設計所完成的連續動態影像動畫。兩者間主要的區別，在於對事物及動作的描述方式不同。動畫是以繪圖軟體或手繪(如卡通)畫面內容以圖畫方式來描述，可以有比較誇張的動作出現，視訊則是以攝影機的單格拍攝實際物體的景象來呈現，所以呈現的動作與情境較為符合現實。動畫的種類包含2D動畫與3D動畫兩種。2D動畫就是平面動畫，3D動畫和2D動畫最大的差異之處可以說是模型的建立與否，在本章中都會為您詳細介紹。＜圖6-2卡通也是動畫的一種＞動畫的基本原理，簡單來說，就是由連續數張圖片依照時間順序顯示所造成的視覺效果，其原理與卡通影片相同，可以自行設定每張圖片所停滯的時間來造成不同的顯示動畫速度。也就是以一種連續貼圖的方式快速播放，再加上人類「視覺暫留」的因素，因而產生動畫呈現效果。6-1動畫原理簡介動畫撥放的基本原理-「視覺暫留」現象，指的就是「眼睛」和「大腦」聯合起來欺騙自己所產生的幻覺。當有一連串的「靜態影像」在您面前「快速地」循序播放時，只要每張影像的變化夠小、播放的速度夠快，就會因為視覺暫留而產生影像移動的錯覺。而連續貼圖就是利用這個原理，在相框中一直不斷地更換裡面的相片而已，這些照片會依照動作的順序而排列，就如同播放卡通一樣。如下圖所示：6-1-1視覺暫留例如以上的6張影像，每一張影像的不同之處在於動作的細微變化，如果能夠快速的循序播放這6張影像，那麼您便會因為視覺暫留所造成的幻覺而認為影像在運動。這時各位應該了解，動畫效果只不過是快速播放影像罷了。然而在此有一個關鍵性問題相當值得思考，就是「到底該以多快的速度來播放動畫？」，意即在何種播放速度下會人類產生最佳的視覺暫留現象？以電影而言，其播放的速度為每秒24個靜態畫面，基本上這樣的速度不但已經非常足夠令您產生視覺暫留，而且還會令您覺得畫面非常流暢（沒有延遲現象）。由於衡量影像播放速度的的單位為「FPS」（FramePerSecond），也就是每秒可播放的畫框（Frame）數，一個畫框中即包含一個靜態影像。換句話說，電影的播放速度為24FPS，這是不是意味著您所製作的動畫也該採用此播放速度呢？答案是，不一定。當然可以採用更高或更低一點的播放速度，基本上10到12FPS已經足以產生視覺暫留。不過也不是一味的調高FPS就可以解決所有的問題，過高的FPS並不保證能帶來最好的效果，並且您該考慮到電腦的等級，並且應該多在不同的平台上執行看看，以設定最佳的動畫播放速度。電腦動畫的好處就是可以利用繪圖軟體來大量節省製作每張畫框圖形的時間。例如當您打算要製作一張動畫時，可以使用繪圖軟體來製作圖檔，並將這些構成動畫的連續數張圖檔分別儲存成不同檔名的GIF檔，接著再使用動畫製作軟體(如GIFAnimator)整合這些圖檔，並針對每張圖檔設定相關的播放速度即可動畫的製作。2D動畫主要是以手繪為主，再逼真也有限，也就是2D動畫中每個景物皆以平面繪圖方式達成，如果將物體上任何一點引入2D直角坐標系統，那麼只需（X、Y）兩個參數就能表示其在水平和高度的具體位置。因此無法顯現出物體在空間中的立體感。在尚未開始說明2D動畫的原理與製作之前，首先必須對2D繪圖的座標系統有基本的認識。6-22D動畫簡介我們可以從兩個不同角度來探討2D座標系統：一種是數學XY座標系統；另一種則是螢幕XY座標系統。充份了解這兩者的特點及圖示外觀，會對各位日後在2D空間的繪圖上有相當的幫助：數學XY座標系統在XY座標系統中，X軸代表橫向，座標值是向右方遞增；而Y軸代表縱向，座標值是向上方遞增。6-2-12D繪圖的座標系統圖6-4數學XY座標螢幕XY座標系統螢幕座標和數學上的XY座標系統有所不同，也是日後動畫在電腦螢幕上呈線的真正座標系統。它的Y座標值是向下遞增的，XY座標如果為為負值的話，它會位在螢幕外的座標系統中。至於螢幕座標系統的大小，由螢幕的解析度來決定，而解析度的高低取決於顯示卡或螢幕設備的支援能力，常見的螢幕顯像解析度有「640X480」、「800X600」及「1024X768」。例如「640X480」是指X座標軸上有640個像素點(Pixel)、Y座標軸上有480個像素點。圖6-5螢幕XY座標動畫是由一張一張的圖所構成，因此對於2D圖形只需考慮所顯示景物的表面形態和平面移動方向情況即可。至於圖形的儲存方式可區分為位元影像圖（Bitmap）與向量圖（Vector）方式兩種。位元影像圖（Bitmap）也稱點陣圖式bitmappedimage)，純為像素(pixel)所組成，如果一張圖內點像素越多則圖形越細緻，最常見的副檔名就是未經壓縮的bmp和gif,jpg,等，例如一般的數位相片。6-2-22D繪圖儲存方式＜圖6-6點陣圖可講究圖像的精緻度＞從事動畫產品製作，無論是2D或3D，事前必需做好一些規劃工作，包括腳本設計、圖像動作分鏡、文字對白、造形設計、鏡頭畫面和背景繪製等等。尤其首先必須完成腳本作業與分鏡設計的前置程序。請看以下說明：故事腳本為了使動畫畫面中所有圖像、音效、角色及互動影像按鍵位置能夠清楚明嘹，讓設計者詳細掌控整個動畫鏡頭演出流程與架構，腳本設計的流暢性與合理性，因此成為動畫設計成功與否的重要關鍵。通常一個場景就是一份腳本設計，也就是在動畫作品中出現的所有物件，必須在其腳本上詳細說明即將產生的動作和方法。6-2-32D動畫製作原理簡介分鏡設計畫面分鏡設計，相當於一部電影的剪輯過程，運用邏輯排列順序的動作說故事。畫面分鏡藍圖，提供了合作團隊與個人製作影像的各項準則與控制影片演出時間的相關標示，而畫面分鏡頭草圖，更是繪製鏡頭畫面（如背景景深縮放、光影方向視點）創作設計的重要依據。圖6-7平行移動鏡頭圖6-8正面移動鏡頭另外依照2D繪圖畫面中所繪景物的層次區分，大致可分為前景、背景與移動物件三種層次。對於會移動的物件或會產生變化的景物，還必須先行繪製其中的變化表現。至於製作2D動畫有許多方法，通常可以直接利用2D動畫軟體來產生，像Flash就是一個頗受使用者歡迎的動畫編輯軟體，所製作的動畫不僅可以運用在網頁效果上，也可以製作成可執行檔來獨立播放。另一種則是利用貼圖方式產生動畫，這種方式是由一張圖接著一張圖快速地播放來產生動畫的效果，例如許多遊戲中的動畫效果都經常運用這種技巧。所謂貼圖，就是一種將影像圖片貼在顯示卡的記憶體上，再經由顯示卡呈現於螢幕上的過程，各位只要找出螢幕上圖片呈現位置的左上角XY座標及本身的長與寬，就可以運用如GDI、WindowsAPI、DirectX或OpenGL等程式設計工具等工具中的函式，將圖片貼在螢幕上了。例如一維連續貼圖，可以包含兩個部份，一個是放圖片的框框，如同日常生活的相框一樣；而另一個是圖片，也就是放在相框裡的照片一樣。如下圖所示：圖6-9影像圖片貼圖示意圖圖6-10連續貼圖示意圖另外在橫向捲軸的2D遊戲中，我們也經常以背景循環貼圖方式來產生不錯的動畫效果，也就是利用「循環貼圖」方式，不斷地進行背景圖的裁切與接合，再顯示於視窗上，所產生的一種背景畫面循環捲動的效果。以下就來簡單為您介紹2D遊戲中經常運用到的動態背景表現手法：單一背景捲動單一背景捲動的方式是利用一張相當大的背景圖，當遊戲進行的時候，隨著畫面中人物的移動，背景的顯示區域便跟著移動。要製作這樣的背景捲動效果事實上很簡單，我們只要在每次背景畫面更新時，改變要顯示到視窗上的區域就可以。例如下面的這張背景圖裡，由左上到右下畫了3個框框代表要顯示在視窗上的背景區域，而程式只要依左上到右下的順序在視窗上連續顯示這3個框框區域，就會產生背景由左上往右下捲動的效果：單背景循環捲動循環背景捲動就是不斷地進行背景圖的裁切與接合，也就是將一張圖的前頁貼在自己的後頁上，然後顯示於視窗上所產生的一種背景畫面循環捲動的效果。如下圖所示：圖6-11單一背景捲動假設地圖會不斷的捲動，則貼圖時右邊的顯像方塊所指定的圖片來源區域會逐漸變窄，消失的部份則在左邊的方塊再度貼出，其道理就如同幻燈片播放，將圖片的尾端與前端接起來，再不斷的捲動播放，如下圖所示：對於這樣的捲軸動畫，各位只要兩個貼圖指令並配合固定時間播放就可以製作，比較需要注意的就是圖片的接合問題而已，為了突顯動畫效果，還可以在捲動中加上一個人物作為位移的對比，如下圖所示：在圖中的人物事實上是靜止不動，由於背景捲動的關係，使得人物像是在進行走動，利用背景與前景的位移關係以製作出動態效果。圖6-14人物捲軸動畫效果多背景循環捲軸多背景循環捲軸的原理其實與之前所談的類似，不過由於不同背景在遠近層次上以及實際視覺移動速度並不會相同，因此以貼圖方式來製作多背景循環捲軸時，必須要能夠決定不同背景貼圖的先後順序以及捲動的速度。例如底下是我們所設計的多背景循環捲妯的程式執行畫面，畫面中出現了幾種背景以及前景的恐龍跑動圖：圖6-15多背景循環捲妯各位觀察上圖，先決定要構成畫面的貼圖順序，從遠近層次來看，天空最遠，接著是草地，因為山巒疊在草地上，接下來是房屋，最後才是前景的恐龍。進行畫面貼圖時順序應該是：天空-草地-山巒-房屋-恐龍當進行山巒、房屋及恐龍的貼圖動作時，還必須要再加上透空的動作，才能使得這些物體疊在它們前一層的背景上。決定了貼圖時的順序後，接著要來決定背景捲動時的速度，由於最遠的背景是天空。所以當前景的恐龍跑動時，捲動應該是最慢，而天空前的山巒捲動速度應該比天空還要再快一點，至於房屋與草地因為相連所以捲動速度相同，而且又會再比山巒還要快一點，如此便定出了所有背景的捲動速度：天空山巒草地=房屋由2D空間增加到3D空間，則物件由平面變化成立體，因此在3D空間的圖形，必須比2D空間多了一個座標軸。所謂3D(Three-Dimension)，其實就是三維的意思，也就是X軸、Y軸加上Z軸，多了Z軸的考量因素，使物件有了前後及景深的效果，而且可以用任何角度去觀賞物件。6-33D動畫簡介圖6-163D空間的圖形座標此外，不同於一般2D動畫的製作，3D動畫需針對不同應用環境的需求，於影像的製作過程中，必須考量場景深淺，精準地掌握雙眼視差的特性。並依據物件的形狀、材質、光線從不同的距離、角度照射在表面之上，所展現出的顏色層次感。接著還要能夠精準地掌握視差的特性，才能適當地顯現具有層次感的立體特效與影像。由於在3D空間中的物件是一種立體的外觀，而螢光幕卻是一種平面，如果要在螢幕中表現3D物體，必須將描述3D物體的座標轉換到螢幕上的2D座標系統，也就是將描述3D物體的座標點，投射到2D螢幕上。這時可使用如平行投影、透視投影、隱藏線與隱藏面的消除等方法。在探討3D動畫的製作原理之前，我們先來認識直角座標與極座標的不同與轉換。由於直角座標是以X、Y、Z軸來描述物體在3D空間中的正確座標。除了直角座標外，還有一種座標的表示方式，也常被使用在立體座標系統中物件位置的描述。極座標的作法是使用r、θ、a來描述空間中的一點，底下是直角座標與立體座標兩者的示意圖外觀：6-3-13D繪圖座標系統簡介其中X、Y、Z與r、θ、a的互換公式，必須配合三角函數來進行運算，它們之間的公式對應關係如下列三個方程式所示：arzryarxcoscossinsincos圖6-17直角座標與立體座標除了腳本設計、圖像動作分鏡、文字對白、造形設計、鏡頭畫面的基