Silverlight C# 游戏开发：草动系统一简单的草动

昨天晚上在银光进化论谈聊到以前MU的草动效果，Goods尤其觉得很好，正巧我以前做过草动的系统，可以作为经验总结一下，最近一直纠结文章标题，正好借此发挥一下，抛砖引玉：）

以前写的草动系统都是3D的，这次写2D的确实有一些麻烦，整理思路用了很久，好在Silverlight提供了很好的动画支持，很方便的就实现了一个简单的草动效果。

首先很简单，建立一个Silverlight4的项目：Grasstest01

工程的.Web项目叫GrassShow.Web，我想以后可能还有Grasstest02，03，04……

准备好地面和草（资源来自：《窝窝世界》）

创建一个控件叫Grass01，将图片添加到控件中，我的Blend已经过期，只好使用代码来实现这个过程，请参看代码：

Grass01控件代码

  
  
<UserControl x:Class="Grasstest01.Grass01" 
   
   
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   
   
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   
   
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

   
   
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

   
   
mc:Ignorable="d" 

   
   
d:DesignHeight="300" d:DesignWidth="400"> 

   
   
<UserControl.Resources> 

   
   
<Storyboard x:Name="Ani_Def" RepeatBehavior="Forever" AutoReverse="True"> 

   
   
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="LayoutRoot"> 

   
   
<EasingDoubleKeyFrame KeyTime="0" Value="1.621"/> 

   
   
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1.839"/> 

   
   
</DoubleAnimationUsingKeyFrames> 

   
   
</Storyboard> 

   
   
</UserControl.Resources> 

   
    
   
   
<Canvas x:Name="LayoutRoot"> 

   
   
<Canvas.RenderTransform> 

   
   
<CompositeTransform/> 

   
   
</Canvas.RenderTransform> 

   
   
<Image x:Name="image" Source="/Grasstest01;component/Res/Grass01.png" Canvas.Left="-25" Canvas.Top="-77" RenderTransformOrigin="0.5,0.9"> 

   
   
</Image> 

   
   
</Canvas> 

   
   
</UserControl> 

  
  @H_944_404@

上述代码其实使用Blend很容易实现，可惜对于我来说只有使用这个暴力方法了：）
需要特别说明两个部分，一个是动画摇摆部分：动画摇摆幅度可以通过修改DoubleAnimationUsingKeyFrames中的EasingDoubleKeyFrame来修改。另外一个是摇摆的主体，本来我想直接摇动Image，结果发现不太直观，尤其是RenderTransformOrigin的对齐，所以我直接将摇摆的动画设置到LayoutRoot，这样从根点就可以看到效果了，这是一个非常好的方法，原点可以将很多的资源元素产生的偏移点问题解决。

由于动画不会自动启动，需要在Grass01.xaml.cs中添加如下代码：

Grass01 类

  
  
public partial class Grass01 : UserControl  
   
   {  
   
   public Grass01()  
   
   {  
   
   InitializeComponent();  
   
   
Ani_Def.BeginTime = TimeSpan.FromSeconds(MainPage._PointRandom.NextDouble());  

   
   Ani_Def.Begin();   
   
   }  
   
    
   
   }  
  
  @H_944_404@

需要特别说明的是Ani_Def.BeginTime，随机了一个启动时间，为了更好的模拟草的随机性，而MainPage._PointRandom是一个静态的随机种子，让随机性更高。
然后就是生成，这个比较简单就是种草而已，只需要在MainPage.xaml.cs中加入代码：

代码

  
  
public static Random _PointRandom = new Random((int)DateTime.Now.Ticks);  
   
   public MainPage()  
   
   {  
   
   InitializeComponent();  
   
   
Image Image = new Image();  

   
   LayoutRoot.Children.Add(Image);  
   
   
Image.source = new BitmapImage(new Uri(@"/Grasstest01;component/Res/Map01.jpg", UriKind.Relative));  

   
   
for (int i = 0; i < 300; i++)  

   
   {  
   
   
Grass01 g1 = new Grass01();  

   
   LayoutRoot.Children.Add(g1);  
   
   Canvas.SetLeft(g1, _PointRandom.Next(50,800));  
   
   
int y= _PointRandom.Next(50,600);  

   
   Canvas.SetTop(g1,y );  
   
   Canvas.SetZIndex(g1, y);  
   
   }  
   
    
   
   }   
   
      
   
    
  
  @H_944_404@

我随便生成了300颗草，先看看效果：

动起来效果还是不错的，随机性很强，有“微风”感，可是cpu咱们可真不可恭维，简直是噩梦，相信某些“老板”看了这个效果就直接枪毙了Silverlight，什么东西啊，一个小小的草动效果就这样，开什么玩笑开发大型游戏？想想也是，咱们还是放弃算了，玩这个真的没前途。。。。
其实呢，并不是如此，只需要开启GPU加速，胜利的女神就开始向你招手了，需要添加两行代码：

1、打开Grass01.xaml.cs，添加image.CacheMode = new BitmapCache();，这里的image是你的草的Image名称，可以是任何名称

2、打开.html或者.aspx，就是承载页面找到object标签添加代码，<param name="enableGPUacceleration" value="true"/>

这下运行再看看。

微风仍然吹过，看起来还是那么平静，效果似乎达到了哦：）想了解这方面更多的请参考深蓝色右手有关的GPU加速文章
我发现很多的效果并不是需要很多的代码来堆积，有的时候，使用简单的代码就能达到想要的效果，其实并不复杂，有可能仅仅是灵光一闪而已。
本次的源代码在这里下载：点击这里下载源代码

展示效果如下：（小人使用键盘WASD控制）

PS：小人的基础系统也不是很复杂，我取出了自己引擎中的一套实现方法，大部分开发手法都在过往的文章中写过，继续欢迎对Silverlight技术研究的朋友共同探讨，对于有一定水平的朋友欢迎加入“银光进化论谈”群9675769，加入条件有限制请了解后申请http://www.cnblogs.com/nowpaper/archive/2010/07/12/1775887.html

Silverlight C# 游戏开发：草动系统一简单的草动

相关推荐