像素畫(huà)橫版游戲場(chǎng)景設(shè)計(jì)｜視差滾動(dòng)全攻略

大家好，我是像素熊老師！

今天來(lái)分享一篇超酷的像素畫(huà)動(dòng)畫(huà)教程～我們要學(xué)習(xí)的是視差滾動(dòng)技術(shù)，讓靜態(tài)的場(chǎng)景變成有深度感的無(wú)盡景觀！

什么是視差滾動(dòng)？

視差滾動(dòng)是一種2D藝術(shù)技術(shù)，通過(guò)讓背景圖像比前景圖像移動(dòng)得更慢，來(lái)營(yíng)造深度感。

僅僅通過(guò)添加運(yùn)動(dòng)，場(chǎng)景就能讓你沉浸在一個(gè)無(wú)盡的景觀中，講述宏大的故事。

視差滾動(dòng)效果展示

選擇合適的場(chǎng)景

首先要考慮的是你想動(dòng)畫(huà)化的場(chǎng)景。

視差滾動(dòng)非常適合具有大氣透視效果的分層場(chǎng)景，比如風(fēng)景畫(huà)面。

視差會(huì)增強(qiáng)深度感，但如果你的場(chǎng)景在靜態(tài)時(shí)就不具備深度感，那動(dòng)畫(huà)可能也不會(huì)有很好的效果。

視差場(chǎng)景參考

建議從簡(jiǎn)單的云朵或星星開(kāi)始，練習(xí)動(dòng)畫(huà)的執(zhí)行，再嘗試復(fù)雜的風(fēng)景。

由于你需要非常長(zhǎng)或高的圖像來(lái)在畫(huà)布上移動(dòng)，最好制作能在畫(huà)布邊緣無(wú)縫循環(huán)的圖像。

小貼士：平衡的圖層（沒(méi)有主導(dǎo)的視覺(jué)焦點(diǎn)）有助于隱藏循環(huán)的重復(fù)感。

像素級(jí)完美移動(dòng)

像素級(jí)完美移動(dòng)指的是只以像素單位為增量進(jìn)行移動(dòng)。像素藝術(shù)以1倍分辨率創(chuàng)建（一個(gè)像素單位等于屏幕上的一個(gè)像素），通常以相同比例動(dòng)畫(huà)。

由于移動(dòng)嚴(yán)格綁定到整個(gè)像素增量，畫(huà)布的像素尺寸變得至關(guān)重要。

為了移動(dòng)平滑穩(wěn)定，滾動(dòng)速率應(yīng)該每幀移動(dòng)相同的像素?cái)?shù)。要做到這一點(diǎn)，每幀移動(dòng)的像素?cái)?shù)必須能被畫(huà)布沿運(yùn)動(dòng)方向的尺寸整除，所以選擇一個(gè)能被多個(gè)整數(shù)整除的偶數(shù)值。

像素級(jí)完美移動(dòng)示例

例子中的畫(huà)布是96像素寬，可以被1,2,3,4,6,8,12,16,24,32,48整除。

這是一個(gè)很好的尺寸，因?yàn)樗峁┝撕芏嗤昝罎L動(dòng)速率的選項(xiàng)。

速度建議：我一般從最遠(yuǎn)的背景層開(kāi)始，每幀滾動(dòng)1像素，每靠近觀眾一層就使用下一個(gè)更快的完美速率。

如果想要比1像素/幀更慢，可以用1像素/2幀，但這需要圖像在同一屏幕上重復(fù)兩次。

Photoshop制作流程

現(xiàn)在我來(lái)介紹在Photoshop中使用幀動(dòng)畫(huà)工具制作視差場(chǎng)景的流程。

使用Aseprite也是可以的。核心在于分層和錯(cuò)位移動(dòng)+水平方向無(wú)縫循環(huán)。

第一步：建立畫(huà)布和圖層

首先選擇畫(huà)布尺寸（96x56像素），然后用多個(gè)圖層創(chuàng)建場(chǎng)景。

建立畫(huà)布和圖層

多圖層場(chǎng)景

第二步：擴(kuò)展畫(huà)布

確定最終圖像尺寸后，我喜歡把畫(huà)布寬度擴(kuò)展一個(gè)大的偶數(shù)像素值，以便有足夠的空間工作。圖像-畫(huà)布尺寸（??C），錨點(diǎn)保持居中。

擴(kuò)展畫(huà)布以便工作

現(xiàn)在我可以確保圖像連接順暢，并查看它們重復(fù)時(shí)的效果。

檢查圖像重復(fù)效果

第三步：制作參考線

對(duì)構(gòu)圖滿意后，我在新圖層上制作一個(gè)測(cè)量屏幕寬度的參考線。標(biāo)記能被最終圖像寬度（96像素）整除的增量。參考線做得足夠長(zhǎng)，以容納移動(dòng)最快的圖層。

制作參考線

使用參考線，我按屏幕寬度循環(huán)每個(gè)圖層。重復(fù)屏幕寬度的數(shù)量將等于動(dòng)畫(huà)時(shí)每幀移動(dòng)的像素?cái)?shù)。

第四步：設(shè)置時(shí)間軸

打開(kāi)時(shí)間軸

擴(kuò)展完所有圖層后，我打開(kāi)時(shí)間軸來(lái)制作動(dòng)畫(huà)（窗口-時(shí)間軸），然后點(diǎn)擊左下角轉(zhuǎn)換為幀動(dòng)畫(huà)。

第五步：設(shè)置幀延遲

設(shè)置幀延遲

在創(chuàng)建更多幀之前設(shè)置幀延遲。幀延遲決定動(dòng)畫(huà)的播放速度。點(diǎn)擊"其他..."可以設(shè)置自定義延遲以獲得更快的播放速度。這個(gè)例子中我設(shè)置為0.08秒。

第六步：添加幀

添加新幀

我在時(shí)間軸中添加一個(gè)新幀，這會(huì)創(chuàng)建前一幀的副本。

第七步：設(shè)置終點(diǎn)位置

第1幀看起來(lái)和之前一樣。在第2幀中，我把每個(gè)圖層向左滑動(dòng)，滑動(dòng)距離等于它重復(fù)的屏幕寬度數(shù)，一直到靜態(tài)背景的最右邊緣。

設(shè)置動(dòng)畫(huà)終點(diǎn)

設(shè)置好動(dòng)畫(huà)的起點(diǎn)和終點(diǎn)后，我可以關(guān)閉參考線圖層。

第八步：使用補(bǔ)間功能

使用補(bǔ)間命令

接下來(lái)，我選擇兩個(gè)幀并點(diǎn)擊補(bǔ)間命令。

補(bǔ)間設(shè)置

補(bǔ)間命令在兩個(gè)現(xiàn)有幀之間添加幀，并插入位置、不透明度和圖層效果的任何變化。在這種情況下，它會(huì)自動(dòng)計(jì)算我的圖層在第1幀和第2幀之間的移動(dòng)。

重要公式：總幀數(shù) = 最終畫(huà)布寬度。由于第2幀中的居中圖像與第1幀相同，這個(gè)圖層在補(bǔ)間后會(huì)被刪除。因此，添加的幀數(shù) = 最終畫(huà)布寬度 - 1。這個(gè)例子中，我添加95幀。

第九步：刪除多余幀

刪除多余幀

這會(huì)在結(jié)尾產(chǎn)生1個(gè)額外的幀，需要?jiǎng)h除以創(chuàng)建無(wú)縫循環(huán)。

第十步：調(diào)整畫(huà)布大小

調(diào)整回最終畫(huà)布大小

補(bǔ)間完運(yùn)動(dòng)后，我把畫(huà)布尺寸調(diào)整回最終期望的寬度96像素。調(diào)整畫(huà)布到更小尺寸會(huì)隱藏屏幕外的數(shù)據(jù)，所以我可以隨時(shí)回到寬畫(huà)布，所有內(nèi)容都還在那里。

完成的基礎(chǔ)動(dòng)畫(huà)

砰！每個(gè)圖層的移動(dòng)在每一幀都是一致的，循環(huán)是完美的。

添加動(dòng)態(tài)元素

添加汽車動(dòng)畫(huà)

完成視差背景動(dòng)畫(huà)后，我可以回去添加細(xì)節(jié)，比如一個(gè)與相機(jī)一起移動(dòng)的有趣主體。為了保持完整動(dòng)畫(huà)的完美循環(huán)，任何添加到視差中的恒定循環(huán)動(dòng)畫(huà)必須在一個(gè)能被總幀數(shù)整除的幀數(shù)內(nèi)循環(huán)。

這個(gè)例子中，我添加了一輛在4幀循環(huán)中動(dòng)畫(huà)的汽車。為了添加汽車，我在單獨(dú)的圖層上創(chuàng)建動(dòng)畫(huà)的每個(gè)狀態(tài)。然后我必須遍歷所有1到96幀，循環(huán)可見(jiàn)圖層來(lái)制作動(dòng)畫(huà)。

汽車動(dòng)畫(huà)圖層

導(dǎo)出GIF

要將動(dòng)畫(huà)保存為GIF，我使用"存儲(chǔ)為Web所用格式"（文件-導(dǎo)出-存儲(chǔ)為Web所用格式 ???S）。這會(huì)帶來(lái)一個(gè)有多個(gè)選項(xiàng)的面板。在右上角，我在第二個(gè)下拉菜單中將文件類型設(shè)置為GIF。

對(duì)于像素藝術(shù)，尺寸應(yīng)該只按100%的倍數(shù)縮放，質(zhì)量設(shè)置為"最近鄰"。還要確保循環(huán)選項(xiàng)設(shè)置為"永遠(yuǎn)"，讓GIF無(wú)限循環(huán)。

最終視差滾動(dòng)效果

讓我們永遠(yuǎn)在路上旅行吧。感受視差拉你進(jìn)入的感覺(jué)。

核心要點(diǎn)

• 視差滾動(dòng)非常適合具有大氣透視效果的分層場(chǎng)景，如風(fēng)景
• 屏幕寬度 = 循環(huán)總幀數(shù)- 選擇能被多個(gè)整數(shù)整除的偶數(shù)值
• 讓圖像在畫(huà)布邊緣循環(huán)，這樣你可以重復(fù)圖像來(lái)擴(kuò)展它
• 圖像重復(fù)次數(shù) = 每幀移動(dòng)的像素?cái)?shù)（滾動(dòng)速率）
• 平衡的圖層（沒(méi)有主導(dǎo)的視覺(jué)焦點(diǎn)）有助于隱藏重復(fù)圖像
• 任何添加到視差中的恒定循環(huán)動(dòng)畫(huà)必須在一個(gè)能被總幀數(shù)整除的幀數(shù)內(nèi)循環(huán)
• 使用能補(bǔ)間起點(diǎn)和終點(diǎn)之間運(yùn)動(dòng)的軟件來(lái)制作動(dòng)畫(huà)
• 如果操作正確，每個(gè)圖層的滾動(dòng)速率在每一幀都應(yīng)該相同，動(dòng)畫(huà)應(yīng)該無(wú)縫循環(huán)

把靜態(tài)場(chǎng)景變成無(wú)盡空間的感覺(jué)就像魔法一樣。我在像素畫(huà)旅程的早期就開(kāi)始使用這種技術(shù)，但隨著時(shí)間的推移，我的熟練程度和執(zhí)行能力都有了很大提高。所以我認(rèn)為即使是初學(xué)者也可以嘗試這個(gè)教程，通過(guò)實(shí)踐來(lái)學(xué)習(xí)。

實(shí)際上，動(dòng)畫(huà)本身是小菜一碟。制作具有深度和平衡的優(yōu)質(zhì)藝術(shù)才是創(chuàng)建吸引人的循環(huán)的主要挑戰(zhàn)。好好規(guī)劃，不要急于完成藝術(shù)。然而，在花費(fèi)太多時(shí)間在藝術(shù)上之前，最好先進(jìn)行運(yùn)動(dòng)測(cè)試，特別是如果你對(duì)像素移動(dòng)速度沒(méi)有很好的感覺(jué)時(shí)。

參考資料

https://www.slynyrd.com/blog/2019/11/12/pixelblog-23-parallax-scrolling: https://www.slynyrd.com/blog/2019/11/12/pixelblog-23-parallax-scrolling