拼吾爱程序人生

首页»  WPF»  用WPF做2D游戏
cobra - 2010-3-4 20:17:00
引言

WPF使用了DirectX作为图形渲染引擎，因此游戏性能的表现要强于GDI+，而且WPF内建的对动画的支持使得游戏的编写更加简化。

WPF也提供3D图形的功能，不过3D的建模和动画比较复杂，这里先做一个2D的游戏引擎练练手。

实例

一直想做一个超级马里奥的游戏，就从这个游戏做起，画了一部分图，已经完成的有走动、跳跃、发射子弹、边界检查和场景滚动，没有关卡，没有敌人。

下面是游戏截图：

附件: SuperMario.png

实现

附件: mario.png

行走中迈腿摆臂的动画是通过切换图片帧来实现的，切换帧有两种方法，一种是放一个Image，然后用 ObjectAnimationUsingKeyFrames来改变Image的Source属性：
XAML代码
  1.         <Storyboard x:Key="walkLeftStoryboard">
  2.             <ObjectAnimationUsingKeyFrames Duration="00:00:00.4" RepeatBehavior="Forever"
  3.                                           Storyboard.TargetName="marioImage" Storyboard.TargetProperty="Source" />
  4.         </Storyboard>

  6.         <Image Name="marioImage">
  7.             <Image.RenderTransform>
  8.                 <TranslateTransform x:Name="marioTranslate"  X="0" Y="0"/>
  9.             </Image.RenderTransform>
  10.         </Image>
复制代码
然后用C#代码添加帧：
  1.         public static System.Drawing.Bitmap LoadBitmap(Uri uri)
  2.         {
  3.             StreamResourceInfo info = Application.GetResourceStream(uri);
  4.             return new System.Drawing.Bitmap(info.Stream);
  5.         }

  7.         public static BitmapSource CreateBitmapSource(System.Drawing.Bitmap frame)
  8.         {
  9.             BitmapSource bs = System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap(
  10.               frame.GetHbitmap(), IntPtr.Zero, Int32Rect.Empty, BitmapSizeOptions.FromEmptyOptions());
  11.             return bs;
  12.         }

  14.         internal static void AddKeyFrames(ObjectAnimationUsingKeyFrames animation, params System.Drawing.Bitmap[] frames)
  15.         {
  16.             double percent = 0;
  17.             double pace = 1.0 / frames.Length;
  18.             foreach (var frame in frames)
  19.             {
  20.                 BitmapSource bs = CreateBitmapSource(frame);
  21.                 animation.KeyFrames.Add(new DiscreteObjectKeyFrame(bs, KeyTime.FromPercent(percent)));
  22.                 percent += pace;
  23.             }
  24.         }
复制代码
使用这种方法需要先把大图在代码里切割成四个小图，由于要用到System.Drawing所以代码不能迁移到Silverlight。

于是我又想了第二种方法，用ImageBrush做控件背景，然后用ObjectAnimationUsingKeyFrames来切换它的 ViewBox。
WPF栏目的最新浏览文章：
• 用WPF实现的折线图
• WPF实现超酷样式按钮
• WPF动态加载obj格式的3D模型
• WPF弹性模拟动画
• 用游戏杆控制 WPF 中三维模型
• WPF学习之数据绑定
• WPF 4 动态覆盖图标（Dynamic Overlay Icon）
• [WPF系列教程] 手把手教你做“咖啡”按钮
• WPF动态改变主题颜色
• Windows Presentation Foundation Unleashed（WPF揭秘）
• Wpf Docking Library--类似于VisualStudio界面风格的类库
• 制作WPF的屏幕保护程序
• WPF 4 DataGrid 控件（进阶篇二）
• Programming WPF , 2nd Edition
• 用WPF制作iPhone模拟器
• WPF学习之使用DataGrid
cobra - 2010-3-4 20:18:00
  1. <Storyboard x:Key="walkLeftStoryboard">
  2.             <ObjectAnimationUsingKeyFrames Duration="00:00:00.4" RepeatBehavior="Forever"
  3.                                           Storyboard.TargetName="marioImage" Storyboard.TargetProperty="CurrentFrame" />
  4.         </Storyboard>

  6.         <game:AnimatedImage x:Name="marioImage" Image="/SuperMario;component/Images/mario.png" CurrentFrame="0, 0, 0.5, 0.5" Width="134" Height="131">
  7.             <game:AnimatedImage.RenderTransform>
  8.                 <TranslateTransform x:Name="marioTranslate"  X="0" Y="0"/>
  9.             </game:AnimatedImage.RenderTransform>
  10.         </game:AnimatedImage>
复制代码
用C#代码添加帧：
  1.         internal static void AddKeyFrames(ObjectAnimationUsingKeyFrames animation, Rect[] frames)
  2.         {
  3.             double percent = 0;
  4.             double pace = 1.0 / frames.Length;
  5.             foreach (var frame in frames)
  6.             {
  7.                 animation.KeyFrames.Add(new DiscreteObjectKeyFrame(frame, KeyTime.FromPercent(percent)));
  8.                 percent += pace;
  9.             }
  10.         }
复制代码
AnimatedImage是一个自定义的控件，控件模板如下：
  1.     <Style TargetType="local:AnimatedImage">
  2.         <Setter Property="Template">
  3.             <Setter.Value>
  4.                 <ControlTemplate TargetType="local:AnimatedImage">
  5.                     <Border BorderThickness="0">
  6.                         <Border.Background>
  7.                             <ImageBrush ImageSource="{Binding Path=Image,RelativeSource={RelativeSource TemplatedParent}}"
  8.                                         Stretch="UniformToFill" AlignmentX="Left" AlignmentY="Top" Viewbox="{Binding Path=CurrentFrame,RelativeSource={RelativeSource TemplatedParent}}"/>
  9.                         </Border.Background>
  10.                     </Border>
  11.                 </ControlTemplate>
  12.             </Setter.Value>
  13.         </Setter>
  14.     </Style>
复制代码
后来发现SliverLight里的TileBrush没有ViewBox属性，所以还是无法迁移。

接下来就是在GameLoop中根据键盘按键控制动画的开始和停止，并用marioTranslate来改变人物的位置。

GameLoop可由CompositionTarget.Rendering事件指定：
  1.         GameLoop gameLoop;
  2.         private void Window_Loaded(object sender, RoutedEventArgs e)
  3.         {     
  4.             ......
  5.             gameLoop = new GameLoop(player, Scenes.Level1);
  6.             CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
  7.         }

  9.         void CompositionTarget_Rendering(object sender, EventArgs e)
  10.         {
  11.             gameLoop.ProcessChanges();
  12.         }
复制代码
在GameLoop中还需要注意的就是跳跃过程中重力效果的模拟和对物体、台阶、边界的碰撞检查，这个就不多说了，看代码：
  1.         public void ProcessChanges()
  2.         {
  3.             TimeSpan timeSpan = DateTime.Now - lastTime;
  4.             double step = timeSpan.TotalSeconds;
  5.             lastTime = DateTime.Now;

  7.             double x = Sprite.X;
  8.             double y = Sprite.Y;
  9.             double dx = step * Sprite.Speed;
  10.             if (Sprite.IsWalkingLeft)
  11.             {
  12.                 x -= dx;
  13.                 Scene.ScrollRightt(x, dx);
  14.             }
  15.             else if (Sprite.IsWalkingRight)
  16.             {
  17.                 x += dx;
  18.                 Scene.ScrollLeft(x, dx);
  19.             }
  20.             if (Map.CanMoveTo(x, Sprite.Y, Sprite.Width, Sprite.Height))
  21.             {
  22.                 Sprite.X = x;
  23.             }

  25.             if (Sprite.IsJumping)
  26.             {
  27.                 y -= (1 - Sprite.JumpTime) * step * 400;
  28.                 if (Sprite.JumpTime < 1 && Map.CanMoveTo(Sprite.X, y, Sprite.Width, Sprite.Height))
  29.                 {
  30.                     Sprite.Y = y;
  31.                     Sprite.JumpTime += step;
  32.                 }
  33.                 else
  34.                 {
  35.                     Sprite.IsJumping = false;
  36.                     Sprite.IsFalling = true;
  37.                     Sprite.JumpTime = 0;
  38.                 }
  39.             }
  40.             else if (Sprite.IsFalling)
  41.             {
  42.                 y += 800 * Sprite.FallTime * step;
  43.                 if (Map.CanMoveTo(Sprite.X, y, Sprite.Width, Sprite.Height))
  44.                 {
  45.                     Sprite.Y = y;
  46.                     Sprite.FallTime += step;
  47.                 }
  48.                 else
  49.                 {
  50.                     Sprite.IsFalling = false;
  51.                     Sprite.FallTime = 0;
  52.                 }
  53.             }
  54.             else
  55.             {
  56.                 y += 1;
  57.                 if (Map.CanMoveTo(Sprite.X, y, Sprite.Width, Sprite.Height))
  58.                 {
  59.                     Sprite.Y = y;
  60.                     Sprite.IsFalling = true;
  61.                     Sprite.FallTime = step;
  62.                 }
  63.             }
  64.         }
复制代码
下一步

下一步我打算用XAML矢量图来做动画，场景物体等也全都用矢量图，这样的好处一是可以任意放大缩小，二是动画效果会更加流畅一些。（文/Junfeng Liu）
查看完整版本: 用WPF做2D游戏
Powered by Discuz!NT Archiver 3.0.0
CopyRight © 2007-2010 Pin5i-Programming-Life