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

主页 > Web开发 > ASP.Net >

ID #41053

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

　　目录设置如下：

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

　　情形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中的组织结构，可以证实我们的结论：

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

　　情形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中的组织结构，可以证实我们的结论：

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

　　其中，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;　　　}　 }