Silverlight 2.5D RPG游戲技巧與特效處理：（五）圣贊之HLSL渲染動畫

作者: 深藍色右手來源: 博客園發布時間: 2011-03-15 11:23 閱讀: 1245 次推薦: 0 原文鏈接 [收藏]

　　或許大家依舊對上一節中的“黑夜”及“夢回過去”記憶猶新，追問下去HLSL到底是何方神圣能實現如此炫酷之效果？HLSL(高級著色器語言)作為微軟的獨門兵器，僅供Direct3D使用。Silverlight無比幸運，從第二個版本開始便已獲得了這把曠世利器，雖然目前僅能發揮其不到3層之功力，不過前輩Moonlight近期已向世界宣布全面突破技術壁壘，HLSL的威力提升至7層左右。我們完全可以預料的是，未來Silverlight將手握HLSL，踏著GPU 3D API飛揚馳騁，在RIA頁游領域所向披靡，制作一切特效及渲染動畫都將成探囊取物般輕松而愜意。

　　接下來的問題是HLSL開發困難嗎？其實，HLSL特效的制作無外乎“語法”+“公式”；是否還記得我之前曾寫過3篇關于HLSL在Silverlight中應用的入門文章？Shazzam目前已經發展到了1.3版本，除了無需額外安裝DX獨立運行等新特性外，還新增了N多現成的特效以及一部脫機入門教程，奇爽無比。就算對HLSL一知半解或云里霧里的朋友，當您下載Shazzam并運行后，其中所演示的效果保證會讓您感到無比振奮。是的，或許從那刻起你會決定義無反顧的加入到我們的研究行列，接下來的展示和講解將會更堅定您這偉大的信念，原來游戲中的特效渲染動畫是可以來得如此之簡單！

　　上一節天氣系統中的“黑夜+雷電”效果就是通過HLSL分別對場景的地圖層(MapLayer)和場景空間(Space)進行ColorTone和LightStreak動畫渲染而呈現。毫不夸張的說，只要你有夠精通HLSL編程，那么目前網游中的絕大多數特效都可以完美實現。下面，我首先向大家講解如何通過Shazzam中現成的HLSL特效來實現場景之切換效果，即傳統回合制網游中的踩地雷特效。

　　以最經典的馬賽克縮放動畫效果為例，首先打開Shazzam并導出(Explore Compiled Shaders)名為Pixelat特效的ps文件；接下來在解決方案中新建一個Effects類，并在其中創建一個繼承自ShaderEffect名為EffectBase的特效基類：

/// <summary>
/// HLSL特效基類
/// </summary>
public abstract class EffectBase : ShaderEffect {

/// <summary>
/// 獲取渲染特效的文件地址
/// </summary>
protected Uri GetShaderUri(string shaderName) {
return new Uri(string.Format("/Effects;component/Source/{0}.ps", shaderName), UriKind.Relative);
}
}

　　然后將Pixelate.ps文件添加到Source文件夾中，以及在Shader文件夾中創建一個關于該特效的驅動類，代碼由Shazzam中拷貝出來，讓它繼承自ShaderEffect并稍微做些修改后即告完成：

/// <summary>
/// 馬賽克切換
/// </summary>
public class Pixelate : EffectBase {

public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(Pixelate), 0);
public static readonly DependencyProperty ProgressProperty = DependencyProperty.Register("Progress", typeof(double), typeof(Pixelate), new PropertyMetadata(((double)(30D)), PixelShaderConstantCallback(0)));
public static readonly DependencyProperty Texture2Property = ShaderEffect.RegisterPixelShaderSamplerProperty("Texture2", typeof(Pixelate), 1);

public Pixelate() {
this.PixelShader = new PixelShader() { UriSource = GetShaderUri("Pixelate") };
this.UpdateShaderValue(InputProperty);
this.UpdateShaderValue(ProgressProperty);
this.UpdateShaderValue(Texture2Property);
}

public Brush Input {
get { return ((Brush)(this.GetValue(InputProperty))); }
set { this.SetValue(InputProperty, value); }
}

/// <summary>The amount(%) of the transition from first texture to the second texture. </summary>
public double Progress {
get { return ((double)(this.GetValue(ProgressProperty))); }
set { this.SetValue(ProgressProperty, value); }
}

public Brush Texture2 {
get { return ((Brush)(this.GetValue(Texture2Property))); }
set { this.SetValue(Texture2Property, value); }
}
}

最終Effects項目的結構圖如下：

　　使用時我們首先創建Pixelate特效的實例并作為Effect賦值給Space，然后通過Storyboard對該Pixelate實例的Progress參數進行動畫即可實現場景的馬賽克縮放動畫渲染：

Pixelate pixelate = new Pixelate();
space.Effect = pixelate;
Storyboard storyboard = new Storyboard();
DoubleAnimation doubleAnimation = new DoubleAnimation() {
From = 0,
To = 100,
Duration = new Duration(TimeSpan.FromMilliseconds(2000)),
EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseIn }
};
Storyboard.SetTarget(doubleAnimation, pixelate);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Progress"));
storyboard.Children.Add(doubleAnimation);
EventHandler handler = null;
storyboard.Completed += handler = (s1, e1) => {
Storyboard sb = s1 as Storyboard;
sb.Stop();
sb.Completed -= handler;
space.Effect = null;
};
storyboard.Begin();

　　只要是Shazzam上能夠成功運行的現有的或自己編寫的HLSL效果，我們都可以按照上述步驟將之運用到我們的Silverlight游戲中，僅僅1分鐘而已，僅僅占用1KB的空間，如此非凡的效果，您是否開始有些心動了？：

　　除了可以對場景進行渲染處理外，把HLSL特效用到角色的修飾上同樣可以達到非常酷的效果。當然了，首先要做的也是確保角色的內部層次劃分清楚以達到分層渲染的效果：

　　當鼠標懸停于某個角色時，我們可以僅對其鎧甲(身體)部件進行發光渲染；

　　需要制作角色陰影時，我們映射的僅是角色的整個實體層，即鎧甲+武器+騎乘道具：

　　非常值得一提的是，MonoChrome是一個用于變色的HLSL算法著色效果，我在其HLSL源碼基礎上稍微做了些修改，增加了對全透明色的判斷，即可通過賦予RPB值將一張帶透明的圖像所有非透明顏色都轉換成同一系顏色，常用的場合比如回合制、即時戰略等類型游戲中的陣營旗幟及兵種顏色等，僅需一套素材即可區分實現任意國家和對象。

　　在我們的2.5D RPG中，非常多的場合我們都會用這個簡約而不簡單的MonoChrome。比如角色換裝Loading時，我們可對角色不同部位的Loading環進行MonoChrome渲染：

　　又比如角色持Buff時，我們同樣也可以通過對角色的Buff層進行MonoChrome渲染以實現各色效果：

　　當然了，怪物也不例外，一套素材可幻化出從普通怪到BOSS怪全等級系列角色，非常強大而實用：

　　總的來說，Silverlight游戲開發還有非常非常多的場景或場合可以通過HLSL的各類渲染以達到升華視覺體驗之功效，回望當下的2.5D網游你會發現原來其中的一切特效都顯得那么平凡無奇。游戲，若能為玩家提供一場豪華的視聽盛宴，那么它真的就算成功了一大半。當然了，我也是HLSL的新手，有時間我真的希望好好的深入學習學習，畢竟這么強大的微軟專利，FLASH/FLEX只能望塵莫及，Javascript更是想都甭想；當某天Silverlight全面支持HLSL GPU硬件加速時，其他的一切RIA都將成為浮云，化作風中飛沙脫離記憶。很多朋友或許還在無知的抓著什么裝機量噱頭張牙舞爪，自認能夠從中得道升天，豈不知Silverlight 5或將在2011年4月11日面向全世界發布，帶來的更是革命性的全方位Web 3D；外加WIN8必將集成Silverlight，且Silverlight 已穩坐Windows Phone等移動設備的核心地位，是否大家能用發展的眼光看待新事物必定會取代舊事物這樣一個符合進化論的歷史規律？非常真誠的邀請您加入Silverlight這款新生代RIA的研發行列！讓我們一同前行吧！