C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十一) 超酷万变的矢量魔法

还记得当年的经典网游奇迹（MU）吗？辉煌就如同其名字一般深刻烙印在我的脑海。与朋友们一起通宵奋战的日子已成过去，残留世上那一张张经典不朽的截图让我时刻感受回味。它的成功不仅仅因为其拥有一个极棒的世界观，更深层的却是那些超酷且绚丽的魔法效果，曾经打动着无数年轻的心。

本节我将以奇迹中So cool的“激光”魔法为蓝本，向大家展示如何制作矢量魔法：

不知道这张图是否能打捞起大家沉淀的回忆，此乃奇迹当年与地狱火并列的两大魔法之一：激光，画面漂亮且更重要的是它具有直线穿透群攻效果。要模仿它我们可以先通过PS制作一张模拟草图，从中了解该魔法画面的颜色及渐变规律，这将为我们后面在WPF/Silverlight中构造它提供参考：

通过PS中的渐变工具再配合外发光效果，我们可以轻松的制作出上面的草图，接下来回想一下前面所讲过的内容不难分析出在WPF中我们可以通过绘制一个圆角矩形并配上彩虹画刷，最后为此矩形添加位图外发光特效即可实现以上效果。有了原理，用xaml语言来描述它就再简单不过了。我们首先在项目中添加一个名叫QXLaser的用户控件，然后设置其xaml界面容器代码如下：

……

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

<Rectangle.BitmapEffect>

</Rectangle.BitmapEffect>

</Rectangle>

</Canvas>

……

其中RadiusX与RadiusY分别定义激光魔法的圆角，并通过BitmapEffect中的OuterGlowBitmapEffect为激光魔法添加外发光效果（此特效很不错，可是会占用大量的界面线程资源，本文只是为了达到目的而借用之，画面会卡就是因为它的存在。我曾在第二十五节中有提到过相关知识；值得庆幸的是，在Silverlight中此类特效效果及性能均表现优良，有兴趣的朋友不妨在Silverlight中测试体验一下），此时大家是否有注意到，我还为该激光魔法添加了一个RotateTransform，因为它与上一节中的群攻魔法有一定的区别，它是具有方向的，因此我们需要通过旋转变换来实现相关需求。这里我为其旋转对象取了个名字Rotate以方便后台代码能对其进行操作。

界面绘制好后，我们还需要为控件添加一些属性，这些属性与上一节中的魔法控件的属性基本相同；需要特别指出的是Fill与OuterFill这两个属性，它们分别用来设置激光魔法内部的填充及外发光颜色。

接下来还需要在Config.xml文件中为激光魔法设定参数：

……

</Magic>

这里我新加了一个参数叫Type，用它来区分不同类型的魔法，因为不同类型的魔法它的范围、方向、伤害处理等均存在非常大的差异，我们必须分类进行处理。

最后，我们通过仿造类似上一节的魔法处理代码，即可将激光魔法运行起来。但是又出现了新的问题：由于激光属于矩形直线穿梭类型魔法，在伤害计算上会有些特殊，该如何进行相关的设定呢？大家不妨先看下图：

当我们点击B点时，激光魔法将从主角的手位置点A发出，接着我们通过计算获得B与A之间的角度，并对激光魔法按此角度进行旋转，最后得到触发伤害的范围即为上图中粉色点阵所包围的区域；在已知点A与点B的坐标，以及激光魔法的长度，我们可以很简单的计算出激光魔法伤害范围其不规则矩形的4个顶点坐标，从而我们可以通过System.Drawing命名空间中的相应方法来循环判断地图中的精灵是否在该不规则矩形内来对其进行伤害处理：

/// <summary>

/// 判断点是否在多边形内

/// </summary>

/// <param name="range">多边形顶点范围</param>

/// <param name="target">要判断的点</param>

public static bool PointInPolygon(System.Drawing.Point[] range, System.Drawing.Point target) {

System.Drawing.Drawing2D.GraphicsPath myGraphicsPath = new System.Drawing.Drawing2D.GraphicsPath();

System.Drawing.Region myRegion = new System.Drawing.Region();

myGraphicsPath.Reset();

myGraphicsPath.AddPolygon(range);

myRegion.MakeEmpty();

myRegion.Union(myGraphicsPath);

return myRegion.IsVisible(target);

}

与上一节中魔法的伤害范围以鼠标点击的点为圆心的圆类似，此方法可以拓展到任意个点的多边形，无论是闭合的或是不闭合的。毫不夸张的说，所有范围攻击类型魔法均可以采用此方法来判断，本节的精华哦！ ^ ^

至此我们完成了激光魔法的整个制作及使用流程。回过头来，大家有没有想过为什么我们要使用矢量图形魔法？因为矢量魔法控件可以根据参数的不同自由的更改例如颜色，尺寸，旋转等等，就好比本文的激光魔法，我们只需修改Fill和OuterFill这两个属性即可让整个激光改头换面：

//深蓝激光

laser.Fill = Super.CreateRainbowBrush(231, 255, 255, 0, 255, 255, 255, 0.5, 231, 255, 255, 1);

laser.OuterFill = Colors.MidnightBlue;

又如：

//红色激光

laser.Fill = Super.CreateRainbowBrush(255, 225, 225, 0, 255, 255, 255, 0.5, 255, 225, 225, 1);

laser.OuterFill = Colors.Pink;

是不是很神奇！更甚者，我们还可以根据需要，让激光从产生后逐渐变长直到最后消失：

矢量魔法的灵活万变告诉我们，只要您拥有一流的矢量绘图能力，均可以制作出强大且性能优越的矢量控件，这是使用WPF/Silverlight开发高性能高质量游戏所必须的，同时也是位图控件所不能比拟与替代的。

本节的源码中我还添加了几个新的魔法，大家在运行的时候是否发现它们的名称后面均带有一个属性名，如“激光[雷]”。其中“雷”代表该魔法具有雷属性；在以往的游戏中，雷属性意味着麻痹，这就是我下一节将为大家讲解的如何在游戏中实现魔法的不同属性效果，敬请关注。

作者：深蓝色右手

出处：http://blog.csdn.net/alamiye010/

教程目录及源码下载：点击进入

本文版权归作者和CSDN共有，欢迎转载。但未经作者同意必须保留此段声明，且在文章页面显著位置给出原文连接，否则保留追究法律责任的权利。

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十一) 超酷万变的矢量魔法相关推荐

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)：(三十一) 超酷万变的矢量魔法

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十一) 超酷万变的矢量魔法相关推荐

最新文章

热门文章