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