譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

原文地址 翻譯:Zuxin

希望這篇文章可以更好地幫助遊戲設計師和藝術家互相協作,或者是獨立遊戲人來思考遊戲的表達與機制的關系。由於譯者並沒有美術經驗,部分翻譯可能有術語錯誤或用詞不當。不知道吹哥到底什麼時候能完成《時空幻境》的重製版和新作。

正文

在我參與遊戲美術之前,《時空幻境》已經兩次出現在GDC上。它的創造者Jonathan Blow在幾個實驗性遊戲研討會和獨立遊戲節上展示了這個以時間操縱為主題的平台跳躍遊戲《時空幻境》,並獲得了遊戲設計獎。除去一些沒有打磨的問題,它幾乎是一個完整的遊戲:具有十足的可玩性、連貫性和個性。

但在視覺上,它還很原始。它的積木、刺和梯子都很功能性,只是傳達了平台遊戲所需的必要元素。它可以保持作為一個視覺上的簡單的遊戲,但它已經暗示了它想做得更多,它想用在電子遊戲可用的所有的多媒體手段上來表達自己。

每個關卡的虛構散文片段表明了《時空幻境》的野心。他們對關系的性質、遺憾和時間悖論進行了深入思考。在世界二中引入了一個可以無限倒退時間的機制——你可以扭轉任何錯誤,消除 「失敗」的概念——以對戀人之間完美寬恕的渴望和思考為框架。(譯者註:世界二實際上是《時空幻境》中玩家玩到的第一個世界)

總而言之,這聽起來很宏大,但其實不然。這種聯系從來都不是強制的。這些東西只是簡單(simply)的共存,當我享受這款有活力的、有時是滑稽的,可玩性強並取材於《超級馬力歐兄弟》的平台遊戲時,它們在我的腦海中交織在一起。

2006年夏天,我被聘請為視覺藝術家,我面臨的挑戰是不僅要清楚地展示《時空幻境》的機制和行為,更要幫助去講述一個非文字性的故事:一部分軼事,一部分假象,一部分哲學。

這篇文章講述了為一個具有高度特殊性的、進乎已經完整的遊戲開發視覺效果的過程所遇到的挑戰,以及我們的方法和工具的一些細節。

描圖並不丟人

首先,喬納森給我發了一張截圖,讓我在上面畫畫。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

這就是它,有著「程式設計師自豪的美術風格」。雖然在視覺上很粗糙,但從功能上看,這個遊戲實際上是很先進的。鑰匙、開關、梯子、釘子、怪物和一個穿西裝的人,這一切都在那里。作為附加,最後我要展示給你們這張截圖在成品中變化有多大(或多小)。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

這是我的第一次嘗試。我故意迴避了使用截圖中的質感和調色。這看起來有點像 SNES 上《耀西島》的某些區域。在一封電子郵件中,我將這種氣氛描述為「空靈」!

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

第二次,也是一些完全不同(於截圖)的東西。看起來奇怪的是,背景上到處都是跳舞的人物。Jonathan曾用「思想-猜想-世界」這個短語來描述《時空幻境》的設定,所以我試圖對空間進行非文字性的描述。

為什麼前景不用一些局部上無關但主題上相關來完成呢?(跳舞的人到底有什麼關系?不告訴你。)我們沒有使用這個想法,但我們確實以多種不相關的方式支撐這個故事。稍後再談這個問題。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

這張圖里最好的東西是調色。那種白堊色的藍色、豆綠色和鮭魚色巧妙地混合在一起。我喜歡把「自尊心不強」的顏色(shaky self-esteem)放在一起,這樣它們最終都會相互服從。

例如,那個白堊藍並不是真正的藍色,而是一種含有等量綠色和黃色的灰色。但在這種上下文關系中,它看起來是藍色的……對我來說,無論如何。這種事情還有更多戲劇性的例子。Joseph Albers用這種方式做了很多創作。

我再次試圖用抽象來暗示一個想法的世界。我寫給Jonathan,說我們可以用不同的視差層來構建背景,這樣較遠的背景就會被移動的前景所掩蓋。

很多遊戲都使用這種效果,但我想避免離散的背景對象,所以一切都會有一個模糊的邊緣並與周圍的東西融為一體。 我們確實使用了這個想法; 遊戲有水一樣流動的背景空間,模稜兩可地流動在一起。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

啊,色相滑塊(Hue Slider)。 我們曾經經歷的時光。 這里唯一顯著的變化是葉子。 我有這樣的想法,樹葉會飄向螢幕並停留在螢幕上,就好像背景是仰望的景色一樣。

同樣的,這是關於一個空間模糊/思想猜想世界的東西。 但這太「糊你臉上」(直接)了。當我把這些圖片發給Jonathan時,他對中心平台底部的長方形「切口」很感興趣。在一個解謎遊戲中,這看起來是一個明顯的幾何變化,玩家會假設所有東西的存在都是有原因的。

對於玩家來說,被一些純粹因為美觀存在的東西卡住遊戲進度是十分糟糕的。 隨著我們工作的進行,我在消除可能分散或混淆玩家的東西方面變得更加嚴格。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

現在,快進到未來。這就是很久之前的原型是如何演變成一個幾乎完成的遊戲的,萬歲!

「等一下,Hellman,」你可能在想。「你說你要去掉那些純粹為了美觀的東西,而我可以看到你拿了錢去畫一百萬個小葉子和藻類。這不是學術不誠實(intellectually dishonest)嗎?」一點也不!

秘訣在於使所有的樹葉都能凝聚在一起,這樣玩家就能籠統地把它看作是「一堆樹葉」,而不會浪費腦力去梳理它的功能和解謎道具。我認為這個遊戲非常優雅地介紹了它的重要概念,所以你學會了要尋找什麼。但我會對其他人對此的看法感興趣。

世界二在第一個

在一系列不同的概念圖之後,是時候拿出一些可用的遊戲資源(assets),看看它們在遊戲中的工作方式了。Jonathan 已經編寫了一個引擎,用於從任意大小的不規則塊構建關卡地圖。

他讓我採用一個我已經完成的概念,並將其分解為可以復制和粘貼的片段以創建第一個世界。 (由於最初無法解釋的原因,玩家遇到的第一個世界是世界二)

幕後花絮有時會給人一種輕松和必然的假象,比如那些惡搞的「進化」圖片顯示一條魚走出海洋,變成黑猩猩、直立人,然後變成Groucho Marx(譯者註:美國喜劇演員、電影明星)。

當然,如果你忽略所有在幾千年來自然選擇中滅絕的物種,這看起來很容易。 對於你在此處看到的每張圖片,請假設還有半打沒有展示的變體。這會稀釋本文,但仍然很重要。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

當然,製作流程的某些階段比其他階段更順利。從這張圖鋪天蓋地的綠色概念,可以看出我在創作過程中並不開心。岩壁掙扎地從一處走到到另一處,一處看起來像兩棲動物的皮膚,另一處看起來像碎玻璃。是時候解決這些問題了,但我想出的東西足夠好嗎? 我繼續探尋(答案)。

這次探尋讓我回到了先前那批概念圖中我最喜歡的一張:

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

我把那種豌豆綠和白堊藍調整成一種更詳細的物理方法。草地看起來很柔軟,岩石看起來更多。背景部分是抽象的,但融入了房屋和大教堂的白色線條圖。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

我感到有些解脫,它看起來好多了。但Jonathan說世界二的氣氛不合適。顏色很漂亮但不自然,略帶毒性。世界二是冒險的樂觀開始。 它溫和地介紹了基本的玩家動作,例如跳躍和攀爬。

最重要的是,遊戲中重要的操縱時間行為是「倒退」,即收回錯誤並重試而不會受到懲罰的能力。這是一個非常寬容的世界。美術必須增加這種寬恕和積極的感覺。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

這導致我換成了這些更「正常」的顏色:棕色的岩石和藍天。這個概念圖的問題是背景的干擾性。我試圖通過在背景中添加一個拱門來創造更多的「視覺趣味」,並顯示左側的場高於前景,就好像它在三維度上後退一樣。

但正如 Jonathan 解釋的那樣,以及我在項目過程中越來越體會到的,以一種與遊戲性相悖的方式增加視覺趣味是沒有意義的。 需要加強的是那些與遊戲性相關的東西。

例如,當玩家走到懸崖邊,梯子向下,重要的是懸崖和梯子。在這個概念中,背景將懸崖進一步向右延伸。這干擾了人們對懸崖的直接感知,使他們無法了解它的真實面貌。

同樣,樹的亮黃色過於引人注目,盡管它沒有遊戲性上的目的。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

與此同時,我仍在努力尋找適合岩石和草地的外觀。你可以在這些圖片的不同部分看到正在測試的不同方法。漸漸地,我確定了一些東西,並開始將這些概念圖分解成碎片(pieces)。這些碎片將被導入到遊戲中,並使用 Jonathan 的開發工具進行排列、復制和粘貼。 我將在後面更詳細地解釋這一點。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

這些早期的碎片中有的過大,有的過於用於專門用途(specialized),所以並不是特別靈活。例如,那些台階是為2-1的某個地方製作的,在其他地方並不適合。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

一些牆面和角落的碎片。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

因為除了草和石頭什麼都看不見會有點無聊,所以我畫了一些花。

順便說一句,此時原型角色的精靈圖[sprites]被Edmund McMillen[譯者註:《以撒的潘祭》等遊戲的作者]的設計所取代。同樣的,這張精靈圖也已在最終遊戲中被取代。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

還有一扇用於進出的門。還有一個梯子,雖然我們後來沒有使用這個設計。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

還有一棵樹。 我的想法是對這棵樹附加一些瑞士軍刀式的附屬物(Swiss Army Knife-like appendages)是他遊戲功能上有用。延伸部分是獨立的,所以它們都是可選的。結果是,它們根本沒有被用到! 這棵樹仍在遊戲中,但沒有樹枝。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

在這里,您可以看到這些部分如何組合成一個關卡布局。不過,這仍然只是一個 Photoshop 模型。草、岩石和花朵在前景層中,而我在背景層中繪制遠景。背景和前景的位置關系很重要,這樣才能確保所有部分都能正確地聯系起來,就像一幅畫的不同元素一樣。

盡管背景還很初期,但我對方向並不完全滿意。它看起來過於卡通化和文字化,輪廓清晰。一直以來,我都想做一些抽象的或不同的事情,而不是讓它看起來像一個地方的文字、清晰的描述。不過,當你製作的東西是離散的、明確的時候,要想不陷入一個非常字面的思維方式是很難的。特別是在遊戲中,你正在生成具有明確功能的離散物體。但我希望事情能更多地流動起來。

我當時正在考慮前景/背景的問題,以及如何更多的區分它們。也許前景將被渲染得比背景更詳細?

而背景物體將被粗略地定義,邊緣模糊不清。換句話說,與遊戲性相關的東西越多,它的細節就越多。

與遊戲玩法無關的物體會融入氛圍中,在美學上做出貢獻,但不會影響玩家對周圍環境的感知。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

這幅畫讓我相信它是可行的。天空中的藍色與樹葉融為一體,而樹葉的綠色又與天空融為一體。就在門的上方,一棵樹被藍色的霧氣所籠罩,霧氣也向右飄去……

但是,我如何在不破壞其即興的、針對具體案例的性質的情況下,將這幅畫分解成各個組成部分?把整幅畫作為一個平面的背景帶進來,然後用它做牆紙的牆紙是不足夠的。我希望背景有深度,有突出的視差效果,因此遠處的物體會比附近的物體漂移的更慢。

由於邊緣不規則且通常未定義,我將如何確定物體起始和終止的位置?用離散的剪裁形狀創建一個有凝聚力的、混合的印象派背景是我在整個項目中一直在努力應對的挑戰。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

這是在Photoshop中編輯的一些天空碎片。我用橡皮擦工具給邊緣進行了羽化處理(feathered),這樣它們在重疊時就會顯得很有連續性。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

樹。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

世界二的所有背景元素都已准備就緒……

開發者模式

(譯者註:這種使用開發者模式來幫助美術和設計的方式也應用到了吹哥後面的遊戲中)

讓我們來看看這些石頭和草的碎片是如何被組裝成可玩關卡的。本節展示了 Jonathan 創建的開發人員工具,我用它來構建 Braid 的景觀。這是一個充滿腳手架和滑輪的後台之旅。(免責聲明:按鈕上的文本太大了,因為我們在某一點更改了字體,但從未修復它。)

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

這是2-1的開始,是玩家在主世界之後訪問的第一個關卡。從截圖上看不出來,但大量動畫粒子給螢幕的不同部分帶來了活力。後面會有更多關於粒子的內容…

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

按下了秘密按鍵後,我們就進入了開發者模式!Tim 消失了,許多控制面板和開發人員專用項目變得可見。 我們現在可以切換不同元素是否可見,所以讓我們一個一個來。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

前景:這里我們只看Tim所在的前後區域。 注意草地和岩石上的高光是如何減少的,而陰影區域的陰影是如何減少的? 因為粒子消失了。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

粒子:現在我們正在查看粒子本身。在開發者模式下,每個粒子對象都有一個大的「箭頭和點」圖標,通常是不可見的。如果你不知道的話,一個粒子對象會生成一個圖像或一系列圖像的許多實例。

例如,某些關卡設置在秋天的森林中,背景是飄落的樹葉。我畫了一把葉子,然後把它們扔進一個粒子對象中。粒子對象創建數百片葉子,每片葉子都在旋轉和落下。你可以調整各種參數以顯著改變最終結果。你在《時空幻境》的風景中看到的幾乎所有運動,除了像角色這樣的離散對象,都是基於粒子的。

在底部,你可以看到如何使用粒子為草添加高光。地面上布滿了單獨的草葉,再往下有更模糊的鋸齒形/波浪形顆粒。當所有東西放在一起時,它們並沒有那麼突出,而是與草融為一體,使其看起來更加生機勃勃。無論如何,這就是我們的意圖。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

背景:這是背景。 紅色邊界框劃定了天空的一個部分。 為了減少空像素的數量,不規則的圖像會自動分解為矩形部分。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

碰撞體(Collision):這部分通常是看不見的,但它是最重要的。 它定義了世界的實際物理性質。沒有這個,你會直接從地板上掉下來。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

那麼「魔法」是如何發生的呢? 我首先創建一個新文件並導入一組拼接圖像。 它們都出現在一堆中。 我一個接一個地把它們像這樣並排放置。

幸運的是,我有不止一個螢幕;我可以用WASD鍵來平移。空格鍵讓我在這和我正在處理的關卡之間來回切換。我實際上只是根據需要將這些片段從一個文件復制並粘貼(ctrl-c,ctrl-v)到另一個文件。

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

每件作品都可以被縮放、旋轉、剪裁或著色。每個作品都有一個深度值,決定了它是在周圍作品的前面還是後面。你可以看到在紅色著色的那塊下面的棋子是被剪切的(它的三面都有硬邊)。它只是在那里填補了在它上面的兩個棋子之間的空隙。剪裁使作品的用途更加廣泛。

著色通常不像這里那樣引人注目。 最常見的是,它只是用來使遠離活動區域的棋子變暗。

對我來說,這個階段的過程很有趣。 在努力創作藝術作品之後,我開始玩玩具積木,看看它在行動中的樣子。 回到在 NES 上創建《淘金者》(譯者註:該遊戲是比較早能夠自由編輯關卡的遊戲之一)自定義地圖的時代,我不會認為這是一份工作!

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

不!不!不!我所有勤苦的工作成果!

譯介丨《時空幻境》中的美術:為一個不尋常的遊戲創造一個視覺形象

這下好多了!

《時空幻境》終於在今年6月完成了(譯者註:本文寫於2008年8月5日)。多虧了一種不情願妥協的完美主義(「不妥協」太理想化了),花費的時間比預期的要長,但我為結果感到自豪。 我希望玩家能感受到我們對遊戲所作的努力。

來源:機核