Silverlight 游戏开发：简单的技能条系统

上篇写了有关可复用拖拽的基本控件，它的应用范畴非常广泛，与之配套的就是诸如包裹、工具栏、技能条等等可以进入的目标，然而Silverlight提供的拖拽只是对于一些特定的容器有效，而且要符合麻烦的规则，可延展性在游戏应用中非常有限，比如拖拽技能图标的时候，是跟着鼠标一起走，而今天我将使用一个有趣的方式完成简单的技能条系统。

本篇代码是上篇的延展，并且涉及有关知识：Silverlight 游戏开发：可重用的拖拽控件

翻阅过很多资料，Silverlight中这类可以放入拖拽物体的做法，都是使用DragEnter和DragLeave这类的事件处理，深蓝色右手的包裹系统也是基于此类做法完成，而我在开发《窝窝世界》的时候，考虑不增加程序的大小，而没有附加ToolKit（Toolkit里有WarpPanel这类做包裹较好的控件），那么就意味着必须通过其他的方式来实现拖拽Object进入目标，我使用的方法虽然暴力但是却行之有效，使用的是VisualTreeHelper.FindElementsInHostCoordinates，在一个点或区域查找符合条件的控件集合，就是通过它可以取得技能条之类的容器，因为Mouse的Down、Move、Up事件都可以取得鼠标的坐标点，所以取得这个点上是否有容器完全可行。

现在简单的建立一个MyPack的控件：

上面是用Blend画的一个前台，下面是XAML的代码：

< UserControl
     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"
    x:Class ="DragObject.MyPack"
    d:DesignWidth ="640"  d:DesignHeight ="480"  Height ="64" >

     < StackPanel  x:Name ="LayoutRoot"  Orientation ="Horizontal" >
         < StackPanel.Background >
             < LinearGradientBrush  EndPoint ="0.5,1"  StartPoint ="0.5,0" >
                 < GradientStop  Color ="#FF00B667"  Offset ="0" />
                 < GradientStop  Color ="#FF00FF61"  Offset ="1" />
             </ LinearGradientBrush >
         </ StackPanel.Background >
         < TextBlock  x:Name ="textBlockType"  TextWrapping ="Wrap"  Margin ="5,0,0,0"  Width ="74"  FontSize ="12"  HorizontalAlignment ="Center"  VerticalAlignment ="Center"  TextAlignment ="Center" >< Run  Text ="只放图标" /></ TextBlock >
         < Rectangle  Fill ="#FFF4F4F5"  Stroke ="Black"  Width ="3" />
     </ StackPanel >
</ UserControl >

下面是后台.cs代码：

public   partial   class  MyPack : UserControl
{
     public  MyPack()
    {
        InitializeComponent();
    }
     public   void  AddObj(UIElement uielement)
    {
        LayoutRoot.Children.Add(uielement);
    }
     public   void  ClearIcon()
    {
         for  ( int  i  =  LayoutRoot.Children.Count  -   1 ; i  >   1 ; i -- )
        {
            LayoutRoot.Children.RemoveAt(i);
        }
    }
}

 

实现的功能比较明了，一个是添加，一个是清理，而清理则是倒序，为了把第1个和第2个留下，如果你有其他的逻辑，可以自行添加，比如数量之类的。

下面就是写拖拽的逻辑，本篇这个程序中，只有MyIcon的控件可以拖入技能条里，而其他的Face、Card都不行，因此，将代码写在MyIcon中，重建对应的功能操作：

bool  isLocked  =   false ;
protected   override   void  OnMouseLeftButtonUp(MouseButtonEventArgs e)
{
     base .OnMouseLeftButtonUp(e);            
            
    var findlist  =  VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition( null ),  this .Parent  as  FrameworkElement);
     foreach  (var item  in  findlist)
    {
         if  (item  is  MyPack)
        {
            ( this .Parent  as  Panel).Children.Remove( this );
            (item  as  MyPack).AddObj( this );
            isLocked  =   true ;
             break ;
        }
    }            
}
protected   override   void  OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
     if  (isLocked)
         return ;
     base .OnMouseLeftButtonDown(e);
}

 

isLocked是标识是否进入了技能条，如果进入了就不能再拖动，findlist是通过FindElementsInHostCoordinates找到的控件即可，在遍历的时候判断是否为MyPack类，如果有的话，那就说明可以放入，当然了这一切都是在鼠标按键抬起的时候判定，放入后isLocked开启。

后面可以依照自己的需要进行改造，比如做类型判断和其他的功能开发，比如说下面呢，为了增加趣味，我扩展了MyIcon的类，通过一个继承类增加了图标切换动画，这个类名叫MyIcon2

public   class  MyIcon2 :MyIcon
{
     public  MyIcon2()
    {
        DispatcherTimer selfLoop  =   new  DispatcherTimer();
        selfLoop.Interval  =  TimeSpan.FromMilliseconds( 300 );
        selfLoop.Tick  +=   new  EventHandler(selfLoop_Tick);
        selfLoop.Start();
    }

     int  iframe  =   1 ;
     void  selfLoop_Tick( object  sender, EventArgs e)
    {
         base .IconIndex  =  iframe;
        iframe  +=   1 ;
         if  (iframe  >   10 )
            iframe  =   1 ;
    }
}

 

很简单，在构造函数中创建了一个计时器DispatcherTimer ，起名为selfLoop(自身循环)，在循环Tick事件中加入了索引变更，这样就会出现一个切换动画。

好了，在MainPage里写一些逻辑，或者直接在Blend里面绘制，在这里我就不再做代码讲述，可以直接看最终的效果以及下载代码研究，在左上角加入一个重来的按钮，功能为清理条中的ICON，并随机生成5个在界面上：

本篇工程源代码下载地址如下：点击直接下载

本篇文章的作者：Nowpaper

推荐Silverlight游戏开发博客：深蓝色右手