Silverlight 2.5D RPG游戏技巧与特效处理：（五）HLSL渲染动画

或许大家依旧对上一节中的“黑夜”及“梦回过去”记忆犹新，追问下去HLSL到底是何方神圣能实现如此炫酷之效果？HLSL(高级着色器语言)作为微软的独门兵器，仅供Direct3D使用。Silverlight无比幸运，从第三版本开始便已获得了此把旷世神器，虽然暂时仅能发挥其不到2层之功力(CPU而非GPU)，不过前辈Moonlight近期已向世界宣布全面突破技术壁垒，GPU加速后的HLSL的威力提升至7层左右。我们完全可以预料的是，未来Silverlight将手握HLSL，踏着GPU 3D API飞扬驰骋，在RIA页游领域所向披靡，制作一切特效及渲染动画都将似探囊取物般轻松而惬意。

    接下来的问题是HLSL开发困难吗？其实，HLSL特效的制作无外乎“语法”+“公式”；是否还记得我之前曾写过3篇关于HLSL在Silverlight中应用的入门文章？Shazzam目前已经发展到了1.3版本，除了无需额外安装DX独立运行等新特性外，还新增了N多现成的特效以及一部脱机入门教程，奇爽无比。就算对HLSL一知半解或云里雾里的朋友，当您下载Shazzam并运行后，其中所演示的效果保证会让您感到无比振奋；另外，一款名为EasyPainter的Silverlight HLSL在线演示实例同样也非常具有参考价值。是的，或许从那刻起你会决定义无反顾的加入到我们的研究行列，接下来的展示和讲解将会更坚定您这伟大的信念，原来游戏中的特效渲染动画是可以来得如此之简单！

上一节天气系统中的“黑夜+雷电”效果就是通过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层进行ShiftHue渲染以实现各色效果：

当然了，怪物也不例外，一套素材可幻化出从普通怪到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的研发行列！让我们一同前行吧！

本节源码请到目录中下载

在线演示地址：http://silverfuture.cn