
前言
今天要推薦的是 PixelGraphics,一款專針對 Unity 的像素風格遊戲設計的強大渲染插件,不僅能夠輕鬆打造【草地擺動】、【互動植被】等效果,還支援速度紋理(Velocity Texture),實現【角色】與【環境】的自然互動,提升遊戲的沉浸感!無論是【風力影響】、【角色動態碰撞】還是【草叢晃動】,PixelGraphics 都能提供靈活高效的解決方案,讓你的遊戲場景更加生動。
本篇文章將結合【基礎功能】與【實用範例】,帶你深入了解如何【安裝】與【設定】插件、【使用速度發射器】以及【調整渲染效果】,並提供【詳細介紹】與【補充說明】,幫助開發者快速掌握這款互動特效工具!如果你正在尋找一款能提升像素風視覺表現的插件,千萬不要錯過 PixelGraphics!

Unity PixelGraphics 插件介紹
PixelGraphics 是一款由 Aarthificial 開發的 Unity 像素風場景渲染插件,它提供高效的【草地擺動】和【互動植被】效果,並支援速度紋理(Velocity Texture),讓遊戲中的【角色】與【環境】能夠產生自然互動,增強畫面的沉浸感,無論是【風力影響】、【角色動態碰撞】,還是【草叢晃動】,PixelGraphics 都能輕鬆實現,提升遊戲的沉浸體驗。

功能特色
- 高效的像素風植被渲染
提供【草地晃動】、【樹葉擺動】等效果,模擬自然環境,讓像素風格的場景更具生命力。 - 速度紋理(Velocity Texture)技術
透過速度紋理(Velocity Texture) 技術,使草地能根據【角色】或【物體】的移動產生動態反應,營造真實的互動體驗。 - 靈活的渲染設置
支援【獨立發射器(Standalone Emitters)】和【內建發射器(Integrated Emitters)】,可根據需求調整【速度影響範圍】、【最大速度】及【風場強度】,適應不同遊戲場景。
適用場景
- 角色與環境互動
當玩家經過草叢時,草葉會隨角色的移動產生自然晃動,營造更具沉浸感的遊戲體驗。 - 風力影響模擬
適用於【開放世界場景】或【動態氣候系統】,能夠根據風場強度調整草木的擺動幅度,提升畫面的真實感。 - 2D 物理與像素風動畫
搭配 2D 剛體(Rigidbody2D),讓草叢對角色施加的速度產生即時反應,使像素風遊戲的場景更加靈活有趣。

Unity PixelGraphics 安裝
可以使用以下網址將 PixelGraphics 安裝為 Unity 套件:
https://github.com/aarthificial/pixelgraphics.git

Unity PixelGraphics 草隨風飄動的效果
為草添加材質即可。

效果如下。

Unity PixelGraphics 交互像素草
為了讓它有可互動的效果我們需要設定速度快取。
最好的方式就是使用速度渲染特性,不過 2D 渲染器暫時還不支援。
所以我會使用速度相機元件,這個元件有些限制不過和 SRP 一起用應該沒問題 。
這裡你可以選擇與植被互動的所屬層級。

設定好了之後我們可以創建一個速度發射器。

它其實是一個位於所選層級的 SpriteRenderer。

它會用這個組件傳輸速度到材質中。

在渲染時發射器不會顯示在螢幕中,不過它們會直接將結果輸出到速度緩存上。
我把這個物件拖到玩家上,並調整大小貼合玩家。

這裡的模式我選擇 2D 剛體,然後把玩家的剛體拖到這裡。

最大速度設定為 12,這是這個角色速度可以達到的極限。

還需要在草的材質上調整速度強度,這個參數控制草被速度影響的強度。這裡設定 0.3。

效果如下:


Unity PixelGraphics 非像素草互動
另外這個項目設定了 Upscaling。
如果你關掉的話你會看到精靈圖彎曲的很順滑。


所以你可以把它用到除了像素風外的其他項目中。
Unity PixelGraphics 文檔說明(設置速度紋理)
速度紋理(Velocity Texture)
速度紋理是一種螢幕空間緩衝區(screen space buffer),用於儲存特定物件(發射器)的當前速度,並對螢幕上的每個像素執行簡單的彈簧式模擬。
它可以用來低成本地模擬因移動物體而產生的位移效果。例如,當玩家經過時,草叢隨之擺動的效果。
速度紋理的四個通道:
通道 | 數據類型 |
---|---|
R | 沿 X 軸的位移 |
G | 沿 Y 軸的位移 |
B | 沿 X 軸的速度 |
A | 沿 Y 軸的速度 |
設置方式(Setup)
速度紋理可以通過兩種不同的方法進行設置。
首選方法是向渲染器添加 Velocity Render Feature
速度渲染功能)。
不幸的是,截至目前,只有 Forward Renderer(前向渲染器)支援渲染功能)。
如果你使用的是不同的渲染器(例如 2D Renderer),則需要在主相機上添加 Velocity Camera
組件。
(在 Unity 2021.2 版本之後,2D Renderer 也將支援渲染功能)
添加渲染功能 | 添加相機組件 |
---|---|
![]() | ![]() |
配置(Configuration)
無論是渲染功能(Render Feature)還是相機組件(Camera Component),它們都使用相同的配置方式。
唯一的不同點在於:相機組件不支援渲染圖層遮罩(Rendering Layer Mask)。
渲染功能 | 相機組件 |
---|---|
![]() | ![]() |
Pixels Per Unit
(每單位像素數)
指定場景中一個單位內包含的像素數。
該值應與場景內精靈(Sprite)的 PPU 值匹配。
Rendering Layer Mask
(渲染層遮罩)
(僅適用於渲染功能)
用於內建發射器(Integrated Emitters)的渲染層設定。
Layer Mask
(圖層遮罩)
用於獨立發射器(Standalone Emitters)的圖層設定。
Texture Scale
(紋理縮放)
速度紋理的解析度相對於屏幕解析度的比例。
1.0 表示全屏大小。
Preview
(預覽)
(僅適用於渲染功能)
在屏幕上顯示速度紋理,僅用於除錯(Debug)。

Stiffness
(剛度)
彈簧常數。
該值越高,彈簧越硬。
Damping
(阻尼)
線性阻尼係數。使彈簧減速並最終達到平衡。
將其設為 0 將導致彈簧 (幾乎) 無限地振盪。
Blur Strength
(模糊強度)
模糊的強度。
其他因素,例如 Texture Scale,也會影響模糊程度。
模糊 = 0 | 模糊 = 1 |
---|---|
![]() | ![]() |
Max Delta Time
(最大幀間隔時間)
最大允許的幀間隔時間(秒)。用於在 FPS 下降時保持模擬穩定。
該值應高於目標幀率的平均幀間隔時間。預設值為 1/30(對應 30 FPS)。
一旦設定好渲染紋理(Render Texture),即可開始在場景中放置發射器(Emitters)。
Unity PixelGraphics 文檔說明(在場景中放置一些發射器)
速度發射器(Velocity Emitters)
與速度紋理(Velocity Texture)互動的物件被稱為速度發射器(Velocity Emitters)。
設置它們主要有兩種方式。
獨立發射器(Standalone Emitter)
獨立發射器是指被分配到專門用於速度發射器的圖層的任何渲染器。
在渲染場景時,該圖層會被排除,從而使所有獨立發射器不可見。
- 創建一個專門用於速度發射器的圖層(例如:"Velocity")。
設置圖層遮罩(Layer Mask),使其包含剛剛創建的圖層。
如果您使用渲染功能(Render Feature),請在過濾設置(Filtering Settings)中排除該圖層。
(當使用速度相機(Velocity Camera)時,該圖層將自動被排除。)
創建速度發射器。
請參閱下方的配置(Configuration)部分,以獲取有關如何設置發射器的更多信息。
內建發射器(Integrated Emitter)
(僅適用於渲染功能(Render Feature))
有時,我們希望使用現有的渲染器作為發射器,同時仍然讓它顯示在畫面上。
在這種情況下,我們可以利用渲染圖層(Rendering Layers),讓同一個渲染器同時用於渲染與發射速度數據。
選擇一個渲染圖層來作為速度發射器(例如:"Layer2")。
找到您要用作發射器的渲染器,並為其添加 Velocity Emitter 組件。
請參閱下方的配置(Configuration)部分,以獲取有關如何設置發射器的更多信息。
請確保您選擇渲染圖層(Rendering Layer)已在該渲染器的渲染圖層遮罩(Rendering Layer Mask)中勾選。
配置(Configuration)
Mode
(模式)
發射器模式決定了該發射器的速度來源。
目前有四種可用模式:
模式 | 描述 |
---|---|
Translation | 速度是根據幀間位置的變化來計算的 |
Rigidbody | 從 Rigidbody 元件讀取速度 |
Rigidbody2D | 從 Rigidbody2D 元件讀取速度 |
Custom | 從 customVelocity 公共欄位讀取速度 |
Max Speed
(最大速度)
該發射器的最大速度。
發射器的實際速度將被重新映射,使其在達到最大速度時,結果速度為 1,超過最大速度時,仍然保持 1。
Remapping
(重新映射)
一條允許您微調速度映射方式的曲線。
X 軸 代表實際速度(0 = 0,1 = maxSpeed)。
Y 軸 代表傳遞給速度紋理(Velocity Texture) 的速度數值。
最終速度計算的偽代碼(Pseudocode):
speed = remapping(clamp01(length(velocity) / maxSpeed))
自定義發射器(Custom Emitters)
速度發射器(Velocity Emitters)並不是與緩衝區(Buffer)互動的唯一方式。實際上,任何被分配到速度圖層(Velocity Layer) 的精靈(Sprite)都可以與緩衝區進行互動。
你可以使用預設的發射器著色器(Emitter Shader)作為範本,並根據需求創建自訂的著色器,使其以不同的方式與緩衝區進行交互。
當你設置好幾個發射器(Emitters)之後,可以使用內建的著色器(Shaders)來觀察它們的實際效果。
Unity PixelGraphics 文檔說明(使用可用的著色器創建材質)
可用的著色器(Available Shaders)
foliage_shader
與 foliage_pixelart_shader
提供簡單的風模擬與速度反應。
可向任意方向擺動。
最適合用於灌木、樹木以及其他懸浮在空中的植被。
grass_shader
與 grass_pixelart_shader
提供簡單的風模擬與速度反應。
沿著其右側軸向來回擺動。
最適合用於草地、花朵及其他從地面生長的小型植被。
變體(Variants)
每種著色器(Shader)都提供兩種變體:
預設精靈(Default Sprite) | 草地著色器(grass_shader) | 像素風草地著色器(grass_pixelart_shader) |
---|---|---|
![]() | ![]() | ![]() |
像素風著色器(Pixelart Shaders)
優點(Pros):
- 在較高解析度下提供像素完美(Pixel-perfect)的扭曲效果。
缺點(Cons):
- 計算量較大,可能影響效能。
- 僅限用於普通精靈渲染器(Normal Sprite Renderers),無法適用於其他類型的渲染器。
普通著色器(Normal Shaders)
優點(Pros):
- 運算輕量化(Lightweight),效能更佳。
- 可用於任何渲染器(Any Renderer)。
- 適用於非像素風的美術資源,靈活度更高。
缺點(Cons):
- 若要達成像素完美效果(Pixel-perfect Effect),需要額外進行放大處理(Upscaling)。
準備網格 (Mesh)
根據您使用的著色器 (Shader) 變體不同,您需要以不同的方式準備您的精靈 (Sprite)。
一般著色器 (Normal Shaders) 會對網格 (Mesh) 的頂點進行位移 (Displacement)。為了增強效果,網格需要進一步細分 (Subdivision)。這可以透過 Sprite Editor 的 Custom Outline 模式來完成 (詳見下表)。
像素藝術 (Pixelart) 著色器只會對 UV 座標進行位移,而網格本身保持不變。為了確保效果正確,網格需要比實際的精靈圖案更大,以容納可能的位移。這可以透過 Sprite Editor 或匯入設定 (Import Settings) 來調整 (詳見下表)。
類型 | 法線著色器 (Normal Shader) | 像素藝術著色器 (Pixelart Shader) |
---|---|---|
輪廓 (Outline) | ![]() | ![]() |
網格 (Mesh) | ![]() | ![]() |
配置 (Configuration)
Velocity Strength
(速度強度)
控制材質受速度紋理 (Velocity Texture) 扭曲的程度。
Wind Velocity
(風速)
定義風的方向和速度的 2D 向量。
Wind Strength
(風強度)
控制材質受風影響而變形的程度。
Wind Scale
(風尺度)
用於生成風噪聲 (Noise) 的比例大小。
位移遮罩 (Displacement Mask)
扭曲效果可以透過使用一個稱為 _DisplacementMask 的次要紋理來進一步控制。
通道 (Channel) | 功能 (Function) |
---|---|
R | 控制片段 (Fragment) / 頂點 (Vertex) 受到速度紋理 (Velocity Texture) 扭曲的程度。 |
G | 控制片段 (Fragment) / 頂點 (Vertex) 受到風 (Wind) 扭曲的程度。 |
次要紋理 (Secondary Textures) 需透過 Sprite Editor 進行指定。

您可以使用位移遮罩 (Displacement Mask),例如讓灌木叢的樹枝保持不動。
紋理 (Texture) | 位移遮罩 (Displacement Mask) |
---|---|
![]() | ![]() |
這些著色器僅是可實現效果的示例。您可以利用公開的屬性來創建您自己的互動式著色器 (Interactive Shaders)。
Unity PixelGraphics 文檔說明(或者自行創建自定義著色器)
著色器屬性 (Shader Properties)
當您設置好速度紋理 (Velocity Texture) 後,將可以使用一些著色器屬性,您可以利用這些屬性來創建自定義的著色器。
在 Shader Graph 中,可以透過以下方式訪問這些屬性:

(請確保 Exposed
選項未被勾選。)
速度紋理 (Velocity Texture)
參考名稱 (Reference): _PG_VelocityTexture
類型 (Type): Texture2D
速度紋理本身。
您可以使用從 Screen Position 節點返回的座標來對其進行取樣。
獲取的值代表給定片元/頂點的速度數據。
通道 (Channel) | 數據 (Data) |
---|---|
R | X 軸方向的位移 |
G | Y 軸方向的位移 |
B | X 軸方向的速度 |
A | Y 軸方向的速度 |
像素螢幕參數 (Pixel Screen Params)
參考 (Reference): _PG_PixelScreenParams
類型 (Type): Vector4
組件 (Component) | 數據 (Data) |
---|---|
X | 相機的寬度(以「像素藝術」像素測量) |
Y | 相機的高度(以「像素藝術」像素測量) |
Z | 每單位對應的像素數 |
W | 每單位對應像素數的倒數 (1 / Pixels per unit ) |
速度模擬參數 (Velocity Simulation Params)
參考 (Reference): _PG_VelocitySimulationParams
類型 (Type): Vector4
組件 (Component) | 數據 (Data) |
---|---|
X | 剛性 (Stiffness) |
Y | 阻尼 (Damping) |
Z | 模糊強度 (Blur strength) |
W | 最大增量時間 (Max delta time) |
Unity PixelGraphics 相關介紹 & 教學影片
Unity PixelGraphics 像素植被大師相關網站 & 插件下載點
【PixelGraphics】
————————————————
更多好用插件:【Unity 好用插件推薦】持續更新,一起讓遊戲開發事半功倍!
本文原創(或整理)於亞洲電玩通,未經作者與本站同意不得隨意引用、轉載、改編或截錄。
特約作家簡介
支持贊助 / DONATE
亞洲電玩通只是很小的力量,但仍希望為復甦台灣遊戲研發貢獻一點動能,如果您喜歡亞洲電玩通的文章,或是覺得它們對您有幫助,歡迎給予一些支持鼓勵,不論是按讚追蹤或是贊助,讓亞洲電玩通持續產出,感謝。
BTC |
![]() |
352Bw8r46rfXv6jno8qt9Bc3xx6ptTcPze |
|
ETH |
![]() |
0x795442E321a953363a442C76d39f3fbf9b6bC666 |
|
TRON |
![]() |
TCNcVmin18LbnXfdWZsY5pzcFvYe1MoD6f |