[Silverlight动画]转向行为 - 路径跟随

2018-01-16 12:00:45 浏览数 (1)

路径跟随这名字一听就知道要干嘛了:机车会沿着一个预定的路线行驶。虽然在地图或者游戏中,路径是以图形的形式被表示的,而在转向行为中,其不过是一系列航点。 其策略真是简单到不行。只要从第一个航点开始挨个寻找下去即可。

代码语言:javascript复制
        private int _pathIndex = 0;
        private double _pathThreshold = 20;
        public void followPath(List<Vector2D> path,bool loop) {
            if (path.Count==0)
            {
                return;
            }
            Vector2D wayPoint = path[_pathIndex];
            if (wayPoint==null)
            {
                return;
            }
            if (_postion.dist(wayPoint)<_pathThreshold)
            {
                if (_pathIndex>=path.Count-1)
                {
                    if (loop)
                    {
                        _pathIndex = 0;
                    }

                }
                else
                {
                    _pathIndex  ;
                }
            }
            if (_pathIndex>=path.Count-1&&!loop)
            {
                arrive(wayPoint);
            }
            else
            {
                seek(wayPoint);
            }
        }

路径索引(pathIndex)相当于是数组索引,用于指向下一个航点。路径阈值(pathThreshold)相当于航点间距。

首先是取得当前航点,如果航点不是一个有效2D向量,就返回,这么作就是说,即使传递一个空数组也不会报错。接着是判断,到航点间的距离是否足以切换到下一个航点,然后根据循环再判断最后一个航点索引是否归零。写起来是很啰嗦,实际上画出航点后,按部就班的执行以上逻辑,就会发现是很直观的。

有了航点就能移动了,以此调用最后一行的寻找函数已经有了不俗表现,但为了更优美一点,假设是最后一个航点又不要循环的话,采用到达行为可以使机车慢慢的靠近终点,而不会在终点左右摇摆。

测试:

代码语言:javascript复制
<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"
    xmlns:local="clr-namespace:Steer" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="Steer.PathTest"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    
    <Grid x:Name="LayoutRoot" Background="White">

    	<local:SteeredVehicle x:Name="myTarget" HorizontalAlignment="Left" Height="40" VerticalAlignment="Top" Width="40" RenderTransformOrigin="0.5,0.5">
    		<ed:RegularPolygon Fill="#FFFD00FF" Height="40" InnerRadius="1" PointCount="5" Stretch="Fill" Stroke="Black" StrokeThickness="0" UseLayoutRounding="False" Width="40"/>
    	</local:SteeredVehicle>

    </Grid>
</UserControl>
代码语言:javascript复制
    public partial class PathTest : UserControl
    {
        private List<Vector2D> _path;
        
        public PathTest()
        {
            InitializeComponent();
            Loaded  = new RoutedEventHandler(PathTest_Loaded);
        }

        void PathTest_Loaded(object sender, RoutedEventArgs e)
        {
            _path = new List<Vector2D>();
            LayoutRoot.MouseLeftButtonUp  = new MouseButtonEventHandler(LayoutRoot_MouseLeftButtonUp);
            CompositionTarget.Rendering  = new EventHandler(CompositionTarget_Rendering);
        }

        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            myTarget.followPath(_path, true);
            myTarget.update();
        }

        void LayoutRoot_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            _path.Add(new Vector2D(e.GetPosition(null).X, e.GetPosition(null).Y));
        }
    }

0 人点赞