米星光,陳文娟
(中國傳媒大學(xué) 動畫與數(shù)字藝術(shù)學(xué)院,北京100024)
如今,對非物質(zhì)文化遺產(chǎn)的搶救與保護已在世界范圍引起了重視。中國作為擁有5000年歷史的文明古國,更是以“保護為主,搶救第一,合理利用,傳承發(fā)展”[1]表達對優(yōu)秀傳統(tǒng)文化傳承與發(fā)揚的決心,并在立法、機構(gòu)設(shè)置、文化普查、申報、傳承人、宣傳等角度都取得了豐碩的成果[2]。
在這其中,中國剪紙以其廣泛的群眾性、鮮明的地域性、強烈的造型特征[3],使得它成為了能夠代表中國鮮明特色的文化標志。如在2016年上映的《功夫熊貓3》和2018年上映的《蜘蛛俠:平行宇宙》,在做中國本土化宣傳時,均以剪紙風格的海報吸引了不少國人的眼球;2020年《花木蘭》在全球范圍內(nèi)上映前,也使用了剪紙風格的藝術(shù)圖作為宣傳。這些都足以表現(xiàn)出中國剪紙所展現(xiàn)出的蓬勃生命力。
近年來,剪紙文化搭載電子游戲的形式也引發(fā)了人們的關(guān)注。一些游戲也借助剪紙的形式來制作宣傳圖,圖1分別展示了兩款游戲中的剪紙元素。其中,左側(cè)是移動平臺的游戲《自由幻想》在騰訊數(shù)字文創(chuàng)節(jié)展會的“藝術(shù)長廊”展區(qū),為玩家們帶來的由剪紙非遺大師李金波老師創(chuàng)作的幻想八仙剪紙作品,旨在用數(shù)字化與傳統(tǒng)藝術(shù)結(jié)合的方式傳承八仙非遺文化。但這樣的剪紙要素只占據(jù)該游戲宣傳活動的一部分,實際游戲畫面并未采用剪紙的風格;而右側(cè)的《尼山薩滿》這款游戲的畫面則展現(xiàn)出了鮮明的中國剪紙?zhí)厣珔s對中國傳統(tǒng)剪紙樣式的創(chuàng)新不足,略顯保守,并且在遵循傳統(tǒng)剪紙風格的基礎(chǔ)上沒有充分利用現(xiàn)代2D游戲中的技術(shù),導(dǎo)致最終呈現(xiàn)給玩家的畫面表現(xiàn)力不足。
圖1 剪紙非遺大師李金波創(chuàng)作的幻想八仙剪紙作品和《尼山薩滿》的實機畫面
伴隨愈發(fā)強大的科學(xué)技術(shù)水平,電子游戲所展現(xiàn)出的畫面帶給玩家一次又一次的驚喜。與追求寫實風格的游戲不同是,一些2D游戲表達出的則是自己獨樹一幟的美術(shù)風格,如二維與三維相結(jié)合的《奧日與螢火意志》、手繪風格的《空洞騎士》,都著實令玩家驚嘆。類似這樣的2D游戲,其畫面設(shè)計往往能夠在保持自身美術(shù)風格的基礎(chǔ)上,模擬出具備縱深感的3D環(huán)境效果。
而精美視覺效果的實現(xiàn),通常離不開以下技術(shù):2D景深效果(2D Depth of Field)、屏幕后處理技術(shù)(Screen Post-processing)、 視差滾動技術(shù)(Parallax Scrolling)。景深效果本應(yīng)屬于屏幕后處理技術(shù)的一種,但由于在2D環(huán)境下所實現(xiàn)的景深效果,往往不同于三維空間中以屏幕后處理的方式實現(xiàn)的景深效果,因而此處特別強調(diào)是在二維的空間下所執(zhí)行的。所謂景深效果,是針對一次只能聚集于單個物距的相機,這樣的相機在對焦點前后有一個相對清晰的成像范圍,而在這個范圍外所呈現(xiàn)出的景物則是模糊的[4];屏幕后處理技術(shù)則指的是在渲染完整個場景、得到屏幕圖像后,再對這個圖像進行一系列操作,實現(xiàn)各種屏幕特效,這種技術(shù)可以為游戲畫面添加更多的藝術(shù)效果[5];視差滾動技術(shù)即在二維的空間中創(chuàng)造出具有深度錯覺的場景,它早在20世紀30年代的傳統(tǒng)動畫中就通過多平面成像技術(shù)有所運用[6]。這些技術(shù)使得開發(fā)者在二維空間下也能創(chuàng)造出恢弘的游戲世界。
剪紙作為一門基于二維平面的鏤空藝術(shù),它非常講究線條構(gòu)成,又強調(diào)夸張的造型,以及注重輪廓的唯美[7]。其中,剪紙的平面性讓它很容易能夠與視差滾動技術(shù)相結(jié)合。本文將嘗試結(jié)合中國傳統(tǒng)剪紙風格與現(xiàn)代2D游戲場景搭建所使用的技術(shù),以創(chuàng)建具備更好視覺效果的剪紙風格場景為研究目標,探索剪紙藝術(shù)所能夠帶來的全新的表現(xiàn)形式。
而得益于游戲引擎的逐漸成熟,使得游戲制作者可以將更多時間用于更有差異性的開發(fā)工作上,而不需要在圖形渲染、動畫功能、物理引擎等游戲基礎(chǔ)功能上投入過多的精力。其中,Unity游戲引擎發(fā)展到今天已經(jīng)成為了開發(fā)2D游戲最為合適的工具之一。因此,根據(jù)中國剪紙的特點,本文將選取Unity游戲引擎作為實現(xiàn)工具,充分利用Unity整合的各項功能,以更好地實現(xiàn)本文的研究目標。
綜上,針對現(xiàn)有中國剪紙游戲場景設(shè)計的不足,參考現(xiàn)代2D游戲中的視覺效果,在中國傳統(tǒng)剪紙美術(shù)風格的基礎(chǔ)上加以創(chuàng)新,以Unity游戲引擎作為技術(shù)實現(xiàn)工具,探索如何快速、高效地搭建出兼顧有剪紙風格與現(xiàn)代2D游戲視覺效果的場景,從而讓剪紙藝術(shù)能夠繼續(xù)煥發(fā)光彩,成為不同時代人們共同的精神財富。
本文的研究目標是實現(xiàn)一個在二維空間下的剪紙風格場景,主要使用到了視差滾動技術(shù)、2D景深效果、屏幕后處理技術(shù)。
其中,通過視差滾動技術(shù)將場景中的元素分為多個圖層,并讓這些圖層相對于攝像機的移動有著不同的速度,離相機越近得移動的越快,從而當相機移動時畫面整體有了透視的錯覺;2D景深效果能夠營造一種在三維空間中特有的縱深感,這是通過給離相機越遠的圖層配置越高的模糊強度來實現(xiàn)的。由于本文中所實現(xiàn)的場景是二維的,因此不能像三維場景中那樣,直接通過屏幕后處理的方式來實現(xiàn)景深效果;屏幕后處理技術(shù)則在場景搭建的后期提升整體的視覺效果,如使用泛光后處理技術(shù)突出燈光效果以及平滑光照的邊緣過渡等。
同時,在整個場景搭建的過程中,設(shè)計自動生成算法來快速、高效的進行場景的搭建。自動生成算法包含兩個方面:一方面,用于自動生成各個圖層下的游戲?qū)ο?,如利用一棵樹作為?fù)制原型,快速生成一整片森林。這一部分以下稱為“自動生成多圖層物體算法”;另一方面,用于根據(jù)不同圖層離相機的距離,賦予這些圖層不同的模糊強度,從而能夠在短時間內(nèi)構(gòu)建出二維空間下的景深效果,而不需要人工地為不同圖層進行模糊強度的配置。這一部分以下稱為“自動生成多圖層模糊效果算法”。
此外,根據(jù)場景中各元素的排布特點、對鏡頭的貢獻度等,對整個場景進行優(yōu)化,以保證該游戲場景在運行時幀數(shù)的穩(wěn)定。
綜上,本文所使用的算法思路步驟如圖2。
圖2 本文使用的算法思路步驟
(1)視差滾動技術(shù)的一般實現(xiàn)算法
視差滾動技術(shù)能夠在二維空間里營造出三維空間中的縱深感。常用的實現(xiàn)視差滾動效果的方法有四種,分別是圖層法、精靈法、重復(fù)紋理法和光柵法。其中,精靈法和光柵法是在上世紀末受限于某些主機的性能而針對這些主機開發(fā)出的方法,對于本文已不再適用。因此,本文主要運用到其余的兩種方法:
圖層法,它實際上是最直接地模擬三維空間中實現(xiàn)視差滾動原理的一種方法。嚴格來講,這種方法已經(jīng)讓空間從二維拓寬到了三維(如圖3所示),場景中出現(xiàn)的所有圖片元素,都包含了原本二維空間中不具有深度信息。這樣,在相機移動時,由于每一圖層與相機在深度軸向的距離不同,從而能夠產(chǎn)生視差效果。一些顯示系統(tǒng)還支持額外對單個圖層進行速度控制,即給離相機近的圖層額外添加一個與之前相比更快的速度,而給離相機遠的圖層額外添加一個更慢的速度。通過這種方式,提高各圖層的速度衰減速率,這樣使得視差滾動的效果在深度軸向較小的空間里也可以更為明顯;
圖3 《風語世界》中使用視差滾動圖層的側(cè)視圖
重復(fù)紋理法,它將完整的圖片分成一個個單元格,每一個單元格的位置都可以單獨設(shè)置,這樣就可以通過讓這些單元格循環(huán)產(chǎn)生,或者在移出相機的瞬間從相機移出端將其位置調(diào)整到移入端,從而產(chǎn)生無限滾動的錯覺。這一技術(shù)常常用于在俯視角飛行射擊游戲中實現(xiàn)滾動的星空背景效果。
本文將借鑒“圖層法”來實現(xiàn)視差滾動技術(shù),并借鑒“重復(fù)紋理法”來對視差滾動進行優(yōu)化,實現(xiàn)無限滾動的效果。
(2)基于Unity的視差滾動技術(shù)具體實現(xiàn)
在Unity中,如果選擇在二維空間下搭建場景,那么對于該空間下的大多數(shù)二維游戲?qū)ο蟮匿秩臼峭ㄟ^名為“Sprite Renderer”組件實現(xiàn)的。不過,該組件并不會像“圖層法”中那樣通過深度信息進行排序。但取而代之的是,Unity會根據(jù)Sprite Renderer組件上的“Order In Layer"屬性,來決定多個圖片間的渲染順序。而這實際上就讓不同的圖片間有了層級的概念,從而可以借鑒“圖層法”中的思想,即根據(jù)相機的移動速度改變其它各個圖層的速度。
在Unity中實現(xiàn)視差移動的偽代碼如圖4所示:
圖4 實現(xiàn)視差移動的偽代碼
這樣,上述程序就能夠控制各個圖層對象基于相機移動的速度計算得出自身的移動速度。并且,該程序中還設(shè)置了視差縮放系數(shù)變量,通過調(diào)整該變量的值就可以控制由近及遠的不同圖層間的速度衰減量,從而形成不同程度的視差移動效果。最后,在決定改變圖層對象的位置前做了平滑處理,以得到更柔和的視差移動效果。
(3)基于Unity的自動生成多圖層物體算法的實現(xiàn)
如果希望能夠讓視差滾動效果更為明顯,那么就需要更多的圖層層級,且每一層級中都要包含有多個游戲?qū)ο蟆,F(xiàn)代游戲中,開發(fā)人員通常不會以完全人工的手段擺放這些游戲?qū)ο?,而是會通過一些自動生成算法來快速搭建出所需的場景。
如育碧公司在2017年游戲開發(fā)者大會(Game Developers Conference)上分享公司旗下的《孤島驚魂5》在開發(fā)時所用到的自動生成算法[8],其本質(zhì)上就是先由以人工的方式在場景中布置點、曲線以及面,再由算法根據(jù)這些人工的標記進行生成;而制作了《地平線:零之曙光》的開發(fā)商Guerrilla Games則在其官網(wǎng)上分享了他們快速生成場景的方法[9]:首先建立一套完整的筆刷系統(tǒng),這套系統(tǒng)不僅能夠在筆刷范圍內(nèi)生成植物、碎石等游戲?qū)ο?,并且在繪制時還會考慮繪制區(qū)域內(nèi)的地形(如太陡峭的斜坡上不能生成筆直生長的樹),以及與附近已生成的游戲?qū)ο箝g的關(guān)系(如兩棵樹不應(yīng)離得太近、樹下應(yīng)有合理數(shù)量的灌木草叢覆蓋等等)。這樣,制作人員就可以快速地利用筆刷來生成物體,而算法則會在這個過程中幫助合理地規(guī)劃。
本文所構(gòu)建的場景與上述算法的應(yīng)用場景最大的區(qū)別在于維度不同。在三維空間下,需要在不同的空間位置生成物體;而在二維空間下,則需要在不同的層級生成物體。而分析上面提到的兩種算法,可以發(fā)現(xiàn)它們都采用了人工標記配合算法自動生成的思路。對應(yīng)于三維空間中在不同的空間位置添加人工標記,在二維空間中就是在不同的圖層層級下進行人工標記的添加。
Unity中在給各個圖層對象下生成子對象時,可以直接采用Unity函數(shù)庫給出的Instantiate方法。該方法不僅可以配置復(fù)制原型、生成位置、生成旋轉(zhuǎn)角度,還可以直接配置所生成對象的父對象。這樣就可以直接通過該方法為每一個生成對象指定不同的圖層對象,從而快速為不同的層級配置好多個游戲?qū)ο?。本文選取如圖5所示的樹木作為復(fù)制原型,直接通過Unity函數(shù)庫中的Instantiate函數(shù)生成的效果如圖6。
圖5 本文實現(xiàn)的項目所使用的復(fù)制原型
圖6 直接通過Instantiate函數(shù)生成的效果圖
從圖中可以看到,如果僅僅將這些樹木劃分到不同的圖層中,所能實現(xiàn)的效果非常有限。這是因為在三維空間中,依據(jù)“近大遠小”的透視原理,位于遠處的物體應(yīng)該看起來更??;同時,樹木的位置、旋轉(zhuǎn)角度也過于單調(diào),應(yīng)該增添一些隨機的因素。
因此,對上述自動生成算法進行改進。首先為每一個圖層對象配置如下的變量:用于記錄當前圖層所需生成數(shù)量的變量,以及其對應(yīng)縮放系數(shù)的變量。而這就是二維空間下對不同圖層層級所添加的人工標記?;诖耍倪M后的自動生成算法偽代碼如圖7所示:
圖7 自動生成多圖層物體函數(shù)的偽代碼
這樣,就可以在自動生成時讀取該圖層的相關(guān)配置,為不同的圖層生成具有不同位置及縮放的樹木對象,從而實現(xiàn)“近大遠小”的視覺效果。并且,在生成同一圖層下的樹木時,每一個樹木對象都在限定的范圍內(nèi)隨機生成一個不同的位置、旋轉(zhuǎn)角度及縮放系數(shù),以減弱畫面的重復(fù)感。改進的自動算法執(zhí)行效果如圖8所示:
圖8 自動生成多圖層物體算法得到的結(jié)果
改進后的效果與之前相比較明顯有所提升。但由于這些樹木的色調(diào)完全相同,使得不同圖層的樹木難以區(qū)分,畫面所營造的縱深感并不足。
(4)視差滾動技術(shù)的優(yōu)化:無限滾動算法
正如重復(fù)紋理法中將完整圖片分成單元格并讓它們循環(huán)產(chǎn)生的思路,Unity中由于可以單獨控制每一個游戲?qū)ο?,因此也常常使用類似的方法,對移出鏡頭的物體不進行銷毀,而是調(diào)整其位置,讓其再次從其它方向進入鏡頭的范圍。如使用兩張背景圖片,每張背景圖片的大小剛好能填充整個屏幕,假設(shè)相機向右移動,那么當其中一張背景圖片從左側(cè)離開鏡頭范圍時,程序會將它的位置調(diào)整到另一張背景圖片的右側(cè)。對另一張背景圖片也執(zhí)行相同的操作,由此就生成了無限滾動的背景。這一優(yōu)化技巧在現(xiàn)代2D游戲中已經(jīng)屢見不鮮。但基于本文中所實現(xiàn)的項目,其本身已經(jīng)有“視差滾動”在游戲運行過程中持續(xù)執(zhí)行,因此需要對無限滾動的一般實現(xiàn)方法做進一步的改進。
以地面圖片為例,通過對兩張地面圖片中移出鏡頭的那一張進行位置的調(diào)整,一般情況下就可以實現(xiàn)無限滾動的效果。但由于本項目中視差滾動的影響,地面圖片本身會有一個移動速度,這就會造成調(diào)整地面圖片的位置時會出現(xiàn)錯誤的“割裂”的現(xiàn)象(如圖9);此外,在制作美術(shù)素材時,美術(shù)人員通常不方便獲知多少的像素單位能夠正好填充游戲場景內(nèi)的相機范圍。當搭建場景時,可能需要更多的單位圖片才能填充一個屏幕。因此,實現(xiàn)方法中也需要考慮兩張以上的地面圖片存在的情況。改進后的偽代碼如圖10所示:
圖9 調(diào)整圖片位置后出現(xiàn)的錯誤結(jié)果
圖10 自動生成多圖層物體函數(shù)的偽代碼
上述偽代碼只截取了檢測物體是否會從屏幕左側(cè)移出的情況,從其它方向移出屏幕的算法思路與其相同。
此外,由于像樹木這樣的物體并不存在精確接縫的問題,因此也不需要每一幀都對它們所處的位置做檢測。所以腳本中還添加了控制檢測頻率的代碼。這樣,就可以針對不同類型的游戲?qū)ο笈鋫洳煌臋z測頻率,這對優(yōu)化計算量是十分有幫助的。
這樣,通過無限滾動算法及視差移動技術(shù),在游戲運行過程中,當相機發(fā)生移動時,不同圖層的樹木會有不同的移動速度,且離開鏡頭范圍的游戲?qū)ο髸{(diào)整其位置形成無限滾動的視覺效果(如圖11)。
圖11 無限滾動的效果
(1)景深效果的一般實現(xiàn)算法
在三維空間中,往往利用屏幕后處理技術(shù)中的景深效果來營造畫面的縱深感。但在二維空間下,如果直接使用屏幕后處理的方法進行景深處理,則得到的結(jié)果與期望的并不相同(如圖12所示)。
圖12 利用屏幕后處理的方式得到的錯誤結(jié)果
從圖中可以看到,場景中所有的元素都被模糊處理了,而如果調(diào)節(jié)景深效果的相關(guān)參數(shù),會發(fā)現(xiàn)無論如何調(diào)整,都只會出現(xiàn)完全模糊或完全清晰兩種極端的結(jié)果。這是因為,在三維空間中,作為屏幕后處理技術(shù)之一的景深效果是基于場景中物體的深度信息來實現(xiàn)的。而正如前文中提到的那樣,二維圖片是通過Sprite Renderer組件渲染到屏幕上的,而該組件對于二維圖片的著色處理并沒有為其設(shè)置不同的深度。也就是說,即便將這些樹木對象分配在不同深度軸向的位置上,以屏幕后處理技術(shù)為基礎(chǔ)的景深效果也無法發(fā)揮它的作用。因此,為實現(xiàn)二維空間下的景深效果,需要采用一種與三維空間下截然不同的實現(xiàn)方法。
(2)基于Unity的2D景深效果具體實現(xiàn)
在過去的游戲中,會直接利用一些圖像處理軟件對二維圖片進行模糊處理。這樣做的好處是,在游戲引擎中對二維圖片進行渲染時,著色處理仍然僅僅是對原圖的紋理采樣,對GPU的壓力較小。但這樣處理也有更為明顯的缺點:首先,需要對每一張不同的圖片進行模糊操作,由此極大地增加了工作量;第二,這些圖片相較之前都會額外有一張模糊處理的版本,如果要求該圖片在多個需要視差滾動的圖層中出現(xiàn),還需要通過設(shè)置不同的模糊參數(shù)制作出多個相應(yīng)的版本,這不僅提高了內(nèi)存占用,游戲自身容量也成倍的增加了;第三,如果在之后需要調(diào)整這些圖片的外形,盡管可以返回到原圖進行修改,但修改完成后又需要再次進行模糊處理。而直接在已經(jīng)經(jīng)過模糊處理的圖片上繪制細節(jié)無疑是一場災(zāi)難。
基于上述原因,本文嘗試采用能夠進行模糊處理的著色器來實現(xiàn)二維空間的景深效果。與使用圖像處理軟件進行模糊操作不同的是,模糊著色通常的實現(xiàn)方法是在二維圖片被渲染到屏幕上之前,通過對原圖紋理采樣得到的每一個紋素的顏色值同它周圍紋素的顏色值做給定程度的均值處理,以達到模糊的視覺效果。通過這種方法,只需要在程序中調(diào)整模糊強度參數(shù),就可以基于原圖生成不同程度的模糊版本(如圖13所示),這樣極大地減小了工作量,并節(jié)省了游戲的占用空間,且方便了后續(xù)對原圖細節(jié)的調(diào)整。
圖13 應(yīng)用不同模糊強度的效果
(2)基于Unity的2D景深效果具體實現(xiàn)
同自動生成多個圖層的樹木對象相同,分別為每一個樹木對象分配相應(yīng)的模糊材質(zhì)顯然是不利于開發(fā)效率的。本文實現(xiàn)自動分配模糊材質(zhì)算法的思路是:將該算法與自動生成多圖層物體算法相結(jié)合。仍然通過獲取圖層上的人工標記來得到當前層級的相關(guān)配置參數(shù),再根據(jù)這些配置參數(shù)為生成的物體創(chuàng)建并分配相應(yīng)模糊強度的材質(zhì)。通過該算法所生成的模糊效果如圖14所示:
圖14 自動生成多圖層模糊效果算法得到的結(jié)果
從Unity編輯器的Scene窗口可以看到(如圖15),盡管該場景是一個沒有深度軸向環(huán)境的二維空間,但是仍然能夠搭建出一個效果較好的透視錯覺。
圖15 Unity編輯器的Scene窗口
在場景的主要部分完成后,為場景添加一些諸如光束、落葉、湖面等裝飾性的元素,并將游戲角色添加到畫面當中,最終利用屏幕后處理技術(shù)使畫面中的光照效果更加明顯并完善其邊緣的平滑過渡。由此得到的效果如圖16所示:
圖16 添加裝飾物及角色得到的效果
目前利用本文中的算法得到的效果如圖17所示。同時選取了2018年推出的剪紙風格的游戲《尼山薩滿》作為對比(如圖18所示)。
圖17 通過本文算法得到的效果
圖18 2018年推出的游戲《尼山薩滿》
從圖中可以看出,《尼山薩滿》這款游戲采用二維游戲中常見的橫版視角,并嘗試模擬出三維空間下的多層背景。但“遠處”的場景元素在視覺上只有顏色深淺的變化,盡管通過為場景中添加燈光使得一些圖片元素的顏色有了漸變的效果,但畫面所表現(xiàn)出的縱深感仍然不足。
而通過本文算法生成的場景,具有如下優(yōu)勢:通過自動生成算法,場景搭建的效率大大提高;隨著圖層離相機的距離逐漸增大,不同圖層樹木對象的縮放系數(shù)整體上呈減小的趨勢,從而有了“近大遠小”的視覺效果;同一圖層的樹木之間有微小的旋轉(zhuǎn)角度、縮放系數(shù)的變化,減弱了畫面的重復(fù)感;最后,模擬了三維空間中的景深效果,越“遠”的樹木看起來越模糊,并且當游戲運行時,不同圖層的樹木會根據(jù)相機的移動對應(yīng)得出不同的移動速度,距離相機越近的圖層移動得會越快,這樣進一步增強了場景的縱深感。
本文針對中國剪紙游戲中所存在的問題,從現(xiàn)代2D游戲中所用到的技術(shù)入手,并以中國傳統(tǒng)剪紙藝術(shù)為基礎(chǔ),提出基于Unity的自動生成兼顧剪紙風格與現(xiàn)代2D游戲視覺效果場景的算法。從實現(xiàn)的結(jié)果和與其他游戲的對比分析表明,本文的算法不僅僅能夠快速高效地搭建出一個場景,其所實現(xiàn)的畫面風格也能夠更好地營造出場景的縱深感,并且通過對現(xiàn)代2D游戲中技術(shù)的綜合運用,使得整體的視覺效果得到了提高。但目前在視差移動算法中所控制的縮放系數(shù)主要靠人為設(shè)定,得到的畫面效果形式較為單一,在今后,將繼續(xù)研究如何進行風格化的視差移動縮放函數(shù)的設(shè)計,以更好的實現(xiàn)不同視覺效果的剪紙風格場景。