SpriteKit 生成随机卷曲线 [英] SpriteKit Generate Random Curl Line

问题描述

我正在做一个项目，我需要完成的是生成随机卷曲线.此时我已经有一条随机生成但不是卷曲的线.我每 0.5 秒在不同的 x 位置生成点，并将这些点与贝塞尔曲线连接起来.一切都完美无缺，只是它不是卷曲.下图显示在 1)我现在如何拥有它和 2)我想如何制作它.任何想法我该怎么做?我正在使用 SpriteKit - 目标 C

解决方案

基本上你需要制作和随机化 A Bézier(参数)曲线是

I am working on a project and what I need to accomplish is to generate random curl line. At this point I have already have a line which is randomly generated but it is not curl. I am spawning points at different x positions on every 0.5 seconds and connect this points with bezier. Everything works perfectly except that it is not curl. On the picture below is shown on 1) How I have it now and on 2) How I suppose to make it. Any ideas how I can do that ? I am using SpriteKit - Objective C

解决方案

Basically what you need to make and randomize a A Bézier (parametric) curve are control points.

After you read that great answer and get familiar with terms, you can try this example (I assume that your scene and view size are set correctly):

GameScene.m

#import "GameScene.h"

@implementation GameScene

-(void)didMoveToView:(SKView *)view {

}

-(NSInteger)randomNumberBetween:(NSInteger)from to:(NSInteger)to {

    return (int)from + arc4random() % (to-from+1);
}


- (CGMutablePathRef)generatePath
{
    CGMutablePathRef path = CGPathCreateMutable();

    CGPoint p0 =  CGPointMake(CGRectGetMidX(self.frame),self.scene.size.height-20.0f); //starting point just little below the upper edge of the screen

    CGPathMoveToPoint(path, nil, p0.x, p0.y);

    CGPoint p1 =
    CGPointMake([self randomNumberBetween:150 to:300], self.scene.size.height- [self randomNumberBetween:150 to:300]);

     CGPoint p2 = CGPointMake([self randomNumberBetween:150 to:300],[self randomNumberBetween:150 to:300]);

    CGPoint p3 = CGPointMake(CGRectGetMidX(self.frame),0 + 20.0f); //ending point, just little above the bottom edge of the screen

    CGFloat v = 0.3;

    CGFloat cp1x = p1.x+v * (p1.x-p0.x);
    CGFloat cp1y = p1.y+v *  (p1.y-p0.y);
    CGFloat cp2x = p2.x-v *  (p3.x-p2.x);
    CGFloat cp2y = p2.y-v *  (p3.y-p2.y);




    CGPathAddCurveToPoint(path,nil,cp1x,cp1y,cp2x,cp2y,p3.x,p3.y);



    /*Debug - not needed*/


    SKSpriteNode *sp0 = [SKSpriteNode spriteNodeWithColor:[SKColor yellowColor] size:CGSizeMake(5.0f,5.0f)];
    sp0.zPosition = 5;
    sp0.position = p0;
    SKLabelNode *lp0 = [SKLabelNode labelNodeWithFontNamed:@"ArialMT"];
    lp0.fontColor = [SKColor whiteColor];
    lp0.fontSize = 20.0f;
    lp0.text = @"p0";
    lp0.position = CGPointMake(0.0f,-20.0f);
    [sp0 addChild:lp0];
    [self addChild:sp0];


    SKSpriteNode *sp1 = [SKSpriteNode spriteNodeWithColor:[SKColor yellowColor] size:CGSizeMake(5.0f,5.0f)];
    sp1.zPosition = 5;
    sp1.position = p1;
    SKLabelNode *lp1 = [SKLabelNode labelNodeWithFontNamed:@"ArialMT"];
    lp1.fontColor = [SKColor whiteColor];
    lp1.fontSize = 20.0f;
    lp1.position = CGPointMake(0.0f,15.0f);
    lp1.text = @"p1";
    [sp1 addChild:lp1];
    [self addChild:sp1];

    SKSpriteNode *sp2 = [SKSpriteNode spriteNodeWithColor:[SKColor yellowColor] size:CGSizeMake(5.0f,5.0f)];
    sp2.zPosition = 5;
    sp2.position = p2;
    SKLabelNode *lp2 = [SKLabelNode labelNodeWithFontNamed:@"ArialMT"];
    lp2.fontColor = [SKColor whiteColor];
    lp2.fontSize = 20.0f;
    lp2.position = CGPointMake(0.0f,15.0f);
    lp2.text = @"p2";
    [sp2 addChild:lp2];
    [self addChild:sp2];


    SKSpriteNode *sp3 = [SKSpriteNode spriteNodeWithColor:[SKColor yellowColor] size:CGSizeMake(5.0f,5.0f)];
    sp3.zPosition = 5;
    sp3.position = p3;
    SKLabelNode *lp3 = [SKLabelNode labelNodeWithFontNamed:@"ArialMT"];
    lp3.fontColor = [SKColor whiteColor];
    lp3.fontSize = 20.0f;
    lp3.position = CGPointMake(0.0f,15.0f);
    lp3.text = @"p3";
    [sp3 addChild:lp3];
    [self addChild:sp3];



    SKShapeNode *p0p1 = [SKShapeNode node];
    p0p1.zPosition = 2;
    CGMutablePathRef path1 = CGPathCreateMutable();
    CGPathMoveToPoint(path1, NULL, p0.x, p0.y);
    CGPathAddLineToPoint(path1, NULL, p1.x, p1.y);
    p0p1.path = path1;
    [p0p1 setStrokeColor:[UIColor greenColor]];
    [self addChild:p0p1];

    SKShapeNode *p2p3 = [SKShapeNode node];
    p2p3.zPosition = 2;
    CGMutablePathRef path2 = CGPathCreateMutable();
    CGPathMoveToPoint(path2, NULL, p2.x, p2.y);
    CGPathAddLineToPoint(path2, NULL, p3.x, p3.y);
    p2p3.path = path2;
    [p2p3 setStrokeColor:[UIColor greenColor]];
    [self addChild:p2p3];

    return path;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    [self removeAllChildren];

    SKShapeNode *yourline = [SKShapeNode node];
    yourline.zPosition = 1;

    yourline.path = [self generatePath];

    [yourline setLineWidth:5];

    [yourline setStrokeColor:[SKColor redColor]];

    [self addChild:yourline];

}

Most of this code is used for visual debugging and its not needed in order to randomize the curve. The important part is the first part of the method generatePath. Here is the result:

这篇关于SpriteKit 生成随机卷曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！