SpriteKit - 运动物体在一个半圆拱 [英] SpriteKit - Moving object in a semi circle arch

问题描述

我是比较新的精灵套件。我想实现;

I'm relatively new to sprite kit. What I would like to achieve;

1. 我有被放置在屏幕中间对象


2. 当点击屏幕的左侧，我想在一个拱形的方式将对象曲线左移。如果你想象中的对象上的钟面坐在12，左pressing将使动画播放到9点了。


3. 当攻吧，我想物体移动到3点钟。


4. 然而，如果该对象已被拱到9和12（10或11）之间的位置，我preSS正确的，它需要整个道路。


5. 在总结，我想跨越时钟9和3 O之间的路径。当用户抽头左或右，对象将直到用户放开按钮（左或屏幕的右侧）
沿着路径移动

1. I have an object that's placed in the middle of the screen
2. When tapping the left side of the screen I would like the object to curve to the left in an arch fashion. If you imagine the object sitting at 12 on a clock face, pressing left will make it animate over to 9 o'clock.
3. When tapping right, I would like the object to move to 3 o'clock.
4. However, if the object has been arched over to a position between 9 and 12 (10 or 11), and I press right, it'll need to move across the path.
5. In summary, I would like a path that spans between 9 and 3 o clock. When the user taps left or right, the object will move along the path until the user lets go of the button (left or right side of the screen)

如果有我可以提供使其更清楚的其他信息，请让我知道。

If there's any additional information I can provide to help make this clearer, please let me know.

与往常一样，超级感谢任何反应：）

As always, super grateful for any responses :)

推荐答案

行，所以有一个很酷的小 SKAction （我敢肯定你熟悉的那个类）它允许<$ C C> SKSpriteNode 来遵循的路径：

OK so there's a cool little SKAction (I'm sure you're familiar with that class) which allows a SKSpriteNode to follow a path:

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

所有你需要的是这种路径本身，为此，你可以使用 UIBezierPath 。 UIBezierPath 是Objective-C类，允许您使用然后可以在 drawRect中的视图绘制定义路径：方法。它们也可以被转化为 CGPathRef 取值然后可以后跟一个节点。

All you need for this is the path itself and for this you can use UIBezierPath. UIBezierPath is the objective-c class that allows you to define paths with can then be drawn on a view in the drawRect: method. They also can be converted to CGPathRefs which can then be followed by a node.

所有的弧线是圆的一部分，并有 UIBezierPath 的方法，用来定义弧： arcWithCenter：半径：由startAngle： endAngle：顺时针方向：

All an arc is is a part of a circle, and there's a method of UIBezierPath designed to define arcs: arcWithCenter:radius:startAngle:endAngle:clockwise:.

所以......让我们假设你的节点是在点100,200在200,200一个矩形）（即右的x的中心，但在Y的顶部）。你想这个节点遵循从那里来点0,100弧：

So... lets assume that your node is at point 100,200 in a rect of 200,200 )(i.e. right in the centre of the x but at the top of the y). You want this node to follow an arc from where it is to point 0,100:

实际上你这里做的是移动节点看起来像这样一个1/4圆：

Essentially what you are doing here is moving the node a quarter of a circle that looks like this:

在这种情况下，圆具有100和0度的半径在3点钟被发现。另外值得注意的是，对于一个 UIBezierPath 角弧度不度进行测量。要转换度弧度你可以使用这个简单的公式：浮动弧度=度* M_PI / 180.0f; ，其中 M_PI 是圆周率。

In this case the circle has a radius of 100 and 0 degrees is found at 3 o'clock. Also it is worth noting that for a UIBezierPath angles are measured in radians not degrees. To convert a degree to radians you can use this simple formula: float radian = degree * M_PI / 180.0f; where M_PI is pi.

因此​​，创建从100,200点的路径，以0,100并将其应用到 SKAction 你可以这样做：

Therefore to create a path from point 100,200 to 0,100 and apply it to an SKAction you can do this:

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];

在移动到不同的位置中旬弧线，可以关联 SKAction 像一个键的NSDictionary 然后条款是完整而终止行动之前，他们将其删除。

In terms of moving to different positions mid arc, you can associate SKAction with keys like an NSDictionary and then remove them before they're complete which terminates the action.

有关电弧时拍了拍你需要重写的touchesBegan：withEvent：方法。

For arcing when tapped you need to override touchesBegan:withEvent:.

希望这可以让你开始在正确的道路上。 （双关语意...）

Hope this gets you started on the right path. (Pun intended...)

编辑：

OK所以上述code定义绘制喜欢像一个饼图的切片圆切片的路径，但是，你可以使用 UIBezierPath 方法

OK so the above code defines a path that draws like a slice of the circle like a slice of a pie chart, however, you can use the UIBezierPath method

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

或

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

后者可能是最适合您。 下面是该文档的链接。

您code会是这个样子：

Your code would then look something like this:

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:node.positon];
[path addQuadCurveToPoint:destination controlPoint:control];

SKAction *move = [SKAction followPath:path.CGPath duration:1];
[node runAction:move];

要计算控制点，你可能只是实验，直到你得到想要的效果（可能是一个直角三角形，其中从节点到目的的线是斜边与控制点与直角点）或此处 是二次曲线的简短说明。

To calculate the control point, you could just experiment until you get the desired effect (perhaps a right angle triangle where the line from the node to the destination is the hypotenuse and the control point is the point with the right angle), or here is a brief explanation of quadratic curves.

这篇关于SpriteKit - 运动物体在一个半圆拱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！