一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(五)圣赞之HLSL渲染动画

  或许大家依旧对上一节中的“黑夜”及“梦回过去”记忆犹新,追问下去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的研发行列!让我们一同前行吧!

  本节源码下载地址:Demo4.rar

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

时间: 2024-08-02 08:36:57

一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(五)圣赞之HLSL渲染动画的相关文章

一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(四)天气系统

如同动态光影一样,天气系统同样为2.5D RPG游戏所不可或缺的元素之一.从视觉角度讲,天气系统让游戏场景空间层次分明,立体感更强:从用户角度讲,天气系统赋予游戏更贴近现实的亲历体验,试想下游戏中的花花草草随风而动,云雾缭绕风雨雷电一切来得自然而平滑,玩家即似身临其境般享受:从功能角度讲,不同的气候状况会对角色及魔法效果产生各异影响,极大的提升游戏趣味性.  模拟相对较真实的天气效果,粒子系统必不可少,天气中的雨.雪.闪电.云雾等均可看做是大量粒子的集合.因此首先我们新建一个名为Particle

Silverlight 2.5D RPG游戏技巧与特效处理:“.NET研究”(四)天气系统

如同动态光影一样,天气系统同样为2.5D RPG游戏所不可或缺的元素之一.从视觉角度讲,天气系统让游戏场景空间层次分明,立体感更强:从用户角度讲,天气系统赋予游戏更贴近现实的亲历体验,试想下游戏中的花花草草随风而动,云雾缭绕风雨雷电一切来得自然而平滑,玩家即似身临其境般享受:从功能角度讲,不同的气候状况会对角色及魔法效果产生各异影响,极大的提升游戏趣味性.  模拟相对较真实的天气效果,粒子系统必不可少,天气中的雨.雪.闪电.云雾等均可看做是大量粒子的集合.因此首先我们新建一个名为Particle

一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(二)纸娃娃系统

纸娃娃系统,或许大家听起来并不陌生.早在十几年前,当时不论是文字游戏"泥巴(Mud)"或是交友.社交网站,我们只能通过屏幕上的文字来传达与交互信息:随着技术不断进步,2D/3D图形技术高速崛起,通过在基础模型上由客户随意挑选.任意更换各种造型(素材),即可打造出真正属于"自我"独特风格的网络虚拟形象,QQ秀便是我们耳熟能详的代表,更贴近真实的如(RPG)游戏及虚拟现实中的换装/换肤系统同样亦得益于纸娃娃机制. 本节,我将向大家讲解如何最好的实现Silverlight

一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(三)动态光影

通常来说,只要谈到影子及影子制作,首先想到的不外乎3D.游戏中的影子设计大致可分为硬实现和软实现两种,比如像"游戏影子制作技术"这篇文章所谈到3D游戏影子制作方案Projective Shadow.Shadow Map以及Shadow Volume均属于硬实现.硬实现的效果最逼真,相对的运算量也较高:而对于Silverlight开发2.5D网游来说,我们通常会采用折中的软实现去表述场景中的动态光影效果.精致的光影能让玩家充分体验到空间立体感,当然也是2.5D网游所不可或缺的条件之一.

一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(十一)AI系统

谈到人工智能(AI),这个话题就太大了:大学里有<人工智能教程>专门讲这方面的知识,什么大名鼎鼎的人工神经网络.遗传算法等等均可一窥究竟,这里如赘述似乎有些班门弄斧,我们暂且丢它一边去吧. 本节,我的主要目的是与大家共同探讨AI在RPG游戏中的应用.看过之前教程的朋友一定不会陌生,A*算法就是其中的一个重要组成部分:而本系列Demo中则使用了更为高级的改进型A*算法,不仅优化了性能,同时也大幅提升了玩家的操控体验.除此之外,AI更常见于RPG游戏中的角色,接下来我将引领大家循着AI的足迹,逐步

一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(一)序言

不得不说的事,过年期间用了两个多星期时间将17173首页所推荐的2010年新测的几乎60多款网游彻底的扫荡了一遍:过瘾哪!确实过瘾,好久没玩网游了,一次让我爽个够.快的2小时就到了40级,还有更快的5小时冲到了80级.感慨啊真想长叹一声:天!现在的游戏咋被整成了这样!于是愤愤写下如此感受,仅当到此一游:国产3D网游质量恒古不变,敢问开发商你自己想吐了没?市场上充斥着更多的依旧是2D/2.5D ARPG,换汤不换药,十个开发商有九个都在估量着换个美工班即得款新网游,那招个美工连岂不得登上年度大作?

一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(九)粒子系统

粒子系统通常用于三维场景中进行真实环境模拟,比如第四节的天气系统.天气的实现是粒子系统最重要的应用领域之一,所有的一切无论是云.雨.雾,还是落叶.陨石及闪电,都可视作基础粒子:除此之外,游戏中常常还会用到粒子系统来渲染像发光.轨迹等抽象效果.当然,有时简单并不意味着就不能缔造奇迹,比如本节大家将要看到的就是基于简单粒子系统所创建的当下主流2.5D RPG中极其拉风之装备粒子发散动画特效. 一提到Silverlight中的粒子,首先想到的肯定是WriteableBitmap.没错,今天的主角就是它

一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(十二)魔法系统

世界首款Silverlight – MMORPG:<<窝窝世界>>震撼登场!伴着与XNA合体后的Silverlight 5 强势发布,一波Silverlight网游研发海啸即将席卷全球!  多磨的好事依旧让人激动,于是一不小心写下10款全新的魔法效果旨在祝贺.今天的教程不会让你失望,没错,又是一场超豪华魔法盛宴!接下来您将看到的是本教程ARPG Demo战斗实景,一切灵感与临摹均来源于近期即将内测的2.5D大作<倩女幽魂Online>(以下左边为倩女幽魂实景,右边为De

一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(七)动画特写

Silverlight中的HLSL不仅适用于场景与动画渲染,对于游戏中的角色,我们同样可以利用它制作动画特写.较常见的比如角色传送时的淡入淡出.扭曲变形.幻化呈现等切换动画,当然还有例如角色被DeBuff时所表现出来的放大缩小以及虚弱时的不规则体形等.适当的场合为角色增加动画特写使得游戏更显精致而华丽,当玩家身心愉快的融入其中而流连忘返时,或许正是这些魔幻般的特效在背后默默的飘散着令人迷醉的芳香. 还记得Shazzam吗?要制作特写依旧离不开这款强大的工具,以角色的传送特写"幻降"为例