Silverlight 游戏开发小技巧:技能冷却效果1(Cooldown)

Silverlight 游戏开发小技巧:技能冷却效果1(Cooldown),第1张

概述到目前为止,大家都非常推崇魔兽的技能冷却效果,就是这样的 ,我记得群里还对这个效果展开过探讨,其实实现起来并不难,关键是思路是否正确,这部分我得谢谢猪笨无罪,是他先想出的解决方案,他不愿意写博客,也就只好我来代劳了,哈哈,后面提供源代码和预览,不要错过。 那么我们开始制作,第一步建立工程,如果你是在自己的项目中应用,直接进入第二步创建图标,   把一张图标文件放进来,这样看起来更加直观,此时将Sk

到目前为止,大家都非常推崇魔兽的技能冷却效果,就是这样的

,我记得群里还对这个效果展开过探讨,其实实现起来并不难,关键是思路是否正确,这部分我得谢谢猪笨无罪,是他先想出的解决方案,他不愿意写博客,也就只好我来代劳了,哈哈,后面提供源代码和预览,不要错过。

那么我们开始制作,第一步建立工程,如果你是在自己的项目中应用,直接进入第二步创建图标,

 

把一张图标文件放进来,这样看起来更加直观,此时将Skillicon控件的宽和高都设定成64x64,这里非常重要,我设定为64宽高是为了方便展示,你需要依据自己的ICON尺寸做修改。

 

然后中间切分LayoutRoot,

 

添加两个GrID到控件LayoutRoot中,各自为一半,效果如下,为了方便演示,我填充了颜色做区分

 

设置两个Rectangle分别对齐到两个GrID上,大小位置都是一样,然后分别使用Make ClipPing Path对自己对应的Gird裁剪。

 

此时你会发现,这时所有内部的对象都是被裁剪的效果,然后我们可以利用这个特点制作冷却的动画。

 

现在可以向两个GrID添加一个Rectangle,将Rectangle的填充颜色设置成为黑色,不透明度为30%,并且将LayoutRoot的背景设置为图像画笔,将图标图像加入。

 

其实这里有个细节,Rectangle的填充色其实可以直接带上透明效果,只是将ARGB的A修改即可,按照我们的实际测试,不透明度尽量减少,而使用颜色的A值性能消耗更少。

 

 

上面的图中就是一个GrID当中加了Rectangle,请注意Rectangle的参数,只需要将边距设置为-32即可,大小是图标本身的2倍,因为我们要利用它的旋转产生冷却效果。

第二个Rectangle的对齐方式和第一个有所不同,都做好了以后,就可以做动画了。

在那之前,需要将旋转的中心点设置的图标控件的中心位置,由于是分别左边和靠右边,就需要分别处理,

先选择右边的Rectangle,将变换中的中心点为之设置为0,0.5,然后旋转一下看看,是否有感觉了呢?

 

好了,做一个故事板动画,然后在指定的时间上,让这个矩形旋转180度

 

在左边的矩形上制作一个动画,也是旋转180度,但是需要注意的是,这个动画要在第一个播放完毕之后播放,所以关键帧的位置请留意。

 

在调动画的时候,我们可能还要做一些细致的工作,比如显示和消失的关系,旋转之后的容错问题,所以最后的时间线可能是这样的:

 

好了,一个动画出来了,然后我们看看效果,源代码下载地址如下:点击直接下载

总结

以上是内存溢出为你收集整理的Silverlight 游戏开发小技巧:技能冷却效果1(Cooldown)全部内容,希望文章能够帮你解决Silverlight 游戏开发小技巧:技能冷却效果1(Cooldown)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1075133.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存