Silverlight 手鼓达人(仿太鼓达人) 游戏开发记录(三) 附音乐版演示Demo

标题: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的属性和方法。
所有你可以发挥你的想象！添加一些可操作的属性：
我目前包含：默认颜色，切换时颜色，切换鼓变换颜色的方法，等等。上代码：

 /// <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中 体验一下自己录制的节奏，来爽一下，目前节奏延迟忘记减去了。