如何使 Sprite 遵循贝塞尔曲线 [英] how to make Sprite follow bezier curve

问题描述

我对objective-c 和sprite kit 还很陌生，但我已经做了一段时间的游戏开发.我目前正在开发一个 2d 游戏，我的敌舰在屏幕上从右向左移动.我一直在关注我的游戏不同部分的教程，然后在必要时添加它.我找到了一个教程，其中游戏中的敌人遵循贝塞尔曲线，我已经设法在我的游戏中实现了这一点，但是由于我是贝塞尔曲线的新手，我并不完全理解它们，并且算法使我的精灵从上到下移动但我需要他们从左到右.

Im fairly new to objective-c and sprite kit but i've done games development for a while. Im currently working on a 2d game and i have enemy ships moving from right to left on the screen. Ive been following tutorials for different parts of my game and then adding to it where necessary. I found a tutorial where the in game enemies follow a bezier path and i've managed to implement this in my game however as i'm new to bezier curves i do not fully understand them and the algorithm makes my sprites move from top to bottom but i need them to go left to right.

我已经包含了用于将贝塞尔曲线添加到我的精灵的代码片段，关于如何让它们从右到左而不是从上到下移动的任何建议.

I have included the code snippet that i have used to add the bezier curve to my sprites any suggestions on how i can have them move right to left instead of top to bottom.

CGMutablePathRef cgpath = CGPathCreateMutable();

        float xStart = [self getRandomNumberBetween:0+asteroid.size.width to:self.frame.size.width-asteroid.size.width];
        float xEnd = [self getRandomNumberBetween:0+asteroid.size.width to:self.frame.size.width-asteroid.size.width];
        float cp1X =[self getRandomNumberBetween:0+asteroid.size.width to:self.frame.size.width-asteroid.size.width];
        float cp1y = [self getRandomNumberBetween:0+asteroid.size.width to:self.frame.size.width-asteroid.size.height];
        float cp2x = [self getRandomNumberBetween:0+asteroid.size.width to:self.frame.size.width-asteroid.size.width];
        float cp2Y = [self getRandomNumberBetween:0 to:cp1y];

        CGPoint s = CGPointMake(xStart, 1024.0);
        CGPoint e = CGPointMake(xEnd, -100);
        CGPoint cp1 = CGPointMake(cp1X, cp1y);
        CGPoint cp2 = CGPointMake(cp2x, cp2Y);
        CGPathMoveToPoint(cgpath, NULL, s.x, s.y);
        CGPathAddCurveToPoint(cgpath, NULL, cp1.x, cp1.y, cp2.x, cp2.y, e.x, e.y);

        SKAction *enemyCurve = [SKAction followPath:cgpath asOffset:NO orientToPath:YES duration:5];

  CGPoint location = CGPointMake(-self.frame.size.width-asteroid.size.width, randY);

        SKAction *moveAction = [SKAction moveTo:location duration:randDuration];
        SKAction *doneAction = [SKAction runBlock:(dispatch_block_t)^(){

            asteroid.hidden = YES;
        }];

        SKAction *moveAsteroidActionWithDone = [SKAction sequence:@[enemyCurve,moveAction, doneAction]];

感谢您的任何帮助和建议.

Thank you for any help and suggestions.

推荐答案

贝塞尔曲线用于在两点之间生成平滑曲线.要从左到右移动路径，请选择左侧的起点并选择右侧的终点.这两个控制点决定了从左到右的路径形状.改变以下代码中的 startpoint 和 endpoint 将控制贝塞尔曲线的起点和终点.改变控制点会改变曲线的形状.您可以通过附加的 GIF 看到这一点.

Bezier curves are used to generate a smooth curve between two points. To move the path from left to right, choose a starting point on the left and choosing an ending point on the right. The two control points determine the shape of the path to take from left to right. Varying the startpoint and endpoint in the following code will control where the bezier curve starts and where it ends. Varying the control points vary the shape of the curve. You can see that with the attached GIF.

CGMutablePathRef cgpath = CGPathCreateMutable();

CGPoint startingPoint = CGPointMake(50, 100);

CGPoint controlPoint1 = CGPointMake(160, 250);
CGPoint controlPoint2 = CGPointMake(200, 140);

CGPoint endingPoint = CGPointMake(303, 100);


CGPathMoveToPoint(cgpath, NULL, startingPoint.x, startingPoint.y);
CGPathAddCurveToPoint(cgpath, NULL, controlPoint1.x, controlPoint1.y,
                      controlPoint2.x, controlPoint2.y,
                      endingPoint.x, endingPoint.y);


SKAction *enemyCurve = [SKAction followPath:cgpath asOffset:NO orientToPath:YES duration:5];

[enemy runAction:[SKAction sequence:@[[SKAction waitForDuration:1],enemyCurve]]];

P0 和 P3 是起点和终点，P1 和 P2 是控制点.

P0 and P3 are the starting and ending points and P1 and P2 are the control points.

查看此页面以了解更多贝塞尔曲线.http://www.jasondavies.com/animated-bezier/

Check out this page to play more with bezier curves. http://www.jasondavies.com/animated-bezier/

这篇关于如何使 Sprite 遵循贝塞尔曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！