2D遊戲平滑的迷霧戰爭效果

近期剛好有做2d遊戲的點光源效果，然後就擴充套件一下。研究了一下戰爭迷霧的效果。主要是想實現相似魔獸爭霸那種人物走動，然後黑色的戰爭迷霧隨著人物的移動漸漸開啟的效果。使用具有漸變透明作為光源來使得戰爭迷霧呈現出平滑的效果。

早期的紅警的戰爭迷霧大家應該也比較熟悉，只是看起來沒那麼平滑，應該是採用圖塊拼出來。能夠明顯看得出一些方方塊塊。

可見早期魔獸爭霸2也是沒那麼平滑的。

後面出的一些有些的戰爭迷霧就會有比較平滑的過渡效果了。比方英雄聯盟，魔獸3（這兩個是3d的）。可是也有2d也做得比較平滑（看圖的最後乙個截圖）

由於是做2d遊戲，所以思路基本上是2d，可是同一時候也有3d思想，比如圖層混合方式處理等。主要原理就是依據的alpha值來進行反向擦除(alpha為1時全然擦除，alpha越小則越不透明。實現漸變過程效果)。最後用了兩種比較簡單的方法來實現了這樣的效果。兩者有微弱的區別。這裡採用的是as3實現的，源**也提供了幾種漸變，能夠作為點光源來擦亮迷霧。能夠替換上去看各種效果的。

遮罩擦除做法

最先想到的原理。是基於之前實現相似點光源效果的做法。通過一層帶有alpha值遮罩圖來擦掉相應的戰爭迷霧，就是移動版增大的點光源效果。首先人物背景。然後一層戰爭迷霧在最頂層，人物帶了個點光源。然後人物移動的時候，不會把那個點光源層進行繪製，那麼光源層就會原來越大。那個迷霧自然就會越來越大了。

下圖：剛開始是乙個圓圈，然後隨著人物移動，圓圈會擴大。

得到這個圖之後。就是對黑色戰爭迷霧層依據alpha進行擦了。

//乙個專門做點光源的頂層容器
var topcontainer:sprite = new sprite();
//強制為該顯示物件建立乙個透明度組
topcontainer.blendmode = blendmode.layer;
//依據顯示物件的 alpha 值擦除迷霧
openfogbitmap.blendmode = blendmode.erase;

合成遮罩圖來去除迷霧的**是，最後乙個引數true是合併alpha：

bitmapdata.copypixels(bitmapdata,pointrect,new point(role.x,role.y),null,null,true);

這樣尾隨人物移動不斷地把遮罩擴大。除了最開始的合成遮罩圖，後面的處理跟之前講的新手引導遮罩和點光源實現機制一樣。後面會給出相關的**。

只是這樣的實現是有點不好的是合併alpha，這樣會導致範圍突然變亮（由於alpha相加大於1，就所有擦了，大部分亮了，也就是會有個逐漸變亮的效果，使得戰爭迷霧開啟效果沒那麼真實）。

終於表現效果例如以下圖：

2. 直接擦出戰爭迷霧方法(橡皮擦功能)

實際測試了下，對遮罩擦除做法這個效果不太愜意。於是再研究了一下，想到了橡皮效果，直接用點光源把戰爭迷霧一點點擦掉又怎樣呢？趕緊細緻看了相關api，還真有相似的實現效果。

主要還是bitmapdata的draw方法。重點是這種方法的第四個引數，

source:ibitmapdrawable — 要繪製到 bitmapdata 物件的顯示物件或 bitmapdata 物件 matrix:matrix (default = null) — 乙個 matrix 物件。用於縮放、旋轉點陣圖或轉換點陣圖的座標。

。 colortransform:flash.geom:colortransform (default = null) — 乙個 colortransform 物件 blendmode:string (default = null) — 指定要應用於所生成點陣圖的混合模式。

所以我們每次在戰爭迷霧這個層次這裡每次依據玩家移動，呼叫draw方法把角色帶的點光源給draw進入戰爭迷霧的bitmapdata中，然後設定為依據alpha的引數來擦出，露出終於的背景即可了。

blendmode.erase //提供混合模式可視效果的常量值的類。

//設定須要draw的座標位置var matrix:matrix = new matrix(1,0,0,1,role.x,role.y); fogbitmapdata.draw(pointbitmap,matrix,null,blendmode.erase);終於效果圖：

1. 遮罩擦除做法**。foglighttest.as

/**
* 戰爭迷霧遮罩燈效果測試樣例
*@author sodachen
* date:2017-2-16
*/[swf(width="1274",height="768")]
public
class
foglighttest
extends
sprite
private function onstage(evt:event):void
private function onkeydown(evt:keyboardevent):void

直接擦出戰爭迷霧方法(橡皮擦功能)**,eraserfogtest.as

/**
* 迷霧戰爭擦除效果
*@author sodachen
* date:2017-2-16
*/[swf(width="1274",height="768")]
public
class
eraserfogtest
extends
sprite
private function onstage(evt:event):void
private function onkeydown(evt:keyboardevent):void
private function openfog():void

2D遊戲平滑的迷霧戰爭效果

Unity3D戰爭迷霧效果

2D遊戲開發（2）

2D動畫效果transform

2D遊戲平滑的迷霧戰爭效果

Unity3D戰爭迷霧效果

2D遊戲開發（2）

2D動畫效果transform

相關推薦