| 标题:Silverlight 音乐游戏 手鼓达人 游戏开发(三) 附音乐版Demo |
一：序言（废话少说）：
Silverlight 音乐游戏 手鼓达人 游戏 开发(二) 演示DEMO(无声的)
Silverlight 手鼓达人演示DEMO 【记住开音响】(有声的)欢迎体验，有BUG，嘿嘿
发布！有段时间了！
主要写了和发了一些想法和简单的预览版DEMO！本次开始写开发过程！希望能再一次留住开发的过程经历的记忆！
在写本章节的时候游戏完成度为75%左右！最近没有太多的时间花在这个上面！
从本章节开始，会加入相关开发代码和截图。（排版是不是好看！请原谅）
二：目录列表
1.建立手鼓达人项目，并添加相应文件夹（本来想练习一下MVVM的个人不太喜欢MVVM，没听过所谓的SL美工）。
2.使用Blend制作一面普通可切换颜色的鼓，并转换为控件。
3.给鼓添加一些属性和事件，让他可以被敲击。
4.分析并建立一些相关的信息辅助类。
| 建立手鼓达人项目，并添加相应文件夹 |
1.建立 Silverlight 4.0 项目，并命名为TabourMaster （当然这个无所谓）
我目前已经完成项目的截图。
| 使用Blend制作一面普通可切换颜色的鼓，并转换为控件。 |
2.使用路径制作外环特殊形状。
2-1 打开Blend 在刚刚新建的项目中，建立一个UserControl ，首先画2个园，如图：
2-2 选中这2个园，右键->合并>相斥 (注意：选中外圈圆执行操作),如图:
合并后，就会形成如下一个环状圆，但是不是我们要的效果
2-3 我们要的是1/2的环状圆，各一个。很简单，再画一个和该圆宽度一样的正方形
2-4选中这2个园，右键->合并>相减 (注意：选中环形圆执行操作),如图:
执行后截结果图:
2-5 然后在复制一份这个环状圆，改变旋转角度180度，后形成如下结果图：
3.使用路径制作内环半圆2个，操作基本和上面操作一样，直接上截图:
最终形成的结果图如下所示：
现在我贴出XAML形成的代码.
<Grid x:Name="LayoutRoot">
<Path Data="M72.5,0.5 L72.5,15.500001 L71.464279,15.513106 C39.313091,16.327663 13.5,42.646183 13.499999,74.993675 C13.5,107.34116 39.313091,133.65968 71.464279,134.47423 L72.5,134.48734 L72.5,149.48734 L71.077126,149.46933 C30.820591,148.44943 -1.5,115.49599 -1.5,74.993675 C-1.5,34.491356 30.820591,1.5379126 71.077126,0.51800513 z" Fill="#FF9898F5" Margin="246,164.006,319,166.006" Stretch="Fill" Stroke="Black" UseLayoutRounding="False"/>
<Path Data="M76.5,0.5 L76.5,15.500001 L75.464279,15.513106 C43.313091,16.327663 17.5,42.646183 17.5,74.993675 C17.5,107.34116 43.313091,133.65968 75.464279,134.47423 L76.5,134.48734 L76.5,149.48734 L75.077126,149.46933 C34.820591,148.44943 2.5,115.49599 2.5,74.993675 C2.5,34.491356 34.820591,1.5379126 75.077126,0.51800513 z" Fill="#FF9898F5" Margin="0,164.006,244,166.006" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Right" Width="75">
<Path.RenderTransform>
<CompositeTransform Rotation="180"/>
</Path.RenderTransform>
</Path>
<Path Data="M0.5,0.5 L0.50991058,0.50012541 C32.120743,1.3009924 57.5,27.177185 57.5,58.981018 C57.5,90.784851 32.120743,116.66104 0.50991058,117.46191 L0.5,117.46204 z" Fill="#FFC8ED94" Margin="0,180.019,261,182.019" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" HorizontalAlignment="Right" Width="58"/>
<Path Data="M0.5,0.5 L0.50991058,0.50012541 C32.120743,1.3009924 57.5,27.177185 57.5,58.981018 C57.5,90.784851 32.120743,116.66104 0.50991058,117.46191 L0.5,117.46204 z" Fill="#FFC8ED94" Margin="263,180.019,319,182.019" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform Rotation="180"/>
</Path.RenderTransform>
</Path>
</Grid>
最后！我们选中这4个路径，右键-》构成UserControl，大功告成50%
| 给鼓添加一些属性和事件，让他可以被敲击。 |
分析：既然这4个Path以及构成了一个控件，但是目前还未对外公开任何可操作这几个Path的属性和方法。
所有你可以发挥你的想象！添加一些可操作的属性：
我目前包含：默认颜色，切换时颜色，切换鼓变换颜色的方法，等等。上代码：
View Code
/// <summary>
/// 鼓面
/// </summary>
public partial class Drumhead : UserControl
{
public Drumhead()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(Drumhead_Loaded);
}
void Drumhead_Loaded(object sender, RoutedEventArgs e)
{
LoadBaseInfo();
}
private bool isEnableSound = true;
private float soundSize = 0.5f;
/// <summary>
/// 敲击鼓声音大小
/// </summary>
public float SoundSize
{
get { return soundSize; }
set { soundSize = value; }
}
/// <summary>
/// 是否启用音乐播放
/// </summary>
public bool IsEnableSound
{
get { return isEnableSound; }
set { isEnableSound = value; }
}
#region 公共事件
/// <summary>
/// 敲击鼓后激发的事件
/// </summary>
public event Action<Drumhead, DrumKnockArgs> Knocked;
#endregion
private static SolidColorBrush defaultKnockSideBrush = new SolidColorBrush(Colors.Blue);
private static SolidColorBrush defaultKnockFaceBrush = new SolidColorBrush(Colors.Orange);
#region 公共属性
/// <summary>
/// 设置或获取敲击鼓侧显示的颜色
/// </summary>
public SolidColorBrush DefaultBorderBrush
{
get { return defaultKnockSideBrush; }
set { defaultKnockSideBrush = value; }
}
/// <summary>
/// 设置或获取敲击鼓正显示的颜色
/// </summary>
public SolidColorBrush DefaultFaceBrush
{
get { return defaultKnockFaceBrush; }
set { defaultKnockFaceBrush = value; }
}
/// <summary>
/// 左侧面
/// </summary>
[Description("获取左侧面鼓的对象引用")]
public Path LeftSide
{
get { return leftSide; }
}
/// <summary>
/// 右侧面
/// </summary>
[Description("获取右侧面鼓的对象引用")]
public Path RightSide
{
get { return rightSide; }
}
/// <summary>
/// 左正面
/// </summary>
[Description("获取左正面鼓的对象引用")]
public Path LeftFace
{
get { return leftDrum; }
}
/// <summary>
/// 右正面
/// </summary>
[Description("获取右正面鼓的对象引用")]
public Path RightFace
{
get { return rightDrum; }
}
#endregion
#region 私有方法
//鼓初始颜色
private Brush saveSideInnerBrush;
private Brush saveFaceInnerBrush;
private Brush saveSideStrokeBrush;
private Brush saveFaceStrokeBrush;
/// <summary>
/// 加载一些初始的属性
/// </summary>
private void LoadBaseInfo()
{
//颜色
saveSideInnerBrush = leftSide.Fill;
saveFaceInnerBrush = leftDrum.Fill;
saveSideStrokeBrush = leftSide.Stroke;
saveFaceStrokeBrush = leftDrum.Stroke;
}
/// <summary>
/// 播放动画
/// </summary>
private void PlayLeftSide()
{
SoundPlay(mekas, 2);
leftSide.Fill = defaultKnockSideBrush;
leftSide.StrokeThickness = 2;
}
private void RelaseLeftSide()
{
leftSide.Fill = saveSideInnerBrush;
leftSide.StrokeThickness = 1;
}
/// <summary>
/// 播放动画
/// </summary>
private void PlayRightSide()
{
SoundPlay(mekas, 2);
rightSide.Fill = defaultKnockSideBrush;
rightSide.StrokeThickness = 2;
}
/// <summary>
/// 播放动画
/// </summary>
private void RelaseRightSide()
{
rightSide.Fill = saveSideInnerBrush;
rightSide.StrokeThickness = 1;
}
/// <summary>
/// 播放动画
/// </summary>
private void PlayLeftFace()
{
SoundPlay(medongs, 1);
leftDrum.Fill = defaultKnockFaceBrush;
leftDrum.StrokeThickness = 2;
}
private void RelaseLeftFace()
{
leftDrum.Fill = saveFaceInnerBrush;
leftDrum.StrokeThickness = 1;
}
/// <summary>
/// 播放动画
/// </summary>
private void PlayRightFace()
{
SoundPlay(medongs, 1);
rightDrum.Fill = defaultKnockFaceBrush;
rightDrum.StrokeThickness = 2;
}
private void RelaseRightFace()
{
rightDrum.Fill = saveFaceInnerBrush;
rightDrum.StrokeThickness = 1;
}
#endregion
#region 公共方法
/// <summary>
/// 敲击鼓
/// </summary>
/// <param name="dt"></param>
/// <param name="iterate"></param>
public void KnockPlay(DrumType dt)
{
switch (dt)
{
case DrumType.LeftFace:
PlayLeftFace();
break;
case DrumType.RightFace:
PlayRightFace();
break;
case DrumType.LeftSide:
PlayLeftSide();
break;
case DrumType.RightSide:
PlayRightSide();
break;
case DrumType.FaceAll:
PlayLeftFace();
PlayRightFace();
break;
case DrumType.SideAll:
PlayLeftSide();
PlayRightSide();
break;
}
}
/// <summary>
/// 抬起敲下的鼓
/// </summary>
/// <param name="dt"></param>
/// <param name="iterate"></param>
public void RelaseKnockPlay(DrumType dt)
{
switch (dt)
{
case DrumType.LeftFace:
RelaseLeftFace();
break;
case DrumType.RightFace:
RelaseRightFace();
break;
case DrumType.LeftSide:
RelaseLeftSide();
break;
case DrumType.RightSide:
RelaseRightSide();
break;
case DrumType.FaceAll:
RelaseLeftFace();
RelaseRightFace();
break;
case DrumType.SideAll:
RelaseLeftSide();
RelaseRightSide();
break;
}
if (Knocked != null)
{
DrumKnockArgs dka = new DrumKnockArgs();
dka.DrumType = dt;
Knocked(this, dka);
}
}
#endregion
现在，该控件有属性，有鼓被敲击时调用的方法。这样其他控件就可以控制并使用它。
当然，我们后续还要给鼓添加声音，这样才像一个鼓啦！。。。。OK！花了一个多小时截图加文字。
悲剧的是写到一半的时候浏览器自动关闭了。欲哭无泪。。。。。。
好咯！今天就到此，这样一个简单而丑陋的鼓诞生，读者可以发挥自己的想象美化。喜欢的后续的支持一个啦。
没事的，打酱油的，可以去 音乐版的DEMO中 体验一下自己录制的节奏，来爽一下，目前节奏延迟忘记减去了。
