C#开发WPF/Silverlight动画及游戏系列教程(Game Course):(一)让物体动起来①
2009-06-25 15:40
447 查看
序:自从QXGame(WPF GAME ENGINE)游戏引擎公布以来,受到很多朋友的热切关注,于是乎有了写教程的想法。那么从今天开始,我将带领大家一步一步的学会如何使用纯C#开发WPF/Silverlight游戏引擎,过程中我会尽量的开源,并对相关小技巧进行解释和介绍,比较复杂的算法原理我会给大家一条绝对可行的思路,至于如何处理这些复杂的算法,那是仁者见仁,智者见智了,或许您写的算法比我的更好呢。
多余的话不多说了,最后来句发自肺腑的话吧:本系列教程的书写编辑花费作者很多心血,没有功劳也有苦劳哇,所以请需要转载的朋友们用突出的字体或颜色标明在您的文章开头,您的大力支持是鼓励我不断写下去的动力。
前言:WPF/Silverlight矢量动画的描述我就不多说了,关于WPF/Silverlight与Flash的比较网上也是一堆一堆的,这里只想客观的告诉读者下面两点:
一、WPF开发的是桌面应用程序,自包括Vista在内以后的Windows系列操作系统均大量以之为主流图形工具,即将全面取代Winform,并且Windows 7将集成.NET3.5+框架,在当今Windows系列操作系统占据90%同类市场的现状下,这意味着什么呢?
二、Silverlight基于一个约4M左右的MINI型.NET框架,目前版本2.0,3.0的beta英文版,从发展趋势看是绝对有与Flash抗衡并且在未来超越它的可能性。Silverlight的优势更表现在它可以用一切.NET语言例如C#,VB.NET,C++.NET等开发,拓展度与可以参与开发的人群远远高于只能用AS开发的FLASH。
转入正题,网上已经有很多关于如何创建WPF/Silverlight动画的教程,但是均为使用Blend工具制作,或直接写在xaml代码内的动画,这样往往造成很多朋友误以为其实WPF/Silverlight不就是MS的Flash?诚然,如果您真的像那些教程里说的去开发WPF/Silverlight程序,我个人觉得一点意义都没有。这样开发出来的东西根本就超越不了Flash,那何苦还要投入如此多的精力来学习它?
所以本系列教程将全方位的以纯C#程序语言进行动态创建一切可视化对象,从而构建出一个如QXGame(WPF GAME ENGINE)游戏引擎,这才是我本系列教程希望达到的目的。
(注:本教程使用的开发工具为Visual studio 2008 版本sp1)
好了,那么我首先介绍第一种动态创建动画的方法,这也是官方推荐的Storyboard动画。该类型动画您可以在网络上查阅相关资料进行了解,这里不累述了,那么我们直接进入主题:
首先我们新建一个WPF项目,接下来打开Window1.xaml进入视图代码编辑器,这里我们这样写:
这段代码我创建了一个名叫Carrier的Canvas(画布)容器布局控件,并设置它的尺寸为800*600,背景银色,最后注册一个鼠标在它上面点击的事件。那么为什么要选择Canvas作为容器呢?因为Canvas可以实现它内部的控件任意的绝对定位,可以很方便的处理物体的移动。
界面容器元素布局好了,那么接下来就动态创建物体对象了:
Rectangle rect;//创建一个方块作为演示对象
这里我创建了一个50*50象素,圆角5*5红色的方块对象,并且将它作为子控件添加进Carrier中,并且初始化它在Carrier中的位置: Canvas.SetLeft(rect, 0); Canvas.SetTop(rect, 0);
对象准备好了,那么接下来就是实现动画了。我们要实现的是鼠标点哪它就移动到哪:
从上面代码我们可以看到,首先获取鼠标点击点相对于Carrier中的坐标位置p,然后创建故事板storyboard和Double类型动画doubleAnimation,doubleAnimation有3个参数,分别代表开始值,结束值,动画经历时间,接着通过Storyboard.SetTarget()和Storyboard.SetTargetProperty()分别设置动画的目标及要修改的动画目标属性,再下来将doubleAnimation添加进storyboard中,这样重复两次分别实现X轴和Y轴方向的动画。当这些处理完后,最后还需要将storyboard添加进Resources资源内,这样程序才能识别。一切就绪后,通过代码storyboard.Begin()来开始动画。
大家按Ctrl+F5,然后在窗体上随便点点,方块是不是会移动了呢?呵呵。
小结:Storyboard动画是基于时间线的矢量动画,它与传统的基于图片轮换形成的动画不同,它的原理是通过时时的改变对象属性而形成的,第一次接触的朋友们可能会觉得比较吃力,但是慢慢体会一下,多练习一下就会渐渐的理解了。
下一节我将继续讲解动态创建动画的第二种方法,敬请关注。
多余的话不多说了,最后来句发自肺腑的话吧:本系列教程的书写编辑花费作者很多心血,没有功劳也有苦劳哇,所以请需要转载的朋友们用突出的字体或颜色标明在您的文章开头,您的大力支持是鼓励我不断写下去的动力。
前言:WPF/Silverlight矢量动画的描述我就不多说了,关于WPF/Silverlight与Flash的比较网上也是一堆一堆的,这里只想客观的告诉读者下面两点:
一、WPF开发的是桌面应用程序,自包括Vista在内以后的Windows系列操作系统均大量以之为主流图形工具,即将全面取代Winform,并且Windows 7将集成.NET3.5+框架,在当今Windows系列操作系统占据90%同类市场的现状下,这意味着什么呢?
二、Silverlight基于一个约4M左右的MINI型.NET框架,目前版本2.0,3.0的beta英文版,从发展趋势看是绝对有与Flash抗衡并且在未来超越它的可能性。Silverlight的优势更表现在它可以用一切.NET语言例如C#,VB.NET,C++.NET等开发,拓展度与可以参与开发的人群远远高于只能用AS开发的FLASH。
转入正题,网上已经有很多关于如何创建WPF/Silverlight动画的教程,但是均为使用Blend工具制作,或直接写在xaml代码内的动画,这样往往造成很多朋友误以为其实WPF/Silverlight不就是MS的Flash?诚然,如果您真的像那些教程里说的去开发WPF/Silverlight程序,我个人觉得一点意义都没有。这样开发出来的东西根本就超越不了Flash,那何苦还要投入如此多的精力来学习它?
所以本系列教程将全方位的以纯C#程序语言进行动态创建一切可视化对象,从而构建出一个如QXGame(WPF GAME ENGINE)游戏引擎,这才是我本系列教程希望达到的目的。
(注:本教程使用的开发工具为Visual studio 2008 版本sp1)
好了,那么我首先介绍第一种动态创建动画的方法,这也是官方推荐的Storyboard动画。该类型动画您可以在网络上查阅相关资料进行了解,这里不累述了,那么我们直接进入主题:
首先我们新建一个WPF项目,接下来打开Window1.xaml进入视图代码编辑器,这里我们这样写:
<Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPFGame"> <Canvas x:Name="Carrier" Width="800" Height="600" Background="Silver" MouseLeftButtonDown="Carrier_MouseLeftButtonDown" /> </Window>
这段代码我创建了一个名叫Carrier的Canvas(画布)容器布局控件,并设置它的尺寸为800*600,背景银色,最后注册一个鼠标在它上面点击的事件。那么为什么要选择Canvas作为容器呢?因为Canvas可以实现它内部的控件任意的绝对定位,可以很方便的处理物体的移动。
界面容器元素布局好了,那么接下来就动态创建物体对象了:
Rectangle rect;//创建一个方块作为演示对象
public Window1() { InitializeComponent(); rect = new Rectangle(); rect.Fill = new SolidColorBrush(Colors.Red); rect.Width = 50; rect.Height = 50; rect.RadiusX = 5; rect.RadiusY = 5; Carrier.Children.Add(rect); Canvas.SetLeft(rect, 0); Canvas.SetTop(rect, 0); }
这里我创建了一个50*50象素,圆角5*5红色的方块对象,并且将它作为子控件添加进Carrier中,并且初始化它在Carrier中的位置: Canvas.SetLeft(rect, 0); Canvas.SetTop(rect, 0);
对象准备好了,那么接下来就是实现动画了。我们要实现的是鼠标点哪它就移动到哪:
private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { //创建移动动画 Point p = e.GetPosition(Carrier); Storyboard storyboard = new Storyboard(); //创建X轴方向动画 DoubleAnimation doubleAnimation = new DoubleAnimation( Canvas.GetLeft(rect), p.X, new Duration(TimeSpan.FromMilliseconds(500)) ); Storyboard.SetTarget(doubleAnimation, rect); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)")); storyboard.Children.Add(doubleAnimation); //创建Y轴方向动画 doubleAnimation = new DoubleAnimation( Canvas.GetTop(rect), p.Y, new Duration(TimeSpan.FromMilliseconds(500)) ); Storyboard.SetTarget(doubleAnimation, rect); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)")); storyboard.Children.Add(doubleAnimation); //将动画动态加载进资源内 if (!Resources.Contains("rectAnimation")) { Resources.Add("rectAnimation", storyboard); } //动画播放 storyboard.Begin(); }
从上面代码我们可以看到,首先获取鼠标点击点相对于Carrier中的坐标位置p,然后创建故事板storyboard和Double类型动画doubleAnimation,doubleAnimation有3个参数,分别代表开始值,结束值,动画经历时间,接着通过Storyboard.SetTarget()和Storyboard.SetTargetProperty()分别设置动画的目标及要修改的动画目标属性,再下来将doubleAnimation添加进storyboard中,这样重复两次分别实现X轴和Y轴方向的动画。当这些处理完后,最后还需要将storyboard添加进Resources资源内,这样程序才能识别。一切就绪后,通过代码storyboard.Begin()来开始动画。
大家按Ctrl+F5,然后在窗体上随便点点,方块是不是会移动了呢?呵呵。
小结:Storyboard动画是基于时间线的矢量动画,它与传统的基于图片轮换形成的动画不同,它的原理是通过时时的改变对象属性而形成的,第一次接触的朋友们可能会觉得比较吃力,但是慢慢体会一下,多练习一下就会渐渐的理解了。
下一节我将继续讲解动态创建动画的第二种方法,敬请关注。
相关文章推荐
- C#开发WPF/Silverlight动画及游戏系列教程(Game Course):(二)让物体动起来②
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二)让物体动起来②
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三)让物体动起来③
- C#开发WPF/Silverlight动画及游戏系列教程(2)让物体动起来
- 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):(三)让物体动起来③
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(一)让物体动起来①
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(一)让物体动起来①
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(一)让物体动起来①
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三)让物体动起来③
- C#开发WPF/Silverlight动画及游戏系列教程(Game Course):(四)实现2D人物动画①
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(十八) 完美精灵之八面玲珑(WPF Only)②
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(十九) 完美精灵之八面玲珑(WPF Only)③
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十) 第一部分拓展小结篇
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十三) 锦上添花之魔法特效装饰
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):目录
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十一)主位式地图移动模式