Squash and Stretch 擠壓與伸展

喺動畫嘅世界入面,好多時間我哋會將動作誇張化,例如一個波彈嚟彈去本身喺現實世界應該係咁

Duh-Duh-Duh-Boo

咁又冇乜問題嘅,不過悶左啲囉。

咩叫誇張化?睇返唔同嘅動畫,大部份動作都會使用到好多誇張化嘅Squash and Stretch技巧,例如Tom and Jerry入面其中一幕咁

Ouch

喺上面嘅例子我哋睇到,個老鼠洞被拉走時有被扯長嘅效果,而Jerry撞落牆時亦有一刻扁咗,現實世界入面呢啲效果係冇可能發生,但係喺動畫入面呢個效果令到成段片顯得更輕快同有趣。因為個效果會俾觀眾覺得個物件有更具體嘅體積,重量,彈性,以及令現實世界嘅物理特性(重力,反彈力,慣性等等)更明顯,為物件賦與生命力。

咁喺 Maya 入面我哋點做到呢個效果?

前設 — Graph Editor 及基本彈彈跳

首先我哋喺 Maya 入面起個球體做個波同起一塊平面做地下先

然後我哋去 Windows -> Animation Editor -> Graph Editor

Graph Editor 係用嚟 show 選取咗嘅物件同時間嘅關係,咩意思?即係好似你睇到啲行程圖咁,會顯示隨著時間嘅推移,一件物件嘅位置。我哋依家試吓 key 啲 animation 嚟睇睇。Key 之前我哋睇睇Maya Animation 點運作先

Maya (以及差唔多所有動畫軟件)所使用嘅做 animation方法叫keyframe animation,即係將一段clip分唔同幀數,然後每一幀有相對應嘅狀態,再將幀數與幀數中間空咗嘅幀數經計算計出中間啲物件嘅狀態。而喺 Maya 入面,每個物件都有唔同嘅屬性(Attribute),我哋可以一次過key晒所有屬性(用S鍵)又或者獨立key唔同嘅屬性,以下我哋會key個波嘅X同Y平移嘅屬性,先喺 Time Slider 到將時間較到最頭,然後揀個波,再喺右手邊嘅Channel Box (如果冇㗎話就㩒Ctrl +A開啟) 選擇 Translate X 同 Y 嘅屬性,再㩒滑鼠右鍵,選擇 key selected ,兩個屬性會變成鮮紅色,再將個波移動到個波最後會喺嘅位置,再 key Translate X同Y 嘅數值。

獨立key Translate X同Y嘅屬性

依家再去返 Graph Editor ,選擇個波,會睇到以下畫面

終於見到有啲嘢出現

望返左手邊嘅 list ,我哋知道紅色線係 Translate X(橫向)嘅時間關係圖,綠色線係 Translate Y (縱向)嘅時間關係圖,你會發現

點解唔係直線(Linear)嘅

因為係Maya入面﹐佢會自動幫你將幀與幀之間加個叫 Easing 嘅處理,Easing 即係漸入/漸出咁解,一陣會再詳細講講佢嘅作用。但依家我哋只望啲屬性同時間嘅關係

由上面我哋只睇紅色線(Translate X),由 0–10 幀間,Translate X 上升咗大概一幀 (-10 至 -9),10–20幀間,Translate X 上升咗大概 2 幀,升至 -7。而20–30幀其間,我哋睇到佢上升咗4個單位,如此類推,直至過咗中間嘅幀數後,情況開始反轉,上升嘅單位愈嚟愈少,咁以上嘅關係圖話俾我哋知啲咩呢?我哋睇睇動畫係點樣。

上面嘅動畫入面我哋可以留意到個波一開始同最尾嘅速度偏慢,而中間嘅速度相對地快,我哋呢個時候諗諗究竟呢個橫向移動軌跡啱唔啱我哋用

一個真實嘅波彈吓彈吓時,會因為每下撞到地下而流失咗啲動量,而逐漸變慢,所以速度應該冇一刻係變快,每一下都係減速。咁我哋點喺Graph Editor表示?

不段變慢 =每一段時間之間(time interval)嘅位移(位置的改變)不段減少

喺 Graph Editor 入面大概係咁表示

快變慢

咁點做?我哋先係Graph Editor入面選擇Translate X 最頭嘅幀數,然後你會見到左右有兩個把手咁嘅嘢:

呢個叫 Beizer Handle ,佢可以令到一條得兩粒點嘅直線變成曲線,透過控制點嘅 Beizer Handle嚟控制條曲線嘅形狀,我哋可以喺Maya入面移動 Beizer Handle 嚟令佢變成以上嘅形狀

Ho-ray!

咁就完成咗橫向嘅動作嘅Animation,接下來我哋會處理縱向嘅動作。

我哋今次只控制 Translate Y 嘅屬性,然後 key 個波令到 Translate Y 嘅 Graph 有以下嘅形狀

記得只 key Translate Y,令頭先處理咗嘅 Translate X 嘅屬性唔受影響

我哋播放條動畫嚟睇睇

喂唔對路喎,漂吓漂吓,冇重量咁。

我哋睇吓 Graph Editor 條線有咩問題。喺 Graph Editor入面,條線喺個波撞地前同撞地後嗰一刻嘅線係冇其他線段咁斜,相對地平,正常個波嘅垂直位移應該係要有咁嘅速度

我哋首先去 Graph Editor 選擇 Translate Y 入面位置係 0 嘅 keyframe ,再使用Linear模式及Break Tangent,然後控制Beizer Curve達到理想效果。

選擇中間的Linear Tangents模式
未Break Tangent時會令兩邊的Beizer Handle同時被移動
Enable 最左手邊嘅Break Tangent模式,令Beizer Handle變成虛線
最終效果

由上面張圖我哋睇到最終條線表達著

個波係臨近最頂時嘅位移嘅改變逐漸變少(速度逐漸變低)而到底時個波嘅速度變高,並喺碰撞嘅一刻瞬間改變移動嘅方向

接下來我哋睇吓點樣做到Squash and Stretch 嘅動作

做呢個之前我哋分析一吓究竟個波應該點stretch

每一次個波加速,個波都會因為加速緊而被拉長,而每次個波遇到衝擊/阻力,就會被㩒扁。我哋可以係 Maya 透過旋轉同放大縮細嚟達至呢個效果

Translate X Curve
Translate Y Curve
Rotate Z Curve
Scale Y

當然以上的動作未盡善盡美,只作參考,需再微調,但只要明白當中原理,並用喺動畫上,做出嚟嘅動畫會生動有趣好多

Squash & Stretch Demo File: https://drive.google.com/open?id=1Jva-IbpIVrWB8cY9tFG3m5AkzQ3HKxp8

Anticipation 預備動作

你比賽跑步前都要 On your mark, set, go 咁先跑得,而預備動作就係類似嘅情況,一個物件如果冇任何預備動作,例如一個人跳起前冇踎低就跳㗎話,成個動作唔單止唔真實,物件亦會變得好生硬。因此做任何動作前都要有一套預備動作,做嘅方法同上面大同小異,利用 Graph Editor 同 keyframe插入小動作同改變速度,令動作更顯活力。

立方體碌過去之前我哋會見到佢好似有生命咁,需要用力跳著嚟自轉
更極端嘅例子,米奇老鼠嚇親後逃跑前要轉幾圈先

Staging 表演及呈像方式

每一個動作都必需有佢存在嘅原因,如果你郁咗一個物件會令你同觀眾分心,而對故事發展冇幫助嘅,咁就唔好加落去。反之亦而,如果一段動作唔引人注意但你嘅目的係要觀眾focus喺個動作到,咁你就失敗咗。

Keep the focus on what’s important within the scene, and keep the motion of everything else of non-importance to a minimum.
將重點放喺重要嘅嘢上面,將其他唔重要嘅動作減至最少

記著

"If everything screams, nothing screams" — Alex W. White

「如果所有物件都係到吸引你注意力,咁冇嘢係真正吸引緊你嘅注意力」

除咗電視入面嘅大廚外,你見唔到其他嘢有明顯移動吸引你注意力
呢幕入面雖然四周好多郁動,但因為四周元素郁得太快,令你唔會特別留意背景,主體仍然係Remy品嚐食物

Straight-ahead vs. Pose-to-pose 連貫動作法與關鍵動作法

Straight ahead vs Pose to Pose

Straight Ahead 連貫動作法:物件的keyframe之間的形態十分清楚,每一幀都好重要,成個流程好迅暢,唔會覺得動作好突然

Pose-to-Pose:顧名思義,就係只留低關鍵、重點動作,唔理中間嘅轉變,成個動作睇落會更戲劇化,更強烈

以上兩個方法可以為動作帶嚟唔同效果同感覺,令動作更具體同生動,以下兩個例子更能 show 到佢哋嘅分別

呢個例子入面可以見到塊枱布嘅pose 與pose之間都好清楚,可以見到佢嘅變形,而人物嘅動作亦感覺流暢
呢個例子入面可以見到唐老鴨爆火彈起時嘅動作完全見唔到,只清楚見到未跳時同跳起後嘅pose,令動作更sharp,突顯跳起嬲嘅效果

決定使用邊個效果前諗諗你需要嘅係強烈嘅戲劇效果定溫和流暢嘅動作先,做出嚟嘅動畫會有趣同有意思好多。實際操作會喺Slow in and out 部份提到。

Follow-through and Overlapping Action 跟隨動作及重疊動作

Weee~

“Nothing Stops in a sudden, Motion flows from one to another” — Walt Disney

「沒有任何一種物件會突然停止,物體的運動是一個部分接著一個部分的」

跟隨動作,是將物體的各部位拆解,通常是沒有骨架的部位較容易產生跟隨的動作,例如動物的尾巴,頭髮,衣服的末梢等等。

重疊動作,是將移動中物體的各部位拆解,將其動作的時間錯開,產生分離與重疊的時間差與誇張的變形,增加動畫戲劇性與表現力,達到更容易吸引觀者的目的,也強化了動畫的趣味。

重疊動作最清楚嘅例子,Elastic Girl身體每一個部份嘅動作嘅速度都唔同,亦有連帶動作

嗯。我諗上面兩張圖同個解釋都好清楚,實際操作亦會喺下面提到。

Slow-in and Slow-out 慢入(漸慢)與慢出(漸快)

如果你一直由上面睇到依家(我懷疑有幾多人真係睇晒),你會睇到我有好幾個部份嘅實際操作都話會喺呢part提到,咁係因為Slow-in-and-out / Ease-in-and-out 係動作最常用嘅技巧。

從靜止開始加速漸快是為 slow out (ease out),反之要結束時減速漸慢是為 slow in (ease in)

呢個概念經常被撈亂(我都成日搞錯),需要特別留意

以下係Easing的例子

我先為個波加個Lattice(晶格變形)

Animation -> Deform -> Lattice

然後為啲晶格點加Animation

Maya 預設 Ease-out-and-in 漸出再漸入

Maya 的預設動作係Ease-out-and-in,換言之動作係由慢變快再變慢,要令動作變Ease-in-and-out,我們只需要改變 Graph 的 Beizer Control

Ease-in 快變慢漸入
Ease-out 慢變快漸出
Ease-In-And-Out 漸入再漸出

當明白Ease in 及 Ease out 的概念時,可以利用佢達至想要嘅效果

Overlapping Action & Straight Ahead:

三行晶格嘅 easing 都唔同,所以各自中間移動速度同位移都唔一樣,最後都集合返喺一點

Overlapping Action & Pose-to-Pose

首先我哋會選擇所有有keyframe嘅屬性同所有keys

然後㩒右鍵 -> Weighted Tangents

Weighted Tangents會令到 Beizer Handle 有權重屬性,可以任意拉長縮短,之後我哋做個極端嘅 Ease-in-and-out 以及為晶格作變形

控制Beizer Handle達至強烈Ease-in-and-out
特快嘅Ease-in-and-out令中間嘅動作同形態變得唔太重要,只留低重點形態

Ease-out-and-in, Straight Ahead & Overlapping Demo File: https://drive.google.com/open?id=1eSw4g9iXxHK8Wu77uG8V2w_UjLflcXFz

Ease-in-and-out, Pose to Pose Demo File: https://drive.google.com/open?id=1vF7gzfnRaMW1l-ZKMGcr38ruCsSxtYnQ

Arcs 弧形運動軌跡

呢個同 Squash and Stretch 差唔多,但係係按著物件移動嘅路徑嚟變形,以下我哋會用一個叫follow path嘅方法嚟示範路徑變形

首先我哋用Create -> Curves Tools-> CV Curve Tool ,然後由個波嘅中心起條曲線出嚟

之後我哋先為個波起個 Lattice (晶格變形器),然後揀個Lattice再揀條線,再去 Animation Tab 揀 Constrain -> Motion Paths -> Attach to Motion Path,並選擇隔嚟嘅方格(選項),設定如下

留意 Front Axis(物件向前方嘅軸心)同 Up Axis (物件向上嘅軸心),可以改變物件移動時指著嘅方向

然後我哋可以key晶格嘅點,就好似上面做 Easing 咁,再透過 key Motion Path嘅U Value達至以下效果

Ta-Da!

Arc Demo File: https://drive.google.com/open?id=1S9ShDyAeaMIcsZ6RrQD7inSQjq_UWAwG

Secondary Action 附屬動作

附屬動作係用嚟強調主要動作,令物件及角色更生動同更具個性

呢個例子入面利用咗 squash & stretch 技巧做secondary motion,令動作更organic及生動
呢個場景入面Edna嘅頭髮嘅郁動令佢呢吓切入動作更強烈,背景飄吓飄吓嘅窗簾亦有幫助

Timing 時間控制 & Exaggeration 誇張

呢兩條可以合併做一條,正如一開頭嘅文章內所指

If you move an object more quickly or slowly than it would naturally move in the real world, the effect won’t be believable. Using the correct timing allows you to control the mood and the reaction of your characters and objects.

如果你將一個物件以超過佢應有嘅速度移動或者以太低嘅速度移動,個效果會好假,我哋要用啱嘅時間嚟控制物件所帶嚟嘅感覺

所以最重要都係呢個字

參考 Reference

要搵真實世界嘅參考先加以誇張,咁會令動作生動之餘無損佢某啲物理特性

雖然現實世界入面唔會發生呢種情況,但佢嘅動作某啲部份(重力,作用力等)都係保持著個真實性

Solid drawing 純熟的手繪技巧

我明,我做3D電腦動畫㗎喎,點解要識畫畫?

但係好多時候要理解一件物件同一個shot,我哋需要學習基本畫畫所用到嘅技巧同概念,例如比例,對比,層次,構圖,以及攝影所學到嘅焦距,構圖,移動速度等等,當做動畫做到更高層次嘅時候,呢啲基本功不可或缺,唔係㗎話我哋對事物嘅理解唔夠,會令到做出嚟嘅嘢唔夠真實。

Appeal 吸引力

做動畫時我哋要諗諗點樣用動作令觀眾鍾意佢,故事固然重要,但表達都好重要,我哋一定要考慮到角色同物件嘅個性、行為、設計、特質等等,先可以令角色更生動具體。

Magic~

Depth 深度

由於利用3D動畫軟體已經可以方便做出立體的效果,但是仍然可以擅用攝影機的功能加強景深,以突顯畫面所要表達的重點。

咩係景深?一般相機影相時只可以 focus 喺一樣物件上,其他物件都會因為out of focus而模糊咗,人類睇嘢時都係咁上下,你試吓focus係一件物件上,你會睇唔清你唔係focus緊嘅嘢,但你會見到佢係存在,只係會好唔清晰,你個腦處理唔到啲資訊咁解。我哋可以透過Maya入面選擇鏡頭再控制focal length嚟改變焦距,並利用depth of field嚟控制景深

先喺 Viewport/Outliner 揀個鏡頭
改變Focal Length嚟改變畫面

Focal Length 愈大 =Zoom 得愈近 =Long Shot

Focal Length 愈細=Zoom 得愈遠 =Wide Shot

常用攝影Focal Length有9mm, 10mm, 16mm, 21mm, 35mm, 40mm, 50mm, 60mm, 85mm, 90mm, 105mm, 120mm, 200mm, 300mm等,可以上網搵攝影鏡頭參考焦距

左:21mm 右:35mm
左:105mm 右:300mm
喺Camera入面搵Depth of Field,Enable咗佢,就會有景深

Focus Distance = 對焦嘅距離

F Stop = 光圈(數值愈細,景深愈淺,數值愈大,景深愈深)

Focus Region Scale = 對焦平面的大小(一般1就夠)

喺Display -> Heads Up Display入面Enable Object Details
然後當你選擇物件時就會見到物件同鏡頭間嘅距離
Focus Distance = 12.8, F Stop = 50
Focus Distance = 12.8, F Stop = 1.4,背景物件更為模糊

留意Focal Length會影響景深的程度,Focal Length愈大,景深愈淺,反之亦然。

Balance & Weight 平衡及重量感

做動畫時一定要留意物件嘅平衝同重量,例如一件重啲嘅物件跌落地時會比輕嘅物件反彈嘅幅度細,而一個重嘅人肥起嚟都會腳步大少啲重啲,呢啲都係透過Easing同時間控制嚟處理,我哋可以用呢個嚟表達物件嘅質感,質量同穩定度。

如果你有留意以上嘅主題,唔難發現好多嘢都需要

觀察 Observation

如果你唔觀察身邊事物同參考,並加以創意,做出嚟嘅動作都唔會細膩,更好難變具體,生動。

共勉之

--

--