《C_开发WPFSilverlight动画及游戏系列教程3》由会员分享，可在线阅读，更多相关《C_开发WPFSilverlight动画及游戏系列教程3（86页珍藏版）》请在金锄头文库上搜索。
1、C#开发 WPF/Silverlight动画及游戏系列教程(Game Course)：(二十六)时间:2010-02-23 博客园 深蓝色右手 C#开发 WPF/Silverlight动画及游戏系列教程(Game Course)：(二十六)通用型角色头像面板目前游戏的开发进度已经基本实现了精灵对象之间的普通交互，接下来我们需要朝着实现战斗系统的目标前行。而实现它的前提是必须完善精灵控件的基本属性，如添加生命值、魔法值、活力值、经验值等基本属性并通过窗体界面进行完美体现，本节我将为大家讲解上述内容的具体实现。既然是为精灵添加属性，大家首先想到的当然是为精灵控件加入属性值索引器：/ / 生命值,0
2、-当前值,1-当前最大值/ public double VLife get ; set ; / / 魔法值,0-当前值,1-当前最大值/ public double VMagic get ; set ; / / 活力值,0-当前值,1-当前最大值/ public double VEnergy get ; set ; / / 等级/ public double VLevel get ; set ; / / 经验值/ public double VExperience get ; set ; / / 头像代号/ public int FaceSign get ; set ; / / PK模式/ p
3、ublic PKMode PKmode get ; set ; C#开发 WPF/Silverlight动画及游戏系列教程(Game Course)：(二十六)(2)时间:2010-02-23 博客园 深蓝色右手 以上这些我称之为精灵的基本值属性，也是界面上最常需要表现出来的属性（精灵控件的属性还有很多，在后面的章节中我会根据需要进行逐步的补充）。注释已经写得很清楚了，至于 PKMode为精灵 PK状态的枚举，目前暂时定义如下：public enum PKModes / / 和平模式/ Peace = 0,/ / 全体模式/ Whole = 1,/ / 善恶模式/ GoodAndEvil =
4、2,/ / 门派模式/ Faction = 3,/ / 家族模式/ Clan = 4,在主角与精灵对象进行交互时我们需要通过它们之间的 PK状态分析出是否与对象精灵为敌对状态，如果是则鼠标样式变为攻击光标且此时可以向敌对精灵发起攻击，否则反之。基本数值定义完后，剩下的就是在游戏窗体界面中将之体现出来。通常的游戏中，精灵头顶上除了身份描述外，还会存在一个血条，实现该血条其实是很简单的，我们只需为精灵控件的 xaml增加如下代码：该血条实际为一个类型为 Border的黑色边框包裹着一个 Rectangle矩形控件组成，位置数据微调后运行效果如下图：很漂亮对吧，呵呵，至此我们的精灵控件界面元素算补齐
5、完美了。接下来是在游戏窗体中进行相关的显示设置；传统的 MMORPG游戏界面中角色头像面板分为三种，布局基本如下图：C#开发 WPF/Silverlight动画及游戏系列教程(Game Course)：(二十六)(3)时间:2010-02-23 博客园 深蓝色右手 左上角的面板我称之为主角头像面板，该面板通常包含主角的头像、名字、等级、PK 状态、生命值、魔法值、活力值等；在游戏窗体正中顶部的面板我称之为监视对象头像面板，当我们鼠标点击其它精灵如其他玩家、怪物、NPC 等时该面板才会显示出来，此面板一般相对于主角头像面板来说构造会简单许多，只有头像、等级、PK 状态、名字、生命值等，其中头像及
6、值条尺寸均相对于主角头像面板来说偏小；在游戏窗体最左边的一竖列多个面板为队伍头像面板，该类型面板内容介于主角头像面板与监视对象头像面板之间，并且它的内容尺寸是最小的。通过上述的分析大家不难看出，其实 3个面板以主角头像面板最为齐全；队伍头像面板相当于主角头像面板的缩小版且布局稍微变动些；监视对象头像面板内容最少，相当于主角头像面板的反向且稍微缩小。基于这些大致概念，我们只需要制作一个以主角头像面板为蓝本的面板控件即可以通过不同的参数配置出另外的两种头像面板。这也是控件封装给我们带来的另一大好处：通用型角色头像面板。OK，让我们从原理转向实际制作阶段，这里我仅以制作主角头像面板与监视对象头像面板
7、为例进行讲解，组队头像面板因为暂时用不上，实现起来其实是一样的。首先任务当然是将面板的图片制作出来，同样的，它们需要背景透明：这两图为我自己手动扣出来的，所以稍微有些锯齿请大家见谅，实际开发中请以美工制作为主，那个才叫个性与优美。接下来是完成 PK图标及人物头像图片。PK图标我暂时只放置 2个，它们的命名是与 PKMode枚举的数值一一对应的。而人物头像图片在主角及组队头像面板中是朝右的，但在监视对象面板中是朝左的（头像的缩小很容易实现，而水平反向在 Silverlight我暂时没有找到 1图的解决方案），因此每个角色的头像都由 2张图片组成：x_0 代表右朝向头像，x_1 代表左朝向头像（其
8、中的 x为头像代号 FaceSign）：然后我们按照第五节的方法将这些图片分类添加进 Interface中的相应的文件夹中，到此素材准备阶段算完成了。C#开发 WPF/Silverlight动画及游戏系列教程(Game Course)：(二十六)(4)时间:2010-02-23 博客园 深蓝色右手 下面我们创建一个名为 QXRoleFace的通用型面板控件，创建方法具体见第十四节。有了前面那么多章节关于控件的讲解，我们可以很轻松的将头像、PK 图标、以及其他基本参数值镶嵌进 QXRoleFace控件中（如下图）：添加完后，剩下的是本节的一个难点：如何根据面板中值条（生命值、魔法值、活力值）槽尺
9、寸创建相应的方块值条进行填充？我们首先分析，这 3条值应该用什么控件来实现？大家结合本文的第一张图不难看出，它们均为渐变的圆角矩形（为了简单起见，我对其左右两边进行了对称处理而非三角形，至于如何实现不规则矩形，大家可以参考图片蒙版，后面的章节我也会讲到）；在WPF/Silverlight中，创建渐变必须用到彩虹笔刷，我根据这 3值的传统颜色，如下定义这 3把彩虹笔刷：LinearGradientBrush rainbowBrush = new LinearGradientBrush3;/ / 初始化彩虹笔刷/ private void InitializeRainbowBrush() /血值笔
10、刷CreateRainbowBrush(ref rainbowBrush0, 201, 238, 206, 60, 224, 70, 106, 234, 130);/魔值笔刷CreateRainbowBrush(ref rainbowBrush1, 192, 195, 238, 86, 104, 226, 100, 104, 233);/活值笔刷CreateRainbowBrush(ref rainbowBrush2, 254, 209, 172, 255, 142, 40, 255, 177, 74);/ / 创建彩虹笔刷/ private void CreateRainbowBrush(r
11、ef LinearGradientBrush brush , byte r0, byte g0, byte b0, byte r1,byte g1,byte b1, byte r2, byte g2, byte b2) brush = new LinearGradientBrush();brush.StartPoint = new Point(0, 0);brush.EndPoint = new Point(0, 1);brush.GradientStops.Add(new GradientStop(Color.FromRgb(r0, g0, b0), 0);brush.GradientSto
12、ps.Add(new GradientStop(Color.FromRgb(r1, g1, b1), 0.70);brush.GradientStops.Add(new GradientStop(Color.FromRgb(r2, g2, b2), 1);brush.Freeze();然后通过 RadiusX及 RadiusY设置矩形值条的圆角边，并添加对应的数字。最后将这 3条矩形相应的嵌入到主角头像面板中，这样就完成了主角头像面板的创建：C#开发 WPF/Silverlight动画及游戏系列教程(Game Course)：(二十六)(5)时间:2010-02-23 博客园 深蓝色右手 有了
13、主角头像面板，我们还需要在此基础上改造出监视对象头像面板；前文中我曾有提到，既然是通用型控件，我们只需进行参数的修改即可实现不同的界面表现形式。因此首先需要定义一个名为 RoleFaceTypes的枚举进行区分：/ 角色头像值面板类型public enum RoleFaceTypes / 主角头像面板Leader = 0,/ 监视对象头像面板Object = 1,/ 队伍头像面板Team = 2,如上，我们只需在游戏窗体中以 RoleFaceTypes为参数创建 QXRoleFace控件，即可以创建出对应的头像面板，例如我们通过如下方式创建监视对象头像面板：QXRoleFace ObjectR
14、oleFace = new QXRoleFace(RoleFaceTypes.Object);当然，主角与监视对象头像面板之间是存在方向、尺寸上的差异的，且后者少了 2个值条；因此，在构建 QXRoleFace控件的时候，我们根据 RoleFaceTypes的类型进行相应的子控件位置布局及隐藏，具体调整在源码中，这里就不一一列举了。终于完成了，让我们看看效果：上图右边即为主角监视自身的头像面板，呵呵，稍微粗糙了些呢，我相信大家能做得更好！最后就是关于监视对象面板的显示场合及显示方式；在本节例子中，我暂时使用如下模式：当鼠标悬停于精灵对象上时即显示其头像面板，离开时该面板隐藏。具体的实现代码只需
15、在上一节命中测试方法中的鼠标进入精灵有效区域及离开时进行相关简单处理即可。其他的界面微调代码虽然很繁多，但是只要大家是跟着本系列教程一节节学下来的，肯定打下了 WPF/Silverlight方面很扎实的基础，这些代码对于大家来说再简单不过了，同样不再一一列举。最后国际惯例，让我们一同欣赏下劳动成果吧：界面的内容讲解似乎有种只便意会，不易言传的感觉；不同类型的游戏拥有不同的界面风格，大家在开发的时候只需统一美工的绘画风格，制作出来的游戏界面肯定都是 much much个顶个的漂亮；我希望同过本节的简单讲解，能给予大家一些界面制作方面的启发与思维，让我们携手为提升未来的游戏视觉品质共同努力吧！下一节仿佛将进入战斗阶段了，是不是太快了些。您准备好了吗？C#开发 WPF/Silverlight动画及游戏系列教程(Game Course)：(二十七)时间:2010-02-23 博客园 深蓝色右手 C#开发 WPF/Silverlight动画及游戏系列教程(Game Course)：(二十七)战斗前夜之构建动态障碍物系统在标准的 MMORPG中，每个精灵对象都占据着一块区域(脚底的一块小面积)，该区域同样是障碍物系统中的一部分，并且它是动态的，随着精灵的移动而时时变化着。实现游戏中动态的障碍物构建使障碍物系统趋向完美是全面进军战斗系统的必要前奏，大家不想看着主角和怪物叠在一起打
