C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十三) 锦上添花之魔法特效装饰
上一节，我们实现了6大系魔法的附加属性，并赋予了不同的颜色加以区别；但是在实际的游戏开发中，特别是Q版或追求艺术表现的网络游戏中，为了能够更加突显魔法的绚丽与雍华，设计师们会为魔法增加大量的画面体现：例如被冻结的精灵脚底长出冰刺（或被装进一块冰晶中）；灼伤的精灵会周身燃烧；中毒的精灵会不停的冒着毒泡泡；麻痹中的精灵浑身会不停的穿梭着电流等等，这些修饰使得魔法的魅力提升到极至，同时也是游戏幽雅细节的终极体现。
本节我将以冻结魔法为例，向大家讲解如何为魔法增加漂亮的特效装饰。
经过前面的学习，大家是否已总结出一个规律：需要增加额外东西时，首先想到的即是用户控件；那么我们首先创建一个名为QXDecoration的用户控件。接下来就是准备素材了。这里我制作了3张用于装饰的冰刺：
分别命名为4-0，4-1，4-2，其命名规则对应上一节中的魔法类型设定，即所有冰冻类魔法均可以用之来装饰。为什么要使用3张呢？其实一张就已足够了，只是效果上每个精灵被冻结后将一模一样；而通过随机从这3张中抽取1张用于装饰冻结效果将大幅度增加画面的生动性，在大量精灵同时被冻结的情况下产生一种宏大的气势感；另外，如果您能通过Blend画出一个类似的冰刺，那么基于矢量的装饰物将可以任意的拉伸及变化，表现出来的效果会更加逼真与贴切。
都准备好后，代码实现起来是很简单的，首先将配置写进Config.xml：
<Decoration Code="4" Num="3" Duration="2" CenterX="40" CenterY="60"></Decoration>
接下来只需在魔法触发伤害帧时将对应的魔法效果装饰附加到被攻击对象的脚底即可：
……
//附加特效装饰
if (magic.DecorationCode != -1 && canvas.FindName(string.Format("Decoration{0}", enemy.Name)) == null) {
LoadXElement(string.Format("Decoration{0}", magic.DecorationCode.ToString()), GetTreeNode(SystemConfig, "Decoration", "Code", magic.DecorationCode.ToString()));
XElement DecorationData = GetXElement(string.Format("Decoration{0}", magic.DecorationCode.ToString()));
Random rm = new Random();
QXDecoration decoration = new QXDecoration() {
BodySource = getImage(string.Format("Decoration/{0}-{1}.png", magic.DecorationCode, rm.Next((int)DecorationData.Attribute("Num") - 1))),
CenterX = (double)DecorationData.Attribute("CenterX"),
CenterY = (double)DecorationData.Attribute("CenterY"),
X = enemy.X,
Y = enemy.Y,
Duration = (double)DecorationData.Attribute("Duration"),
};
canvas.RegisterName(string.Format("Decoration{0}", enemy.Name), decoration);
canvas.Children.Add(decoration);
}
……
上一节中的冰冻只是减缓对象精灵的各种速度，那么本节为了演示，我将之改为了冻结效果，类似于麻痹。因此该冻结装饰的消失分两种情况：一是在冻结时间归0时被移除；另一种为被冻结精灵死亡后移除，相关逻辑我写在源码中，这里就不罗列了。
来一张效果图吧：
相对于上一节，气势增加了不少呢，对吗？
额外的，通常的网络游戏中，我们都可以通过角色头像面板中的小图标来查看当前监视的精灵对象被附加的DeBuff以及相关信息如持续时间、效果等等，而这个功能在我们的示例游戏中该如何实现呢？
这里我们同样的先添加一个名为QXIcon的图标控件，该控件的界面xaml定义如下：
……
<Canvas x:Name="Icon">
<Image x:Name="Body">
<Image.ToolTip>
<TextBlock x:Name="Details"/>
</Image.ToolTip>
</Image>
</Canvas>
……
该控件的主体是一张图片，我为之增加了一个ToolTip用于鼠标悬停时显示该图片的描述。
接下来再为通用型角色头像面板增加一个水平排列的StackPanel控件作为这些DeBuff图标的容器：
<StackPanel x:Name="ExtraPanel" Orientation="Horizontal" />
为什么选择StackPanel而不是其他的布局控件呢？一方面为了与Silverlight更好的兼容，另一方面只要设置好它的宽度，动态的子控件添加或移除队列起来均非常的完美，我们需要做的仅仅是Add和Remove操作罢了。
最后，在刷新监视对象角色头像面板方法中添加如下逻辑进行DeBuff图标的添加与移除判断：
……
//更新DeBuff附加属性图标及描述
for (int i = 0; i < obj.ExtraTime.Count(); i++) {
QXIcon icon = ObjectRoleFace.ExtraPanel.FindName(string.Format("Extra{0}", i)) as QXIcon;
if (obj.ExtraTime[i] > 0) {
XElement ExtraItem = Super.GetTreeNode(Super.SystemXElement["ExtraItems"], "Item", "Value", i.ToString());
if (icon == null) {
icon = new QXIcon() {
Width = 16,
Height = 16,
BodySource = Super.getImage(ExtraItem.Attribute("Src").Value)
};
ObjectRoleFace.ExtraPanel.RegisterName(string.Format("Extra{0}", i), icon);
ObjectRoleFace.ExtraPanel.Children.Add(icon);
}
icon.Tip = string.Format("{0}持续:{1}秒", ExtraItem.Attribute("Name").Value, obj.ExtraTime[i]);
} else {
if (icon != null) {
ObjectRoleFace.ExtraPanel.UnregisterName(string.Format("Extra{0}", i));
ObjectRoleFace.ExtraPanel.Children.Remove(icon);
icon = null;
}
}
}
……
运行效果图：
很酷吧~WPF中的ToolTip非常强大，模板化的它无论内容多少或形式如何均能自如显示。不同尺寸的QXIcon不仅仅可以用来显示DeBuff图标，还可以拓展到技能图标、快捷图标等等；另外，这些DeBuff图标在StackPanel的管理下显得相当智能，前一个图标消失后，后一个图标将自动前置，再新加入的DeBuff图标又会跟进追尾显示，而这些的一切乱序队列均是伟大的StackPanel在默默无闻的处理，我们无须插手任何一句多余的代码：
角色面板到此为止总算完善了。下一节我将为大家讲解如何为本教程示例游戏制作地图编辑器，初步打算首先实现障碍物设置与地图切片功能，现做现卖，时间会久一点，要关注哦。
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十三) 锦上添花之魔法特效装饰相关推荐
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：目录
本系列教程的示例代码下载(感谢 银光中国 提供资源分流): 第一部分源码:WPFGameTutorial_PartI(1-20节) 第二部分源码:WPFGameTutorial_PartII(21-2 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(二)让物体动起来②
第二种方法,CompositionTarget动画,官方描述为:CompositionTarget对象可以根据每个帧回调来创建自定义动画.其实直接点,CompositionTarget创建的动画是基于 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(一)让物体动起来①
序:自从QXGame(WPF GAME ENGINE)游戏引擎公布以来,受到很多朋友的热切关注,于是乎有了写教程的想法.那么从今天开始,我将带领大家一步一步的学会如何使用纯C#开发WPF/Silver ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(十八) 完美精灵之八面玲珑(WPF Only)②...
紧接着上一节,首先得解释一下为什么需要将这272张图片合成为一张大图.因为如果游戏中还有装备.坐骑等其他设置,那么我们就需要对图片源进行时时的合成:同时对272张甚至更多的图片进行合成效率高还是对2张 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(二十五)完美捕捉精灵之神器 -- HitTest...
怪物们都出现了,如何选中自己心仪的怪是主角目前首要做的事. 为了进行鼠标状态区别,我首先对鼠标变化规则进行约束:当鼠标在屏幕上空旷地图区域移动时,鼠标光标形态表现为默认光标 (0号光标图片),当鼠标经 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四)实现2D人物动画①
通过前面的学习,我们掌握了如何动态创建物体移动动画,那么接下来我将介绍WPF中如何将物体换成2D游戏角色,并通过使用前面所讲的DispatcherTimer计时器来实现2D人物角色的各种动作动画. 动 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十九) 落雷！治疗！陷阱！连锁闪电！多段群伤！魔法之终极五重奏②...
本节,我将完成本教程示例游戏的最终两个魔法:传说中的连锁闪电与暴风雪.如此经典与华丽的家伙无论在哪款好游戏中都少不了它们的踪影. 首先是连锁闪电,在<英雄无敌>中体现得尤为出色,击中一个怪 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(二十六)通用型角色头像面板...
目前游戏的开发进度已经基本实现了精灵对象之间的普通交互,接下来我们需要朝着实现战斗系统的目标前行.而实现它的前提是必须完善精灵控件的基本属性,如添加生命值.魔法值.活力值.经验值等基本属性并通过窗体界 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十七)远距离单体攻击与单体魔法...
到目前为止,主角能使用的魔法均为群攻型魔法,群攻魔法的原理相对简单,常见如圆形范围,矩形范围,扇形范围等等,当魔法释放后可以按照本教程的做法对所有坐标处于相应范围内的怪物进行伤害处理,这是直观的处理方 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(十)斜度α地图的构造及算法...
在当前的网络游戏中,地图基本都是采取一定斜度的拼装地图,这其中存在两种斜度地图的构造方式: 第一种我称之为伪斜度地图:该类型地图表现层图片为斜度的,但地图基底障碍物等的构造则实为正方形,如下图: 其实 ...
最新文章
- WCF分布式开发步步为赢(12):WCF事务机制（Transaction）和分布式事务编程
- mybatis的注解开发之三种动态sql
- java版扫雷下载_Java 实现扫雷游戏（MineSweeper）
- vlan后 出现 outlook 正在试图从服务器检索数据
- Ubuntu 配置防火墙端口
- P3978 [TJOI2015]概率论
- java棋盘覆盖分治法_【单选题】实现棋盘覆盖算法利用的算法是( ) A. 分治法 B. 动态规划法 C. 贪心法 D. 回溯法...
- 最近两周的前后端交互
- 9.打开ZF的错误提示
- PowerDesigner(八)-面向对象模型(用例图，序列图，类图，生成Java源代码及Java源代码生成类图)（转）...
- 计算机应用与医学信息基础知识,第一篇医学信息基础知识.PDF
- 解决VS2015无法打开WinSock2.h，无法找到ws2_32.lib
- 浅谈面试经验（面试官角度）
- win怎么查看显示器大小，显示器是多少寸，查看显示器尺寸
- 算法笔记【1】 Kruskal - 克鲁斯卡尔算法
- python microbit typeerror_Microbit python无效语法
- 双目是个词吗_什么双目的四字词语
- 机房建设--服务器机柜尺寸参考
- html5 隐藏摄像头,js控制摄像头拍照 请问html5怎么关闭摄像头？
- ING创建有利于华尔街的区块链解决方案