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>

 

上述代碼其實使用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();  
    }
        
}

 

需要特別說明的是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);
    }
            
}       

 

我隨便產生了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遊戲開發部落格：深藍色右手