《游戲原畫設(shè)計(jì)》第6章

第6章游戲場景設(shè)計(jì)與繪制簽到掃碼下載文旌課堂APP掃碼簽到（2022.3.2515:00至2022.3.2515:10）簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時(shí)間，學(xué)生通過“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。。本章首先講解游戲場景設(shè)計(jì)基礎(chǔ)知識(shí)，包括建筑結(jié)構(gòu)、建筑風(fēng)格、透視規(guī)律等，然后講解節(jié)奏在游戲場景設(shè)計(jì)中的運(yùn)用，最后以酒神坊和荒漠之城的設(shè)計(jì)與繪制為例，演練游戲場景的設(shè)計(jì)過程及繪制方法。通過實(shí)戰(zhàn)演練，讀者可以清楚地知道游戲原畫設(shè)計(jì)的實(shí)際流程，從而為以后的工作打下良好的基礎(chǔ)。本章導(dǎo)讀本章目標(biāo)學(xué)習(xí)目標(biāo)了解建筑結(jié)構(gòu)、建筑風(fēng)格，以及透視規(guī)律。掌握節(jié)奏在游戲場景設(shè)計(jì)中的運(yùn)用。熟悉游戲場景的設(shè)計(jì)過程及方法。思政目標(biāo)具備良好的觀察能力、理解能力和空間思維能力。拓展學(xué)習(xí)的深度和廣度，為成為游戲原畫師打下堅(jiān)實(shí)的基礎(chǔ)。目錄游戲場景設(shè)計(jì)基礎(chǔ)知識(shí)節(jié)奏在游戲場景設(shè)計(jì)中的運(yùn)用設(shè)計(jì)并繪制游戲建筑——酒神坊6.16.26.3設(shè)計(jì)并繪制游戲場景——荒漠之城6.4游戲場景設(shè)計(jì)基礎(chǔ)知識(shí)6.16.1.1

建筑結(jié)構(gòu)一幅游戲場景原畫作品中通常包括自然風(fēng)景（如山、川、樹、木等）、建筑（屬于人造環(huán)境，如房屋、橋梁、雕塑等）、人物等。其中，繪制房屋建筑需要先了解建筑結(jié)構(gòu)。建筑結(jié)構(gòu)是指房屋建筑中由各種構(gòu)件（包括屋架、柱等）組成的能夠承受各種作用的體系。通常，房屋建筑的設(shè)計(jì)都是在此結(jié)構(gòu)基礎(chǔ)上進(jìn)行的。提示需要注意的是，房屋建筑中不同位置的材質(zhì)表現(xiàn)是不同的；繪制自然風(fēng)景或其他建筑同樣需要了解它們的結(jié)構(gòu)，此處僅選擇房屋建筑進(jìn)行講解，讀者可根據(jù)實(shí)際需要自行了解其他元素的結(jié)構(gòu)。6.1.1建筑結(jié)構(gòu)6.1.2建筑風(fēng)格1．中國建筑風(fēng)格中國建筑早已自成流派，它們代表著不同年代、不同區(qū)域的文化風(fēng)貌和歷史沉淀，其中典型的有徽派建筑、京派建筑、閩派建筑等。（1）徽派建筑：是江南古建筑的代表，建筑特點(diǎn)是依山面水、構(gòu)思精巧、自然得體等。（2）京派建筑：最具代表性的莫過于老北京四合院，建筑特點(diǎn)是青磚灰瓦、紅漆大門、造型古樸等。（3）閩派建筑：主要代表為土樓和馬鞍墻。其中，土樓是以土作墻而建造起來的集體建筑；馬鞍墻是一種封火墻，因狀似馬鞍而得名。6.1.2建筑風(fēng)格2．國外建筑風(fēng)格國外常見的建筑風(fēng)格有古希臘風(fēng)格建筑、拜占庭風(fēng)格建筑、哥特式風(fēng)格建筑等。（1）古希臘風(fēng)格建筑：早期為長方形有門廊的建筑，后來加入柱式建筑元素。（2）拜占庭風(fēng)格建筑：帶有穹頂、拱門和尖頂?shù)冉ㄖ亍＃?）哥特式風(fēng)格建筑：使用了尖形拱門、橫接拱頂和巨大的花窗玻璃等建筑元素。6.1.2建筑風(fēng)格這些建筑風(fēng)格廣泛應(yīng)用于游戲場景中。例如，京派建筑在《劍俠情緣三》場景中的運(yùn)用；哥特式風(fēng)格建筑在《戰(zhàn)錘Online》場景中的運(yùn)用。6.1.2建筑風(fēng)格說一說你還知道哪些建筑風(fēng)格，它們的特點(diǎn)是什么，哪些游戲中運(yùn)用了這些建筑風(fēng)格。6.1.3

透視規(guī)律1．平行透視平行透視是指正方體的上下兩個(gè)面與地面平行，一個(gè)面與畫面平行，觀看者能看到這個(gè)面的真實(shí)形狀時(shí)所產(chǎn)生的透視現(xiàn)象。其中，與畫面垂直的線無限延長后都將消失于一個(gè)心點(diǎn)（觀看者眼睛正對(duì)視平線上的一點(diǎn)），因此平行透視又叫一點(diǎn)透視。提示與人眼等高的一條水平線稱為視平線。6.1.1建筑結(jié)構(gòu)6.1.3

透視規(guī)律2．成角透視成角透視即兩點(diǎn)透視，是指正方體的上下兩個(gè)面與地面平行，觀看者能看到的兩個(gè)面與畫面成一定角度時(shí)所產(chǎn)生的透視現(xiàn)象。此時(shí)與畫面成一定角度且與地面平行的兩組線無限延長后分別消失在視平線上的兩個(gè)點(diǎn)上，這兩個(gè)點(diǎn)稱為消失點(diǎn)。6.1.3

透視規(guī)律3．傾斜透視傾斜透視也叫三點(diǎn)透視，是指正方體的所有面既不與畫面平行，也不與地面平行時(shí)所產(chǎn)生的透視現(xiàn)象。此時(shí)沿各可見面邊的線無限延長后分別消失在三個(gè)點(diǎn)上，其中有兩個(gè)消失點(diǎn)在視平線上，還有一個(gè)消失點(diǎn)在視平線以上（稱為天點(diǎn)）或以下（稱為地點(diǎn)）。提示除上述內(nèi)容外，在進(jìn)行游戲場景設(shè)計(jì)時(shí)還要注意光線及構(gòu)圖。（1）光線：試想一下，在沒有光線的情況下觀察一件事物，將難以觀察其具體形態(tài)，可見良好的光線可以讓觀看者提高對(duì)事物的認(rèn)識(shí)。不僅如此，光線也是場景氣氛塑造的重要因素。6.1.3透視規(guī)律提示（2）構(gòu)圖：是指通過一定的形式美法則對(duì)畫面中的元素進(jìn)行有序的排列，從而構(gòu)成一個(gè)協(xié)調(diào)、完整的畫面。構(gòu)圖方式有很多，常見的有中心點(diǎn)構(gòu)圖、十字形構(gòu)圖、三角形構(gòu)圖、對(duì)角線構(gòu)圖等。另外，與設(shè)計(jì)游戲角色一樣，設(shè)計(jì)游戲場景時(shí)也要注意空間比例。6.1.3透視規(guī)律節(jié)奏在游戲場景設(shè)計(jì)中的運(yùn)用6.26.2.1

節(jié)奏是什么節(jié)奏是一個(gè)很玄妙的設(shè)計(jì)理念，通常將節(jié)奏想象成音符更容易理解，如將多個(gè)“do”音符和停頓以不同的形式組合起來就可以得到多種不同的節(jié)奏。（1）無節(jié)奏：多個(gè)“do”音符重復(fù)、不停地出現(xiàn)，就是無節(jié)奏。（2）隨機(jī)節(jié)奏：多個(gè)“do”音符無規(guī)律、不停地出現(xiàn)，就是隨機(jī)節(jié)奏。其中，“do”音符的大?。ㄒ部梢哉f波峰的高低）代表強(qiáng)弱，兩個(gè)“do”音符之間的波谷距離代表停頓時(shí)間。這種節(jié)奏是非常自然的節(jié)奏，但易給人混亂的感覺，讓人無法找到明確的設(shè)計(jì)感，通常用于表現(xiàn)自然生物生長狀態(tài)或事物隨機(jī)擺放。6.2.1

節(jié)奏是什么（3）規(guī)律節(jié)奏：多個(gè)“do”音符有規(guī)律、不停地出現(xiàn)，就是規(guī)律節(jié)奏。這種節(jié)奏有明確的設(shè)計(jì)感，一般用于簡單場景設(shè)計(jì)或局部場景設(shè)計(jì)中?！癲o”音符的強(qiáng)弱一樣的，每隔兩個(gè)“do”音符會(huì)停頓一拍，如此往復(fù)。在上一節(jié)奏的基礎(chǔ)上加了一個(gè)強(qiáng)音，相當(dāng)于用一些重復(fù)的弱音去襯托一個(gè)強(qiáng)音，這個(gè)強(qiáng)音就是明顯的視覺重點(diǎn)，通常用來放置主體。6.2.1

節(jié)奏是什么（4）復(fù)雜節(jié)奏：多個(gè)“do”音符不停地出現(xiàn)，但在強(qiáng)弱、停頓上都有變化，就是復(fù)雜節(jié)奏。例如，

下圖中清晰可見三個(gè)明顯的波峰，也就是三個(gè)細(xì)節(jié)點(diǎn)，但它們之間又有強(qiáng)度差異，層次非常豐富。這種節(jié)奏適用于復(fù)雜的場景設(shè)計(jì)中，如《哈利·波特》中的霍格沃茨學(xué)院。6.2.2節(jié)奏的運(yùn)用通過6.2.1節(jié)的介紹，相信大家已經(jīng)了解了節(jié)奏，現(xiàn)在將節(jié)奏拆分成多個(gè)元素（也就是“do”音符），每個(gè)元素都可以當(dāng)作節(jié)奏的一部分進(jìn)行控制，這樣節(jié)奏就可以千變?nèi)f化了。例如，“1”是單純重復(fù)并且上下波動(dòng)的節(jié)奏；“2”是重復(fù)并且指數(shù)式縮小的同時(shí)上下波動(dòng)的節(jié)奏；“3”是在“2”的基礎(chǔ)上對(duì)視覺重點(diǎn)進(jìn)行了處理，處理方法是讓某個(gè)元素脫離原本的規(guī)則，并且為其添加強(qiáng)化色——橙色。6.2.2節(jié)奏的運(yùn)用“1”是單純重復(fù)并且向內(nèi)旋轉(zhuǎn)排列，因?yàn)闆]有變化所以看不出來效果；“2”是重復(fù)并且指數(shù)式縮小的同時(shí)向內(nèi)旋轉(zhuǎn)排列；“3”是在“2”的基礎(chǔ)上對(duì)視覺重點(diǎn)進(jìn)行了處理，處理方法也是讓某個(gè)元素脫離原本的規(guī)則，為其添加強(qiáng)化色——橙色，并且改變其形狀。提示（1）與游戲角色設(shè)計(jì)一樣，游戲場景設(shè)計(jì)也可以本體為原型設(shè)計(jì)、通過組合與嫁接設(shè)計(jì)及通過天馬行空創(chuàng)造場景。其中，通過組合與嫁接設(shè)計(jì)包括不同風(fēng)格建筑的結(jié)合、建筑與人物形象結(jié)合、建筑與生物形象結(jié)合等。（2）設(shè)計(jì)游戲場景時(shí)，還要注意體現(xiàn)其功能。（3）節(jié)奏也可以運(yùn)用到游戲角色設(shè)計(jì)和游戲道具設(shè)計(jì)中。另外，游戲角色也會(huì)有不同的風(fēng)格，如暗黑、哥特、朋克等。6.2.2節(jié)奏的運(yùn)用設(shè)計(jì)并繪制游戲建筑——酒神坊6.3本節(jié)以游戲建筑“酒神坊”為例講解游戲建筑的設(shè)計(jì)與繪制方法。本案例最終效果可參考本書配套素材“素材與實(shí)例”→“第6章”文件夾中的“酒神坊.psd”文件。6.3.1分析策劃方案“酒神坊”設(shè)定文案酒神坊是洛陽城中有名的建筑之一，是俠義之士、逍遙劍客的必到之處，在這里他們可以舉杯暢飲、高談闊論。酒神坊也是洛陽城中最具特色的建筑，從外觀上看，青磚灰瓦、紅漆門窗，造型古樸；從內(nèi)部裝飾上看，有屏風(fēng)、酒架、隔扇等，雖為酒坊，卻清新優(yōu)雅。從設(shè)定文案中提取關(guān)鍵詞，得到游戲的時(shí)代背景和建筑風(fēng)格。（1）時(shí)代背景：從酒神坊的到訪人群可以看出，其時(shí)代背景為中國古代，因此在建筑中可加入一些中國元素，如中式酒瓶、書法等。（2）建筑風(fēng)格：酒神坊的外觀描述為“青磚灰瓦、紅漆門窗，造型古樸”，與京派建筑風(fēng)格相似，因此可以參考京派建筑進(jìn)行設(shè)計(jì)。6.3.2

收集素材根據(jù)策劃方案的分析結(jié)果收集素材。6.3.3繪制原畫下面根據(jù)策劃方案和素材圖繪制酒神坊。步驟1利用3D軟件創(chuàng)建出酒神坊的模型，并導(dǎo)出為Photoshop支持的格式。此處需注意，先將酒神坊合理地拆分成多個(gè)組成部分，然后將各部分簡化成基本圖形，如球體、圓柱體等（方便建模），接著將這些圖形按照一定的節(jié)奏放置，從而形成疏密有致、主次分明的模型。步驟2在Photoshop中打開建好的模型，然后新建一個(gè)圖層并以模型為基礎(chǔ)繪制草稿。繪制完成后隱藏模型圖層。步驟3新建一個(gè)圖層，然后細(xì)化草稿，加入與時(shí)代背景相符合的建筑元素，并做好功能劃分，讓酒神坊布局更加合理，此時(shí)需注意酒神坊的透視、比例等。加入一個(gè)人物，借此表現(xiàn)酒神坊的大小。繪制完成后隱藏草稿圖層。步驟4新建一個(gè)圖層并細(xì)化出酒神坊的線稿，此時(shí)需注意線條的流暢度。細(xì)化完成后設(shè)置其圖層混合模式為“正片疊底”。需要注意的是，如果想繪制直線，可首先在起點(diǎn)處單擊，然后按住“Shift”鍵的同時(shí)在終點(diǎn)處單擊；對(duì)于帶有重復(fù)紋樣的部分，如窗戶，可暫時(shí)不進(jìn)行細(xì)致刻畫，后續(xù)統(tǒng)一添加紋樣。6.3.3

繪制原畫步驟5新建一個(gè)圖層并為其中一扇窗戶添加紋樣，然后按住“Alt”鍵的同時(shí)拖動(dòng)紋樣至其他窗戶處，即可復(fù)制并應(yīng)用紋樣到其他窗戶上，采用此方法為所有窗戶、墻面等添加紋樣。在畫面中合適位置添加文本，將其字體樣式設(shè)置為書法字體，如草書、行書，并調(diào)整文本的大小和位置，然后調(diào)整酒神坊的不足之處，如修改文化長廊，增加其透氣性。步驟6將除背景和隱藏圖層外的所有圖層合并，并設(shè)置其圖層混合模式為“正片疊底”，然后在其下方新建一個(gè)名為“鋪色”的圖層，并用灰色（#a0a0a0）為酒神坊鋪色，此時(shí)需注意色塊邊緣要清晰。步驟8新建一個(gè)圖層并設(shè)置其圖層混合模式為“正片疊底”，同樣將其剪貼于“鋪色”圖層中，然后用灰色（#a0a0a0）繪制酒神坊中光線難以到達(dá)的地方和投影，使明暗關(guān)系更加明顯。步驟7新建一個(gè)圖層并設(shè)置其圖層混合模式為“正片疊底”，然后將其剪貼于“鋪色”圖層中，接著根據(jù)光源照射方向用灰色（#a0a0a0）繪制酒神坊的背光面，此時(shí)可在圖像編輯區(qū)合適位置繪制簡易的光線示意圖，避免繪制過程中忘記光源的照射方向。采用上述方法為地面鋪色并繪制酒神坊的投影。6.3.3

繪制原畫步驟9新建一個(gè)圖層并設(shè)置其圖層混合模式為“正片疊底”，還是將其剪貼于“鋪色”圖層中，然后用深灰色（#3f3f3f）繪制酒神坊中閉塞的陰影區(qū)域，如門洞。步驟10新建一個(gè)圖層并設(shè)置其圖層混合模式為“疊加”，將其剪貼于“鋪色”圖層中，然后用淺灰色（#d3d3d3）繪制酒神坊的受光面，此時(shí)需注意不要涂抹到酒神坊的背光面。步驟11將除背景和線稿圖層外的所有圖層合并，然后按“Ctrl+J”組合鍵創(chuàng)建圖層副本，接著按“Ctrl+L”組合鍵打開“色階”對(duì)話框，在其中設(shè)置參數(shù)后單擊“確定”按鈕調(diào)整酒神坊亮度，最后設(shè)置其圖層混合模式為“正片疊底”并剪貼于原合并圖層中。步驟12選擇原合并圖層，并在按住“Ctrl”鍵的同時(shí)單擊圖層縮覽圖將其載入選區(qū)，然后為其填充白色，并按“Ctrl+D”組合鍵取消選區(qū)。步驟13置入本書配套素材“毛筆筆刷效果.png”并放置于背景圖層上方，然后設(shè)置其圖層不透明度為“25%”，接著在線稿圖層下方新建一個(gè)圖層，并在酒瓶上方繪制煙霧。6.3.3

繪制原畫步驟14在原合并圖層上方新建一個(gè)圖層，然后為酒神坊的各部分上固有色，此時(shí)可在圖像編輯區(qū)合適位置放置線稿圖和所用顏色色塊，以方便繪制。再次新建一個(gè)圖層，并為酒神坊門口的條幅添加紋樣。步驟15新建一個(gè)圖層，設(shè)置其圖層混合模式為“疊加”，圖層不透明度為“60%”，并剪貼于原合并圖層中，接著用淺黃色（#e5e4dd）繪制酒神坊的受光面?？啥啻螢榫粕穹坏氖芄饷姣B色，使其效果更加自然，然后采用同樣方法繪制草坪。步驟16新建一個(gè)圖層，設(shè)置其圖層混合模式為“正片疊底”，圖層不透明度為“55%”，并剪貼于原合并圖層中，然后繪制瓦片紋理。步驟17新建一個(gè)圖層，設(shè)置其圖層混合模式為“柔光”，并剪貼于原合并圖層中，然后繪制樹木紋理。步驟18新建圖層并剪貼于原合并圖層中，然后繪制石頭及其投影。6.3.3

繪制原畫步驟19新建一個(gè)圖層，設(shè)置其圖層混合模式為“疊加”，圖層不透明度為“75%”，并剪貼于原合并圖層中，然后用淺黃色（#e2c4a4）繪制酒神坊的受光面，為其添加暖色調(diào)。可多次為酒神坊的受光面疊加暖色，使其效果更加自然。步驟20新建一個(gè)圖層，設(shè)置其圖層混合模式為“線性減淡”，并剪貼于原合并圖層中，然后用不同明度的紅色繪制燈籠處，為其添加光暈。步驟22選擇背景圖層并為其填充淺灰色（#f3f3f3），然后在其上方新建一個(gè)圖層，并設(shè)置其圖層混合模式為“正片疊底”，接著用“矩形選框工具”在圖像編輯區(qū)下方繪制矩形選區(qū)，并為其填充比背景稍微深一點(diǎn)的灰色（#e5e5e6），最后按“Ctrl+D”組合鍵取消選區(qū)。步驟21在所有圖層上方新建一個(gè)圖層，并采用上述方法在畫面合適位置繪制樹木，使畫面效果更加豐富，然后統(tǒng)一調(diào)整樹木的不足之處，如添加枝丫。設(shè)計(jì)并繪制游戲場景——荒漠之城6.4本節(jié)以游戲場景“荒漠之城”為例講解游戲場景的設(shè)計(jì)與繪制方法。本案例最終效果可參考本書配套素材“素材與實(shí)例”→“第6章”文件夾中的“荒漠之城.psd”文件。6.4.1

分析策劃方案“荒漠之城”設(shè)定文案中世紀(jì)，有一座城市名為荒漠之城，它是玩家們初次進(jìn)入“江湖”的接引地，是玩家們故事開啟的地方。這里黃沙漫漫、連綿不絕，但阻擋不了玩家們的熱情，他們將在這里譜寫驚天動(dòng)地的“江湖”故事。從設(shè)定文案中提取關(guān)鍵詞，得到游戲的時(shí)代背景和場景風(fēng)格。（1）時(shí)代背景：中世紀(jì)是指從公元5世紀(jì)后期到公元15世紀(jì)中期的這段時(shí)間，在這期間，出現(xiàn)了三大典型建筑風(fēng)格——拜占庭風(fēng)格、羅馬風(fēng)格和哥特式風(fēng)格，因此場景中可加入這三種風(fēng)格的建筑元素。（2）場景風(fēng)格：此處繪制的游戲場景名為荒漠之城，且設(shè)定文案中有“黃沙漫漫、連綿不絕”描述，因此場景中可加入黃沙、石頭等元素。6.4.2收集素材根據(jù)策劃方案的分析結(jié)果收集素材。6.4.3繪制原畫下面根據(jù)策劃方案和素材圖繪制荒漠之城。步驟1新建文檔并新建一個(gè)圖層，根據(jù)選定的透視和視平線高度添加透視網(wǎng)格。此處繪制的荒漠之城采用成角透視，并將視平線高度設(shè)置得比較低（仰視），以表現(xiàn)場景中建筑的宏偉、高大，同時(shí)避免畫面顯得呆板。另外，畫面中的前景為空曠的沙漠，中景為建筑，但建筑的盡頭并沒有表現(xiàn)出來，遠(yuǎn)景為天空，如此安排可以為畫面增加層次感和神秘感。步驟2新建一個(gè)圖層并用不同明度的棕色繪制出荒漠之城的草稿，此時(shí)需表現(xiàn)出一定的黑白灰關(guān)系。繪制完成后，刪除透視網(wǎng)格圖層。步驟3細(xì)致刻畫畫面中的各部分，此時(shí)需表現(xiàn)沙漠獨(dú)有的氛圍，然后添加石頭等元素豐富畫面，同時(shí)用重色拉開畫面的前后關(guān)系。步驟4用明度較高的黃色繪制黃沙的受光面。步驟5用明度較低的棕色和黑色繪制黃沙、石頭等的背光面，此時(shí)需把黃沙和石頭分開。答疑時(shí)間6.4.3繪制原畫6.4.3繪制原畫步驟6為建筑附近的天空添加藍(lán)色（橙色的互補(bǔ)色），增強(qiáng)畫面的對(duì)比，此時(shí)需注意藍(lán)色的使用面積和純度。另外，也可在畫面中事物的背光面添加少許藍(lán)色，豐富畫面色彩。步驟7細(xì)化建筑、黃沙等，此時(shí)需表現(xiàn)黃沙的起伏變化，使其形象特征更加明顯，然后在畫面中添加一個(gè)人物，作為衡量其他事物大小的參考。需要注意的是，細(xì)化時(shí)不要一直“摳”某一事物的細(xì)節(jié)，要對(duì)畫面中的所有事物都進(jìn)行細(xì)化（個(gè)別情況除外），使畫面表現(xiàn)程度統(tǒng)一，整體性高。至此，荒漠之城氣氛?qǐng)D繪制完成。步驟8新建一個(gè)名為“沙漠”的圖層，并細(xì)致刻畫黃沙、石頭等。需要注意的是，刻畫時(shí)要同步調(diào)整