用WPF做2D游戏

引言

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

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

实例

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

下面是游戏截图：

实现

行走中迈腿摆臂的动画是通过切换图片帧来实现的，切换帧有两种方法，一种是放一个Image，然后用ObjectAnimationUsingKeyFrames来改变Image的Source属性：

XAML代码

然后用C#代码添加帧：

代码

        public static System.Drawing.Bitmap LoadBitmap(Uri uri)
        {
            StreamResourceInfo info = Application.GetResourceStream(uri);
            return new System.Drawing.Bitmap(info.Stream);
        }

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

        internal static void AddKeyFrames(ObjectAnimationUsingKeyFrames animation, params System.Drawing.Bitmap[] frames)
        {
            double percent = 0;
            double pace = 1.0 / frames.Length;
            foreach (var frame in frames)
            {
                BitmapSource bs = CreateBitmapSource(frame);
                animation.KeyFrames.Add(new DiscreteObjectKeyFrame(bs, KeyTime.FromPercent(percent)));
                percent += pace;
            }
        }

使用这种方法需要先把大图在代码里切割成四个小图，由于要用到System.Drawing所以代码不能迁移到Silverlight。

于是我又想了第二种方法，用ImageBrush做控件背景，然后用ObjectAnimationUsingKeyFrames来切换它的ViewBox。

代码

用C#代码添加帧：

代码

        internal static void AddKeyFrames(ObjectAnimationUsingKeyFrames animation, Rect[] frames)
        {
            double percent = 0;
            double pace = 1.0 / frames.Length;
            foreach (var frame in frames)
            {
                animation.KeyFrames.Add(new DiscreteObjectKeyFrame(frame, KeyTime.FromPercent(percent)));
                percent += pace;
            }
        }

AnimatedImage是一个自定义的控件，控件模板如下：

后来发现SliverLight里的TileBrush没有ViewBox属性，所以还是无法迁移。

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

GameLoop可由CompositionTarget.Rendering事件指定：

        GameLoop gameLoop;
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            ......
            gameLoop = new GameLoop(player, Scenes.Level1);
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }

        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            gameLoop.ProcessChanges();
        }

在GameLoop中还需要注意的就是跳跃过程中重力效果的模拟和对物体、台阶、边界的碰撞检查，这个就不多说了，看代码：

代码

        public void ProcessChanges()
        {
            TimeSpan timeSpan = DateTime.Now - lastTime;
            double step = timeSpan.TotalSeconds;
            lastTime = DateTime.Now;

            double x = Sprite.X;
            double y = Sprite.Y;
            double dx = step * Sprite.Speed;
            if (Sprite.IsWalkingLeft)
            {
                x -= dx;
                Scene.ScrollRightt(x, dx);
            }
            else if (Sprite.IsWalkingRight)
            {
                x += dx;
                Scene.ScrollLeft(x, dx);
            }
            if (Map.CanMoveTo(x, Sprite.Y, Sprite.Width, Sprite.Height))
            {
                Sprite.X = x;
            }

            if (Sprite.IsJumping)
            {
                y -= (1 - Sprite.JumpTime) * step * 400;
                if (Sprite.JumpTime < 1 && Map.CanMoveTo(Sprite.X, y, Sprite.Width, Sprite.Height))
                {
                    Sprite.Y = y;
                    Sprite.JumpTime += step;
                }
                else
                {
                    Sprite.IsJumping = false;
                    Sprite.IsFalling = true;
                    Sprite.JumpTime = 0;
                }
            }
            else if (Sprite.IsFalling)
            {
                y += 800 * Sprite.FallTime * step;
                if (Map.CanMoveTo(Sprite.X, y, Sprite.Width, Sprite.Height))
                {
                    Sprite.Y = y;
                    Sprite.FallTime += step;
                }
                else
                {
                    Sprite.IsFalling = false;
                    Sprite.FallTime = 0;
                }
            }
            else
            {
                y += 1;
                if (Map.CanMoveTo(Sprite.X, y, Sprite.Width, Sprite.Height))
                {
                    Sprite.Y = y;
                    Sprite.IsFalling = true;
                    Sprite.FallTime = step;
                }
            }
        }

下一步

下一步我打算用XAML矢量图来做动画，场景物体等也全都用矢量图，这样的好处一是可以任意放大缩小，二是动画效果会更加流畅一些。