Silverlight 游戏开发小技巧:角色升级特效
这次我们将使用Projection完成一些有趣的RPG游戏中常用的特效:升级和传送点特效,我们不需要请特效师制作复杂绚丽的特效,而是只需要他们提供关键的几张图片或者设计样式,如果了您有本领教会他们使用Blend来做特效,那就太好了,好了,闲话不说,在Silverlight中制作下面的这种效果简直是手到擒来。
这个拍摄的角度效果不是很合适,但是大概能够看清楚,这时一个升级的特效动画,我们今天将会完成这个效果,就像下面这样
虽说用Blend做这样的Silverlight特效易如反掌,但是读者还是要了解一下Projection的基础知识,在前面两篇当中已经做了详细的例子,如果需要补课的请再看一遍。
首先你需要一个工程,然后建立一个控件名字暂时叫Effect_Levelup,现在预备一个角色的参照,按照下面的位置放置,原因是你需要以原点定位:
为了操作起来方便,建议将LayoutRoot转换成为Canvas控件,为什么要将角色这么放置,需要了解Silverlight的容器概念,控件的位置定位是按照左上角定位,这和屏幕的关系是一样,所以这样做的做法是让未来的控件直接和角色的中心点对齐(Center)。
下面就是考验美术设计能力的时候了,我们的目标效果是下面的样子:
不要被这些东西吓坏,其实做起来一点都不难,我们这里只是使用来的Projection的3D旋转,其他的只是使用简单的位移而已。
我们先将这个圈圈画出来:
这个圈只是填充了一个紫色,然后使用了柔化特效,你可以在Effect属性中点击设置
下面我们在复制一个这个圈,但是去掉模糊特效,并且将颜色填充
颜色设置请参看右边,你可能有趣的发现并不是填充色造成的这个效果,而是Stroke,建议做一些尝试吧。
然后我们再画几个内圈
这些内圈可以使用上面的画成一个貌似闪光的圆环,在这些上面做一些妆点。
装饰一些漂亮的发光球,你需要复制一个中心环,用中心渐变填充,将颜色色值的A调成透明,几个复合颜色下来就能够得到一个“小亮点”,下一步将他们组合就能够有我们所期望的效果。
好了,现在将刚才画的圈圈全部组合起来成为一个Grid:
下一步继续将组合的Grid再组合到一个新的Grid中,为什么这么做呢,因为要变换透视感觉,在后面的动画中的旋转做准备
到这一步大家似乎能够看出有点眉目了,关于前后的渐变不透明,也是通过不透明Mask的填充得到
加入几根光柱让效果更加显著:
只需要用Ellipse即可,我们用不上太复杂的Path,最后为了让这个升级动画更丰富一点,加入几个套圈。
这几个套圈的制作方法几乎和前面的没什么区别,这里主要是再次为大家讲解有关三维旋转的例子。
为了更好的操作,现在将他们合并到一个容器当中,
下面就是调动画的事件了,我计划将在第二个部分做详细的讲解,这里是一个完成版本的图片,请参看吧
这个动画做起来并不难,难就在对这些控件之间的关系理解,最后,我们把角色的参照图给删除掉,然后生成工程,在MainPage里加入这个控件,看看效果。
我们前面把特效放置在左上0,0点,并且使用Canvas作为容器,所以才会产生内容不会变形控件。
然后我们在Mainpage里简单的写一些逻辑和代码,请注意此事我已经将中间的升级按钮命名为btn_levelup,特效动画命名为effect_Levelup,升级特效的控件中的故事板动画名字为ANI_Show
- public partial class MainPage : UserControl
- {
- public MainPage()
- {
- InitializeComponent();
- effect_Levelup.ANI_Show.Begin();
- btn_levelup.Click += new RoutedEventHandler(btn_levelup_Click);
- }
- void btn_levelup_Click(object sender, RoutedEventArgs e)
- {
- effect_Levelup.ANI_Show.Begin();
- }
- }
这段代码只是点击的时候就会触发动画播放。
具体效果,请参看下面的直接实例,关于传送点的特效制作,咱们明天再说:)
源代码下载地址如下:点击直接下载
推荐Silverlight游戏开发博客:深蓝色右手
Silverlight 游戏开发小技巧:角色升级特效相关推荐
- Silverlight 游戏开发小技巧:轨迹跟随效果
Silverlight 游戏开发小技巧:轨迹跟随效果 我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使 ...
- Silverlight 游戏开发小技巧:实现街霸4的选人界面
Silverlight 游戏开发小技巧:实现街霸4的选人界面 上一篇只是一个引子,用来说明Projection的基本操作,游戏研发都是用这些小的基本功能慢慢组合出来,其实这一篇仍然是Projectio ...
- Silverlight 游戏开发小技巧:动感小菜单2
Silverlight 游戏开发小技巧:动感小菜单2 动感小菜单其实是想模仿Apple的菜单按钮设计制作,但是画虎不成反类犬,看起来有点别扭,昨天各位园友提了这方面的建议,感觉太硬如果加入动画可能更好 ...
- 一起谈.NET技术,Silverlight 游戏开发小技巧:动感小菜单
网页应用受限于自身的浏览器范畴,不能把华丽效果完全展示,正是因为如此,在网页上诞生了无数绚丽的设计,虽然动感程度和桌面应用无法比拟,但是在UI上却下足了功夫,用户体验可以说无以伦比,比如说小小的菜单, ...
- Silverlight 游戏开发小技巧:扇形排列元素
Silverlight 游戏开发小技巧:扇形排列元素 斗地主风靡了大江南北,在春晚都做免费性推广,棋牌游戏平台几乎将其作为标配,但是牌类游戏总是一成不变的样子--横向排列,如果扇形排列应该更加符合真实 ...
- Silverlight 游戏开发小技巧:星球大战字幕效果
各位科幻迷可能对星球大战的字幕效果印象深刻,这个电影字幕表现手法曾经风靡大小美国影片,甚至超人影片和电视也曾经用此来做开场和结尾字幕,今天我就将这个效果在blend里面制作技巧告诉大家,下面是星球大战 ...
- 一起谈.NET技术,Silverlight 游戏开发小技巧:实现街霸4的选人界面
上一篇只是一个引子,用来说明Projection的基本操作,游戏研发都是用这些小的基本功能慢慢组合出来,其实这一篇仍然是Projection,但是我们将会做一个比较复杂的应用使用silverlight ...
- Silverlight 游戏开发小技巧:昼夜交替动画
记得在WP7上玩一个游戏有段动画很有趣,是背景在进行昼夜交替,一会儿白天太阳出来白天了,一会儿月亮蹦出来夜晚了,在以前做C++程序的时候曾经实现过类似的效果,今天早上移植了一下到Silverlight ...
- Silverlight 游戏开发小技巧:技能冷却效果1(Cooldown)
到目前为止,大家都非常推崇魔兽的技能冷却效果,就是这样的,我记得群里还对这个效果展开过探讨,其实实现起来并不难,关键是思路是否正确,这部分我得谢谢猪笨无罪,是他先想出的解决方案,他不愿意写博客,也就只 ...
最新文章
- 结构化数据不应该被人工智能忘之脑后 !
- 几种Linux段错误调试方法
- linux启动守护进程失败,Ubuntu Linux设置守护进程时出错的解决
- 天线端口和参考信号支持的多端口
- linux中的改变bin级别,Linux常用命令
- 铁血规则:事件预订与取消预订
- 配置openldap_openldap环境搭建+集成JIRA服务
- 对比分析HashMap,HashTable,ConcurrentHashMap,LinkedHashMap,LURLinkedHashMap(一)
- spring mvc在Controller中获取ApplicationContext
- Log4J基础详解及示例大全
- bzoj 3383: [Usaco2004 Open]Cave Cows 4 洞穴里的牛之四(set+BFS)
- qt 当前窗口句柄_QT获取Windows系统所有窗口句柄
- 服务器代码review要点
- python装饰图解_Python装饰器(Decorate)使用图解
- Steam游戏—底特律:化身成人,回家章节中女主角上二楼打扫卫生,按L Shift开窗按不动怎么办
- 1.什么情况下发生GC
- 第八次网页前端培训(JavaScript)
- EasySwoole 基础入门
- format格式化输出
- 数据结构:若借助栈由输入序列1,2…n得到的输出序列为p1p2…pn(它是输入序列的一个排列),证明在输出序列中不可能出现这样的情形:存在着i<j<k,使pj<pk<pi
热门文章
- 批量关闭公众号推送_微信推出“一键拒收”长期未读公众号推送功能
- java 彩票系统_JAVA版彩票随机生成系统
- Java孩子父母类,@Output孩子和父母之间的沟通 . 角2(5)
- 当一个序列满足对于任意的前 项和都满足不小于_时间序列分析第01讲--平稳序列(基本概念,线性平稳序列)...
- 【蓝桥java】递归基础之车辆进出栈
- Java的多态(详尽版)
- python示例异常处理与程序调试_笔记:Python异常处理与程序调试
- springboot过滤器排除掉一些url_理解这9大内置过滤器,才算是精通Shiro
- 小程序音频播放报10001 解决方案 errCode:10001, errMsg:errCode:602,err:error,not found param
- python包引用问题