博客园-深蓝色右手

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(五十) 终章！新的曙光！

深蓝色右手 — Sun, 31 Jan 2010 16:46:00 GMT

阅读: 2054 评论: 29 作者: 深蓝色右手发表于 2010-02-01 00:46 原文链接

本节无法为大家再次呈现更多的游戏更新，仅仅是对目前引擎的一些BUG修复以及增加简单的自定义Loading界面。用最后的一点元气，我想谈谈Silverlight在游戏图片音乐等素材的资源部署方面的问题。在常规的Web网页游戏开发中，需要分清哪些资源是必须在游戏加载时就要完整下载的，哪些资源是在玩家进入游戏后才根据实际需要动态下载的。例如一个玩家刚登陆游戏，那么首先需要Loading他所处地图的Mini地图图片（通常也就几十K最多了），该图片可以作为雷达地图与寻路地图的背景，这在第41、42节已做详细介绍；其实它还存在着神奇的第三个用途。大家不妨打开一下Google的图片搜索，搜索出来的图片都是缩略图，当你点击一张图片时，主窗口首先将这张缩略图拉伸放大填充窗口，此时看到的当然是模糊的图片，但总比放一把红X好吧。而于此同时Google会同时去动态加载该图片的原图，一旦下载完成即替换掉缩略图，最终展示出该图的实际图片到主窗口中：

DeepZoom其实不也是类似的原理吗，当然，它的技术更加复杂些。讲到DeepZoom，大家是否会联想到Silverlight的DeepEarch？开始有些觉醒啦~？不妨再看一图：

这是一张Web RPG游戏截图，模糊的区域即是还未加载的地图部分，一旦该区域图片被加载后，将被替换掉，类似这样的地图缓冲技术在很多领域得以应用，做法又是多种多样的，总的目的就是不失游戏趣味性与性能的前提下提升游戏的品质~，在Silverlight中该如何处理呢？说了这么多原理应该难不倒大家吧。^ ^

游戏中一张缩略图能为三处所用，真乃物尽其用；另外的，大家是否还注意到了上图中那个叫“小海”的NPC。由于他刚进入主角的视线范围，正处于素材下载阶段，因此显示的是一张透明的人偶图片；与地图一样，一旦该NPC的素材图片下载完全后，它的真实图片将替换掉目前的图例：

这样做的好处可想而知，在游戏动态资源下载与游戏画面的展示方面进行平衡性处理，这就是Web RPG类型游戏设计的精髓所在。那么，要实现这样的技术前提必须是角色素材以整图的形式存在而不是小图，例如本教程前40节WPF部分的角色素材均使用的是整图，这样在Silverlight中如需加载某角色时只需下载一张图片即可，而画面上的体现就如上图一般，仅仅在性能上有些缺点；而如果像本教程后10节那样一个角色使用N张小图，同样打算采用上述技术的话，实际中则会出现图片频繁闪烁现象，这将使游戏的体验性大打折扣。各有利弊，当然我更推荐前者，传统的做法是在不断探索中总结出来的规律，当然有它存在的深远意义。

从2009年5月23日时至今日历时8个多月的教程编写即将画上句号，无所谓别离与感伤，我与朋友们一路谈笑风生走来，尽情的释放与宣泄着对Silverlight游戏开发的激情！从无知到慢慢的开始感兴趣，由兴趣转化为学习的动力，最终迸发出自身极限潜能 -- 与银光的完美融合。不知有多少朋友与我一样，一起走过了这段令人神往的旅程。

用50节来结束这部《C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)》不多也不少了；前30节浅浅的，从一笔一画开始，没有过多的修饰却富含着深刻的体验与耐心，通过这30节，让我结识了现在群里诸多同样致力于Silverlight深度开发的高手，这是我一生的财富与荣幸，也是一份我倍感珍惜的缘分；后20节在大量的华丽中仍坚持着严谨，整个教程开始由算法向美工方向发展，我希望更多的向读者传达一些思想：Silverlight开发其实是算法、架构、美工与创意的完美结合，当这些元素水乳交融之时，奇迹将会诞生！

是否仍有些遗憾？这是当然的。毕竟最初打算完成单机RPG的所有功能的愿望未能实现，计划中还有诸如：任务系统、宠物系统、坐骑系统、物品掉落系统、消息提示系统、动态多国语言切换、怪物多类型攻击(人工智能AI进阶)、Buff And DeBuff(魔法附加属性及效果进阶)等功能模块还未能添加进引擎。个人业余时间实在有限，如要以记流水帐的方式将教程死皮赖脸的延续下去，我宁可就此打住。

同样的原因导致由于教程后期对游戏引擎功能不断添加，无法对每次的需求增加进行有利的重构，至似现在的引擎结构比较混乱，这也是我打算结束这部教程的另一个因素；但这并不意味着终结，因为新的开始正在孕育，理想中那将是一个根基更深，更为强大，更趋于和谐的新的征程，我时刻准备着。

留给大家的一点点心意：本教程的Word文档（作者仍强烈建议大家以多看Blog为主，特别是每篇文章后的评论，往往谜底就孕育其中）。如果大家能从中体会到作者的用心良苦，我倍感欣慰。很多朋友曾质疑我写教程的目的，是否是微软的枪手亦或是有利可图？？这时常让我感到憋屈：作者.net技术真的很一般，你大可以理解教程中大量存在着用它人图片来美化自己的途径，更有高人察觉到些许的诈骗之嫌，也有朋友毫不吝惜的批判：传说中的深蓝色真的视金钱如粪土？？？如果论奉献是一种财富，感谢上帝，I got it。我不是21世界的雷锋，但我一直信仰着一种精神！早已被中国IT界所遗忘的Dark Blue Spirit --通过毫不吝惜的努力去证实自身存在的价值的多方面体现：交流与共同提升；与众高手相互切磋强过独自闭门造车千百倍。

回首，从5岁开始玩电子游戏，玩了20多年的游戏，从FC到PC，从单机到网游，从日本-韩国-美国到中国，在我大学毕业前，只要你说的出名字的游戏我全玩过。依旧记得19岁那年，我在家玩英文版的《恶魔城》，做软件开发的姨父刚从美国回来探亲，我开玩笑的问他其中的一句对话翻译成中文是什么意思，出乎我意料，他口气很差的说：你这么喜欢玩游戏，干嘛不自己做一个？一句话缔造了现在的这部教程。一个小肚鸡肠的人时刻铭记着自己的理想与信念，他无时不在渴望着去制作一款属于自己的游戏，感谢这20年的游戏史让他爆发出如此汹涌澎湃的小宇宙。这辈子不再期盼还能为这花花世界创造出啥子奇迹；但求能为大家，为无限热爱的中国那可爱又可狠的IT界贡献一份微薄之力，足以……

感慨，在人生前进的道路中谁不曾迷茫过，当今中国的大学生为什么总感觉在这社会中找不到自己的定位？寒窗十数载到底学到了什么？你对自己真的了解吗？你是否有察觉到了自己身体中与众不同的东西在蠢蠢欲动？是的，那才是你的价值，冲动创造魔鬼，懦弱与逃避是背叛历史，惟有理想与信念才能铸就永恒。我一直对我的学生说，不要用你的软肋去就业，释放你引以为豪的专长，前途一片光明！！

前些天收到了Chris Swenson写来的一封电子邮件，虽然很简短，但是字里行间无处不体现微软Silverlight开发团队已高度迫切的注意到了Silverlight在开发大型网络游戏方面的巨大潜力与商机！我很兴奋，这是机遇呀，于是我第一时间回复了他：在中国，据我了解，已经有很多公司正在从事或在今年即将打算从事Silverlight方面的游戏开发，对于使用Silverlight这样新兴技术，用于有如此庞大潜力市场的领域，在中国，乃至世界上都前所未有！但是我们做到了，因为我们一直坚信微软能将Silverlight4乃至后面的版本做得更好，强大的后盾让我们义无返顾。如果能让我提个意见的话，那就是快些，快些，再快些，让渲染来得更猛烈些吧！！2D仅仅只是个开始，玩转3D -- 我虔诚的期待着某天Silverlight将引领世界RIA的革命风暴！这是我们所有Silverlight爱好者共同的梦想！

遥远的彼岸一道新的曙光已悄然浮现，深深的遥望......

所有源码请到目录中下载，在线演示地址：http://silverfuture.cn

（教程完)

作者：深蓝色右手
出处：http://alamiye010.cnblogs.com/
教程目录及源码下载：点击进入(欢迎加入WPF/Silverlight小组　 WPF/Silverlight博客团队)
本文版权归作者和博客园共有，欢迎转载。但未经作者同意必须保留此段声明，且在文章页面显著位置给出原文连接，否则保留追究法律责任的权利。

评论: 29　查看评论　发表评论

最新新闻：
· 李开复创新工场发展基金曝光首单投移动互联(2010-02-10 11:28)
· Sun前CEO欲写自传称经济危机是Sun被购主因(2010-02-10 11:25)
· Google社会化产品Buzz发布会实录(2010-02-10 11:15)
· 福布斯：苹果生态产业链上的十大企业(2010-02-10 11:14)
· 纽约时报：Google凭借Buzz进军社交网络(2010-02-10 10:59)

编辑推荐：Google社会化产品Buzz发布会实录

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十九) 落雷！治疗！陷阱！连锁闪电！多段群伤！魔法之终极五重奏②

深蓝色右手 — Mon, 18 Jan 2010 07:44:00 GMT

阅读: 2905 评论: 41 作者: 深蓝色右手发表于 2010-01-18 15:44 原文链接

本节，我将完成本教程示例游戏的最终两个魔法：传说中的连锁闪电与暴风雪。如此经典与华丽的家伙无论在哪款好游戏中都少不了它们的踪影。

首先是连锁闪电，在《英雄无敌》中体现得尤为出色，击中一个怪物后，闪电会继续向它周围延续，连锁到下一个怪物并对其进行第二次攻击，接着重复前面步骤往周围延续，直到次数达到连锁次数上限或周围已没有其他怪物为止。当然，每一次攻击产生的伤害及附加属性都会少于前一次，例如在本教程示例游戏中，我将连锁闪电设定为每一级连锁攻击力都较头一次减半，且附加麻痹属性的时间也减半，这些数据均记录在Config.xml魔法配置文件中，非常有意思，大家可以通过AffectedNum来自由设定不同等级能连锁的次数上限，例如3级连锁闪电可最多3次连锁等等：

那么在Silverlight中我们是如何进行这些连锁处理的呢？其实我们可以把整个释法过程分成3个步骤，第一步，捕捉要攻击对象及其周围在连锁闪电攻击半径Radius内小于或等于AffectedNum的敌对精灵对象，放入一个List<QXSprite>中(其中第一个即为被鼠标点中的攻击对象)；第二步，类似第四十七节中的单体飞行魔法原理，通过Storyboard创建飞行动画，并在动画Completed事件时触发对第一个怪物的第一次伤害；第三步，以该怪物中心为起点，再次创建Storyboard飞行动画，将魔法飞行到List<QXSprite>中的第二个怪物中心，并触发连锁闪电的第二次攻击，后面的依次类推，直到连锁完成(List<QXSprite>中所有对象均伤害一次)：

接下来是暴风雪，就好比《传奇》中的火墙，它的大致原理类似本教程中的群攻魔法，不同的是它的伤害性质为多段的，即该魔法将一直循环播放，不同等级的暴风雪持续时间不同，例如我将9级暴风雪持续时间设置为7000毫秒：

只要进入该魔法攻击范围内的所有敌对精灵均会遭受伤害，伤害间隔可以通过参数来设定，这里我设置为每间隔600毫秒定值进行一次伤害：

if (totalTime > AffectedNum) {

Timer.Tick -= Timer_Tick;

Super.RemoveObject(this, true);

} else {

if (totalTime == 0) { Super.DoInjure(this); }

totalTime += TimerInterval.Milliseconds;

count += TimerInterval.Milliseconds;

if (count >= 600) {

Super.DoInjure(this);

count = count - 600;

}

在本教程示例游戏中，暴风雪附加的是冰冻效果，由于我并未为系统加入魔法命中率及附加效果命中率系统，因此只要被该魔法击中基本上怪物只有死路一条，嘿嘿。实际制作中该类型魔法应该尽量少的附加效果，或者加入低附加效果命中，游戏才会更具趣味性，尤其在PK中：

魔法类型其实还有很多，本教程中的魔法类型基本上已经囊括了目前市面上游戏中的大多数种类，其他的如全屏魔法，联协魔法，镜象魔法等等更多高级的魔法大家可以自行尝试制作，游戏开发不需要拘泥于传统，新奇的事物更能吸引玩家的注意与兴趣。还是回到创新这个词上，有创意的事物都会体现出鲜活的生命力，它是进步的象征，将驱动一切的前进。

到此为止，完成了本教程物理攻击及魔法的所有设计与制作。由于此引擎设计之初就是为了配合教程教学的，因此功能模块都是时时的不断添加更新，代码难免有些丑陋，同时也少不了面向过程的内容与高耦合度。希望大家还是以理解为主，思想是一切的根源嘛。

最后感谢朋友们长期以来对我的支持，我一直在期待Silverlight4的降临，到时我将为此引擎重新来过，让其完全的面向对象，减少初级的成分，让朋友们都能参与到设计中来，一同体验一同进步。

当脑海中时常浮现未来的景色，那么，离它已不再遥远了。

本节源码请到目录中下载，在线演示地址：http://silverfuture.cn

评论: 41　查看评论　发表评论

编辑推荐：Google社会化产品Buzz发布会实录

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十八) 落雷！治疗！陷阱！连锁闪电！多段群伤！魔法之终极五重奏①

深蓝色右手 — Fri, 15 Jan 2010 08:20:00 GMT

阅读: 1857 评论: 16 作者: 深蓝色右手发表于 2010-01-15 16:20 原文链接

是否还记得《传奇》里那一道道从天而降落的闪电，《笑傲江湖网络版》中娥眉救死扶伤的治疗，《剑侠世界》里五毒神出鬼没般的陷阱，《英雄无敌》中超经典的连锁闪电以及《魔兽争霸》的法师终极大魔法-暴风雪。这些家伙都曾在当年的玩家们心中打下过深深的烙印，如能将此些经典之作添加进游戏中，毫无疑问必会大幅提升游戏的华丽度与趣味性，战斗不就涂个爽快吗？这才是魔法的终极魅力！

首先来看闪电(落雷类型)魔法的制作。

从天而降，单体伤害，给予目标麻痹附加效果。与上一节的单体飞行魔法不同的是，施放就好比第三十二节中的群攻魔法，瞬间从目标点出现，并于起效帧时触发伤害，攻击对象为单体，算比较简单且实用的魔法之一。实际游戏制作中的瞬发型单体魔法并非只有闪电，可以说几乎所有游戏中的基础系魔法均可从此类型衍生出来，比如《三国群英传》中的地矛等：

接下来是单体治疗类型魔法，由于本教程示例游戏是单机的，因此我将此治疗魔法设定为可以对任意对象进行加血操作以展示其灵活性。治疗魔法的原理就好比落雷，仅仅不同的是它所产生的效果是加血而不是伤血，实际制作中可以将它们归为一类，处理伤害时通过+-来判断完成即可，同时拓展衍生一下，群体加血不就是将群攻魔法进行反向即减血操作便可，其实魔法设计是有规可寻的，为要

别因为那些魔法表现得花花绿绿五花八门而无从下手，当你从中抽离出规律时，一切就简单多了：

再下来是陷阱类型魔法，在《暗黑破坏神》和《剑侠世界》等游戏中均有很不错的表现，本节中我借用《剑侠世界》的素材来制作陷阱。别看实际使用时是那么的牛X，制作时却需要考虑挺多的因素；例如每个角色能同时拥有几个陷阱在地图中；陷阱如一直未被触发那么它的消失时间是多长；陷阱是相对于敌对精灵不可见，而非敌对玩家则以半透明的形式出现；陷阱有一定的作用范围，当埋设后并不产生伤害，只有当敌对精灵进入该范围内时才触发伤害，并出现陷阱被触发的新动画以及对该精灵进行附加效果如中毒等处理。在本示例教程中，我仅仅以简化的方式实现了类似的陷阱：一个精灵只允许同时拥有一个陷阱，且如果该陷阱不被触发或不去施放新的陷阱则一直存在：

更精彩的还在下一节，连锁闪电那可是《英雄无敌》的招牌，不同级别的连锁闪电可以连锁的敌人个数不同，作者用“酷毙了”去形容它仍觉得尚欠火候，想看吗？敬请关注。

本节源码请到目录中下载，在线演示地址：http://silverfuture.cn

评论: 16　查看评论　发表评论

编辑推荐：Google社会化产品Buzz发布会实录

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十七)远距离单体攻击与单体魔法

深蓝色右手 — Tue, 12 Jan 2010 03:29:00 GMT

阅读: 1964 评论: 21 作者: 深蓝色右手发表于 2010-01-12 11:29 原文链接

到目前为止，主角能使用的魔法均为群攻型魔法，群攻魔法的原理相对简单，常见如圆形范围，矩形范围，扇形范围等等，当魔法释放后可以按照本教程的做法对所有坐标处于相应范围内的怪物进行伤害处理，这是直观的处理方式；如果你最求更专业的，可以通过创建一个新的数组副本来记录伤害坐标是否与怪物所处的坐标匹配从而进行相应处理。至于单体魔法呢？它虽然没有群攻华丽的外表，可是实际制作中却需要考虑许多额外的问题。那么本节我将就上一节遗留下来的远距离单体攻击及单体魔法的简明制作原理及的异同进行讲解。

上一节主角会飞了，手上拿着弓很是得意，可是每次攻击时都不会有箭支射出，该如何添加飞箭效果到游戏中呢？

首先准备素材：

没错，就5张，如果你觉得还多了随便取其中一张就OK了。

读者：1张？有没搞错？人家《剑侠世界》里起码88张…

作者：有看过教程第40节的朋友都知道，本教程示例游戏中的极光魔法素材也仅用了8张，通过旋转变换后即可实现360度的任意变换。如此处理的目的是为了大量减少素材体积，从而区分出C/S与B/S游戏的设计区别。很多朋友经常会误解WEB游戏的整体容量其实和客户端游戏是相当的，区别仅仅是前者会将素材按需下载而不像后者一次性加载。这里我想明确的告诉大家，Web游戏在素材的重用上，素材的处理方面应该做到精简而不失优雅与平滑，这是Web游戏开发人员都必须遵循的准则，也是Web游戏设计的精髓所在。如果还是无法理解，且往下看。

这把飞箭来在实际中的旋转可以参考第40节中的极光魔法处理，但同时又有些许的不同：极光魔法是不动的，当播放完所有帧后即消失；而飞箭是运动的，从主角的手中飞出，消失于敌人中心。此时，我选择通过类型为DecorationTypes.Loop的QXDecoration创建飞箭实体，当精灵远距离攻击时，创建对象并进行相应旋转，最后为其添加一个Storyboard飞行动画，并注册storyboard.Completed事件当动画播放完后(即到达敌人中心时)才清除掉该对象，关键代码如下：

//假如是远距离攻击,则射放出相应的对象

if (LongDistanceAttack) {

QXDecoration ammunition = new QXDecoration() {

Code = 7,

EndFrame = 4,

BodyWidth = 80,

BodyHeight = 29,

CenterX = 40,

CenterY = 15,

Coordinate = new Point(this.Coordinate.X, this.Coordinate.Y - 40),

DecorationType = DecorationTypes.Loop,

};

//旋转

ammunition.RenderTransform = new RotateTransform() {

CenterX = ammunition.CenterX,

CenterY = ammunition.CenterY,

Angle = Super.GetAngle(enemy.Coordinate.Y - this.Coordinate.Y, enemy.Coordinate.X - this.Coordinate.X)

};

this.ParentCanvas.Children.Add(ammunition);

//向目标移动,当到达后消失

Super.MoveToTarget(ammunition, ammunition.Coordinate, new Point(enemy.Coordinate.X, enemy.Coordinate.Y - ammunition.CenterY), 1, 1, 1);

}

其中MoveToTarget飞行方法为：

///

/// 向目标移动,当到达后消失

///

public static void MoveToTarget(……) {

Storyboard storyboard = new Storyboard();

storyboard.Completed += (s, e) => {

RemoveObject(obj, true);

};

PointAnimation pointAnimation = new PointAnimation() {

To = end,

Duration = new Duration(TimeSpan.FromMilliseconds(GetAnimationTimeConsuming(start, end, zoomX, zoomY, unitCost)))

};

Storyboard.SetTarget(pointAnimation, obj as DependencyObject);

Storyboard.SetTargetProperty(pointAnimation, new PropertyPath("Coordinate"));

storyboard.Children.Add(pointAnimation);

storyboard.Begin();

}

嘿嘿，大功告成了，那么我们运行一下看看漂亮的射箭效果吧：

接下来大家还可以发挥更多的想象，就好比《剑侠世界》那样一次同时放出多发箭支，相当酷呢。有了前面的旋转基础，只需循环创建N发箭，对每支箭进行一定规律旋转及发射点与目标点的偏移处理后即可：
double angle = Super.GetAngle(enemy.Coordinate.Y - this.Coordinate.Y, enemy.Coordinate.X - this.Coordinate.X);

for (int i = -2; i < 3; i++) {

……

ammunition.RenderTransform = new RotateTransform() {

……

Angle = angle - 10 * i,

};

……

Super.MoveToTarget(ammunition, new Point(ammunition.Coordinate.X,ammunition.Coordinate.Y + 40*i), new Point(enemy.Coordinate.X, enemy.Coordinate.Y - ammunition.CenterY + 40 * i), 1, 1, 1);

}

通过依葫芦画瓢我们还能将此多箭射击修改为很酷的扇形魔法，这就是一张图片给我们带来的奇迹，很酷吧。大家现在是否可以理解前文说的素材问题了？ Silverlight在制作游戏上可真不是盖的。

教程到此，主角的飞行与射箭就全部完成了。有了单体远距离攻击为理论基础，那么单体魔法攻击同样很简单，与单体远距离攻击不同的是，它的参数更多些，毕竟是QXMagic的实例之一。与前面章节中的群攻魔法不同，需要在窗口的鼠标右键点击时做判断，如果点击的对象是敌对的精灵才能释放单体攻击魔法，并且单击魔法的参数同样存放在Setting.xml中。本节我为大家准备了两套单体攻击魔法，分别是[无属性]的与[火属性]的，由此再此证明无论是单体或是群攻，无论是近距离还是远距离，在此引擎下添加新魔法是很简单的，要求的技术含量低，更多的是自己的创新能力，开拓思维，这个界是可以更美丽的：

由于素材来源于不同的游戏，且为了源码简单起见，本节中无论是单体远距离攻击还是单体魔法均存在一定的定位偏差，同样还是希望大家以理解原理为主要学习目的。实际开发中，箭支或魔法飞行通过Storyboard进行射击或移动，处理时应对箭支或魔法进行时时的与攻击目标碰撞检测，一旦碰撞才会产生伤害并消失掉，这才是最理想且最精确的状态过程。

本节我还对部分素材进行了修改，例如极光魔法击中敌人时的周身闪电效果更加酷了，同时还更换了个更夸张的地狱火，顿时感觉其实游戏的精髓除了算法就是强有力的视觉震撼，美工的好好坏对游戏的吸引力真是有着巨大的影响呀(素材来源于《封神榜2》)：

本节源码请到目录中下载，在线演示地址：http://silverfuture.cn

作者：深蓝色右手
出处：http://alamiye010.cnblogs.com
教程目录及源码下载：点击进入(欢迎加入WPF/Silverlight小组　 WPF/Silverlight博客团队)
本文版权归作者和博客园共有，欢迎转载。但未经作者同意必须保留此段声明，且在文章页面显著位置给出原文连接，否则保留追究法律责任的权利。

评论: 21　查看评论　发表评论

编辑推荐：Google社会化产品Buzz发布会实录

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十六)飞行模式 – 自由VS天空

深蓝色右手 — Sun, 10 Jan 2010 01:24:00 GMT

阅读: 1906 评论: 13 作者: 深蓝色右手发表于 2010-01-10 09:24 原文链接

曾几何时开始迷恋无垠的天际，幻想着插上翅膀去飞翔。《天翼之链》、《奇迹》、《梦幻诛仙》向无数玩家展示了飞行的世界。翅膀，常常是一种身份的象征，但如能再赋予它自由的含义，好比《永恒之塔》中如履空气般畅快淋漓，游戏魅力自然无可阻挡。

如何让游戏中的角色自由飞翔？角色飞行时有何特殊之处这是游戏在设计需求时最需要考虑的问题。在如《星钻物语》、《天翼之链》等Q版网络游戏中，翅膀仅仅作为一种美丽的装饰品，强者的象征，附加属性除此之外毫无他用；又如《奇迹》、《封神榜》等游戏，当角色装备翅膀后移动模式会变为“超低空”飞行模式，但仅仅表现为移动时外表样式的改变，当遇到任何地面障碍时仍是无法飞越的；而在2D的《梦幻诛仙》中，飞行模式却体现得到华丽而不失真实。当主角在天空时，地面的所有对象物体均会被缩小为原始的60%左右比例，并且在天空层与地面层之间覆盖着一层透明的云雾缭绕效果，仿若真正置身于天际：

这种2.8D的视觉效果在Silverlight中可以通过两种途径来实现：HLSL渲染和按需缩放。如果未来的Silverlight版本能完全激发GPU的渲染功能，那么利用HLSL直接对精灵托盘（Carrier）和地图托盘进行相应比例的缩小渲染后，再对主角等飞空的对象进行放大复原二次渲染即可，其中在天空层与地面层之间放置一张透明度的云雾PNG图片，一切其实可以这么简单滴；但在目前Silverlight还无法很好调用GPU的前提下，我们可以通过循环遍历所有在游戏窗口中显示的对象，如果不是在飞行状态的，则尺寸缩小为原始的60%，反之则不变，具体逻辑还算简单，只是需要特别注意一下地图的处理，例如地图使用的是Tile块或整图就无大碍，如果是切片按需加载的则相对麻烦些，需要多写算法。额外的，精灵在飞行过程中将无视一切障碍，并且移动速度会相比在地面上快一些，同时还需要考虑降落时所处的坐标是否为障碍物，否则不允许着陆等逻辑。

《梦幻诛仙》算是目前层次效果最好的2D网游之一，由于本教程示例游戏结构架设之初并未考虑陆-空分层，因此本节暂时以实现主角传统低空飞行模式为主，即从外观上体现，并同时能实现障碍物的飞跃。

这里我准备的素材来源于《封神榜2》的翌使，精灵要飞行，当然需要添加一个IsFlying属性来描述是否正处于飞行状态，如果是，则遇到障碍物碰撞检测均忽略掉，例如：

private bool WillCollide(QXSprite sprite, Point p) {

if (sprite.IsFlying) { return false; }

……

}

然后将翅膀道具添加进游戏，在本教程示例游戏中，为简单起见，我将翅膀归到衣服类；并添加了一个新的武器：弓。在天上飞的，用弓才酷嘛，弓的武器属性均记录在Config.xml配置文件中，其中有两个参数非常关键：AttackRange和LongDistanceAttack分别代表攻击距离和是否远程物理攻击。另外，由于主角的素材来源于两个不同游戏，因此大家在运行演示程序时遇到错位情况请不要见怪啦，理解原理为主：

装备弓后：

嘿嘿，插上翅膀的主角此时可以进入所有示为陆地障碍物的区域了。由于弓有400的攻击射程，接下来我们不妨引上一群怪，并飞到障碍物上，一箭一箭的射得怪物们毫无脾气，陆-空不同嘛，这就是飞行的特权：

很酷吧，一丁点代码的修改就实现了这么有趣的功能。当然，在实际制作中，大家应该专门设置一个翅膀装备格，并根据需要处理好陆-空之间的障碍物逻辑与战斗逻辑，如《永恒之塔》的空战形式等。如果想制作类似《梦幻诛仙》的陆-空分层视觉效果，那么在一开始为游戏设计架构时就应该做好铺垫，否则后期修改会复杂许多。

主角装备上弓后已经具备了远距离攻击能力，细心的朋友一定有发现似乎还缺少了些什么。是的，射击后怪也伤血了，但始终都没见有箭飞出？嘿嘿，这就是下一节要讲的远距离攻击及单体魔法攻击效果了，敬请关注。

本节源码请到目录中下载，在线演示地址：http://silverfuture.cn

评论: 13　查看评论　发表评论

编辑推荐：Google社会化产品Buzz发布会实录

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

WPF/Silverlight深度解决方案：(十四)重写控件样式

深蓝色右手 — Mon, 04 Jan 2010 08:09:00 GMT

阅读: 1109 评论: 10 作者: 深蓝色右手发表于 2010-01-04 16:09 原文链接

在实际开发应用中，Silverlight默认控件样式并不能满足我们所有的需求，特别是对华丽界面的构造，需要对现有控件进行皮肤重写。WPF/Silverlight中使用xaml描述界面，类似Css，它们同样有Style和Template。目前微软开源工具包中集成的均是复杂类型控件，如何修改它们的样式确实难倒了不少朋友，那么本节以分析为主，结合对常用的NumericUpDown控件向大家讲解如何对现有控件进行样式重写。

首先打开工具包中的示例项目：

接着找到NumericUpDownSample.xaml这个示例页面并打开：

为什么要这样做？要重写某个控件首先必须要知道它是如何构造的，当然如果您有深厚的功力，您完全可以看着源码从基类开始一层层写下来，不过这绝对是一件吃力不讨好的事情，因为MS已经给我们提供了非常详细的Sample：

每种控件都有提供了很多样式供我们参考，如果你相中了其中某个，直接可以从NumericUpDownSample.xaml中拷贝出全部相关内容即可，但如果还是不满意呢？例如我想将加减值按钮换成可以悬停变换的图片又该如何处理？

这时我们需要做的是抽取其中任意一个被重写过样式的NumericUpDown及其所牵连的所有代码，例如上图中红色圈中的那个，找到它的主体代码如下：

<inputToolkit:NumericUpDown Grid.Row="1"Grid.Column="0" Style="{StaticResource ButtonSpinnerHorizontalStyle}" Margin="5" Height="90" FontSize="50"/>

很显然，它的样式加载的是静态资源中的ButtonSpinnerHorizontalStyle，那么接下来我们查找该静态资源并去掉其中的vsm:VisualStateManager和Border等无关紧要的内容，剩下控件的主要样式如下：

……

<Setter.Value>

<Grid>

……

<inputToolkit:ButtonSpinner x:Name="Spinner" …… Template="{StaticResource ButtonSpinnerHorizontalTemplate}">

inputToolkit:ButtonSpinner>

Grid>

ControlTemplate>

Setter.Value>

Setter>

Style>

原来NumericUpDown是由一个包含TextBox的ButtonSpinner构成，而ButtonSpinner加载的样式模板为ButtonSpinnerHorizontalTemplate，接下来我们再次找到ButtonSpinnerHorizontalTemplate，同样的把不必要的部分去掉，关键代码如下：

<Grid>

<Grid.ColumnDefinitions>

Grid.ColumnDefinitions>

……

Grid>

ControlTemplate>

它的构造由3部分组成：用于输入数字的内容区域ContentPresenter，以及加值按钮IncreaseButton和减值按钮DecreaseButton。至此，NumericUpDown控件的具体结构才浮出水面。再下来我们还是按照上面的规律忽略无关紧要的代码，不理会TemplateBinding而是直接找到StaticResource对应的Template，以IncreaseButtonTemplate为例，它的关键代码如下：

<Rectangle.Fill>

……

Rectangle.Fill>

Rectangle>

Grid>

ControlTemplate>

现在清楚了吧，原来NumericUpDown控件的加减按钮的原形是RepeatButton，而RepeatButton的原形则是Rectangle，那么我们只需修改Rectangle.Fill的内容，即可改变NumericUpDown加减按钮的样式，这里我使用两张图片作为鼠标进入和离开Rectangle时的Fill填充对象，那么修改后的代码如下：

<Rectangle.Fill>

Rectangle.Fill>

Rectangle>

Grid>

ControlTemplate>

//加载图片

private BitmapSource GetImage(string imageName) {

return new BitmapImage(new Uri(string.Format(@"/Silverlight;component/Images/{0}", imageName), UriKind.Relative));

}

private void Background_MouseEnter(object sender, MouseEventArgs e) {

Rectangle rect = sender as Rectangle;

rect.Fill = new ImageBrush() { ImageSource = GetImage("2.png") };

}

private void Background_MouseLeave(object sender, MouseEventArgs e) {

Rectangle rect = sender as Rectangle;

rect.Fill = new ImageBrush() { ImageSource = GetImage("0.png") };

}

运行后效果如下：

通过xaml重写模板非常实用，如果你掌握了Blend的应用，那么通过Blend去重写模板是相当方便和快捷的事情，让控件皮肤随心所欲，产品才能更吸引客户的眼球。

作者：深蓝色右手
出处：http://alamiye010.cnblogs.com/
本系列目录及源码下载：点击进入(欢迎加入WPF/Silverlight小组　 WPF/Silverlight博客团队)
本文版权归作者和博客园共有，欢迎转载。但未经作者同意必须保留此段声明，且在文章页面显著位置给出原文连接，否则保留追究法律责任的权利。

评论: 10　查看评论　发表评论

编辑推荐：Google社会化产品Buzz发布会实录

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

2009最后一天，为了期盼而祝福

深蓝色右手 — Thu, 31 Dec 2009 03:35:00 GMT

阅读: 2495 评论: 32 作者: 深蓝色右手发表于 2009-12-31 11:35 原文链接

2009年的最后一天，这是我第一次在BLOG中抒写心声，希望给迷茫的朋友们带来一丝光芒，希望为2010年的开始注入春天的活力，我一直坚信我不是一个人在战斗，时代是需要团结的力量，与Silverlight一路走来，感受的风和雨，感慨的世态与人生不在老赵之下。这些是我收集的目前大多数朋友的种种困惑，其中的回答都为我个人想法，不代表微软，也不代表任何团体，我就是我。

困惑1：Silverlight技术再好，就算你把它玩得天花烂醉，N低的装机量，N少的职业岗位，对于这门技术的观望者来说仍然需要考虑再三，Silverlight必将很难得以推广与发展。

个人想法：目前种种迹象已经突显MS在不稀血本推行Silverlight技术，SLQQ不是开玩笑的，界面很华丽虽然性能一般，但如果真正开始投入使用后，我们暂且忽略一下它的应用性，单从使用QQ的用户群体来说，将无法估量的大规模提升Silverlight在中国的装机量；Silverlight官网上的资料与信息评论等的更新速度远远快过MS的其他产品网站；外加Silverlight4将于2010年强势登陆（大约在春季），具我了解，非常多的企业已经瞄准了这个产品，明年的Silverlight招聘信息将遍布全国各地，打破困惑总是需要时间的，这就是一个考验人耐心的完美征程，但我坚信2010年将为所有.NET开发者带来真正意义上的春天，希望的花朵是时候绚烂了！

困惑2：Silverlight永远竞争不过Flash/Flex，因为Flash在人们心中的地位已经根深蒂固，目前大多数的Flash开发者都是美工出生或者有一定美工基础的人，因此做出来的东西都很漂亮；而Silverlight的开发者均出生于.NET世家，天天把架构什么的挂在嘴边，做出来的东西UI界面根本看不得，性能再好用户同样不买帐。

个人想法：MS推出WPF来取代Winform；用Silverlight抢占RIA市场，并且从.NET4.0中我们更看到了WPF框架的精简加之Silverlight4.0势必给我们带来更猛烈的震撼，种种的迹象暗示着微软未来技术的革新与方向，复合型人才将在未来竞争中更具优势。大家不妨逆向思考，.NET开发者人数绝对是AS开发者人数的N倍，而VS开发工具的强大与高效为.NET开发者节约出了更多的时间，这些时间将被用于逐步的，循序渐进的对一些美工基本技巧的学习(学习Silverlight，必然会潜移默化的掌握到相关知识，如RGB，旋转缩放变换，3D概念等等)，这势将造就未来使用Silverlight的.NET开发者同时具备扎实的架构知识，融会贯通的设计模式，与生俱来的面向对象思维方式；长期网站开发所积累下来的数据库知识和通信知识；以及基于Web的传统基础技术如div+css、Javascript等，比起AS程序员用Flash做出来外表华丽而无强大后台技术支持，且内存随着时间线性增长的产品来说，Silverlight将同时兼具精致的画面与强健而稳定的后台以及高度的可维护性与拓展性。如非上帝弄人，那么未来或将展现出Flash/Flex与Silverlight平分RIA市场的局面，其中前者会继续稳固长久以来占据的大规模中小应用领域；而后者必将在大中型企业级应用上绽放光芒。谁消灭谁这问题讨论起来一点也没有意义，存在则有价值，相互制约才会平衡，竞争引导技术飞跃；是谁让Silverlight进步得如此神速？其实不就是Flash自身吗？一味的垄断与自以为是势必造就未来的局面，当然我相信Flash其实是可以做得更好的，虽然暂时没有。或许未来还会出现三足鼎立呢？谁也无法预言。

困惑3：有的朋友说Silverlight好难呀，有的朋友说Silverlight的书都好基础呀，要学到什么程度才能算精通呢？

个人想法：说Silverlight很难的朋友心态肯定是想一口吃掉一个大胖子，谁不想一两天学会这门技术？谁不想三四天上企业级应用？谁不想一星期出一款大型游戏？但是可能吗？我们都不是神，我们是人；而看了Silverlight相关书籍，掌握了基础知识后仍感觉找不着北的朋友，肯定是没有养成边学边练的习惯；做开发的最忌纸上谈兵，记得我刚写教程的时候，很多朋友都会跟着我学一节，练一节，因此成长得都很快，基本上两个月后当我出完前30节教程，群里已经出现了相当数量Silverlight方面的高手，他们都是从完全不会慢慢成长起来的，我相信他们都是付出了很多的心血，把骨头啃了一遍又一遍才真正的吸收到其中的精髓。虽然我自己从不敢说完全精通Silverlight技术的所有角角落落，但是我可以在没开始做产品前告诉客户：我能。而在后面才看我教程的朋友，特别是开源后才学习的，拿着源码直接运行的多过思考练习的，不知道是我开源的错还是国人面对开源的悲剧行为，我在反思的同时也希望读者能醒悟，其实高手也是从ABCD开始的，不是吗？

困惑4：Silverlight与Flash比，孰优孰劣？

很简短的一个问题，但也是目前大多数朋友感到最为困惑的问题。回答这个问题前，我想先稍微说说我自己的Silverlight经历：2009年2月份左右我开始学WPF和Silverlight，那段时间一个偶然的机会在网上看到了关于Silverlight的相关资料与介绍，最吸引我的是可以用拿手的C#制作出华丽的动画效果；我是一个彻头彻尾的游戏狂热爱好者，基于对游戏开发的执着，早在大二那年我就曾尝试过使用Java Applet制作RPG游戏，依旧清晰记得当时用的也是Canvas加双缓冲画面重绘，但是由于自身技术的不成熟，做出来的游戏画面闪烁厉害，最终还是放弃了。而WPF和Silverlight的出现让我眼前一亮，梦想的大门似乎再次出现在我面前，于是乎我开始疯狂的查阅网上资料，极度渴望的了解这两门技术的过去，发展和将来；2009年3月开始，我终于开始着手我的第一个WPF作品《WPF ARPG 游戏引擎》；虽然代码丑陋，运行性能低下，但是一个月夜晚的时间让我真正尝试到了与理想如此近距离接触，何尝不感到欣慰。它的出现让我最深的体会就是：WPF/Silverlight是完全可以用来制作游戏的。由此，《C#开发WPF/Silverlight动画及游戏教程》孕育而生。

看到这，大伙是否觉得有些文不对题？其实我想让大家更多的去思考而不是参照，如果你由衷的热爱你的事业，忠实的信仰着你的理想，就算在上面花费多少时间与心血都会觉得值；你的作品将会完全融入你的思想与灵魂，它是活生生的，有血有肉的，用满腔热血铸就的。当你把它当作你自己孩子的时候，你会每天把它看一遍，经常的对他重构，久不久换一套外衣，时常清理它身体中的垃圾，让它更美更漂亮。

如果你能从你的作品中感受到温暖，那么你离解开这个困惑已不远了。大家不妨再回想一下自己刚大学毕业，或即将毕业时，心中是如何描绘自己未来事业蓝图的？是以金钱为目的的一步登天还是以兴趣与理想为目的的一步一个脚印的前行？是寻找自己特长的职业尽心尽力还是用自己的软肋去无畏的挣扎徘徊？

该见分晓了，时常会出现Silverlight与Flash比来比去，非要证明出一个是公一个是母，最终的结果就和.NET与Java争个你死我活没有一点意义，两门技术都有强劲的后台与历史渊源，进化中的物体何来优劣之论？如果你精通Flash，你大可不必再去学Silverlight；如果你原本是.NET开发者，早已将C#等.NET开发语言玩转于手心，高起点学习Silverlight让你驾轻就熟；如果你曾学过Flash但不精通，同时也做过.NET开发但非高手，面对Silverlight这个新兴事物，你完全可以从你自己事业的前进方向着手分析，例如你只打算做网页中的小动画，那么Flash已经足够了，外加它目前大规模的装机量；如果你打算以后构建精致体系架构的RIA企业级应用，你不妨尝试去使用Silverlight，它在性能上会体现得更加优越，当然，前提是你必须精通。

困惑5：如何学习Silverlight？更重要的是如何才能学好Silverlight呢？

个人建议：学习Silverlight的最基本前提是掌握至少一门.NET开发语言如C#或VB.NET等；接下来要做的是买一本Silverlight2或3的入门书籍，这里我推荐《Silverlight2完美征程》和《Silverlight3银光志》，当然，如果你想把WPF也一起学了，那么可以买N人帮的《WPF编程指南》。这些书从如何搭建Silverlight开发平台开始讲，其中每节都穿插着例子，学一节自己跟着写一节代码，一本书全看下来保证你可以到一个高度熟练或者说准精通水平。有了扎实的基础后，我强烈推荐你看我的教程，从此展开一场惊险、艰难、刺激同时也充满收获喜悦的动画游戏开发之旅，如果最后你自己能做出一款类似的Demo出来，那么我可以恭喜你，你已经精通Silverlight了。当然，要成为未来RIA技术的领军人物，精通Silverlight技术也才仅仅是个开始，你还需要精通通讯技术，熟悉至少一种相关数据库，理解并能运用相关的美工知识，如能掌握如Photoshop等图形图象编辑工具则更具优势，或许这就是传说中的复合型人才，别说不可能，从小就开始数理化英物生，我们中国人难道比别人差吗？模仿的时代即将结束，80后更应具备创造与创新能力，肩负起时代的责任，你们的成长将为90后乃至新世纪出生的中国人指引更为正确的道路，未来的天空靠大家去铸就！

你畏惧吗？畏惧就请放下你手中的键盘；你害怕吗？害怕就请关上你的显示器。宁静可以换来安逸，但除此之外一无所有。网络世界已进入一个新的乱世，谁将是下一个曹操？!!!!

评论: 32　查看评论　发表评论

编辑推荐：Google社会化产品Buzz发布会实录

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十五)制作精美的可任意拖放对象的物品栏及装备栏

深蓝色右手 — Thu, 24 Dec 2009 03:17:00 GMT

阅读: 2479 评论: 30 作者: 深蓝色右手发表于 2009-12-24 11:17 原文链接

本节的内容很酷哦，作为圣诞礼物送给大家~嘿嘿

在通常的网络游戏中，物品、装备、技能、快捷按钮等窗口中的图标都是可以相互拖放的，不同的栏目有着不同的限制，例如技能图标不能拖放到物品栏及装备栏中，且不是所有的魔法技能都可以拖放（如被动技能等）；而非装备类的所有物品则无法拖放到角色的装备栏中。那么本节我将向大家讲解如何在本教程示例游戏中添加物品栏及装备栏，并实现它们之间双向物品交换的两种模式：拖放模式和双击模式。

首先制作物品栏。这里我使用的是官方的工具toolkit:ListBoxDragDropTarget，只需设置它的DragDrop.AllowDrop="True"，那么它内部的ListBox类型容器中的所有Item将均可以被拖放。相关示例大家可以参考紫色永恒的这篇文章：最新Silverlight Toolkit中的Drag&Drop支持。

仅仅使用ListBox的默认配置还是与实际游戏中的物品栏容器显示相距太远，物品栏直观上给我们的印象是一个N*M的网格形容器，里面的对象是图标，对内对外都应能做到任意拖放。为了满足上述需求，我们还得在ListBox的模版改造上下些工夫。

默认情况下， ListBoxDragDropTarget内部拖放时并不能作用于virtualized容器（ListBox的默认容器），因此我们首先需要重写ItemsPanel 的ItemsPanelTemplate来实现ListBox内部子对象之间能相互拖放：

<toolkit:ListBoxDragDropTarget x:Name="dragDropTarget" window:DragDrop.AllowDrop="True">

<ListBox.ItemsPanel>

ItemsPanelTemplate>

ListBox.ItemsPanel>

ListBox>

toolkit:ListBoxDragDropTarget>

问题又来了，StackPanel仅能实现水平或竖直方向上的子控件排列，仔细想想，要是它能折行，不也是一个网格吗？既要Panel类型，又要具备折行功能，当然非WrapPanel莫属。下面只需将<StackPanel />换成<toolkit:WrapPanel Orientation="Horizontal" />即可。同时，我们还必须让该ListBox背景透明且去掉它的滚动条：Background="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"才算完美。

物品栏界面制作完了，如何对它内部进行物品显示呢？这里需要用到ObservableCollection<QXIcon>对象作为ListBox的子控件数据源，为什么选择ObservableCollection<>而不是List<>等普通列表对象呢？因为ObservableCollection<>在内部子对象变化时会即时提交反馈给界面执行重绘更新，而List则不会，大家不妨自行尝试一下，可以体会到ObservableCollection<>是相当优雅的。

接下来，在游戏中我为主角定义了一个属性记录它现有的所有物品代号，当初始化物品栏时，游戏将读取这些代号，并从xml中的物品详细资料中查出相应的数据，例如：

<Items>

<Item Code="5" Categoriy="2" IconCode="50" EquipCode="1" Name="腰带2" Description="作者无敌懒" Value="0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0">Item>
……

Items>

其中Value值中的数据一一对应影响主角的21个基本属性，最后将这些赋予QXIcon，再将所有的QXIcon绑定到物品栏的ObservableCollection<QXIcon>中，到此就全部实现了物品栏对主角所持物品的显示：

嘿嘿，怎么样？这些物品与背景网格匹配得很好吧~而且物品栏里的所有物品都可以相互间拖放变换位置，很有意思呢。

完成了物品栏，下面我们用同样的方法来实现角色的装备栏。此时问题又来了，装备栏里的所有装备格的排放并非都有规律，一些在这，一些在那：

而不论ListBox套用何种模板，也只能实现内部子对象按相应的规律摆放，要实现装备任意位置的摆放，我们不妨以一个装备对应一个ListBoxDragDropTarget 和ListBox来实现。这样就可以很简单的布局出主角的9件装备栏了：

此时我们尝试一下打开物品栏，任意拖放一个物品到装备栏中，OK，成功了。但是反过来，从装备栏中将已装备的东西拖到物品栏中却报错了，而且这个错误无法调试，后来经过反复尝试，发现问题原来出在WrapPanel上，如果不使用WrapPanel，就算在两个StackPanel之间拖放都不会存在任何问题；而从一个ListBox中将对象拖到另一个WrapPanel中时，却会出现JS无法调试的错误；同样的，我还曾尝试使用一个PagedCollectionView来对WrapPanel进行分页，确实做到了，但是当将对象拖放到WrapPanel的第二页时，同样会报JS无法调试错误，基本肯定问题出来WrapPanel控件上，希望MS在未来的版本中能将这个实用的控件兼容性与功能完善好。没办法，都做到这个地步了，硬着头皮也得写完呀，看来只能自己去实现相应的事件功能模块了。还是从ListBoxDragDropTarget的所有事件的理解着手。ListBoxDragDropTarget在拖放方面的事件真不少：DragEnter、DragLeave、DragOver、Drop、GiveFeedback、ItemDragCompleted、ItemDragStarting、ItemDroppedOnSource、ItemDroppedOnTarget、QueryContinueDrag，其中又可以化分为拖(Drag)和放(Drop)两类，从字面意思上大家可以很容易理解，正常状态下，从一个ListBox(这里记做listBox1)往另外一个ListBox(记做listBox2)拖放控件，当鼠标在listBox1中的一个子控件上按住左键不放时，首先触发的是listBox1的ItemDragStarting事件，然后会卡那么一下(没去看具体源码，或许在执行遍历，就算在4核的电脑上也同样会卡一下，可见MS赶工的水平)完成抓取并触发listBox1的ItemDragCompleted事件，如果是在自身listBox1中放下，则触发listBox1的ItemDroppedOnSource事件，而如果在listBox2中放开，则先触发listBox2的Drop事件，再最后触发listBox1的ItemDroppedOnTarget事件。感觉上去还是比较混乱的，这个拖放做得真是。。。当然，在整个过程中还会触发另外剩下的那几个事件，字面上都很好理解，这里就不细说了。

充分理解DragDrop事件的顺序与原理后，我们制作物品栏与装备栏之间的拖放就轻松多了，注册相应的事件并对每个物品的类型进行判断是否可以放置等即可（例如药水是装备不了的，而帽子是无法拖到鞋子上的）：

物品栏与装备栏之间除了通过拖放交互，在双击某个装备时，应该实现同样的装/卸功能。因此，这里我为QXIcon添加新的鼠标左键双击事件：public event MouseButtonEventHandler MouseLeftButtonDoubleClick;并通过如下代码实现双击功能：

doubleClickTimer = new DispatcherTimer() { Interval = TimeSpan.FromMilliseconds(250) };

doubleClickTimer.Tick += (s, e) => { doubleClickTimer.Stop(); };

this.MouseLeftButtonDown += (s, e) => {

if (doubleClickTimer.IsEnabled) {

doubleClickTimer.Stop();

if (MouseLeftButtonDoubleClick != null) {

MouseLeftButtonDoubleClick(s, e);

}

} else {

doubleClickTimer.Start();

}

};

嘿嘿，到此就大功告成了。当然，在换装时还需要处理主角属性变化等逻辑，且实际武器衣服的更换同样会发生在主角身上（类似纸娃娃系统），这些内容在不同的游戏中处理方式不同，具体就不列举了。下面是最后的效果图，非常酷吧：

DragDropTarget拖放控件在目前来说限制太多，且支持的类型也很少，还存在BUG。但是它的出现着实让人迷恋，在它还未完善前，大家如果打算使用相应功能，自行定义实现其实也是不错的选择，原理和ChildWindow有异曲同工之处，至少你可以很好的把握住从Drag到Drop整个流程到底谁被抓取，抓取源是什么，放到了哪个目标源，替换的是哪个对象等等；而这些在目前我所用到的DragDropTarget控件中都很难去实现，或者说极不方便；毕竟这个开源工具集还在不断的更新与完善中，Silverlight版本更新过快也对其有很大的影响。总来的说，一切美好东西的形成总是需要时间去磨练，期待更好，是我们每位开发者理想的追求。

本节源码请到目录中下载，在线演示地址：http://silverfuture.cn

评论: 30　查看评论　发表评论

编辑推荐：Google社会化产品Buzz发布会实录

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十四)制作主角属性面板及加点器

深蓝色右手 — Thu, 17 Dec 2009 09:25:00 GMT

阅读: 1853 评论: 11 作者: 深蓝色右手发表于 2009-12-17 17:25 原文链接

游戏中会使用大量的菜单面板，而这些面板往往都带有选项卡。如果用Silverlight工具中的TabControl，则需要通过复杂的xaml重写模板来实现自定义样式，这一点时常让开发者头疼，毕竟界面的东西应该属于美工的范畴，这也是我所发现在目前Silverlight中唯一一处只能通过xaml而无法用代码实现的地方。当然，如果您对此特别感兴趣，同样可以到http://www.codeplex.com/Silverlight中下载最新的开源工具源码，其中的示例项目中有非常详细的模板重写案例。本节，我将通过创建用户控件的方式来创建自定义的TabControl和RepeatButton，实现主角属性面板及其中的属性加点器。

首先，我创建一个QXTabControl用户控件，该控件界面可以很简单，只需要包含一个头和一个身体即可：

<UserControl x:Class="QXGameEngine.Control.QXTabControl"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

Canvas>

UserControl>

Head 用做TabItem的容器，作为StackPanel类型控件，它可以对内部控件进行横排或竖排，从而基本满足大多数情况需要；而Body是ContentPresenter类型，在第四十二节中我曾提及过它，相当于一个万用变身控件，将它作为选项卡的身体部分再合适不过了。当我们点击不同的选项卡时，将不同的面板控件作为值赋予给Body，轻松实现高度自由的选项内容变换。

那么用什么控件来替代TabItem呢？在《剑侠世界》中，选项卡做得别具特色，不光在默认情况下鼠标进入与离开会呈现不同的图片；当被点中后，同样实现另外的两张图片间的切换。这样的效果相当精致，而我们又该如何将它实现呢？此时，不得不想到我们可爱的QXIcon控件，我为它添加了新的类型：IconTypes.HitModes，定义很简单，根据该控件是否被点击从而对4张图片进行相应切换：

case IconTypes.HitModes:

this.MouseEnter += (s, e) => { Container.Background = Hit ? HitNewBodySource : NewSource; };

this.MouseLeave += (s, e) => { Container.Background = Hit ? HitBodySource : _BodySource; };

this.MouseLeftButtonDown += (s, e) => { Hit = Hit ? false : true; };

break;

实现后的效果如下图：

在QXTabControl中包含一个List<QXIcon> tabItemList = new List<QXIcon>();用于管理现有的所有选项卡；我还模仿TabControl在QXTabControl中创建SelectionChanged事件：

public delegate void SelectionChangedEventHandler(object sender, QXIcon tabItem);

public event SelectionChangedEventHandler SelectionChanged;

当某个选项卡被点击时，触发该事件：

……

tabItem.MouseLeftButtonDown += (sender, e) => {

foreach (QXIcon icon in tabItemList) {

if (icon == sender) {

icon.Hit = true;

icon.Container.Background = icon.HitNewBodySource;

} else {

icon.Hit = false;

icon.Container.Background = icon.BodySource;

}

SelectionChanged(this, sender as QXIcon);

e.Handled = true;

};

……

这样我们就可以在游戏窗口中对已创建的选项卡控件注册SelectionChanged事件了：

//主角属性选项卡内容

QXTabControl tc = new QXTabControl() {

TabItemOrientation = Orientation.Horizontal,

TabItemHeight = 28,

BodyLeft = -4,

BodyTop = 27

};

//添加4个选项卡

tc.AddItem(63, 28, 1, "/Image/Icon/39.png", "/Image/Icon/40.png", "/Image/Icon/41.png", "/Image/Icon/42.png", "属性");

tc.AddItem(63, 28, 1, "/Image/Icon/39.png", "/Image/Icon/40.png", "/Image/Icon/41.png", "/Image/Icon/42.png", "声望");

tc.AddItem(63, 28, 1, "/Image/Icon/39.png", "/Image/Icon/40.png", "/Image/Icon/41.png", "/Image/Icon/42.png", "称号");

tc.AddItem(63, 28, 1, "/Image/Icon/39.png", "/Image/Icon/40.png", "/Image/Icon/41.png", "/Image/Icon/42.png", "荣誉");

……

tc.SelectionChanged += (sender, item) => {

QXTabControl tabControl = sender as QXTabControl;

switch (item.Text) {

case "属性":

tabControl.SetBody(leaderAttributePart);

break;

case "声望":

tabControl.SetBody(new Canvas() {

Background = new ImageBrush() { ImageSource = Super.GetImage("/Image/Plate/RoleAttributeBack1.png") },

Width = 350,

Height = 389,

});

break;

case "称号":

tabControl.SetBody(new Canvas() {

Background = new ImageBrush() { ImageSource = Super.GetImage("/Image/Plate/RoleAttributeBack2.png") },

Width = 350,

Height = 389,

});

break;

default:

tabControl.SetBody(null);

break;

};

运行时效果：

很棒吧？嘿嘿。在角色属性面板里除了显示角色的属性值等个人资料外，还有装备管理及属性加点器两个重要部分。关于装备，后面的章节再细说。下面我向大家讲讲如何制作这个属性加点器。

如果不论样式，我们直接可以使用官方提供的NumericUpDown控件即可，该控件非常强大，看了它的源码，其本身为一个组合控件，由4大部分组成：文本(TextBlock)、文本容器(ContentPresenter)、加按钮(RepeatButton)及减按钮(RepeatButton)，且模式很多，你能想到的基本都有。当然同样的，要重写它的样式实在是麻烦之事，其实该控件的重点就就在RepeatButton上，如何实现这个Repeat动作又是关键中的关键。我们不妨从它的原理出发，当鼠标在此按钮上按下时开始计时，如果鼠标一直未放开，则当到达预先设定的Delay时间间隔后即触发后面的连续重复动作，且这些动作以Interval为间隔不断重复下去直到鼠标左键被放开或鼠标离开该控件。此时，我又想到了美丽的QXIcon，再次为它添加一种新模式：IconTypes.RepeatButton：

case IconTypes.RepeatButton:

DispatcherTimer timer = new DispatcherTimer();

timer.Tick += (s, e) => { timer.Interval = TimeSpan.FromMilliseconds(Interval); RepeatClick(this, e); };

this.MouseEnter += (s, e) => { Container.Background = NewSource; };

this.MouseLeave += (s, e) => { Container.Background = _BodySource; timer.Stop(); };

this.MouseLeftButtonDown += (s, e) => { timer.Interval = TimeSpan.FromMilliseconds(Delay); timer.Start(); };

this.MouseLeftButtonUp += (s, e) => { timer.Stop(); e.Handled = true; };

break;

根据前面对RepeatButton工作原理的描述，在这种模式下，我通过创建一个DispatcherTimer，当它Tick时触发public event EventHandler RepeatClick;事件。其中配合控件自身的 MouseLeftButtonDown、MouseLeftButtonUp及MouseLeave来开停Timer及设置它的间隔。

接着，我们就可以将此控件应用到主角属性面板中制作属性加点器了。配合上相应逻辑，当属性点数加完并提交后，主角的新属性值会立即更新反映到界面中。按照第二十八节的属性设置，主角拥有5大基本属性，当修改这些属性时会分别影响相关的值数据。例如，默认情况下主角的智慧为30，魔法攻击基本伤害范围为460-615(不包括魔法自身的攻击力)，此时用激光魔法攻击敌人可造成约600左右伤血：

而当我将智慧加到200并点击确定后，魔法攻击到了3010-4015，此时攻击敌人可以造成3500左右的伤害，很酷吧。嘿嘿：

本教程示例游戏中，我为主角赋予了1000点的潜能点，大家可以自由分配到不同的属性上，例如增加力量属性可以增加物理攻击力，增加体格可以提升血上限及防御等，增加敏捷可以加快移动及施法速度等，增加幸运可以提高暴击率等等，测试起来还是相当有趣的呢~

不过目前的属性加点器还不能通用，毕竟不同的游戏中加点器的实现都有差异。例如有些只有加没有减，每次点击都会直接提交，这种处理最简单；而有的每次加点都会直接反应到界面上，且中途如果不满意取消后又会恢复原样，这种模式做起来相对复杂些，需要一些临时字段来存储数据，只有提交后才更新到服务器。本节功能上我选择了折中的处理方式。

游戏中的面板基本上大同小异，前面章节中的对象监视面板、雷达地图面板、寻路地图面板、主角属性面板的制作基本上含盖了大多数情况，后面的章节我将不再围绕面板这个罗嗦的话题了，打算将重心放到装备、物品、技能存放与拖动的实现方面，敬请关注。

本节源码请到目录中下载，在线演示地址：http://silverfuture.cn

评论: 11　查看评论　发表评论

编辑推荐：Google社会化产品Buzz发布会实录

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十三)制作游戏主菜单面板及鼠标左右键快捷技能栏

深蓝色右手 — Tue, 08 Dec 2009 03:38:00 GMT

阅读: 1939 评论: 18 作者: 深蓝色右手发表于 2009-12-08 11:38 原文链接

每款MMORPG都有一个主菜单，通常置于窗口的底部。游戏中主角大部分的设置操作都从这里开启。如人物属性、物品（包裹）、技能、任务、队伍、地图、家族、门派、商城、系统设置等等；当然，还包括快捷自定义菜单栏，以及类似《暗黑破坏神》中经典式的左右键快捷技能栏。这些内容在不同的游戏中往往会根据自身的特性稍做调整，但整体上大同小异。本节，我将同样以《剑侠世界》的游戏主界面为例，向家讲解如何在Silverlight中制作一个精美的主菜单面板及鼠标左右键快捷技能栏。

首先，我们需要整出一张主界面的框架素材：

在《剑侠世界》中，该面板从左至右分别是键盘快捷菜单，鼠标左右键快捷菜单及游戏主菜单，那么我首先从右边的主菜单说起。大家可以看到该界面中已经被镂空的部分，这些地方是用来填充相应的菜单按钮的。如果单纯的只是用一张图片来填充，游戏的精致程度将大打折扣；大家回想一下网页中的导航菜单栏，当鼠标进入时它会通过Css或Js变换样式，从而达到突出美化的效果。我们游戏中同样可以采用类似的方案，即当鼠标进入主菜单按钮时，菜单按钮的图片由原先的灰暗切换成明亮，例如：

这是通过两张图片相互切换来实现的按钮突出效果；但在实际开发中，特别是Silverlight这样基于素材时时下载的游戏中，我们需要尽量减少素材资源的数量与容量，因此我特别推荐使用透明高亮遮罩来实现按钮的突出，例如：

当鼠标进入按钮时，我们可以添加一个图标蒙板并使之重叠于按钮图标图片上方，从而同样可以达到高亮突出按钮的效果；不仅如此，通常一款游戏中所有的物品图标和技能图标尺寸是统一的，通过此方式，我们只需一张图标蒙板就能达到所有图标的高亮显示，既大幅节约了素材资源空间，同时也达到了美化效果，一举两得。~嘿嘿

需求都清晰了，该用什么控件来实现呢？当然是QXIcon，不过这次我们得对它进行一些改造，使之目前至少能兼容3种情况：

public enum IconTypes {

///

/// 无

///

None = 0,

///

/// 变换突出

///

Transform = 1,

///

/// 高亮突出

///

Highlights = 2,

}

QXIcon的主要构造如下：

///

/// 图标控件

///

public QXIcon(IconTypes iconTypes) {

InitializeComponent();

switch (iconTypes) {

case IconTypes.Transform:

this.MouseEnter += delegate { Container.Background = NewSource; };

this.MouseLeave += delegate { Container.Background = _BodySource; };

break;

case IconTypes.Highlights:

Rectangle mask = new Rectangle() { Visibility = Visibility.Collapsed };

Container.Children.Add(mask);

this.MouseEnter += delegate {

mask.Width = this.Width;

mask.Height = this.Height;

mask.Fill = NewSource;

mask.Visibility = Visibility.Visible;

};

this.MouseLeave += delegate { mask.Visibility = Visibility.Collapsed; };

break;

}

Brush _BodySource;

///

/// 获取或设置图标笔刷

///

public Brush BodySource {

get { return _BodySource; }

set { Container.Background = _BodySource = value; }

}

///

/// 获取或设置变换后(或蒙板)笔刷

///

public Brush NewSource { get; set; }

默认情况下，即参数为IconTypes.None时，该图标控件仅仅是一个带Toolkit的普通图标；当参数为IconTypes.Transform时，图标控件中的图片会根据鼠标进入与离开分别在NewSource和_BodySource之间切换，即前文中提到的第一种情况；而当参数为IconTypes.Highlights时，效果即上叙第二种情况，通过图标蒙板来实现图标的高亮突出。

同时，我也对该QXIcon的Toolkit进行了改造，使之更加新颖别致：

<ToolTipService.ToolTip>

<ToolTip.Template>

ControlTemplate>

ToolTip.Template>

<ToolTip.Content>

Canvas>

ToolTip.Content>

ToolTip>

ToolTipService.ToolTip>

当提示文字发生变化时，它的背景将根据文字的长度与宽度自适应尺寸，且此背景为一个透明度40%的黑色圆角矩形，很漂亮的哦~：

///

/// 获取或设置图标悬停提示

///

public string Tip {

get { return Details.Text; }

set {

Details.Text = value;

DialogBack.Width = Details.ActualWidth + 10;

DialogBack.Height = Details.ActualHeight + 10;

}

最终效果如下：

接下来我们还是利用QXIcon来实现鼠标左右键快捷技能栏，这里我定义左键只负责主角的跑动、对象选中及主角的物理攻击，前面章节中已经全部实现了。而右键则负责施放魔法，此方案应该算是Silverlight的极限了。需求就是当我们在右键快捷按钮图标上点击时，会像《暗黑破坏神》一样，弹出主角已学会（可用）的所有法术和技能。在Silverlight中，我们可以用微软开源工具包中WrapPanel轻松将之实现。WrapPanel是一个可以实现内部控件排列超出限定宽度后自动换行的容器，继承自Panel，和Canvas等容器控件属同一等级，大家可以到http://www.codeplex.com/Silverlight下载最新的版本。本教程示例游戏中，我直接引用它的dll，除它外，该dll还包含其他的一些控件，一方面由于时间有限，我暂时不去单独分离了；另一方面，后期制作中很有可能还会用到其中的某些控件，因此先让它这样吧~，还挺大的呢(112K)。

如果是网络游戏，那么在主角初始化后，我们将从服务器接收到主角的数据，当然包括主角已经掌握的魔法技能，这里我用一个Magic类来表示：

public class Magic {

///

/// 代号

///

public int Code { get; set; }

///

/// 等级

///

public int Level { get; set; }

///

/// 名称

///

public string Name { get; set; }

}

暂时先就这几个参数吧，接下来定义一个主角可用魔法列表List<Magic> availableMagic = new List<Magic>();这里我假设主角已经掌握了代号为0-5的6种魔法，且每种都到了9级，那么我将这6种魔法按如下方式加入到availableMagic表中：

//初始化主角可用的所有魔法

availableMagic.Clear();

for (int i = 0; i < 6; i++) {

availableMagic.Add(new Magic() {

Code = i,

Level = 9,

Name = string.Format("名称:{0}\r\n描述:{1}",

Super.GetXElement(Data.Settings["Arguments"], "Magic",

"Code", i.ToString()).Attribute("Name").Value,

Super.GetXElement(Data.Settings["Arguments"], "Magic", "Code",i.ToString()).Attribute("Description").Value) });

}

当鼠标在右键快捷按钮图标上点击时，我将availableMagic中的所有对象以图标的形式添加进名为rightButtonMagicList的WrapPanel中，由于此Demo中图标的宽高均为27像素，因此我约束rightButtonMagicList宽为270，即一行如果超过10个图标则自动换行。最后为它赋予相应的事件，当点中某个魔法技能，主角当前的右键默认魔法更改为此魔法，且右键快捷按钮图标的魔法也换成它：

……

//右键魔法选择

rightButtonMagicIcon.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e) {

if (rightButtonMagicList == null) {

rightButtonMagicList = new WrapPanel() {

Orientation = Orientation.Horizontal,

Width = 270, //一行放10个图标,每个27宽

};

foreach (Magic magic in availableMagic) {

QXIcon magicIcon = new QXIcon(IconTypes.Highlights) {

BodySource = new ImageBrush() { ImageSource = Super.GetImage(string.Format("/Image/Magic/{0}/0.png", magic.Code)) },

NewSource = new ImageBrush() { ImageSource = Super.GetImage("/Image/Icon/34.png") },

Width = 27,

Height = 27,

Tip = magic.Name,

Tag = magic,

};

magicIcon.MouseLeftButtonDown += delegate(object ss, MouseButtonEventArgs ee) {

QXIcon icon = ss as QXIcon;

Magic m = icon.Tag as Magic;

rightButtonMagicIcon.BodySource = icon.BodySource;

rightButtonMagicIcon.Tip = m.Name;

Leader.CurrentMagic.Code = m.Code;

Leader.CurrentMagic.Level = m.Level;

rightButtonMagicList.Visibility = Visibility.Collapsed;

ee.Handled = true;

};

rightButtonMagicList.Children.Add(magicIcon);

}

BottomMenu.Children.Add(rightButtonMagicList);

Canvas.SetLeft(rightButtonMagicList, 437); Canvas.SetTop(rightButtonMagicList, -Math.Ceiling(rightButtonMagicList.Children.Count / (rightButtonMagicList.Width / 27)) * 27);

} else {

if (rightButtonMagicList.Visibility == Visibility.Collapsed) {

rightButtonMagicList.Visibility = Visibility.Visible;

Canvas.SetTop(rightButtonMagicList, -rightButtonMagicList.ActualHeight);

} else {

rightButtonMagicList.Visibility = Visibility.Collapsed;

}

e.Handled = true;

……

具体逻辑大家仔细看就明白了~还算比较简单的。实际效果如下：

另外的，大家不妨自行修改一下循环代码，多加几个魔法上去体验一下WrapPanel的强大：

游戏主界面菜单已初具雏形，接下来的任务就是去完善它的各面板及相应功能~敬请关注。

源码请到目录中下载，在线演示地址：http://silverfuture.cn

评论: 18　查看评论　发表评论

编辑推荐：Google社会化产品Buzz发布会实录

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库