Gap between SKSpriteNodes in SpriteKit collision detection - ios

I've been trying to figure this out for quite a while now -- I have a game with simple platformer physics where a player falls onto a block, which stops him from falling. This works, however there is a noticeable gap between where the player stops, and where the actual object/spritenode is. Here is a screenshot, it should be self-explanatory:
class GameScene: SKScene {
override init(){
super.init(size: UIScreen.mainScreen().bounds.size)
self.physicsWorld.gravity = CGVector(dx: 0, dy: -9.8)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func genBlock(iteration: CGFloat){
let block = SKSpriteNode(color: UIColor.blackColor(), size: CGSizeMake(100,50))
block.position = CGPointMake((iteration*50)-block.size.width/2,0)
block.physicsBody = SKPhysicsBody(edgeLoopFromRect: CGRectMake(0,0,block.size.width,block.size.height))
self.addChild(block)
}
func genPlayer(){
let char = SKSpriteNode(color: UIColor.redColor(), size: CGSizeMake(100,100))
char.position = CGPointMake(0,500)
char.physicsBody = SKPhysicsBody(rectangleOfSize: char.size)
self.addChild(char)
}
override func didMoveToView(view: SKView) {
/* Setup your scene here */
view.backgroundColor = UIColor.whiteColor()
self.view?.backgroundColor = UIColor.whiteColor()
genBlock(0)
genBlock(1)
genBlock(2)
genBlock(3)
genBlock(4)
genPlayer()
}
}
I feel as though this isn't an issue with SpriteKit and is instead an issue with my code. Any advice on how to remove this gap between the nodes would be greatly appreciated.
EDIT: I've submitted this to Apple's bug reporter, but I don't expect to receive anything in reply. If anyone is coming here long after this was posted, it would be great if you could submit your suggestions here.

I believe it has to do with physicsBodies built from a CGPath. For instance, using the code below to create 6 squares:
override func didMoveToView(view: SKView) {
self.physicsBody = SKPhysicsBody(edgeLoopFromRect: self.frame)
self.physicsWorld.gravity = CGVector(dx: 0, dy: -9.8)
self.backgroundColor = UIColor.whiteColor()
let square1 = SKSpriteNode(color: UIColor.blackColor(), size: CGSize(width: 50, height: 50))
square1.physicsBody = SKPhysicsBody(edgeLoopFromRect: CGRect(x: -25, y: -25, width: square1.size.width, height: square1.size.height))
square1.position = CGPoint(x: self.size.width/2 - 75, y: 25)
self.addChild(square1)
let square2 = SKSpriteNode(color: UIColor.greenColor(), size: CGSize(width: 50, height: 50))
square2.physicsBody = SKPhysicsBody(rectangleOfSize: square2.size)
square2.position = CGPoint(x: self.size.width/2 - 75, y: 200)
self.addChild(square2)
let square3 = SKSpriteNode(color: UIColor.blueColor(), size: CGSize(width: 50, height: 50))
square3.physicsBody = SKPhysicsBody(rectangleOfSize: square3.size)
square3.position = CGPoint(x: self.size.width/2 + 75, y: 200)
self.addChild(square3)
let squarePath = getSquarePath()
let square4 = SKSpriteNode(color: UIColor.redColor(), size: CGSize(width: 50, height: 50))
square4.physicsBody = SKPhysicsBody(polygonFromPath: squarePath)
square4.position = CGPoint(x: self.size.width/2 + 75, y: 400)
self.addChild(square4)
let square5 = SKSpriteNode(color: UIColor.orangeColor(), size: CGSize(width: 50, height: 50))
square5.physicsBody = SKPhysicsBody(rectangleOfSize: square5.size)
square5.position = CGPoint(x: self.size.width/2, y: 200)
self.addChild(square5)
let square6 = SKSpriteNode(color: UIColor.purpleColor(), size: CGSize(width: 50, height: 50))
square6.physicsBody = SKPhysicsBody(rectangleOfSize: square6.size)
square6.position = CGPoint(x: self.size.width/2, y: 400)
self.addChild(square6)
}
func getSquarePath() -> CGPath {
let path = CGPathCreateMutable()
CGPathMoveToPoint(path, nil, -25, -25)
CGPathAddLineToPoint(path, nil, -25, 25)
CGPathAddLineToPoint(path, nil, 25, 25)
CGPathAddLineToPoint(path, nil, 25, -25)
CGPathCloseSubpath(path)
return path
}
you can see that the squares with physicsBodies created from CGPath (this includes edgeLoopFromRect) have that gap issue. Even the physicsBody for the scene's edge loop has this issue. This also shows up for me when I build the physicsBody using the texture constructors which appears to build a CGPath under the hood.
I haven't found a fix for it other than to not use those types of physicsBodies for long term (visible) collisions.

Related

Endless Runner reposition player for equal difficulty regardless of aspect ratio

I am creating and endless runner for iphones in landscape mode using SpriteKit. I set up the scene as such:
override func viewDidLayoutSubviews() {
let scene = GameScene(size: CGSize(width: 812, height: 375))
let skView = view as! SKView
scene.backgroundColor = UIColor.red
scene.scaleMode = .aspectFill
skView.presentScene(scene)
skView.showsFPS = true
skView.showsNodeCount = true
print("Screen Size: \(GlobalProperties.screenSize.width) x \(GlobalProperties.screenSize.height)")
print("Scene Size: \(scene.size.width) x \(scene.size.height)")
}
I would like to position the player so that there is the same amount of pixels between the edge of the player and the right edge of the screen regardless of aspect ratio. Is this a reasonable practice for maintaining difficulty between devices? I have the layout setup as such:
override func didMove(to view: SKView) {
let player = SKSpriteNode(texture: SKTexture(imageNamed: "CuteMelon"))
player.anchorPoint = CGPoint(x: 0.5, y: 0.5)
player.position = CGPoint(x: frame.width - 600, y: frame.midY)
self.addChild(player)
let rect = SKSpriteNode(color: .orange, size: CGSize(width: 550, height: 200))
rect.anchorPoint = CGPoint(x: 1, y: 0.5)
rect.position = CGPoint(x: frame.width-50, y: frame.height/2)
self.addChild(rect)
}
I added the rectangle to see if in both cases the player was 600 pixels from the right (leaving a 50px gap to ensure it wasnt running off the edge)
The result is as follows:
iPhone XR: https://imgur.com/y6OYHkK which is working as intended
iPhone 8: https://imgur.com/nkrx5By which is not placing the rectangle 50 pixels from the right bound of the frame.
What do I have to do to fix this issue or should I go about solving it a different way entirely? Thank you
Simply figure out the difference between the scene size and the screen size, and shift the camera over by half that distance. The formula abs((sceneWidth - screenWidth * sceneHeight/screenHeight)/2) will get you that. What this does is scale the screen to whatever height the scene is, then subtract the two differences from the width and return half that value.
override func didMove(to view: SKView) {
let widthPadding = abs((self.frame.width - (UIScreen.main.bounds.width * self.frame.height / UIScreen.main.bounds.height )) / 2)
self.camera = self.camera ?? SKCameraNode()
self.camera.position.x += widthPadding
let player = SKSpriteNode(texture: SKTexture(imageNamed: "CuteMelon"))
player.anchorPoint = CGPoint(x: 0.5, y: 0.5)
player.position = CGPoint(x: frame.width - 600, y: frame.midY)
self.addChild(player)
let rect = SKSpriteNode(color: .orange, size: CGSize(width: 550, height: 200))
rect.anchorPoint = CGPoint(x: 1, y: 0.5)
rect.position = CGPoint(x: frame.width-50, y: frame.height/2)
self.addChild(rect)
}

SpriteKit draw upside down text

In a playground, I am trying to make a SpriteKit scene with a top left origin going down (ie like a drawing program). Everything works except for text which is flipped. I need to make the text right side up. I am missing something. If I add the translate and scale, the text vanishes.
//: A SpriteKit based Playground
import PlaygroundSupport
import SpriteKit
class GameScene: SKScene
{
static let width = 1000
static let height = 1800
override func didMove(to view: SKView)
{
self.backgroundColor = SKColor.white
let cam = SKCameraNode()
self.camera = cam
cam.yScale = -1
let node = SKSpriteNode(color: SKColor.yellow, size: CGSize(width: 500, height: 300))
node.anchorPoint = CGPoint(x: 0, y: 0)
node.position = CGPoint(x: 10, y: 10)
let renderer = UIGraphicsImageRenderer(size: CGSize(width: 200, height: 200))
let img = renderer.image { ctx in
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .center
let attrs = [NSAttributedStringKey.font: UIFont(name: "Futura", size: 72)!, NSAttributedStringKey.paragraphStyle: paragraphStyle]
//ctx.cgContext.translateBy(x: 0, y:200)
//ctx.cgContext.scaleBy(x: 0, y: -1)
let string = "Test"
string.draw(with: CGRect(x: 32, y: 32, width: 200, height: 200), options: .usesLineFragmentOrigin, attributes: attrs, context: nil)
}
let tex = SKTexture(image: img)
let zzz = SKSpriteNode(texture: tex)
zzz.anchorPoint = CGPoint(x: 0, y: 0)
zzz.position = CGPoint(x: 10, y: 10)
node.addChild(zzz)
// let z = SKSpriteNode(color: SKColor.red, size: CGSize(width: 200, height: 150))
// z.anchorPoint = CGPoint(x: 0, y: 0)
// z.position = CGPoint(x: 10, y: 10)
// node.addChild(z)
//
// let q = SKSpriteNode(color: SKColor.green, size: CGSize(width: 80, height: 70))
// q.anchorPoint = CGPoint(x: 0, y: 0)
// q.position = CGPoint(x: 10, y: 10)
// z.addChild(q)
self.addChild(node)
self.addChild(cam)
cam.position = CGPoint(x: GameScene.width/2, y: GameScene.height/2)
}
}
let sceneView = SKView(frame: CGRect(x:0 , y:0, width: 480, height: 640))
let scene = GameScene(size: CGSize(width: GameScene.width, height: GameScene.height))
scene.scaleMode = .aspectFit
sceneView.presentScene(scene)
PlaygroundSupport.PlaygroundPage.current.liveView = sceneView
Update:
ctx.cgContext.textMatrix = .identity
ctx.cgContext.translateBy(x: 0, y: 200)
ctx.cgContext.scaleBy(x: 1.0, y: -1.0)
now draws the text rightside up, but it is wrapped at 50% of the width
Final Update:
This worked, its rightsize up. The font size is proportional to the scene size (which is a dimension that fits on all iOS devices.
self.camera = cam
cam.yScale = -1
let boxSize = CGSize(width: 500, height: 500)
let node = SKSpriteNode(color: SKColor.yellow, size: boxSize)
node.anchorPoint = CGPoint(x: 0, y: 0)
node.position = CGPoint(x: 10, y: 10)
let renderer = UIGraphicsImageRenderer(size: boxSize)
let img = renderer.image { ctx in
let bounds = CGRect(x: 16, y: 0, width: boxSize.width-32, height: boxSize.height)
let string = "This is a long test with many lines."
let range = NSRange( location: 0, length: string.count)
guard let context = UIGraphicsGetCurrentContext() else { return }
let path = CGMutablePath()
path.addRect(bounds)
let attrString = NSMutableAttributedString(string: string)
attrString.addAttribute(NSAttributedStringKey.font, value: UIFont(name: "Futura", size: 84)!, range: range )
let framesetter = CTFramesetterCreateWithAttributedString(attrString as CFAttributedString)
let frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, attrString.length), path, nil)
CTFrameDraw(frame, context)
}
You should read https://www.raywenderlich.com/153591/core-text-tutorial-ios-making-magazine-app
CoreText inverts (technically, rotates) text in iOS. This is possibly because it is shared with MacOS which uses a different coordinate system. (Though why they couldn't fix this for iOS I have no idea).
Whatever the cause, you aren't doing anything wrong, iOS is doing the wrong thing. The simple solution (as per the linked article) is to simply rotate the text before drawing it.

SKShapeNode SKPhysicsBody Problems

I have a SKShapeNode that I want to add a SKPhysicsBody to. Here's the code for the SKShapeNode:
let width: CGFloat = 200//self.frame.width
let height: CGFloat = self.frame.height
rightBlocker.path = UIBezierPath(roundedRect: CGRect(x:-width/2, y: -height/2, width: width, height: height), cornerRadius: 50).cgPath
rightBlocker.position = CGPoint(x: -75, y: self.frame.height / 2)
rightBlocker.fillColor = UIColor.white
rightBlocker.strokeColor = UIColor.white
rightBlocker.lineWidth = 10
rightBlocker.physicsBody?.affectedByGravity = false
rightBlocker.physicsBody?.isDynamic = false
addChild(rightBlocker)
I've tried to add a SKPhysicsBody using this line of code:
rightBlocker.physicsBody = SKPhysicsBody(rectangleOf: (rightBlocker.frame.size))
but whenever I do, it completely disappears. What am I doing wrong?

Converting CGPoints between UIKit and SpriteKit woes: UIViews next to SKNodes

There are many posts on this but for whatever reason I can't seem to get the correct sequence of conversions correct. I'm trying to get the UISliders to go directly below the SKLabels.
As you can see in the pictures, one of the sliders doesn't show at all, and the other one is in the completely wrong place (the volume slider is near the seek label):
Here is my current attempt at getting this right, though I've tried a few other configurations that got me nowhere:
class GameScene: SKScene {
let seekSlider = UISlider(frame: CGRect(x: 0, y: 0, width: 200, height: 15))
let volSlider = UISlider(frame: CGRect(x: 0, y: 0, width: 200, height: 15))
override func didMove(to view: SKView) {
removeAllChildren() // Delete this in your actual project.
// Add some labels:
let seekLabel = SKLabelNode(text: "Seek")
seekLabel.setScale(3)
seekLabel.verticalAlignmentMode = .center
seekLabel.position = CGPoint(x: frame.minX + seekLabel.frame.width/2,
y: frame.maxY - seekLabel.frame.height)
let volLabel = SKLabelNode(text: "Volume")
volLabel.setScale(3)
volLabel.verticalAlignmentMode = .center
volLabel.position = CGPoint(x: frame.minX + volLabel.frame.width/2,
y: frame.minY + volLabel.frame.height + volSlider.frame.height)
/* CONVERSION WOES BELOW: */
// Configure sliders:
let seekOrigin = convertPoint(toView: convert(seekLabel.position, from: self))
seekSlider.frame = CGRect(origin: seekOrigin, size: CGSize(width: 200, height: 15))
seekSlider.value = 1
let volOrigin = convertPoint(fromView: CGPoint(x: volLabel.frame.minX, y: volLabel.frame.minY))
seekSlider.frame = CGRect(origin: volOrigin, size: CGSize(width: 200, height: 15))
seekSlider.value = 0
// Scene stuff:
view.addSubview(seekSlider)
view.addSubview(volSlider)
addChild(seekLabel)
addChild(volLabel)
}
}
You're very close! There are two minor issues in your code:
Issue #1
You modify the seekSlider's frame twice instead of modifying the seekSlider then the volSlider.
let volOrigin = convertPoint(fromView: CGPoint(x: volLabel.frame.minX, y: volLabel.frame.minY))
seekSlider.frame = CGRect(origin: volOrigin, size: CGSize(width: 200, height: 15))
seekSlider.value = 0
should be
let volOrigin = convertPoint(fromView: CGPoint(x: volLabel.frame.minX, y: volLabel.frame.minY))
volSlider.frame = CGRect(origin: volOrigin, size: CGSize(width: 200, height: 15))
volSlider.value = 0
Issue #2
The conversion code is not correct.
Using the convertPoint(toView method with the node's position should do the trick:
let seekOrigin = convertPoint(toView: seekLabel.position)
Final Code:
class GameScene: SKScene {
let seekSlider = UISlider(frame: CGRect(x: 0, y: 0, width: 200, height: 15))
let volSlider = UISlider(frame: CGRect(x: 0, y: 0, width: 200, height: 15))
override func didMove(to view: SKView) {
removeAllChildren() // Delete this in your actual project.
// Add some labels:
let seekLabel = SKLabelNode(text: "Seek")
seekLabel.setScale(3)
seekLabel.verticalAlignmentMode = .center
seekLabel.position = CGPoint(x: frame.minX + seekLabel.frame.width/2,
y: frame.maxY - seekLabel.frame.height)
let volLabel = SKLabelNode(text: "Volume")
volLabel.setScale(3)
volLabel.verticalAlignmentMode = .center
volLabel.position = CGPoint(x: frame.minX + volLabel.frame.width/2,
y: frame.minY + volLabel.frame.height + volSlider.frame.height)
// Configure sliders:
let seekOrigin = convertPoint(toView: seekLabel.position)
let offsetSeekOrigin = CGPoint(x: seekOrigin.x, y: seekOrigin.y + 50)
seekSlider.frame = CGRect(origin: offsetSeekOrigin, size: CGSize(width: 200, height: 15))
seekSlider.value = 1
let volOrigin = convertPoint(toView: volLabel.position)
let offsetVolOrigin = CGPoint(x: volOrigin.x, y: volOrigin.y - 50)
volSlider.frame = CGRect(origin: offsetVolOrigin, size: CGSize(width: 200, height: 15))
volSlider.value = 0
// Scene stuff:
view.addSubview(seekSlider)
view.addSubview(volSlider)
addChild(seekLabel)
addChild(volLabel)
}
}
Final Result:

Building my first game in XCODE 7(swift 2)-CGPOINTMAKE?

I want to build a game similar to snooker, and at the beginning I already have some problems. I want to build four walls first (that will be the size of the screen-self.frame), and the first one I made like this:
let ground = SKNode()
ground.position = CGPointMake ( 0, 0)
ground.physicsBody = SKPhysicsBody( rectangleOfSize:CGSizeMake(self.frame.size.width * 3, 1))
ground.physicsBody!.dynamic = false
self.addChild(ground)
However, I don't known how to manipulate the values of CGPointMake to do the left/right/up walls. I first imagined that the (0,0) point was the left down corner, but it seems to not be like that. Can someone please help me with this or just explain how this works? (since in https://developer.apple.com/library/prerelease/ios/documentation/GraphicsImaging/Reference/CGGeometry/index.html#//apple_ref/c/func/CGPointMake they dont explain very much =/)
Here is a basic example of how you can restrict the ball from leaving the screen:
import SpriteKit
class GameScene: SKScene, SKPhysicsContactDelegate {
let BallCategory : UInt32 = 0x1 << 1
let WallCategory : UInt32 = 0x1 << 2
let ball = SKShapeNode(circleOfRadius: 40)
override func didMoveToView(view: SKView) {
/* Setup your scene here */
physicsWorld.contactDelegate = self
setupWalls()
setupBall()
}
func setupWalls(){
physicsBody = SKPhysicsBody(edgeLoopFromRect: frame)
physicsBody?.categoryBitMask = WallCategory
physicsBody?.contactTestBitMask = BallCategory
physicsBody?.collisionBitMask = BallCategory
}
func setupBall(){
ball.physicsBody = SKPhysicsBody(circleOfRadius: 40)
ball.fillColor = SKColor.whiteColor()
ball.name = "ball"
ball.physicsBody?.categoryBitMask = BallCategory
ball.physicsBody?.contactTestBitMask = WallCategory
ball.physicsBody?.collisionBitMask = WallCategory
ball.physicsBody?.dynamic = true //In order to detect contact between two bodies, at least on body has to be dynamic
ball.physicsBody?.affectedByGravity = false
ball.physicsBody?.restitution = 0.5
ball.position = CGPoint(x: CGRectGetMidX(frame), y: CGRectGetMidY(frame)) // placing to ball in the middle of the screen
addChild(ball)
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
ball.physicsBody?.applyImpulse(CGVector(dx: 200, dy: 200))
}
override func update(currentTime: CFTimeInterval) {
/* Called before each frame is rendered */
}
}
Try this for adding four walls with a thickness of twenty:
// Create walls
let leftWall = SKShapeNode(rect: CGRect(x: 0, y: 0, width: 20, height: self.frame.height))
leftWall.fillColor = UIColor.whiteColor()
let physicsBodyLW = SKPhysicsBody(rectangleOfSize: CGSize(width: 20, height: self.frame.size.height), center: CGPoint(x:10, y:self.frame.height/2))
physicsBodyLW.affectedByGravity = false
physicsBodyLW.dynamic = false
leftWall.physicsBody = physicsBodyLW
self.addChild(leftWall)
let rightWall = SKShapeNode(rect: CGRect(x: self.frame.width - 20, y: 0, width: 20, height: self.frame.height))
rightWall.fillColor = UIColor.whiteColor()
let physicsBodyRW = SKPhysicsBody(rectangleOfSize: CGSize(width: 20, height: self.frame.size.height), center: CGPoint(x:10, y:self.frame.height/2))
physicsBodyRW.affectedByGravity = false
physicsBodyRW.dynamic = false
rightWall.physicsBody = physicsBodyRW
self.addChild(rightWall)
let topWall = SKShapeNode(rect: CGRect(x: 0, y: self.frame.height-20, width: self.frame.width, height: 20))
topWall.fillColor = UIColor.whiteColor()
let physicsBodyTW = SKPhysicsBody(rectangleOfSize: CGSize(width: self.frame.size.width, height: 20), center: CGPoint(x:self.frame.width/2, y:10))
physicsBodyTW.affectedByGravity = false
physicsBodyTW.dynamic = false
topWall.physicsBody = physicsBodyTW
self.addChild(topWall)
let bottomWall = SKShapeNode(rect: CGRect(x: 0, y: 0, width: self.frame.width, height: 20))
print(bottomWall.frame)
bottomWall.fillColor = UIColor.whiteColor()
let physicsBodyBW = SKPhysicsBody(rectangleOfSize: CGSize(width: self.frame.size.width, height: 20), center: CGPoint(x:self.frame.width/2, y:10))
physicsBodyBW.affectedByGravity = false
physicsBodyBW.dynamic = false
bottomWall.physicsBody = physicsBodyBW
self.addChild(bottomWall)

Resources