昨天晚上在银光进化论谈聊到以前MU的草动效果,Goods尤其觉得很好,正巧我以前做过草动的系统,可以作为经验总结一下,最近一直纠结文章标题,正好借此发挥一下,抛砖引玉:)
以前写的草动系统都是3D的,这次写2D的确实有一些麻烦,整理思路用了很久,好在Silverlight提供了很好的动画支持,很方便的就实现了一个简单的草动效果。
首先很简单,建立一个Silverlight4的项目:GrassTest01
工程的.Web项目叫GrassShow.Web,我想以后可能还有GrassTest02,03,04……
准备好地面和草(资源来自:《窝窝世界》)
创建一个控件叫Grass01,将图片添加到控件中,我的Blend已经过期,只好使用代码来实现这个过程,请参看代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 >
上述代码其实使用Blend很容易实现,可惜对于我来说只有使用这个暴力方法了:)
需要特别说明两个部分,一个是动画摇摆部分:动画摇摆幅度可以通过修改DoubleAnimationUsingKeyFrames中的EasingDoubleKeyFrame来修改。另外一个是摇摆的主体,本来我想直接摇动Image,结果发现不太直观,尤其是RenderTransformOrigin的对齐,所以我直接将摇摆的动画设置到LayoutRoot,这样从根点就可以看到效果了,这是一个非常好的方法,原点可以将很多的资源元素产生的偏移点问题解决。
由于动画不会自动启动,需要在Grass01.xaml.cs中添加如下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{
public Grass01()
{
InitializeComponent();
Ani_Def.BeginTime = TimeSpan.FromSeconds(MainPage._PointRandom.NextDouble());
Ani_Def.Begin();
}
}
需要特别说明的是Ani_Def.BeginTime,随机了一个启动时间,为了更好的模拟草的随机性,而MainPage._PointRandom是一个静态的随机种子,让随机性更高。
然后就是生成,这个比较简单就是种草而已,只需要在MainPage.xaml.cs中加入代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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);
}
}
我随便生成了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游戏开发博客:深蓝色右手