Silverlight游戏中的WriteableBitmap技术可行性报告

希望此文对投身于Silverlight游戏的朋友予以帮助。

代码下载：SilverlightTestWbResource.zip

目录设置如下：

情形1：将png文件都设置为Resource，Do not copy。

指定Image的Source代码：

spirit.Source = new BitmapImage(new Uri(@"Player/" + count + ".png", UriKind.Relative));

 

注意这里使用的是相对路径，是当前MainPage.xaml相对于图片的位置，而不能使用服务器路径。

如果我们在Spirit中指定Image的Source，就是说相对路径变了，那么代码要写为：

Body.Source = new BitmapImage(new Uri(@"../Player/2.png", UriKind.Relative));

 

在这种情形下，所有图片都被作为资源而嵌入到dll中，观察xap中的组织结构，可以证实我们的结论：

 

 

情形2：将png文件都设置为Content，Copy if newer。

指定Image的Source代码：

spirit.Source = new BitmapImage(new Uri(@"/Player/" + count + ".png", UriKind.Relative));

 

注意这里使用的是服务器路径，而不能使用相对路径。

使用服务器路径的一个好处是，无论xaml位于那个目录下，都可以无视，例如上面的那个Spirit控件：

Body.Source = new BitmapImage(new Uri(@"/Player/2.png", UriKind.Relative));

 

在这种情形下，所有图片都打包到xap的Player目录下，观察xap中的组织结构，可以证实我们的结论：

 

其中，Player文件夹中存放着0-7这8张png图片

下面分析截图的技术 ，就是说把一张大图，只截取其中一部分。

有2种方法：

方法1：使用Clip 技术。

public partial class MainPage : UserControl
{
    private int count = 1;
    private Image spirit;

    public MainPage()
    {
        InitializeComponent();

        spirit = new Image()
        {
            Width = 1500,
            Height = 150,
            Source = new BitmapImage(new Uri(@"Player/PlayerMagic.png", UriKind.Relative))
        };

        Carrier.Children.Add(spirit);

        DispatcherTimer dispatcherTimer = new DispatcherTimer();
        dispatcherTimer.Tick += dispatcherTimer_Tick;
        dispatcherTimer.Interval = TimeSpan.FromMilliseconds(150);
        dispatcherTimer.Start();
    }

    void dispatcherTimer_Tick(object sender, EventArgs e)
    {
        spirit.Clip = new RectangleGeometry()
        {
            Rect = new Rect(count * 150, 0, 150, 150)
        };

        spirit.RenderTransform = new TranslateTransform()
        {
            X = -count * 150
        };

        count = count == 7 ? 0 : count + 1;
    }
}

其中，使用相对路径或服务器路径都是可以的，当然，相应地，图片要设置为Resource或Content。

方法2：使用WriteableBitmap技术

这个WriteableBitmap比较玄的，在使用中有很多地方需要注意。我和深蓝色右手昨天差点被它搞死，拿到QQ群讨论，才知道很多人都有同样的困扰和迷惑。

1）使用服务器路径的编程模型：

public partial class MainPage : UserControl
{
    private int count = 1;
    private Image spirit;

    public MainPage()
    {
        InitializeComponent();

        spirit = new Image()
        {
            Width = 150,
            Height = 150
        };

        Carrier.Children.Add(spirit);


        DispatcherTimer dispatcherTimer = new DispatcherTimer();
        dispatcherTimer.Tick += dispatcherTimer_Tick;
        dispatcherTimer.Interval = TimeSpan.FromMilliseconds(150);
        dispatcherTimer.Start();
    }

    void dispatcherTimer_Tick(object sender, EventArgs e)
    {
        //spirit.Source = new BitmapImage(new Uri(@"/Images/" + count + ".png", UriKind.Relative));
        spirit.Source = ComposeEquip(@"/Images/Body0.png", 150, 150, new Point(-count * 150, 0));

        count = count == 33 ? 0 : count + 1;
    }

    public static WriteableBitmap ComposeEquip(string bodyAddress, int width, int height, Point bodyOffset)
    {
        WriteableBitmap writeableBitmap = new WriteableBitmap(width, height);
        writeableBitmap.Render(new Image() { Source = GetImage(bodyAddress) }, new TranslateTransform() { X = bodyOffset.X, Y = bodyOffset.Y });
        writeableBitmap.Invalidate();
        return writeableBitmap;
    }

    public static BitmapSource GetImage(string address)
    {
        return new BitmapImage(new Uri(string.Format(@"{0}", address), UriKind.Relative));
    }

}

 

如果我们还想合并2张图片，那么ComposeEquip方法可能就是下面这样的：

public static WriteableBitmap ComposeEquip(string bodyAddress, string weaponAddress, int width, int height, Point bodyOffset, Point weaponOffset)
{
    WriteableBitmap writeableBitmap = new WriteableBitmap(width, height);
    writeableBitmap.Render(new Image() { Source = Super.GetImage(bodyAddress) }, new TranslateTransform() { X = bodyOffset.X, Y = bodyOffset.Y });
    writeableBitmap.Render(new Image() { Source = Super.GetImage(weaponAddress) }, new TranslateTransform() { X = weaponOffset.X, Y = weaponOffset.Y });
    writeableBitmap.Invalidate();
    return writeableBitmap;
}

 

2）使用相对路径的编程模型：

如何把上面的路径换成相对路径，同时把图片修改为Resource，就玩不转了。

我猜测，问题出在writeableBitmap.Render(….);和writeableBitmap.Invalidate();这两条语句之间。因为Render需要时间，

那么如何解决呢？

有人出馊主意，说在这2条语句之间开一个线程，然后sleep1秒，但是他没有考虑到我们的ComposeEquip就是一个每150mm就执行一次的方法。

正确的解决方案如下：

我们为要加载的大图片的ImageOpened 事件上挂上一个方法，在该方法中，我们把这张大图片切割成若干小图片，并放到frames 数组中——这时大图片是可以使用的，所以不用担心切割的时候是一片空白。

还要注意，bitmap_ImageOpened方法什么时候触发呢？我们看到MainPage构造函数的最后一条语句：

spirit.Source = bitmap;

对，就是执行这条语句的时候触发——不信？那你就把这句话注释掉，看看bitmap_ImageOpened方法还能被执行到么。我是没看到断点会停到这里。

public partial class MainPage : UserControl
{
    private int count = 1;
    private Image spirit;
    ImageSource[] frames = new ImageSource[10];

    public MainPage()
    {
        InitializeComponent();

        spirit = new Image();
        BitmapImage bitmap = new BitmapImage(new Uri(@"Src/PlayerMagic.png", UriKind.Relative));
        bitmap.ImageOpened += new EventHandler<RoutedEventArgs>(bitmap_ImageOpened);

        Carrier.Children.Add(spirit);
        spirit.Visibility = Visibility.Collapsed;
        spirit.Source = bitmap;
    }

    void dispatcherTimer_Tick(object sender, EventArgs e)
    {
        spirit.Source = frames[count];
        count = count == 7 ? 0 : count + 1;
    }

    void bitmap_ImageOpened(object sender, RoutedEventArgs e)
    {
        spirit.Source = sender as BitmapImage;

        for (int j = 0; j < 10; j++)
        {
            WriteableBitmap wb = new WriteableBitmap(150, 150);
            wb.Render(spirit, new TranslateTransform() { X = -150 * j });
            wb.Invalidate();
            frames[j] = (ImageSource)wb;
        }

        DispatcherTimer dispatcherTimer = new DispatcherTimer();
        dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
        dispatcherTimer.Interval = TimeSpan.FromMilliseconds(150); //重复间隔
         dispatcherTimer.Start();

        spirit.Source = frames[count];
        spirit.Visibility = Visibility.Visible;
    }
}

 

话说，我是在学习深蓝色右手的游戏教程时，把他的WPF版本转化为Silverlight版，在这期间，发现了这个问题。深蓝色右手昨晚交给我一个任务，就是把这个研究明白，然后给出一个终极答案。于是便有了这篇文章。

回顾一下本文的要点，

1.关于图片，Resource和Content的区别

2.Clip和WriteableBitmap的适用场合