CODEWITHSUNDEEP
objective-csprite-kitskphysicsbody
user2832367
user2832367

Reputation: 381

Is there a way to visually see sprite kit's SKPhysicsbody borderline?

I am using bodyWithPolygonFromPath to define the volume of a physics body, and I used http://dazchong.com/spritekit/ to get the paths required. But the path does not seem correct and I wish to see the borderline of the physics body path to see if the shape is correct.

Is there any way to see the physics body's borderline?

I tried the following code, but it doesn't work.

ship = [SKSpriteNode spriteNodeWithImageNamed:@"Spaceship"];

CGFloat offsetX = ship.frame.size.width * ship.anchorPoint.x;
CGFloat offsetY = ship.frame.size.height * ship.anchorPoint.y;

CGMutablePathRef path = CGPathCreateMutable();

CGPathMoveToPoint(path, NULL, 50 - offsetX, 110 - offsetY);
CGPathAddLineToPoint(path, NULL, 18 - offsetX, 16 - offsetY);
CGPathAddLineToPoint(path, NULL, 140 - offsetX, 15 - offsetY);

CGPathCloseSubpath(path);

SKShapeNode *yourline = [SKShapeNode node];
yourline.name = @"yourline";
yourline.path = path;
[yourline setStrokeColor:[UIColor redColor]];
[self addChild:yourline];

ship.physicsBody = [SKPhysicsBody bodyWithPolygonFromPath:path];
ship.zRotation = - M_PI / 2;

Upvotes: 31

Views: 13661

Answers (8)

joshuakcockrell
joshuakcockrell

Reputation: 6113

Swift

In GameViewController.swift, add this line:

override func viewDidLoad() {
    ...
    if let view = self.view as? SKView {
        ...
        view.showsPhysics = true // <--- add this line
    }
}

Upvotes: 5

McKinley
McKinley

Reputation: 1394

SpriteKit provides a built-in feature that draws light-blue borders around all of your physics bodies.

Example sprites with physics body borders shown

SwiftUI

Include the showsPhysics debug option when you instantiate your SpriteView:

var body: some View {
    let scene = SKScene(fileNamed: "MyScene")!
    SpriteView(scene: scene, debugOptions: [.showsPhysics])  // <-- HERE
}

Here's the documentation for all the debug options, which also include useful features like showsFPS and showsNodeCount.

Cocoa/UIKit (Swift)

In your view controller's viewDidLoad, enable the showsPhysics property of your SKView:

override func viewDidLoad() {
    super.viewDidLoad()
    let skView = self.view as! SKView
    skView.showsPhysics = true         // <-- HERE
}

Cocoa/UIKit (Objective-C)

In your view controller's viewDidLoad, enable the showsPhysics property of your SKView:

- (void)viewDidLoad {
    [super viewDidLoad];
    SKView *skView = (SKView*)self.view;
    skView.showsPhysics = YES;            // <-- HERE
}

Upvotes: 2

Julio Montoya
Julio Montoya

Reputation: 1614

For Objective-C & iOS < 7.1

In your ViewController.m find this code

SKView *skView = (SKView *)self.view;
skView.showsFPS = YES;
skView.showsNodeCount = YES;

After the last line add

skView.showsPhysics = YES;

Build and Run and you should see all the physics Body borderline

i noticed that you add the shapeNode to self instead of the spriteNode so try the following

SKSpriteNode *ship = [SKSpriteNode spriteNodeWithImageNamed:@"Spaceship"];
CGFloat offsetX = ship.frame.size.width * ship.anchorPoint.x;
CGFloat offsetY = ship.frame.size.height * ship.anchorPoint.y;

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 50 - offsetX, 110 - offsetY);
CGPathAddLineToPoint(path, NULL, 18 - offsetX, 16 - offsetY);
CGPathAddLineToPoint(path, NULL, 140 - offsetX, 15 - offsetY);
CGPathCloseSubpath(path);

ship.physicsBody = [SKPhysicsBody bodyWithPolygonFromPath:path];

[self addChild:ship];

SKShapeNode *shape = [SKShapeNode node];
shape.path = path;
shape.strokeColor = [SKColor colorWithRed:1.0 green:0 blue:0 alpha:0.5];
shape.lineWidth = 1.0;
[ship addChild:shape];

For Swift & iOS >= 8.0

let skView = self.view as! SKView
skView.showsFPS = true
skView.showsNodeCount = true
skView.showsPhysics = true

And if you want a custom borderline

let ship = SKSpriteNode(imageNamed: "Spaceship")
let offsetX = ship.frame.size.width * ship.anchorPoint.x
let offsetY = ship.frame.size.height * ship.anchorPoint.y

let path = CGPathCreateMutable()
CGPathMoveToPoint(path, nil, 50 - offsetX, 110 - offsetY)
CGPathAddLineToPoint(path, nil, 18 - offsetX, 16 - offsetY)
CGPathAddLineToPoint(path, nil, 140 - offsetX, 15 - offsetY)
CGPathCloseSubpath(path)

ship.physicsBody = SKPhysicsBody(polygonFromPath: path)
addChild(ship)

let shape = SKShapeNode()
shape.path = path
shape.strokeColor = SKColor(red: 1.0, green: 0, blue: 0, alpha: 0.5)
shape.lineWidth = 1.0
addChild(shape)

Already tested :]

Good Luck!!

Upvotes: 70

Clive Minnican
Clive Minnican

Reputation: 71

I know this is a bit late, but I thought you might be interested in my new tool which automatically creates a path around the sprite image (so you don't have to manually click on the points yourself), and then you can adjust various settings to better suit your requirements. The tool also outputs both Objective C and Swift program code for adding the path to a sprite physics body. Hope it's helpful to some people. Thanks:

http://www.radicalphase.com/pathgen/

Upvotes: 1

Jonny
Jonny

Reputation: 16298

This will add a red line shape on top of your node. Use same path as you defined for the physics body of your node.

+(void)debugPath:(CGPathRef)path onNode:(SKNode*)node {
    SKShapeNode *yourline = [SKShapeNode node];
    yourline.name = @"yourline";
    yourline.path = path;
    [yourline setStrokeColor:[UIColor redColor]];
    [node addChild:yourline];
}

I.e. usage:

[[self class] debugPath:ship.physicsBody.path onNode:ship];

Upvotes: 0

Stuart Welsh
Stuart Welsh

Reputation: 136

In the new 7.1 beta there is functionality to allow this as stated above.

Upvotes: 1

joshd
joshd

Reputation: 1726

For testing purposes, I would setup the ship as an SKShapeNode, comment out yourline SKShapeNode for now and set the ship.path to the same path you are using for your SKPhysicsBody.

Or you could use this:

https://github.com/ymc-thzi/physicsDebugger

Upvotes: 1

Batalia
Batalia

Reputation: 2425

Your shape node code is correct. It looks like yourline may be added to the scene before the actual ship, so the ship sprite will be drawn on top of it, making it obscured. Make sure you set yourline.zPosition to the topmost value, or ensure [self addChild:yourline] is executed after [self addChild:ship].

Upvotes: 0

Related Questions