項目 divider 尚未註冊或是沒有一個 view.php 檔案.

空氣透視是什麼?運用空氣透視增添遊戲畫面的層次感|遊戲美術入門

前言

嗨嗨,大家好呀,我是Yellow,好久不見啦!

上次我們為大家說明了透視——更精準地說是「點透視」的用法,是以視平線為基準,並依照「消失點」的數量,去延伸繪製的方式。

如果還沒看過上一篇的人,可以從這邊過去看看👉遊戲場景透視解析!一次了解場景設計中的透視手法|遊戲美術入門

點透視是以視平線為基準,並依照「消失點」的數量,去延伸繪製的方式
點透視是以視平線為基準,並依照「消失點」的數量,去延伸繪製的方式

我們可以看到,使用點透視所繪製的空間都會大幅進行收縮,每個物件非常立體。

這時大家會不會有疑問呢?

像「咦?但我看某些遊戲他的場景明明都是平面的,各個物件都不立體,卻還是有非常優秀的深度感耶!這是為什麼呢?」

又或是「我明明完全照點透視的畫法畫了場景,可是上完色後卻還是感覺很平面……為什麼呀?」

這都跟場景的顏色搭配有關係哦!只要將不同層級的物件妥善配色的話,就算物件不立體,仍然可以讓畫面富有層次感;反之,如果搭配的顏色不妥,物件畫得再好再立體,也可能依然平面,沒有層次。

而這便是今天我們要聊的——只要掌握配色手法,即使圖片完全平面,也能打造豐富深度變化的「空氣透視」法哦!

什麼是「空氣透視」

空氣透視與上次介紹的點透視都是透視法的一種。

點透視是以生活中物體近大遠小為概念繪製的方法,每個物件都是基於事先設定的視平線與消失點進行收縮來處理的。

生活中離自己近的東西較大,遠的東西則較小
生活中離自己近的東西較大,遠的東西則較小
以近大遠小與視線端點的收縮來繪製的方法便是點透視
以近大遠小與視線端點的收縮來繪製的方法便是點透視

而空氣透視則是源自大氣中光線、雨霧、煙塵等折射,使人們看到近處的景物時,會比遠處的景物濃重、色彩飽和、清晰度高等視覺現象,並將其應用於繪畫上,藉此來打造「層次感」的方式。

最具代表性的,便是李奧納多·達文西的作品了,譬如名作《蒙娜麗莎的微笑》就運用了空氣透視的手法,我們可以發現,他模擬大氣效果,將前方人物與後方背景的顏色、輪廓做出區隔,使畫面深度大幅增加,突出前方層次,也讓觀者視線能完全集中在人物身上。

大氣中雨、霧、煙塵經過折射,使人們產生遠近物色彩、清晰度不同的印象
大氣中雨、霧、煙塵經過折射,使人們產生遠近物色彩、清晰度不同的印象
以色彩與清晰度模仿大氣效果,來塑造遠近層次的方式便是空氣透視
( 李奧納多·達文西《蒙娜麗莎的微笑》)
以色彩與清晰度模仿大氣效果
來塑造遠近層次的方式便是空氣透視
( 李奧納多·達文西《蒙娜麗莎的微笑》)

這兩者雖是應用不同原理來塑造遠近,卻並非需要擇一使用,更多時候是相輔相成的。

若是物體沒有大小之分,就不易打造距離感;而如果沒有在顏色上做搭配,則可能讓整個場景看起來太過緊湊、混亂,較難看出主客體之間的關係,也會因此看起來過於平面。

物體若沒有在顏色上做搭配,較難看出主客體之間的關係
物體若沒有在顏色上做搭配,較難看出主客體之間的關係

結合了空氣透視的畫面能夠讓環境看起來更寬廣,給人更為分明的層次,將其運用在遊戲中,平面的圖片一下就有了空間感,同時讓畫面主體更突出,有加成的效果。

運用空氣透視能讓場景有更分明的層次
(《Alto’s Odyssey》)
運用空氣透視能讓場景有更分明的層次
(《Alto’s Odyssey》)

那究竟要如何打造空氣透視呢?這時我們可以從色彩中的「色相」、「明度」、「彩度」,以及「清晰度」的差異來塑造豐富的層次哦!

如何打造「空氣透視」

區分前、中、後景

要想打造空氣透視,首先必須先把物體的遠近明確劃分出來,才能協助我們更有效的塑造層次。

而最基本的,便是以「前景」、「中景」及「後景」來區分畫面上的物件。

這是為了讓我們能更有邏輯的去規劃每層透視的範圍,舉例來說,同屬前景的物件配色範圍會更相近,才能和中、後景的景物做出區別,達到塑造層次的目的。

我們以下方圖片為例,距離最近、最前方的草叢便是前景,中間的木棧道與草叢為中景,較遠的樹、雲朵和最後的藍天則為後景。

打造空氣透視從區分前、中、後景開始!
打造空氣透視從區分前、中、後景開始!
打造空氣透視從區分前、中、後景開始!

規劃好前、中、後景後便可以著手處理空氣透視啦!

以「色彩」變化打造透視

色彩是空氣透視的首要變化元素,在大氣渲染下,不同距離的景物就會有不同的顏色。而我們將色彩三要素——「色相」、「明度」及「彩度」拆分開來,一個一個來看他們對於空氣透視都有什麼樣的效果吧。

色相

在色彩學中,越靠近紅色的顏色即為暖色,接近藍色的顏色則為冷色。在兩者明彩度相近的情況下,冷色會較暖色看來更為收縮,給人的感覺就更靠後。

冷色給人感覺收縮,也較為靠後
冷色給人感覺收縮,也較為靠後
冷色給人感覺收縮,也較為靠後

而生活中的景物也會隨著距離產生色澤的變化,當物體離我們越遠,經過大氣中的微塵粒子折射,景物會愈趨近於藍色調。

越遠的物體會愈趨近於藍色調
越遠的物體會愈趨近於藍色調
越遠的物體會愈趨近於藍色調

這樣的原理也能應用在空氣透視上,若是在後方物體(如後景)疊加上藍色,便能協助增加物體的距離感與空氣感,不僅能夠提升物體的層次,亦能使整體環境縈繞著輕盈及空靈的氛圍。

在後方景物疊加藍色調,能有效讓物體後退,塑造空間感
亦能使環境縈繞著輕盈及空靈的氛圍
在後方景物疊加藍色調,能有效讓物體後退,塑造空間感
亦能使環境縈繞著輕盈及空靈的氛圍

明度

大氣也會大幅影響遠近物的明度變化,其中景物距離越近顏色就愈深、愈濃,反之則愈淺、愈淡。而明暗也是人眼能最敏銳感知差異的要素,因此,我們只要掌握遠近物體的明暗對比,便能有效的塑造深度。

在景物中,物體越近顏色越深,越遠顏色則越淺
物體越近顏色越深,越遠顏色則越淺
物體越近顏色越深,越遠顏色則越淺

在一開始規劃前、中、後景的色彩時,便可先從明度開始編排。以下方範例圖來看,筆者在最前景壓了較深的重色,中景則規劃了適中的灰色調,較遠的後景以淺色處理。

只要將明度妥善編排,後續無論添加怎麼樣的色相或彩度,都能輕鬆呈現分明的層次。

妥善編排明暗,能輕鬆呈現分明的層次
妥善編排明暗,能輕鬆呈現分明的層次

彩度

除了色相、明度的差異外,彩度也會因空氣渲染而改變。

在大氣的折射下,近景的飽和度會比較高、色彩更飽滿厚實,而遠處的物體經過渲染則會讓飽和度降低,失去原有色彩,整體會看起來較為黯淡、混濁。

前方物體會較後方物體有更飽和的色調
前方物體會較後方物體有更飽和的色調
前方物體會較後方物體有更飽和的色調

同樣的,我們能將這個原理應用在場景中。只要減少後景的彩度,使前後物體鮮明度呈現對比,前者鮮豔,後者黯淡,就能拉長環境深度,令整體空間變得更加寬廣。

降低後景彩度,使前後物體鮮明度呈現對比,就能拉長環境深度
降低後景彩度,使前後物體鮮明度呈現對比,就能拉長環境深度

以「清晰度」變化打造透視

聊完「色彩」對於空氣透視的影響後,我們接著來看看調整「清晰度」會產生怎麼樣的變化。

大家可以觀察下方圖片的海面,我們可以發現,相同的海面,在距離不同時所呈現的細節會有多寡的差異。越靠近的水面漣漪就越清晰、細節分明,而遙遠的水面幾乎沒有細節,只有模糊成一片的輪廓。

距離越靠前細節越清晰,越靠後輪廓越模糊
距離越靠前細節越清晰,越靠後輪廓越模糊
距離越靠前細節越清晰,越靠後輪廓越模糊

想以清晰度變化打造透視,我們可以從降低後景區域的細節開始,接著削弱輪廓、甚至使其融合於背景中,這樣的做法可以大大加強深度感,同時細節的強弱差異也可使前、中景更加顯眼,將玩家目光鎖定在前方重要物體的資訊上。

細節多寡

想在細節強弱做出區別,可以從物體本身的肌理紋路,以及點綴物件的數量下手。

舉例來說,筆者便會在圖片焦點的中景,和前景的葉子上,繪製更精細的紋路,並且增加更多屬於點綴物件的碎石塊、小草,來豐富前、中景的細節,而後景則保持簡單的輪廓即可。

靠前的景物能適當增加肌理、物件細節
而靠後的物件僅保持簡單輪廓即可
前面與後面景物的處理方式
最後面的物件保持簡單輪廓即可
靠前的景物能適當增加肌理、物件細節
而靠後的物件僅保持簡單輪廓即可

遠景模糊

若想再加強深度表現,或是想增加多一點層次,卻不想讓場景太過複雜搶走前方物體的目光,也可以將遠景做模糊處理,以使視線更集中在前方,突出主體,達成層次豐沛的效果。

若想加強深度表現,可以將後景模糊,使視線更集中在前方
若想加強深度表現,可以將後景模糊,使視線更集中在前方

遊戲場景中的「空氣透視」

在遊戲中,不乏有空氣透視的利用。除了CG圖、概念圖與點透視搭配的應用,在2D平台類的動作遊戲,或是3D遊戲場景中也都能看到空氣透視的身影。

接著就讓我們來看看這些優秀的例子吧!

大家也可以觀察看看,他們都是運用哪些提到的手法,來打造優異深度感的哦!

(《英雄聯盟》)
(《英雄聯盟》)
(《第5人格》)
(《第5人格》)
(《Dead Cells》)
(《Dead Cells》)
(《Hollow Knight》)
(《Hollow Knight》)
(《Kena: Bridge of Spirits》)
(《Kena: Bridge of Spirits》)
(《薩爾達傳說 曠野之息》)
(《薩爾達傳說 曠野之息》)

結語

不知道大家對於空氣透視是否有一定的了解了呢?

空氣透視是打造深度絕佳的方式,即使上手了點透視,接著仍需要學會如何打造空間感,否則視覺上依然會髒髒雜雜或是過於平面,透過兩者的互相搭配,就能讓整體空間達到上乘的效果哦~

而若是對場景配色感到苦手,也可嘗試看看本篇的方法來繪製看看,或許能夠幫助你提升畫面層次,讓圖片變得更有氛圍哦!

我是Yellow,我們下次見囉,掰噗!

空氣透視的示意圖

參考資料

  1. 用空間襯托主體的方法-大氣透視法(霧、空氣遠近法、空間感)
  2. 【真相技法】- 達文西的空氣透視法 Atmospheric Perspective

圖片來源

  1. 英雄聯盟官方網站
  2. 第五人格官方網站
  3. Dead Cells – Steam
  4. Kena: Bridge of Spirits – Steam
Yellow
Yellow

以漂漂畫面為食的三角形生物。

身為工讀生球球的直屬上司,我可沒有積欠薪水ㄛ。