像素畫風(fēng)吹動(dòng)畫：粒子、頭發(fā)和植物

前言

風(fēng)本身看不見，像素里只能靠“帶動(dòng)的東西”來騙眼睛。

SLYNYRD 這篇Pixelblog 33給了一套很實(shí)用的工具箱：粒子、塵土、布料／頭發(fā)、以及植被動(dòng)畫。

圖注：先感受“粒子軌跡”的節(jié)奏，再拆到各模塊。

第一步：粒子軌跡到塵土

粒子軌跡：最輕量，適合暗示氣流；疊落葉、碎屑、塵土立刻成立。
塵土：從地面卷起，顆粒感更重，適合土路、沙漠、干地——地球上大部分戶外場(chǎng)景都適用。

圖注：基礎(chǔ)粒子、小型煙塵、大型煙塵。

第二步：布料與頭發(fā)——用“軌跡 + 等距波”做可循環(huán)

流程四步：

1. 先簡(jiǎn)化會(huì)被吹動(dòng)的外輪廓軌跡
2. 最受風(fēng)的邊緣上標(biāo)流徑點(diǎn)
3. 沿流徑做波形曲線運(yùn)動(dòng)：波幅從小變大，像能量往外送；
4. 循環(huán)時(shí)，波與波之間間距相等，且每幀位移恒定

舉例：流徑點(diǎn)相隔 12px，每幀平移 2px，則6 幀可閉環(huán)。旗幟一列里重復(fù)多道波，就是同一規(guī)律的復(fù)制。

頭發(fā)在同樣波形上再拆綹：大形動(dòng)完，再給劉海等局部加次級(jí)擺動(dòng)。

小精靈上平涂往往比復(fù)雜陰影更干凈，陰影加不好會(huì)把動(dòng)態(tài)噪聲放大。

圖注：重點(diǎn)在“等距 + 等速”才能無縫 loop。

第三步：植被——搖曳、飄落和沙沙，可單用可混搭

搖曳（Waving）：把樹冠拆多層，每層做極簡(jiǎn)菱形路徑（例如：右上 1px → 下 1px → 左 1px 回位），各層錯(cuò)相位就成片浪。大形滿意后，再在某些幀改葉團(tuán)剪影做細(xì)節(jié)。

飄落（Falling）：從2×2 粒子復(fù)制一堆，沿路徑每幀 1px走；再隔幀削掉粒子上半制造翻轉(zhuǎn)感。

沙沙（Rustling）：超省事：?jiǎn)纹~子2～4 個(gè)姿勢(shì)來回；按風(fēng)向依次觸發(fā)鄰近葉片，形成定向流動(dòng)感，4 幀往往就夠一股溫和的風(fēng)。

圖注：三種可疊加，風(fēng)會(huì)立刻“有層次”。

結(jié)語

場(chǎng)景不動(dòng)時(shí)，先想要不要加風(fēng)，再選粒子 / 布料 / 植被哪一層最劃算。

循環(huán)動(dòng)畫記得先算間距 ÷ 每幀步長(zhǎng) = 循環(huán)長(zhǎng)，別畫完才發(fā)現(xiàn)對(duì)不上。

參考資料

https://www.slynyrd.com/blog/2021/7/16/pixelblog-33-wind-effects: https://www.slynyrd.com/blog/2021/7/16/pixelblog-33-wind-effects