【问题标题】:SpriteKit - Moving object in a semi circle archSpriteKit - 在半圆形拱门中移动物体
【发布时间】:2015-02-22 08:47:42
【问题描述】:

我对精灵套件比较陌生。我想要达到的目标;

  1. 我有一个放置在屏幕中间的对象
  2. 点击屏幕左侧时,我希望对象以拱形方式向左弯曲。如果您想象对象位于钟面上的 12 点,按左键将使其动画到 9 点钟。
  3. 点击右时,我希望对象移动到 3 点钟方向。
  4. 但是,如果对象已拱到 9 到 12(10 或 11)之间的位置,并且我按右,则它需要穿过路径。
  5. 总之,我想要一条跨越 9 点到 3 点之间的路径。当用户向左或向右点击时,对象将沿着路径移动,直到用户松开按钮(屏幕左侧或右侧)

如果我可以提供任何其他信息来帮助更清楚地说明这一点,请告诉我。

一如既往,非常感谢任何回复:)

【问题讨论】:

    标签: ios objective-c animation path sprite-kit


    【解决方案1】:

    好的,所以有一个很酷的小 SKAction(我相信你对那个类很熟悉)它允许 SKSpriteNode 遵循路径:

    SKAction *move = [SKAction followPath:/*aPath*/ duration:1];
    [myNode runAction:action];
    // There's also a followPath:withSpeed: method which may be more suitable for you
    

    您需要的只是路径本身,为此您可以使用UIBezierPathUIBezierPath 是一个objective-c 类,它允许您定义路径,然后可以在drawRect: 方法中的视图上绘制。它们也可以转换为CGPathRefs,然后可以跟一个节点。

    所有圆弧都是圆的一部分,并且有一个UIBezierPath 的方法旨在定义圆弧:arcWithCenter:radius:startAngle:endAngle:clockwise:

    所以...假设您的节点位于 200,200 矩形中的 100,200 点)(即在 x 的中心但在 y 的顶部)。您希望此节点遵循从它所在的位置到点 0,100 的弧:

    基本上你在这里所做的是将节点移动四分之一圆,如下所示:

    在这种情况下,圆的半径为 100,0 度位于 3 点钟方向。另外值得注意的是,对于UIBezierPath,角度是以弧度而不是度数来衡量的。要将度数转换为弧度,您可以使用这个简单的公式:float radian = degree * M_PI / 180.0f; 其中M_PI 是 pi。

    因此,要创建从点 100,200 到 0,100 的路径并将其应用于 SKAction,您可以这样做:

    UIBezierPath *path = [UIBezierPath pathWithArcCenter:CGPointMake(100,100), radius:100 startAngle:90.0f * M_PI / 180.0f endAngle:180.0f * M_PI / 180.0f clockwise:NO];
    SKAction *moveInArc = [SKAction followPath:path.CGPath duration:1];
    

    就移动到弧中的不同位置而言,您可以将SKActionNSDictionary 之类的键相关联,然后在它们完成之前将其删除,从而终止操作。

    对于点击时的电弧,您需要覆盖touchesBegan:withEvent:

    希望这能让您走上正确的道路。 (双关语……)

    编辑:

    好的,所以上面的代码定义了一个像圆的切片一样绘制的路径,就像饼图的切片一样,但是,您可以使用UIBezierPath 方法

    - (void)addCurveToPoint:(CGPoint)endPoint
              controlPoint1:(CGPoint)controlPoint1
              controlPoint2:(CGPoint)controlPoint2
    

    - (void)addQuadCurveToPoint:(CGPoint)endPoint
                   controlPoint:(CGPoint)controlPoint
    

    后者可能最适合您。 Here is a link to the docs.

    您的代码将如下所示:

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:node.positon];
    [path addQuadCurveToPoint:destination controlPoint:control];
    
    SKAction *move = [SKAction followPath:path.CGPath duration:1];
    [node runAction:move];
    

    要计算控制点,您可以进行实验,直到获得所需的效果(可能是一个直角三角形,其中从节点到目的地的线是斜边,控制点是直角点),或者here是对二次曲线的简要说明。

    【讨论】:

    • 感谢拉斯如此详细的回复!我会试一试。我有一个简短的阅读,逆运动学也可能有用。你对此有什么想法吗?
    • 我恐怕无法帮助您解决逆运动学问题,尽管从阅读中我认为这个相对简单的任务可能有点多。
    • 如果它就像一个时钟指针,你的动画一端保持不变,只有另一端移动,那么你需要旋转而不是弧线。
    • 好的,所以我给出的代码绘制了一条路径,该路径定义为圆形的一部分,就像一个饼图。您可以尝试UIBezierPath 方法addCurveToPoint:controlPoint1:controlPoint2:,它应该只添加一行。我会更新我的答案。
    • 没问题。有时需要一段时间才能正确。
    猜你喜欢
    • 1970-01-01
    • 2014-12-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-09
    • 2023-03-15
    相关资源
    最近更新 更多