Silverlight 2.5D RPG游戏技巧与特效处理:(五)HLSL渲染动画
原文: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的特效基类:


/// 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>
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://cangod.com
Silverlight 2.5D RPG游戏技巧与特效处理:(五)HLSL渲染动画的更多相关文章
- Silverlight 2.5D RPG游戏技巧与特效处理:(十一)AI系统
Silverlight 2.5D RPG游戏技巧与特效处理:(十一)AI系统 作者: 深蓝色右手 来源: 博客园 发布时间: 2011-04-19 11:18 阅读: 1282 次 推荐: 0 ...
- 如何制作一款HTML5 RPG游戏引擎——第五篇,人物&人物特效
上一次,我们实现了对话类,今天就来做一个游戏中必不可少的——人物类. 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里. 为了使这个类更有意义,我还给人物类加了几 ...
- HTML5 RPG游戏引擎 地图实现篇
一,话说全国年夜事 前没有暂看到lufy的专客上,有一名伴侣念要一个RPG游戏引擎,出于兴趣筹办入手做一做.因为我研讨lufylegend有冶时间了,对它有必然的依赖性,因而便筹办将那个引擎基于 ...
- 如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现
一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufy ...
- 【开源】使用Angular9和TypeScript开发RPG游戏
RPG系统构造 通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法. 项目地址 人物 和其他RPG游戏类似,游戏里面的人物角色大致有这样的一些属性 ...
- unity3d 游戏插件 溶解特效插件 - Dissolve Shader
unity3d 游戏插件 溶解特效插件 - Dissolve Shader 链接: https://pan.baidu.com/s/1hr7w39U 密码: 3ed2
- 【android原生态RPG游戏框架源码】
转载请注明原创地址:http://www.cnblogs.com/zisou/p/android-RPG.html 这份源码是在今年6月份写的,当时公司有一个技术部们的学习讨论的讲座,然后我自己就写了 ...
- RPG JS:免费开源的跨平台RPG游戏引擎
RPG JS是一个2D RPG游戏制作引擎,目前版本基于Ease|JS游戏引擎,基于Canvas Engine的新版本即将发布. RPG JS是免费且开源的. RPG JS有着完善的文档支持. RPG ...
- Cocos2D-ObjC:在RPG游戏中混合Swift代码
我之前写过一个RPG游戏<<熊猫之魂 SoulOfPanda>> 编译器使用的是SpriteBuilder,很好很强大!全部代码都由Objc完成,现在想尝试一下在其中混入Swi ...
随机推荐
- 搭建nodejs代理服务器,从而解决跨域问题
先在同级处新建js文件(app.js) 使用时npm 安装 Node.js 模块语法 也就是对应的文件所在地“npm install”一下 然后安装对应需要的模块: expresspathreques ...
- zepto.js按需载入模板对象
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/Joyhen/article/details/34412103 Zepto.js 是支持移动WebKi ...
- Python学习 备注(2)
由于python下许多框架都是在python2下的,python3向下不兼容 需安装python2 安装好后,使用pip安装python下的框架scrapy 总是报错,最后发现是包管理器,pip的版本 ...
- pixhawk 常见问题 持续更新
红灯蓝灯闪,初始化中,请稍等 黄灯双闪,错误,系统拒绝解锁 黄灯闪,遥控器关闭 黄灯快速闪且滴滴响,电池保护激活 蓝灯... 未见过.... 绿灯闪: 已加锁,GPS锁定已获得. 准备解锁. 从加锁状 ...
- 关于hive表同步类型问题
今天华为做实施的时候发现kylin做刷cube的时候发现源表数据类型不适合刷到kylin提供查询接口.问了下同事发现一个比较简单的解决办法. 源表是String类型,做hive视图可以做个hive表提 ...
- Armijo线性搜索
用“人话”解释不精确线搜索中的Armijo-Goldstein准则及Wolfe-Powell准则 line search(一维搜索,或线搜索)是最优化(Optimization)算法中的一个基础步骤/ ...
- GYM100633J. Ceizenpok’s formula 扩展lucas模板
J. Ceizenpok’s formula time limit per test 2.0 s memory limit per test 256 MB input standard input o ...
- Luogu P1967 货车运输(Kruskal重构树)
P1967 货车运输 题面 题目描述 \(A\) 国有 \(n\) 座城市,编号从 \(1\) 到 \(n\) ,城市之间有 \(m\) 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 \ ...
- 巧用tar命令
tar命令可以对文件进行归档.它最初设计是用来将数据存储在磁带上.tar可以将多个文件和文件夹保存为单个文件,同时还能保留所有的文件属性,如所有者.权限等.由tar创建的文件通常称为Tarball.下 ...
- 新的开始 | Arthas GitHub Star 破万后的回顾和展望
一切新的开始,都始于一个里程碑. 2月20日上午,Java 开源诊断工具 Arthas 的 GitHub Star 突破10000,距离开源后的第一个Release 版发布仅 147 天. 从中,我们 ...