SKSpriteNode shadow rendering incorrectly? - ios

I'm using Xcode 11.4.1 and Swift 5.2.2, and I am trying cast a shadow using an SKLightNode onto a circular SKSpriteNode.
However, the shadow is cast over the rectangular frame of the SpriteNode rather than the circle image png that I am using.
This is the desired effect
This is what happens
In the first image, I am using a 611x611px circle png while in the second I am using a 612x612 png. I have found that this "corner shadow" happens only when using specific image dimensions to create the SpriteNode.
Specifically, through my testing, square images with size <688px and >601px display no corner shadow, except sizes exactly 612 and 608. I am testing this in a playground but the same problem occurs in a full xcodeproj.
What have I done wrong here? I doubt my code is the issue but here it is:
import PlaygroundSupport
import SpriteKit
class GameScene: SKScene {
override func didMove(to view: SKView) {
let background = SKSpriteNode(color: UIColor.blue, size: frame.size)
background.zPosition = 0
background.position = CGPoint(x: frame.midX, y: frame.midY)
background.lightingBitMask = 1
addChild(background)
let light = SKLightNode()
light.zPosition = 100
light.categoryBitMask = 1
light.falloff = 0.5
light.lightColor = UIColor.white
light.position = CGPoint(x: frame.midX, y: frame.midY)
addChild(light)
let sprite = SKSpriteNode(imageNamed: "612.png")
sprite.color = UIColor.yellow
sprite.colorBlendFactor = 1
sprite.zPosition = 3
sprite.position = CGPoint(x: frame.midX, y: frame.midY + 100)
sprite.size = CGSize(width: 100, height: 100)
sprite.physicsBody = SKPhysicsBody(circleOfRadius: 50)
sprite.physicsBody?.categoryBitMask = 2
sprite.shadowCastBitMask = 1
sprite.lightingBitMask = 1
sprite.physicsBody?.isDynamic = false
addChild(sprite)
}
}
let sceneView = SKView(frame: CGRect(x:0 , y:0, width: 640, height: 480))
let scene = GameScene()
scene.scaleMode = .aspectFill
scene.size = sceneView.frame.size
sceneView.presentScene(scene)
PlaygroundSupport.PlaygroundPage.current.liveView = sceneView

Related

SpriteKit: A gap between SKSpriteNodes

When the blue square falls down on the red one a gap will remain. But when I make the blue square fall from a lower position there is no gap. Also when I give the blue square a higher mass the gap (on the ground) under the red square disappears and when the mass is too high the red square is gone.
I also made the squares smaller because the amount of pixels didn't equal the pixels of the png file which led to an even bigger gap. And when I set "showsPhysics" to true there is also a gap to see and even bigger when the squares are not scaled down.
Gap between SKSpriteNodes (picture)
//: Playground - noun: a place where people can play
import UIKit
import SpriteKit
import PlaygroundSupport
class Scene: SKScene {
var square = SKSpriteNode(texture: SKTexture(imageNamed: "red"), size: SKTexture(imageNamed: "red").size())
var square2 = SKSpriteNode(texture: SKTexture(imageNamed: "blue"), size: SKTexture(imageNamed: "blue").size())
var label = SKLabelNode(fontNamed: "Chalkduster")
override func didMove(to view: SKView) {
self.addChild(square)
self.addChild(square2)
self.addChild(label)
}
override func didChangeSize(_ oldSize: CGSize) {
// Add Scene Physics
self.physicsBody?.usesPreciseCollisionDetection = true
self.physicsBody = SKPhysicsBody(edgeLoopFrom: CGRect(x: -1, y: -1, width: self.size.width + 2, height: self.size.height + 2))
self.backgroundColor = UIColor.white
self.physicsBody?.usesPreciseCollisionDetection = true
//Add square
square.texture?.usesMipmaps = true
square.zPosition = 11
square.physicsBody = SKPhysicsBody(rectangleOf: square.size)
square.physicsBody?.usesPreciseCollisionDetection = true
square.physicsBody?.mass = 0.1
square.physicsBody?.allowsRotation = false
square.physicsBody?.usesPreciseCollisionDetection = true
square.setScale(0.25)
square.position = CGPoint(x: self.frame.width / 2, y: self.square.size.height)
square.name = "square"
//Add square2
square2.texture?.usesMipmaps = true
square2.zPosition = 11
square2.physicsBody = SKPhysicsBody(rectangleOf: square2.size)
square2.physicsBody?.usesPreciseCollisionDetection = true
square2.physicsBody?.mass = 0.1
square2.physicsBody?.allowsRotation = false
square2.physicsBody?.usesPreciseCollisionDetection = true
square2.setScale(0.25)
square2.position = CGPoint(x: self.frame.width / 2, y: self.square.size.height * 6)
square2.name = "square2"
//Add label
label.fontSize = 30
label.text = "w: \(self.frame.size.width) h: \(self.frame.size.height)"
label.position = CGPoint(x: self.frame.size.width / 2, y: self.frame.size.height - 30)
label.fontColor = UIColor.black
label.zPosition = 100
}
}
class ViewController: UIViewController {
let scene = Scene()
var viewSize = CGSize(width: 0, height: 0)
override func loadView() {
self.view = SKView()
}
override func viewDidLoad() {
super.viewDidLoad()
if let view = self.view as! SKView? {
view.frame = CGRect(origin: CGPoint(x: -1, y: -1), size: viewSize)
view.presentScene(scene)
view.showsPhysics = false
view.showsFPS = true
view.showsNodeCount = true
}
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
scene.size = CGSize(width: self.view.frame.size.width, height: self.view.frame.size.height)
}
}
PlaygroundPage.current.liveView = ViewController()
As proof from the print commands, there is no actual gap between the sprite nodes, and with second proof from a super-zoomed-in-screenshot:
The playground you provided does not replicate an issue, which makes me wonder... what is going on with your project?
pg #2:
The scene's width and height has to be multiplied by 2. So the scene has to be 4 times bigger than the ViewControllers view. It's also like that in the game template that Apple provides for Spritekit.
scene.size = CGSize(width: self.view.frame.size.width * 2, height: self.view.frame.size.height * 2)
https://github.com/simon2204/Playground

Adding an SKLabelNode to Scene Kit View

I am building a game using Scene Kit. In order to present the score I wanted to use an SKLabelNode on the screen, however, when I attach it to a SCNNode, it looks very blurry:
Here is the code that I have written to do this, please let me know if there is a better way to go about doing this without having the text be so blurry. Thank you so much!
func initHUD() {
let skScene = SKScene(size: CGSize(width: 100, height: 100))
skScene.backgroundColor = UIColor(white: 0.0, alpha: 0.0)
labelNode = SKLabelNode()
labelNode.fontSize = 20
labelNode.position.y = 50
labelNode.position.x = 50
skScene.addChild(labelNode)
let plane = SCNPlane(width: 1, height: 1)
let material = SCNMaterial()
material.lightingModelName = SCNLightingModelConstant
material.doubleSided = true
material.diffuse.contents = skScene
plane.materials = [material]
hudNode = SCNNode(geometry: plane)
hudNode.name = "HUD"
hudNode.rotation = SCNVector4(x: 1, y: 0, z: 0, w: 3.14159265)
hudNode.position = SCNVector3(x:0, y: 1, z: -5)
}
func updateHUD() {
labelNode.text = "\(score)"
}
The typical way to do a HUD for a SceneKit scene is to create a SpriteKit SKScene and set it as the overlaySKScene of your SceneKit view. Then it renders at full resolution and always at the same view-relative size and position.

Right to Left Scrolling Background Swift / Sprite Kit

I have a scrolling background, but the background image appears to be "zoomed in" compared to the original image. The background scrolls just fine, but I'm not sure why the image is "zoomed in". Any help would be greatly appreciated.
class GameScene: SKScene, SKPhysicsContactDelegate {
var blueBall:SKSpriteNode!
var backgroundImage:SKSpriteNode!
var backgroundImage2:SKSpriteNode!
override func didMoveToView(view: SKView) {
self.view!.backgroundColor = UIColor(patternImage: UIImage(imageLiteral: "backgroundImage.png"))
self.physicsWorld.gravity = CGVectorMake(0.0, -5.0)
self.physicsWorld.contactDelegate = self
blueBall = SKSpriteNode( imageNamed: "ball1111.png")
blueBall.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))
blueBall.physicsBody = SKPhysicsBody(circleOfRadius: blueBall.size.width / 0.85)
blueBall.physicsBody!.dynamic = true
blueBall.physicsBody!.allowsRotation = true
self.addChild(blueBall)
blueBall.zPosition = 2
backgroundImage = SKSpriteNode(imageNamed: "backgroundImage.png")
self.addChild(backgroundImage)
backgroundImage.zPosition = 0
backgroundImage.anchorPoint = CGPoint(x: 0.5, y: 0.5)
backgroundImage.size.height = self.size.height
backgroundImage.size.width = self.size.width
backgroundImage.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))
let backgroundTexture = SKTexture(imageNamed: "backgroundImage.png")
let shiftBackground = SKAction.moveByX(-backgroundTexture.size().width, y: 0, duration: 9)
let replaceBackground = SKAction.moveByX(backgroundTexture.size().width, y:0, duration: 0)
let movingAndReplacingBackground = SKAction.repeatActionForever(SKAction.sequence([shiftBackground,replaceBackground]))
for var i:CGFloat = 0; i<3; i++ {
let background = SKSpriteNode(texture: backgroundTexture)
background.position = CGPoint(x: backgroundTexture.size().width/2 + (backgroundTexture.size().width * i), y: CGRectGetMidY(self.frame))
background.size.height = self.frame.height
background.runAction(movingAndReplacingBackground)
self.addChild(background)
}
}
You have an issue with the image not being loaded correctly, so your numbers are off. Basically by loading SKSpriteNode(imageNamed: "backgroundImage.png") with the png extension, you are loading the actual file, not conforming to any retina rules. The width and height then would not be adjusted to handle this case. If you use an atlas inside the xcassets folder, it will allow you to specify the graphics for all display sizes, and will pick the correct one that is supported by the device.

Invisible circle stroke color in SKSpriteNode (iOS)

I'm trying to paint the stroke color in black, but it doesn't appear any line...
This is how it's displayed in the iOS simulator:
BUT, if I run the same code in the Xcode playground, the circle is perfect
My scene code:
import SpriteKit
class GameScene: SKScene {
override func didMoveToView(view: SKView) {
/* Setup your scene here */
self.backgroundColor = UIColor.whiteColor()
let midcir = self.mainCircle()
self.addChild(midcir)
}
func mainCircle()->SKSpriteNode{
let node = SKSpriteNode()
node.anchorPoint=CGPoint(x: 0.5, y: 0.5)
let outsideNode = SKShapeNode(circleOfRadius: 127.5)
let insideNode = SKShapeNode(circleOfRadius: 1)
outsideNode.strokeColor = UIColor.blackColor()
outsideNode.fillColor = UIColor.blueColor()
outsideNode.lineWidth = 5
insideNode.strokeColor = UIColor.clearColor()
insideNode.fillColor = UIColor.clearColor()
node.addChild(outsideNode)
node.addChild(insideNode)
node.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))
return node
}
}
And the playground code, it's for OS X for live view incompatibilities (live view):
It only changes the UIColor for NSColor
import XCPlayground
import Cocoa
import SpriteKit
var myView = SKView(frame: NSRect(x: 0, y: 0, width: 400, height: 400))
var myScene = SKScene(size: CGSize(width: 400, height: 400))
myScene.backgroundColor = NSColor.whiteColor()
myView.presentScene(myScene)
func maincircle()->SKSpriteNode{
let node = SKSpriteNode()
node.anchorPoint=CGPoint(x: 0.5, y: 0.5)
let outsideNode = SKShapeNode(circleOfRadius: 127.5)
let insideNode = SKShapeNode(circleOfRadius: 1)
outsideNode.strokeColor = NSColor.blackColor()
outsideNode.fillColor = NSColor.blueColor()
outsideNode.lineWidth = 5
insideNode.strokeColor = NSColor.clearColor()
insideNode.fillColor = NSColor.clearColor()
node.addChild(insideNode)
node.addChild(outsideNode)
node.position = CGPoint(x: 200, y: 200)
return node
}
let node = maincircle()
myScene.addChild(node)
XCPShowView("MainCir", myView)
I don't know that is happening, I'll post the answer if I find it. Thank you!

How can I apply friction to a circular SKPhysicsBody

I am trying to understand friction, or some other aspect of physics, in SpriteKit. I created a circle that rotates. I placed a square on top of the rotating circle. I expected the square to rotate along with the circle and fall off, but the square does not move. I set physicsBody.friction = 1.0 in an attempt to make the surfaces sticky but it does not help. What changes to physics do I need to make so that the square is affected by the circle's rotation?
I created a self-contained example using a Playground. To test:
Download attached bluecircle.png and place it on your desktop (or wherever)
Copy code below into your Playground
Change NSImage path to wherever you saved bluecircle.png
Code:
import Cocoa
import SpriteKit
import XCPlayground
let screenWidth = 1400.0
let screenHeight = 1000.0
let xOffset = 300.0
let smallsquareSize = CGSize(width: 100, height: 100)
let bluesquareSize = CGSize(width: 400 , height: 400)
// the img is a blue circle w/ radius of 200 located on my desktop
let img = NSImage(byReferencingFile: "/Users/CHANGETHIS/Desktop/bluecircle.png")
class PlayScene: SKScene {
let redsquare = SKSpriteNode(color: SKColor.redColor(), size: smallsquareSize)
let greensquare = SKSpriteNode(color: SKColor.greenColor(), size: smallsquareSize)
let bluesquare = SKSpriteNode(color: SKColor.blueColor(), size: bluesquareSize)
let bluecircle = SKSpriteNode(texture: SKTexture(image: img))
var lastTime = NSTimeInterval(0)
init(size: CGSize) {
super.init(size: size)
}
override func didMoveToView(view: SKView!) {
backgroundColor = SKColor.blackColor()
// RED SQUARE
redsquare.position = CGPoint(x: screenWidth/2 - xOffset, y: screenHeight - 100)
redsquare.physicsBody = SKPhysicsBody(rectangleOfSize: smallsquareSize)
redsquare.physicsBody.friction = 1.0
addChild(redsquare)
// BLUE SQUARE
bluesquare.position = CGPoint(x: screenWidth / 2 - xOffset, y: screenHeight / 2)
bluesquare.physicsBody = SKPhysicsBody(rectangleOfSize: bluesquareSize)
bluesquare.physicsBody.dynamic = false
bluesquare.physicsBody.affectedByGravity = false
bluesquare.physicsBody.friction = 1.0
addChild(bluesquare)
// GREEN SQUARE
greensquare.position = CGPoint(x: screenWidth/2 + xOffset, y: screenHeight - 100)
greensquare.physicsBody = SKPhysicsBody(rectangleOfSize: smallsquareSize)
greensquare.physicsBody.friction = 1.0
addChild(greensquare)
// BLUE CIRCLE
bluecircle.position = CGPoint(x: screenWidth / 2 + xOffset, y: screenHeight / 2)
bluecircle.physicsBody = SKPhysicsBody(circleOfRadius: 200)
bluecircle.physicsBody.dynamic = false
bluecircle.physicsBody.affectedByGravity = false
bluecircle.physicsBody.friction = 1.0
addChild(bluecircle)
}
override func update(currentTime: NSTimeInterval) {
let delta = currentTime - lastTime
lastTime = currentTime
bluesquare.zRotation += delta
bluecircle.zRotation += delta
}
}
var view = SKView(frame:NSRect(x: 0.0, y: 0.0, width: screenWidth, height: screenHeight))
var playScene = PlayScene(size: CGSize(width: screenWidth, height: screenHeight))
view.presentScene(playScene)
view.showsFPS = true
view.showsDrawCount = true
view.showsNodeCount = true
XCPShowView("View", view)
`
I think the answer to your question are Joints . Creating a fixed joint between your nodes I believe will solve your problem .
https://developer.apple.com/library/ios/documentation/SpriteKit/Reference/SKPhysicsJoint_Ref/Reference/Reference.html

Resources