像素畫橫版游戲場景設(shè)計(jì)｜視差滾動全攻略

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

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

什么是視差滾動？

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

僅僅通過添加運(yùn)動，場景就能讓你沉浸在一個無盡的景觀中，講述宏大的故事。

視差滾動效果展示

選擇合適的場景

首先要考慮的是你想動畫化的場景。

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

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

視差場景參考

建議從簡單的云朵或星星開始，練習(xí)動畫的執(zhí)行，再嘗試復(fù)雜的風(fēng)景。

由于你需要非常長或高的圖像來在畫布上移動，最好制作能在畫布邊緣無縫循環(huán)的圖像。

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

像素級完美移動

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

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

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

像素級完美移動示例

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

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

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

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

Photoshop制作流程

現(xiàn)在我來介紹在Photoshop中使用幀動畫工具制作視差場景的流程。

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

第一步：建立畫布和圖層

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

建立畫布和圖層

多圖層場景

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

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

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

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

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

第三步：制作參考線

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

制作參考線

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

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

打開時間軸

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

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

設(shè)置幀延遲

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

第六步：添加幀

添加新幀

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

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

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

設(shè)置動畫終點(diǎn)

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

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

使用補(bǔ)間命令

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

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

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

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

第九步：刪除多余幀

刪除多余幀

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

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

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

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

完成的基礎(chǔ)動畫

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

添加動態(tài)元素

添加汽車動畫

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

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

汽車動畫圖層

導(dǎo)出GIF

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

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

最終視差滾動效果

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

核心要點(diǎn)

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

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

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

參考資料

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