像素畫橫版游戲場景設計｜視差滾動全攻略

像素畫橫版游戲場景設計｜視差滾動全攻略

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

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

什么是視差滾動？

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

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

視差滾動效果展示

選擇合適的場景

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

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

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

視差場景參考

建議從簡單的云朵或星星開始，練習動畫的執行，再嘗試復雜的風景。

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

小貼士：平衡的圖層（沒有主導的視覺焦點）有助于隱藏循環的重復感。

像素級完美移動

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

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

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

像素級完美移動示例

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

這是一個很好的尺寸，因為它提供了很多完美滾動速率的選項。

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

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

Photoshop制作流程

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

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

第一步：建立畫布和圖層

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

建立畫布和圖層

多圖層場景

第二步：擴展畫布

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

擴展畫布以便工作

現在我可以確保圖像連接順暢，并查看它們重復時的效果。

檢查圖像重復效果

第三步：制作參考線

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

制作參考線

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

第四步：設置時間軸

打開時間軸

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

第五步：設置幀延遲

設置幀延遲

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

第六步：添加幀

添加新幀

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

第七步：設置終點位置

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

設置動畫終點

設置好動畫的起點和終點后，我可以關閉參考線圖層。

第八步：使用補間功能

使用補間命令

接下來，我選擇兩個幀并點擊補間命令。

補間設置

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

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

第九步：刪除多余幀

刪除多余幀

這會在結尾產生1個額外的幀，需要刪除以創建無縫循環。

第十步：調整畫布大小

調整回最終畫布大小

補間完運動后，我把畫布尺寸調整回最終期望的寬度96像素。調整畫布到更小尺寸會隱藏屏幕外的數據，所以我可以隨時回到寬畫布，所有內容都還在那里。

完成的基礎動畫

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

添加動態元素

添加汽車動畫

完成視差背景動畫后，我可以回去添加細節，比如一個與相機一起移動的有趣主體。為了保持完整動畫的完美循環，任何添加到視差中的恒定循環動畫必須在一個能被總幀數整除的幀數內循環。

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

汽車動畫圖層

導出GIF

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

對于像素藝術，尺寸應該只按100%的倍數縮放，質量設置為"最近鄰"。還要確保循環選項設置為"永遠"，讓GIF無限循環。

最終視差滾動效果

讓我們永遠在路上旅行吧。感受視差拉你進入的感覺。

核心要點

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

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

實際上，動畫本身是小菜一碟。制作具有深度和平衡的優質藝術才是創建吸引人的循環的主要挑戰。好好規劃，不要急于完成藝術。然而，在花費太多時間在藝術上之前，最好先進行運動測試，特別是如果你對像素移動速度沒有很好的感覺時。

參考資料

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