【風農翻譯】畫素寶典 #4 視差、渲染、緩衝、流程

畫素寶典

這是來自佩德羅・梅代魯斯（Pedro Medeiros，@saint11）授權的一系列畫素美術教程，由風農翻譯整理。

佩德羅・梅代魯斯最為知名的作品莫過於《塞萊斯特山（蔚藍，Celeste）》，不過他持續在網路上釋出的畫素美術教程也同樣相當知名。這裡選擇的教程就是經過風農翻譯整理內容。

相關連結：

Pedro Medeiros@Patreon
風農@indienova
風農@bilibili 專欄

---

視差和深度






視差是遊戲和程式設計裡我很喜歡的技術。非常好實現，是 2D 遊戲裡表現深度的好辦法。

我還附帶了一個 .love 的例子，包括一個 .lua 的原始碼檔案，你可以看看。

要執行 .love 檔案，需要先下載 Löve： https://love2d.org/

parallax.love： https://www.patreon.com/file?h=7863658&i=795078

main.lua：https://www.patreon.com/file?h=7863658&i=795082


風農：這一期跟後面有幾期他都用到了這個叫 love 的引擎，我完全沒用過，所以大家就領會領會精神就好了，如果感興趣也可以去研究一下。


渲染技巧






這一期是關於程式設計/美術的教程。

稍微有點偏向程式設計，但是對於想了解我常用的，簡單的渲染技巧的同學會有點用。

希望這能幫助大家寫自己的渲染程式碼。調整渲染能做到很多事情：精靈拖尾痕跡，故障效果，動態模糊等等。

附帶了一個 .love 的例子，包括一個 .lua 的原始碼檔案，你可以看看。

render_tricks.love： https://www.patreon.com/file?h=7947098&i=809238

main.lua： https://www.patreon.com/file?h=7947098&i=809239

閃爍那個，原理是這樣的：

一般遊戲引擎裡都獲取時間的辦法。

用這個時間數字，比如 3 秒，除以 4, 能得到商是 0，模/餘數是 3。


大概是這麼個意思吧。


動畫緩衝






這節是程式設計和美術通用的。改變移動物體的速度能給動畫增加個性，衝擊力，讓它更有趣。

對程式設計來說，使用補間動畫時，別忘了加上緩衝函式。我特意給大家制作了一個簡單的緩衝函式小抄，用的 Löve framework，（基於 Albano 的 glide  https://bitbucket.org/jacobalbano/glide）。

風農：tween 在程式設計裡一般指補間動畫，意思是給兩個位置，之間的運動由程式計算完成，所以說別忘了加上緩衝函式。有很多的庫做這個。

一定注意看那幾個代表位置的白塊，那個東西就能解釋他說的理念。

Easing.love：https://www.patreon.com/file?h=8030922&i=825976


main.lua：https://www.patreon.com/file?h=8030922&i=825977

後面應該就沒有這個什麼 love 引擎的了。

畫素畫流程






風農：這節圖特別多，不過後面的靜態圖也都是動圖裡面的，只是拿出來，讓大家慢慢看。


動圖後面 9 幅圖都是定時特別長的，不是你手機卡住了。

今天的教程稍有不同。因為要說的是流程，我決定用更傳統的序列的形式。

帶著定時閱讀文字比較有壓力，所以這個帖子我加了靜態幀。



















感謝大家的支援，下節見。

廢墟





這個教程是關於廢墟或者是損毀的東西。更多的是一些參考和竅門。我的主要建議是不要做的太過。加太多的裂痕，或者太多的對比，會顯得所有東西都很亂。

圖中提到的故障效果教程在之前的課程中可以找到

今天開始我要去溫哥華，再到舊金山參加 GDC，所以可能要有一兩週斷更了。不過之後馬上更新。

希望 GDC 上能看到大家：D

很驕傲的說目前這個系列已經有 6 個月了！不敢相信我已經做了 24 個教程！

這都是因為大家的支援和分享，非常感謝！


相關：

【風農翻譯】畫素寶典 #1
【風農翻譯】畫素寶典 #2
【風農翻譯】畫素寶典 #3

作者：Pedro Medeiros
譯者：風農
來源：INDIENOVA
地址：https://indienova.com/indie-game ... xel-art-tutorial-5/