導言：一段好的畫面給予我們的印象遠遠要比一段文字來的更加深刻，所以想要做好一個游戲，如同拍一部好電影，需要好的劇本，好的演員，好的材料背景以及好的后期，這些元素缺一不可。我們將一款游戲當做電影一樣在制作，如何用最有效的視覺表現來呈現玩法、劇情，促使整個故事更加有張力，讓游戲世界觀有一個完整的構架，希望本次的分享，可以給大家帶來一些啟發。（注：《彩虹墜入》案例分析在文章末尾）

以下為分享全文：

我們先試想一下：兩個人坐下來，A對B講一個故事，在講這個故事的過程中，通常他們腦中產生的畫面是不一樣的。如果將講述的故事情節還原成一段流動的畫面，并讓所有人在這段畫面中感同身受，那么聽一個故事是時間的藝術，而看一個畫面是空間的藝術，電影或者是游戲其實是結合了兩者。如果把這種大段的文字版的游戲方法說明變成一段畫面去闡述，它即便不飽滿或者不成熟，觀眾也會被畫面所吸引。

電影的視覺元素

當我們想要表達故事劇情的時候，具體要怎么做？首先，故事是有高低起伏的，而視覺也可以達到同樣的目的。視覺結構支撐故事結構，也就是說我們想要把故事講完整，讓觀眾或者玩家能夠從中體會到情感的話，視覺結構承擔了很大一部分比重。那么視覺結構是什么？視覺的結構由很多的元素組成，像搭建積木一樣將很多的元素搭建起來，便形成了一個可以配合講故事的視覺結構。
?

首先我們先來了解電影的視覺元素，視覺元素分為空間、線條、形狀、顏色、影調、運動和節奏。

1空間
?

空間的分類比較簡單，我將其定義為五類：深度空間、平面空間、有限空間、模糊空間和打破邊框限制的開放空間。本次我們主要分析三類基本型的空間形式，以電影《布達佩斯大飯店》為例，我們對以上三張圖的空間表現形式進行分析。

第一張圖，平面空間：在人物對話的時候，大部分的導演都會用平面空間來突出人物主體，讓觀眾看到更多的人物表情以及細節對話。

第二張圖，介于平面空間跟深度空間之間，就稱它為有限空間。

第三張圖，深度空間：深度空間的定義是將三維世界呈現在二維屏幕上產生的錯覺。它的好處是可以把更多焦點聚焦在整個場景里，而不是人物。我們應該如何去打造一個深度空間呢？

深度空間的打造
?

透視，它分為一點透視、兩點透視和三點透視。

在電影《發條橙》中，影片中的一個經典鏡頭運用了一點透視：四個主角每每在深夜里出洞作案的時候，畫面中的一點透視場景就會把觀眾帶到一種強烈的視覺沖擊情境當中，預示著接下來會有不好的事情發生。
?

電影《歷劫佳人》，整部電影都是深度空間的典型范例，如圖展示的是兩點透視的一個場景，畫面中2個消失點帶來視覺上的多樣性、透視感和極強的展示性。
?

電影《水形物語》中，運用的是三點透視，如圖，導演在敘事過程中描述主角工作的環境特征，是通過一幕幕有多點透視的深度空間，使觀眾在觀看時，能夠理解和認識到主角工作的地方是個很特別，巨大的試驗室。這就是三點透視帶來的強烈的視覺沖擊，對比出人物在場景中的渺小。
?

色彩，這是電影《瘋狂的麥克斯》中的截圖，畫面中前景是暖色，背景是冷色，雖然沒有太強的透視，但是空間的深度可以明顯地拉出來。
?

重疊，它相比前兩個關鍵詞在概念上顯得有點模糊，它是依靠著一層層疊加，把深度空間顯現了出來。電影《歷劫佳人》中的三個女性角色，通過人物的重疊擺放，與前面的男性角色形成對比，同時打造出了一個有效的深度空間。
?

細節，細節的定義是遠和近的物體細節程度不同，也是一個塑造深度空間的重要線索。

電影《荒野獵人》通過前景人物跟后景人物的對比，在對焦的細節上也形成了一個明顯的區分，營造了一個深度空間。攝影中就是相機的一點和多點對焦的應用，人物前景的發絲跟皮膚的細節，包括槍上的細節跟后景的人物都形成了一個很好的一個虛實對比，這樣就把空間打造出來了。
?

比例，比例關系就是位置的大小的對比構成了一個深度線索。例如《星球大戰》中的大小飛船，通過其大小的對比，背景和前景的對比，拉出一個深度空間。
?

位置，由于生活習慣中我們認為位置比較低的物體會比較近，固定畫面中，位置的高低也會呈現出一個深度線索。

小結：通過這些深度線索我們可以很精準地打造一個有效的深度空間，同時，一定要包含所有的要素，才可以讓我們精準、不會犯錯地去打造一個深度空間。如果沒有充分深度線索的話，手機游戲買號即使在很深的一個空間里拍攝，也有可能看起來平面。

平面空間與有限空間

平面空間，強調的是二維屏幕的平面感，表達的是深度空間的對立面。在空間中，沒有透視比例關系，顏色類似，同時相互之間沒有物體重疊，也不需要位置的遠近距離，就是打造平面空間最合適的辦法。

《花樣年華》中2個主角對話的一個場景，就是展示了有限空間，導演為了使畫面變得更平面，在圓形花紋的背景墻側面特意加了一面鏡子，鏡子反射導致了墻上的圓形花紋也變得平面了，美術設計刻意的調配也有效地打造了一個平面空間！
?

電影《花街殺人王》是有限空間的典型代表，如下圖中的外景，由于它盡量避免了物體的側面，物體幾乎都是正面排列，房子是平面，車頭平行地面朝鏡頭，整個畫面沒有透視線。雖在表現的是室外場景，但它的平面感還是非常強烈。有效地削弱畫面的透視線，會讓整個場景的線條變得非常統一，這也是一個有效的平面空間。

小結：空間的深度是一個重要的視覺元素，很多人說深度空間比較有趣，平面空間比較無聊，這其實只是比較簡單化的認知，實際上是強弱的對比關系，深度空間比較強，而平面空間比較弱。

如何使用對比與相似，是我們使用各種元素最重要的課題，使用什么樣的空間最容易體現畫面感，會由劇情來決定。

例如拍一個情景喜劇或者溫馨的愛情劇，觀眾需要把焦點放在角色本身，來關注他們的互動，我們就可以更多地去使用平面空間和有限空間。再比如拍一個動作戲，焦點在于動作而不是在于細微的語言，那么就需要一個極強有力的深度空間來表達視覺沖擊力。

總而言之，拍一個電影橋段或者制作一個有敘事的游戲關卡，如何靈活運用這些空間是美術、策劃和程序前期都需要認真考慮和討論的。

2線條
?

本文中，我們分析的主要是畫面中的線性關系，而不是所有的線條。比如，瞇著眼睛看上圖，就能發現畫面里的主要線條：橫線、豎線、斜線以及曲線。

橫線是比較和平、祥和和安穩的感覺；垂直的豎線象征著堅強、莊嚴和有力；斜線體現一種緊張與恐怖或者是快速動感的感覺；曲線是富有動感的舒緩開闊的，經常表現一些柔和的自然主題或是一些戶外的場景。線性變化是很豐富的，我們進行分類，是為了簡化用不同的線性來表達不同的故事敘事的效果感受。
?

電影《羅曼蒂克消亡史》里，上圖中明顯的平行橫線，暗示著平靜中蘊含著殺機。那么，同樣在《羅曼蒂克消亡史》中，如下圖，整體是一個豎線結構的走向，我們可以明顯地感覺到相比起來，豎線會比橫線顯得畫面感更為強烈。
?

電影《銀翼殺手》中的一幕，斜線的構成，試想一下，如果攝影師把鏡頭此時擺正的話，那么觀眾就會感受到危險和恐懼。
?

電影《瘋狂麥克斯》中的一個有動感的畫面，斜線體現了速度感與緊張感。
?

曲線會給人舒緩開闊的感覺，通常是表現一些戶外的場景，更多是表現自然風光。

3形狀
?

形狀是場景中某物體元素的形狀，也是畫面分割的形狀。屏幕一般來說是方形的，我們可以通過畫面的元素將它分割成不同形狀來幫助敘事，來表達不同的主題與氣氛，也可以通過畫面中元素的形狀來給予觀眾不同的感受。

例如，電影《我不是潘金蓮》，馮小剛導演在電影中，實驗性地使用了不同形狀的畫框來講述不同段落的故事。這種實驗性的電影敘事也經常發生在獨立游戲中，當主角回憶到過去的畫面時，畫框會變窄，當回到現實場景的時候，畫面又會重新回歸到16:9。
?

真實世界里，不同的形狀會帶給人們不同的感受，以汽車為例，方形是比較直接、有序和僵硬，圓形更多代表柔軟、自然和靈活，三角形就是冒險、激進和富有動感。按速度分的話，那么就是慢，快一點和飛速。
?

電影《閃靈》中的一個鏡頭。畫面中的三角形配合敘事，比較有侵略性，給人一種恐怖的氣氛。
?

《星球大戰》里，用三角形的形狀來強調帝國的侵略性。

小結：線條跟形狀作為重要的視覺元素，也是形成畫面形式感最重要的部分。繪畫最重要的構圖就是使用線條和形狀去表現一個畫面，怎樣合理地安排這些線條與形狀的對比強度，讓它們為敘事服務是我們要深入思考的問題。

4顏色
?

首先來看顏色的基本元素，它包括色相、飽和度、明度和冷暖。不同的顏色會帶來不同的情緒感受，有時候色調的控制可以靠燈光來控制，也可以靠美術設計來控制。

電影《英雄》就用不同的顏色，從不同角度，講述了一個故事。
?

電影《愛樂之城》中，電影的色相是由主角的情緒而變化的，例如導演把這個場景定義成了一個藍色調，后面有四張黃色的紙成為了一個重要的補色，就顯得不那么單調。明度不同帶來的感受也不同。最后來看冷暖，色調冷暖的不同給人的感覺也會不同。
?

看過電影《辛德勒名單》的人都知道，場景都是黑白色的，但這個穿紅色大衣的小女孩成為整個影片敘事和情緒起伏的關鍵點，給觀眾留下深刻的印象。
?

電影《英國病人》片段中，使用冷暖兩個調子來分割不同時空的兩個場景，構造出強烈的對比。畫面中是二戰前的回憶的段落，呈現的是暖色調。
?

二戰爆發之后，現實中的段落是一個冷色調的。

調色板，分為色彩的基本元素以及調色板本身。通常，電影會控制自己色彩的應用，根據劇情，使用相對強烈的一個色彩或者是和諧的色彩。大概分為三種方式：

第一種，通過美術設計來控制色調。電影《芬妮與亞歷山大》畫面中調合紅色為主色調，同時用了少量灰綠色，形成補色對比，使畫面保持和諧。
?

第二種，通過燈光和后期控制影片主色。電影《黑鷹墜落》中就是通過后期較色，使色調統一在一個有質感的灰綠色調當中。
?

第三種，較為特殊的同時也是一種實驗性的手法，比如電影《呼喊與細語》中，使用了極為有限的色盤-紅色，這種大膽的嘗試，可以給觀眾更強烈的沖擊感和形式感，這也是我們在做獨立游戲時最適合嘗試以及運用的這東西。

小結：色彩是直接給觀眾情感沖擊的重要元素，我們從色彩中可以直接讀出了喜悅、憂郁和悲傷各種情緒，也是電影敘事中區分不同段落的一個重要手段。

很多電影，尤其是動畫片在前期會根據劇本詳細地去設計不同段落色彩，做出色彩的分鏡表，這樣可以更精準地透過顏色來控制觀眾的情緒。

回到游戲的話，比如陳星漢的《風之旅人》中，不同的色彩對比會給用戶不同的情緒感受。其實不只是色彩，空間線條等其他元素，都可以結合劇情敘事。

5影調
?

不同的調子又分為暗調、亮調和硬調。比如上方的三張圖，前兩張同樣是在室外，但調子有明顯的區別，第一張是暗調，第二張是亮調，第三張的光線形成強烈對比的硬調。
?

電影《至暗時刻》里也有很多這種硬調場面，這部電影在前期參考了倫勃朗的油畫，這種光線有一種學術的叫法-——倫勃朗光。以前的人看倫勃朗的作品時，會吃驚認為他的畫自身會發光，是一種魔術，但其實就是一個黑白對比的過程，電影畫面中也運用了這一點，成為了一個有敘事的流動的視覺魔術。

還有同步與非同步，它指的影調布局與鏡頭主體之間的關系。例如，依仗主體布局光線都非常統一的一個畫面，那么重點突出的主體就是人物，我們稱之為同步。布局中的主體是模糊的情況下，非凸顯的狀態，主角是在暗調區里的，那么我們稱這個畫面叫做非同步。

小結：影調是一個畫面的基調，所謂畫面的質感，質感就來源于此。想要講一個什么樣的故事，是需要在前期去選擇一個合適的影調。

電影的視覺結構
?

視覺元素都是可以用來搭建的積木，那么怎么用這些積木搭建成一個房子？這些元素看起來比較復雜，但是使用起來比較簡單，就是兩個東西對比與相似，那么對比可以是電影段落中的視覺元素的對比，也可以是一個畫面中不同元素的對比，不同段落視覺上的對比與相似。它和故事的結合形成了整個電影的視覺結構。

對比
?

《變形金剛》中一個充滿著強烈對比元素的畫面。空間上，屬于充滿張力的深度空間，色塊是冷暖調的強對比，影調屬于硬調，并且畫面中包含有各種形狀的沖突，給觀眾傳達充滿動感的畫面。

相似
?

如圖，展示了一副相似元素組成的畫面。空間上，屬于有限空間，沒有透視；色彩上，體現的是一個和諧的統一調；影調是亮調；形狀與線條溝通以方形和橫線為主。所有這一切低強度的元素構成了一個相似的和諧畫面。

對比與相似

我們也可以在同一個影視畫面中同時運用對比與相似。

同一畫面中的對比與相似的運用可以造成不同的效果，比如引導視線以及并列的元素對比，都可以形成某種劇情的暗示。
?

《美國麗人》中，把兩個角色放在了兩個不同空間里，丈夫在前景是一個比較平面的空間，而妻子在背景是一個深度空間，畫面上的對比與劇情的展開是一致的，通過兩個空間的對比，說明了夫妻二人的貌合神離。充分運用了視覺元素的對比和相似，構成了視覺結構。

電影的故事結構
?

那么回到故事本身，細分故事結構為開端、沖突、高潮和結局。視覺結構與故事結構相結合的同時，一般會隨著劇情的發展，沖突強度也會越來越強。

如何使用之前說到的各種元素：空間、線條、形狀、顏色和影調來包裝一個故事？如果故事是一個旋律的話，那這些元素則是各種豐富的樂章，我們可以找到一個組合方式，讓這些樂章達到一個最好的效果。然后可以把故事情節的張力和視覺元素的強度做一個對比。故事結構上和視覺結構上大概有以下幾種不同的關系，就是恒定、漸變、段落、對比與相似。

恒定：北野武的電影，始終保持不急不緩，讓這個電影營造出一個冷靜的慢節奏。即便是這樣強烈的一個殺人的場面，其實也只是角色跟地磚形成了一個斜線，稍微加強了一點點畫面的張力。其優點是以一個旁觀者的視角去敘事，具有一種冷靜的詩意，其實畫面表現就像寫文章一樣用類似的方式敘事來形成一種自己的風格。
?

漸變：在《冷血驚魂》中，隨著一個主角精神越來越崩潰，然后從一個室外的比較亮的比較開放的空間回歸到了一個比較暗的壓抑的空間里。同時伴隨著主角精神越來越崩潰，視覺上也從深度空間變成了模糊空間，主要場景從亮色調的室外場景變成了暗色調的室內場景，所有的物體都是斜著擺放在一個無序的空間，最后打造成模糊空間。這個漸變的過程，視覺強度越來越強，就是一種漸變的視覺結構。
?

段落：段落式的視覺結構有完全不同的表現，每一段都是斷開的、跳躍的。電影《英雄》與《殺死比爾》，故事結構與視覺結構都是段落式的，不同的色彩或影調劃分出了不同的段落。
?

對比與相似的自由應用：電影《瘋狂的麥克斯》充分地利用了我們分析的各種視覺手段，對影片的視覺進行精細的控制，將故事淋漓盡致的用視覺表現了出來。
?

小結：視覺元素對比越強，畫面的緊張感就越高，視覺元素對比相似度越高，畫面的緊張程度就越低；對比是多種空間的對比，是空間和平面的對比；尺寸的對比是大與小，影調的對比是明與暗。隨著故事越緊張，視覺的對比越強烈，最終，為了達到故事的矛盾點，去除演員和音樂之后，我們就需要用視覺結構來營造這樣的矛盾和沖突感。

敘事語言與視覺語言
?

一般一本小說會有自己的語言特點，電影也會有自己的語言特點，那么建立視覺語言的方法，就是用基調、線性線索、色彩主題以及標志性場面。

基調

基調是一個電影的底色，一直伴隨著故事敘事，整個電影的基調都是不變的。

線性線索

有些電影會刻意強調一些線形，幫助建立電影的形式感，例如美版的《無間道風云》中大量的出現了這種X形的這種線條，他強調這故事中的沖突與撕裂的情緒。
?

色彩主題

色彩主題與劇情，如果能有很好的結合，可以幫助觀眾更快融入劇情。

比如電影《第六感》中，為了強調故事氛圍的詭秘，除了紅色所有顏色都做了降調處理，而突顯的紅色象征著鮮血與死亡，這也是導演最初的精心安排。
?

標志性場景

是指讓人記得住的電影場景，劇中重要的場景與主題結合，有一定的象征意義。

比如《瘋狂的麥克斯》中的場景，代表了電影中的幾個最重要的元素，機械、人性和荒漠。如果大家看過電影的話，應該記得這個在電影中出現多次的場景。
?

《少年派》這個場景，天空與海面融合在一起無法分離，象征著這段似真似幻的漂流。
?

案例分析電影-《水形物語》
?

這是一部幻想愛情電影，概念里的核心元素是水，它整個基調是較暗的藍綠色，和影片要表現的“水”的主題是契合的。除了少量的外景，電影的劇情發生在三個場景：水底、家和研究所。三個場景所表達的空間依次是模糊空間、平面空間與有限空間、深度空間。幾個場景貫穿的整個電影的節奏也是一個逐漸加強的漸進過程。同時，家中場景的暖光，研究所的蒼白的人造光源，這樣的光線對比也加強了劇情的沖突。電影的最后一幕很好地呼應了全片主題，成為了一個可以讓人記憶的經典畫面。
?

小結：《水形物語》中使用的是我們上述提到的“對比與相似”的結構形式，我按照時間順序記錄了電影中劇情沖突與空間、影調、色彩變化的關系，從曲線中可以看到電影的影調和劇情的高度匹配，而電影的空間和色彩，與劇情相關性沒那么緊密，但是關鍵劇情的場景空間還是和劇情同步發展的。

在我們實際游戲研發的工作中，如何把視覺元素和敘事結合，我們也可以按照這樣的方法來設計編排，根據劇情去精細調配每一個元素的對比，讓游戲的故事和畫面最大力度的完美結合起來。

案例分析游戲-《Iris.Fall》
?

最后說回到《Iris.Fall》這款游戲，如何把視覺元素和敘事結合的理論，應用到實際的項目中呢？作為一款獨立游戲，我們團隊覺得應該可以去嘗試一些不一樣的東西，我們選擇放棄色彩，希望它能夠在眾多色彩豐富的游戲中，利用獨特的黑白色調和藝術感，奪人眼球。同時，我們也在嘗試做一個半開放式的敘事結構，使更多的玩家可以深入沉浸在這個情境之中，而非追求講一段清晰的劇情。
?

《Iris.Fall》的劇情，簡單來說是一個女孩在神秘的劇院中奇幻歷險的情節，但同時也是一個女孩尋找自我的故事。
?

如果以三段式來看的話，第一幕表達的是玩家進入這個劇院中的種種疑惑，接著去尋找，直到發現主角與整個劇院有某種奇特的聯系；第二幕主要說，由于小女孩的不斷深入，劇院的黑白世界也慢慢地展開，似乎接近了真相卻又墜入了一個幻境；第三幕講到女孩在幻境中醒來進入了一個劇院的舞臺，最終解開了疑惑，并拯救了所有被封印在劇院的靈魂。
?

在視覺元素的應用上，第一幕情節中，在每一個房間逐步加強視覺元素的強度，讓玩家越來越強地感受到視覺沖擊，吸引玩家進入這個世界；在空間上，盡量的讓每一個場景切換時都有所變化，使流程不會顯得太呆板無聊，同時不同的空間也能給玩家帶來不同的情緒變化。
?

而緊接著就進入了一個有限的空間閣樓，這里運用了很多的斜線和三角形設計，暖色的燈光是想凸顯房間原先的溫馨氣氛，希望兩個場景在空間的切換時給玩家帶來反差，讓玩家有眼前一亮的感覺。
?

第二幕一開始，這兩個場景是由橫向和縱向的兩個深度空間展開的，形狀以方形斜線條為主，到了中間則進入了一個圓形的有限空間。第二幕結尾時玩家墜入了一個幻想空間，它是一個平面的書中世界。這個幻想世界其實是一個平面空間，這個場景是我們設計中最得意的一個地方，這兩個設計的所有的視覺語言，包括空間影調線條跟形狀都截然不同。使書中世界的這種明亮的幻想感與剛剛途徑的真實的，暗調的有限空間的場景形成強烈對比，所以才會給玩家這樣情感的抒發！
?

第三幕，視覺變化就變得更加豐富和強烈，空間上也以深度空間為主，影調也是以硬調為主。場景里充滿著各種各樣的三角形，與斜線各種元素的對比達到了一個頂峰。由于我們的游戲核心是光與影，無論是美術玩法還是劇情都圍繞著這中心展開，所以如何區分光影兩個世界的視覺元素也是我們需要重點去設計的。
?

而切換到影子世界后，鏡頭會往前推，壓縮多余內容，變成一個2D平面空間。深度的真實世界和平面的影子世界之間的變化，強調出了我們游戲的主題，也讓我們把注意力聚焦在影子本身上，而不至于被其他東西分心。
?

這張圖中間的這個小圖相當于是我們的一個地圖，它表現了我們大概的一個關卡布局，而美術上我們可以定義出每一個房間的不同結構，讓玩家在整個游戲中的體驗中都有驚喜。那么在敘事上我們可以直觀的把控敘事段落的高低起伏，想象實際游戲中的效果。
?

那么說到敘事，因為整款游戲是沒有對白和文字的，視覺設計是故事敘事中最重要的一個表達部分，我們調整了一些鏡頭，凸顯敘事，讓玩家不至于忽略掉重要的劇情，還有另外一種是由于我們是分段式的靜態解密，所以劇情缺乏連貫性，所以在敘事上我們也刻意加入了一些2D動畫的小劇場做劇情上的一些連接。
?

結束語

最后回到我們的主題——故事。所有的IP的核心其實都是故事，因為能讓人記得住的,有長久生命力的是故事本身。如何打造一個IP，又要讓人能有代入感的故事？產生這樣的代入感除了故事要精彩也需要美術的多方面配合。那么如何包裝一個好故事就是重中之重。

所以回到最初我們所說的，一段好的畫面給予我們的印象遠遠要比一段文字來的更加深刻，做游戲亦然，好的故事劇情包裝可以讓游戲擁有更加長久的生命，也能夠給玩家種下根深蒂固的影響，因而留住更多的玩家。

總結

以上是生活随笔為你收集整理的《彩虹坠入》如何用视觉元素增加游戏剧情表现力？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。