Silverlight 游戲開發小技巧：傳說中的透視跑馬燈

作者: nowpaper 來源: 博客園發布時間: 2011-02-28 21:56 閱讀: 1978 次推薦: 0 原文鏈接 [收藏]

　　昨夜元宵佳節，各種燈會熱鬧非凡，伴隨煙火燦爛好不熱鬧，可惜一點也沒看著T_T，那就寫一個跑馬燈吧，可是跑馬燈并不稀奇，各位高手們已經寫過而且都各有特點，所以，寫也要寫點有特色的才好，游戲中經常能看到一種帶有透視的選人界面，上次寫的是一個固定效果，那么這次帶上點動畫，結合一個Silverlight的MVC開發小技巧快速完成它。

　　仍然繼續偷懶，借用之前的控件：Silverlight 游戲開發：簡單的技能條系統

　　把Card控件拿出來，然后做一下簡單的修改，然后打開XAML文件，填入如下的代碼：

　　這是給UserContrl增加了一個Projection，這是3D變換方面的屬性，注意后面的x:Name="myProjection"是給這個對象做了一個命名，這樣就可以在.cs中直接訪問控制，而不需要麻煩的增加新的代碼。

　　看代碼中可以直接使用這個對象，這應該算是Silverlight優秀的便捷開發技巧。

　　現在在MainPage中增加一個用來放圖標的容器：

　　將它放置在中間或者其他你想要的位置。

　　現在需要寫代碼了，為FaceCard類增加如下代碼：

public FaceCard()
{
InitializeComponent();
Sel_Rectangle.Visibility = System.Windows.Visibility.Collapsed;
myProjection.CenterOfRotationZ = -200;
}
public double AngleY
{
get { return myProjection.RotationY; }
set
{
myProjection.RotationY = value;
if (value > 0)
this.Opacity = Math.Abs(value % 360 - 180) / 180 + 0.2;
else
this.Opacity = Math.Abs(value % 360 + 180) / 180 + 0.2;
myTransform.ScaleX = myTransform.ScaleY = Opacity + 0.1;
}
}

　　注意在構造函數中，對旋轉的中心進行了設置，為Z軸的-200位置，也就是說，所有的旋轉都會圍繞(0,0,-200)3D空間點上旋轉，而AngleY是圍繞Y軸進行旋轉數值，它可以通過RotagtionY來獲得，在賦值的代碼中，進行了一個處理，就是當旋轉到后面的時候，就會不清晰，這樣看起來更加真實，當然了也可以通過Effect來完成。

　　下面打開MainPage類，做一些改造：

public partial class MainPage : UserControl
{
public const int MaxFaceSum = 10;
public const double Speed = 10;
public MainPage()
{
InitializeComponent();
for (int i = 0; i < MaxFaceSum; i++)
{
var face = new FaceCard();
face.FaceIndex = i % MaxFaceSum;
FaceGroupPanel.Children.Add(face);
face.AngleY = (360 / MaxFaceSum) * i;
}
CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
}
double mouseOffset;
protected override void OnMouseMove(MouseEventArgs e)
{
var aw = App.Current.Host.Content.ActualWidth / 2;
mouseOffset = (aw - e.GetPosition(null).X) / aw * Speed;
base.OnMouseMove(e);
}
void CompositionTarget_Rendering(object sender, EventArgs e)
{
for (int i = 0; i < MaxFaceSum; i++)
{
var face = FaceGroupPanel.Children[i] as FaceCard;
if (face != null)
face.AngleY += mouseOffset;
}
}
}

　　代碼很簡潔，我使用CompositionTarget.Rendering作為循環邏輯，并增加了10個小圖標，這個初始最大值寫成const以方便隨時修改，在MouseMove事件中，做了個數值計算得出一個偏移數值，而這個數值將會影響到旋轉，參見CompositionTarget_Rendering(object sender, EventArgs e) 中的寫法，考慮擴展性，可以修改速度等參數來達到一些效果。

　　現在已經完成，運行起來看看如何呢，在這個基礎上，我們能夠做一些廣告效果，或者游戲中的選人選物品的功能，我估計最刺激的是，如果能做成開寶箱的轉盤就有意思了。

　　本篇工程源代碼下載地址如下：點擊直接下載