Silverliht3D游戏开发新手教程之控制精灵的移动
时间：2011-01-02 来源：永恒的记忆
下面的项目没有漂亮的动画，只是一个绿色精灵在屏幕上移动，从左上角移动到右下角。
1.使用SilverlightApplication模板新建项目，命名为SilverlightInvaders2D，添加一些使用的图片资源，目录结构如下：
2.图片资源
3.新建三个silverlight用户控件页，分别命名如上图。修改文件
1) BlueAlien.xaml
<UserControl x:Class="SilverlightInvaders2D.BlueAlien"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="LayoutRoot" Background="Transparent">
<Image Source="images/ALIEN_01_01.png" x:Name="imgSprite01" />
</Canvas>
</UserControl>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="LayoutRoot" Background="Transparent">
<Image Source="images/ALIEN_01_01.png" x:Name="imgSprite01" />
</Canvas>
</UserControl>
2) GreenAlien.xaml
<UserControl x:Class="SilverlightInvaders2D.GreenAlien"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="LayoutRoot" Background="Transparent">
<Image Source="images/ALIEN_03_01.png" x:Name="imgSprite01" />
</Canvas>
</UserControl>
</UserControl>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="LayoutRoot" Background="Transparent">
<Image Source="images/ALIEN_03_01.png" x:Name="imgSprite01" />
</Canvas>
</UserControl>
</UserControl>
3)RedAlien.xaml
<UserControl x:Class="SilverlightInvaders2D.RedAlien"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="LayoutRoot" Background="Transparent">
<Image Source="images/ALIEN_02_01.png" x:Name="imgSprite01" />
</Canvas>
</UserControl>
</UserControl>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="LayoutRoot" Background="Transparent">
<Image Source="images/ALIEN_02_01.png" x:Name="imgSprite01" />
</Canvas>
</UserControl>
</UserControl>
4)MainPage.xaml
<UserControl x:Class="SilverlightInvaders2D.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="1366" Height="768"
xmlns:SilverlightInvaders2D="clr-namespace:SilverlightInvaders2D">
<Canvas x:Name="LayoutRoot" Background="White">
<!-- A button to start moving the sprites -->
<Button x:Name="btnStartGame"
Content="Start the game!"
Canvas.Left="200" Canvas.Top="20"
Width="200" Height="30" Click="btnStartGame_Click">
</Button>
<!-- 显示图片控件 -->
<SilverlightInvaders2D:GreenAlien x:Name="ucGreenAlien1" Canvas.Left="50" Canvas.Top="10"/>
<SilverlightInvaders2D:BlueAlien x:Name="ucBlueAlien1" Canvas.Left="50" Canvas.Top="70"/>
<SilverlightInvaders2D:BlueAlien x:Name="ucBlueAlien2" Canvas.Left="50" Canvas.Top="130"/>
<SilverlightInvaders2D:RedAlien x:Name="ucRedAlien1" Canvas.Left="50" Canvas.Top="190"/>
<SilverlightInvaders2D:RedAlien x:Name="ucRedAlien2" Canvas.Left="50" Canvas.Top="250"/>
</Canvas>
</UserControl>
</UserControl>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="1366" Height="768"
xmlns:SilverlightInvaders2D="clr-namespace:SilverlightInvaders2D">
<Canvas x:Name="LayoutRoot" Background="White">
<!-- A button to start moving the sprites -->
<Button x:Name="btnStartGame"
Content="Start the game!"
Canvas.Left="200" Canvas.Top="20"
Width="200" Height="30" Click="btnStartGame_Click">
</Button>
<!-- 显示图片控件 -->
<SilverlightInvaders2D:GreenAlien x:Name="ucGreenAlien1" Canvas.Left="50" Canvas.Top="10"/>
<SilverlightInvaders2D:BlueAlien x:Name="ucBlueAlien1" Canvas.Left="50" Canvas.Top="70"/>
<SilverlightInvaders2D:BlueAlien x:Name="ucBlueAlien2" Canvas.Left="50" Canvas.Top="130"/>
<SilverlightInvaders2D:RedAlien x:Name="ucRedAlien1" Canvas.Left="50" Canvas.Top="190"/>
<SilverlightInvaders2D:RedAlien x:Name="ucRedAlien2" Canvas.Left="50" Canvas.Top="250"/>
</Canvas>
</UserControl>
</UserControl>
效果图
在此页面中加入如下代码
// 管理绿色精灵坐标
private Point _GreenAlien1Location = new Point(0, 0);
// 管理绿色精灵的速度
private Point _GreenAlien1Speed = new Point(250, 0);
// 添加上面左边拐角处的动画
private Point _UpperLeftCorner = new Point(0, 0);
//下面右边拐角处的动画
private Point _BottomRightCorner = new Point(0, 0);
// 精灵所在行的高度
private double _RowHeight = 60;
// 管理渲染帧完成的时间
private DateTime _LastTick;
</UserControl>
private Point _GreenAlien1Location = new Point(0, 0);
// 管理绿色精灵的速度
private Point _GreenAlien1Speed = new Point(250, 0);
// 添加上面左边拐角处的动画
private Point _UpperLeftCorner = new Point(0, 0);
//下面右边拐角处的动画
private Point _BottomRightCorner = new Point(0, 0);
// 精灵所在行的高度
private double _RowHeight = 60;
// 管理渲染帧完成的时间
private DateTime _LastTick;
</UserControl>
加入如下代码来更新精灵所在位置，渲染帧
private void RenderFrame(object sender, EventArgs e)
{
// 精灵在屏幕中移动的时间
TimeSpan ElapsedTime = (DateTime.Now - _LastTick);
// 更新精灵在X轴的坐标
_GreenAlien1Location.X += _GreenAlien1Speed.X * (double)ElapsedTime.TotalSeconds;
// 更新精灵在Y轴的坐标
_GreenAlien1Location.Y += _GreenAlien1Speed.Y * (double)ElapsedTime.TotalSeconds;
if (_GreenAlien1Location.X > _BottomRightCorner.X)
{
// Right bound reached, invert direction
_GreenAlien1Speed.X *= -1;
_GreenAlien1Location.X = _BottomRightCorner.X;
// Advance one row
_GreenAlien1Location.Y += _RowHeight;
}
else if (_GreenAlien1Location.X < _UpperLeftCorner.X)
{
// Left bound reached, invert direction
_GreenAlien1Speed.X *= -1;
_GreenAlien1Location.X = _UpperLeftCorner.X;
// Advance one row
_GreenAlien1Location.Y += _RowHeight;
}
// 指定记录的新坐标
ucGreenAlien1.SetValue(Canvas.LeftProperty, _GreenAlien1Location.X);
ucGreenAlien1.SetValue(Canvas.TopProperty, _GreenAlien1Location.Y);
// 保存当前时间
_LastTick = DateTime.Now;
}
</UserControl>
{
// 精灵在屏幕中移动的时间
TimeSpan ElapsedTime = (DateTime.Now - _LastTick);
// 更新精灵在X轴的坐标
_GreenAlien1Location.X += _GreenAlien1Speed.X * (double)ElapsedTime.TotalSeconds;
// 更新精灵在Y轴的坐标
_GreenAlien1Location.Y += _GreenAlien1Speed.Y * (double)ElapsedTime.TotalSeconds;
if (_GreenAlien1Location.X > _BottomRightCorner.X)
{
// Right bound reached, invert direction
_GreenAlien1Speed.X *= -1;
_GreenAlien1Location.X = _BottomRightCorner.X;
// Advance one row
_GreenAlien1Location.Y += _RowHeight;
}
else if (_GreenAlien1Location.X < _UpperLeftCorner.X)
{
// Left bound reached, invert direction
_GreenAlien1Speed.X *= -1;
_GreenAlien1Location.X = _UpperLeftCorner.X;
// Advance one row
_GreenAlien1Location.Y += _RowHeight;
}
// 指定记录的新坐标
ucGreenAlien1.SetValue(Canvas.LeftProperty, _GreenAlien1Location.X);
ucGreenAlien1.SetValue(Canvas.TopProperty, _GreenAlien1Location.Y);
// 保存当前时间
_LastTick = DateTime.Now;
}
</UserControl>
最后加入下面代码来启动动画
private void btnStartGame_Click(object sender, RoutedEventArgs e)
{
// 隐藏按钮
btnStartGame.Visibility = Visibility.Collapsed;
// 保存绿色精灵当前所在坐标
_GreenAlien1Location = new Point((double)ucGreenAlien1.GetValue(Canvas.LeftProperty),
(double)ucGreenAlien1.GetValue(Canvas.TopProperty));
// 定义当精灵经过拐角处时的动画
_UpperLeftCorner = new Point(_GreenAlien1Location.X, _GreenAlien1Location.Y);
_BottomRightCorner = new Point(LayoutRoot.ActualWidth - ucGreenAlien1.imgSprite01.ActualWidth,
LayoutRoot.ActualHeight - ucGreenAlien1.imgSprite01.ActualHeight);
_LastTick = DateTime.Now;
// 注册RenderFrame事件处理
CompositionTarget.Rendering += RenderFrame;
}
{
// 隐藏按钮
btnStartGame.Visibility = Visibility.Collapsed;
// 保存绿色精灵当前所在坐标
_GreenAlien1Location = new Point((double)ucGreenAlien1.GetValue(Canvas.LeftProperty),
(double)ucGreenAlien1.GetValue(Canvas.TopProperty));
// 定义当精灵经过拐角处时的动画
_UpperLeftCorner = new Point(_GreenAlien1Location.X, _GreenAlien1Location.Y);
_BottomRightCorner = new Point(LayoutRoot.ActualWidth - ucGreenAlien1.imgSprite01.ActualWidth,
LayoutRoot.ActualHeight - ucGreenAlien1.imgSprite01.ActualHeight);
_LastTick = DateTime.Now;
// 注册RenderFrame事件处理
CompositionTarget.Rendering += RenderFrame;
}
相关阅读 更多 +
