#sprite kit

By now, Brickshelf was either purchased or has gone down. I've queued as many good posts as I could find with Brickshelf's search feature.

There will be additional posts of fan comics queued throughout the remainder of 2025. Hopefully there is an archive being uploaded somewhere on the web that may allow me to continue posting, but I'm also satisfied with what I gathered.

I decided somewhere during this blog to start making my own sprite comics. I will be releasing the Bonkle Sprite Kit, which is an extension of the Rayg sprite kit made to feel like Razor's style. A nostalgia fusion style, if you will.

Months ago I helped my sister to create this simple endless runner game for a challenge of the Apple Developer Academy she had to do. We couldn't finish it because we were busy doing other things. However in the end I managed to convince my sister to continue it because I didn't want our work to go to waste. The game was really very simple (even now) so we thought we'd add some changes. And the idea of ​​the shop was born with new clothes for the little mole (can't wait to show you more!!) I'm very happy to announce that, even though it's still a work in progress, our little #game is finally on the #AppStore (with a lovely Christmas theme!)!!! So go check it out here http://apple.co/3mKvB77!! Any #feedback is much appreciated ^^

Parallax scrolling scrolls one or more images next to each other by updating the position, so it appears to have an endless-scrolling background. In this tutorial a background image is positioned next to each other and the x position is changed to have a horizontal scrolling effect. This tutorial is made with Xcode 11 and built for iOS 13.

Project Setup

Open Xcode and choose a new Game Template

For product name, use IOSSpriteKitParallaxScrollingTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and SpriteKit as Game Technology.

A background image is needed for sthis tutorial so download the image and add it to the Assets catalog.

Go to the GameScene.sks file and delete the hello World label. Select the Scene and in the Attributes inspector change the the Width and Height values to 1024 by 768. Also change the X and Y values of the Anchor point to 0.

The Game template added some code to the project we will not need. Go to the GameScene.swift file and delete all code inside the GameScene class. Add the didMove(to:) method to the empty GameScene class.

override func didMove(to view: SKView) { createBackground() }

The createBackground() method will place the same background image three times next to each other.

func createBackground() { for i in 0...2 { let sky = SKSpriteNode(imageNamed: "clouds") sky.name = "clouds" sky.size = CGSize(width: (self.scene?.size.width)!, height: (self.scene?.size.height)!) sky.position = CGPoint(x: CGFloat(i) * sky.size.width , y: (self.frame.size.height / 2)) self.addChild(sky) } }

Next add the update(_:) method

override func update(_ currentTime: TimeInterval) { scrollBackground() }

implement the scrollBackground() method.

func scrollBackground(){ self.enumerateChildNodes(withName: "clouds", using: ({ (node, error) in // 1 node.position.x -= 4 print("node position x = \(node.position.x)") // 2 if node.position.x < -(self.scene?.size.width)! { node.position.x += (self.scene?.size.width)! * 3 } })) }

The x position of each background node will be decreased by 4 points.

If the x position is smaller than the negative value of the scene’s width, the x positioned will be updated to the last node. This repositioning will go on endlessly.

Build and Run the project with an iPad simulator to see the parallax scrolling in action.

The mechanism to animate sprites with Sprite Kit is to make use of actions. You can apply a type of action to a node and Sprite Kit automatically updates the position until the action completes. Better yet, you can also chain actions together to create movement combinations easily. In this tutorial we will add some actions to a sprite. This tutorial is made with Xcode 10 and built for iOS 12.

Project Setup

Open Xcode and create a new Single Game Template

For product name, use IOSSpriteKitActionsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and SpriteKit as Game Technology.

We need a sprite for this tutorial so download our image and add it to the Assets catalog.

Go to the GameScene.sks file and delete the hello World label. Select the Scene and in the Attributes inspector change the X and Y values of the Anchor point to 0.

The Game template added some code to the project we will not need. Go to the GameScene.swift file and delete all code inside the GameScene class. Add the didMove(to:) method to the empty GameScene class.

override func didMove(to view: SKView) { let apple = SKSpriteNode(imageNamed: "Apple.png") apple.position = CGPoint(x: size.width/2, y: size.height/2) addChild(apple) }

The apple image is assigned to the apple variable, it is centered to the screen and added to the current scene. Build and Run the project, the apple is centered to the screen.

To make this sprite move we need to create a move action and run this action on our sprite. Add the following lines to the end of the didMove(to:) method

let moveBottomLeft = SKAction.move(to: CGPoint(x: 100,y: 100), duration:2.0) apple.run(moveBottomLeft)

Build and Run, the sprite will move to the bottom-left with a duration of two seconds.

The moveTo:duration method make use of absolute positions. To move the sprite relative of the current position you can use the moveBy variant. Change the previous two lines into

let moveRight = SKAction.moveBy(x: 50, y:0, duration:1.0) apple.run(moveRight)

This will move the sprite 50 points to the right. It is also possible to chain actions together using a sequence. Delete the run line and add the following lines.

let moveBottom = SKAction.moveBy(x: 0, y:-100, duration:3.0) let sequence = SKAction.sequence([moveRight, moveBottom]) apple.run(sequence)

Build and Run, you will see the sequence action will run one action after another.

Some actions can be reversed by calling reversedAction so the new actions is the opposite of the older action. Remove the sequence line and add these two lines.

let reversedMoveBottom = moveBottom.reversed() let sequence = SKAction.sequence([moveRight, moveBottom, reversedMoveBottom])

Build and Run, you will see the moveBottom action is followed by the reversed action. It is also possible to repeat actions a number of times or even unlimited. Remove the run line and add the following lines

let endlessAction = SKAction.repeatForever(sequence) apple.run(endlessAction)

Build and Run, the action will repeat endlessly.

The Sprite Kit framework contains a SKPhysicsBody object to add physics simulation. In this tutorial a number of balls will fall down and will fill up the screen in a realistic way. The edge of the screen will be used as an physical boundary so the balls will not fall through. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Project. Choose iOS->Application->Game. 

For product name, use IOSSpriteKitPhysicsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure SpriteKit is selected as Game Technology.

Go to the GameScene.sks file and delete the hello World label. Select the Scene and in the Attributes inspector change the X and Y values of the Anchor point to 0.

Download the ball image. Open the Assets folder from the project and drag the ball image here. The Game template added some code to the project we will not need. Go to the GameScene.swift file and delete all code inside the GameScene class. Add the didMove(to:) method

override func didMove(to view: SKView) { backgroundColor = UIColor.white scene!.physicsBody = SKPhysicsBody(edgeLoopFrom: frame) run(SKAction.repeat(SKAction.sequence([SKAction.run(createBall), SKAction.wait(forDuration: 0.05)]), count: 200)) }

The SKPhysicsBody object adds physic simulation to the scene. The edgeLoopFromRect initializer  adds a boundary to the scene, so the balls will not fall through the ground. A sequence of  Sprite Kit Actions is then executed, which will create 200 balls with a delay of 0.05 seconds. In the sequence the createBall method is called, so let's implement this method

func createBall() { let ball = SKSpriteNode(imageNamed: "ball") ball.position = CGPoint(x: CGFloat(Int(arc4random()) & Int(size.width)), y: size.height - ball.size.height) ball.physicsBody = SKPhysicsBody(circleOfRadius: ball.size.width/2) addChild(ball) }

A sprite is created from the ball image and it is positioned at the top of the window at a random x-coordinate. The circleOfRadius method creates a circled physics body on the ball sprite. Build and Run the Project, the balls will fall down and stack on top of each other.

With Sprite Kit you can create actions to move sprites along a predifined path. This path can be anything like, for example a line, square or circle. In this tutorial we will move a sprite along some different paths. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and select the Game template.

For product name, use IOSSpriteKitMoveSpritePathTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language, select SpriteKit as Game Technology and make sure only iPhone is selected in Devices.

o to the GameScene.sks file and delete the hello World label. Select the Scene and in the Attributes inspector change the X and Y values of the Anchor point to 0.

Next, we will need an image to use for the sprite movement, we will use the Swift log, so download the image here. Add it to the project. The Game template added some code to the project we will not need. Go to the GameScene.swift file and delete all code inside the GameScene class. Next, add the following didMoveToView method

override func didMove(to view: SKView) { // 1 let logo = SKSpriteNode(imageNamed:"SwiftLogo.png") logo.position = CGPoint(x: frame.size.width/2, y: frame.size.height/2) addChild(logo) // 2 let path = CGMutablePath() path.move(to: CGPoint(x: 0, y: 0)) path.addLine(to: CGPoint(x: 50, y: 100)) let followLine = SKAction.follow(path, speed: 3.0) // 3 let reversedLine = followLine.reversed() // 4 let square = UIBezierPath(rect: CGRect(x: 0,y: 0, width: 100, height: 100)) let followSquare = SKAction.follow(square.cgPath, asOffset: true, orientToPath: false, duration: 5.0) // 5 let circle = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 100, height: 100), cornerRadius: 100) let followCircle = SKAction.follow(circle.cgPath, asOffset: true, orientToPath: false, duration: 5.0) // 6 logo.run(SKAction.sequence([followLine,reversedLine,followSquare,followCircle]))

The Swift logo is posititioned on the center of the screen.

A graphic path is created, where a line is added to. The action will move the sprite along the path

The previous action will be reversed, so the sprite will move back to its original position.

Using the UIBezierPath(rect:) method a square path will be created for the SKaction

Using the UIBezierPath(roundedRect:) method a circular path will be created for the SKaction

a runAction with all actions in a sequence will be created, so the actions will run in order.

Build and Run the project and you will see the sprite move along the paths.

The particle emitter is used to create special effects to games. An image file is created to represent the particle. The emitter generates multiple instances of this particle and applies the properties using the particle emitter editor. In this tutorial a rain particle emitter will be displayed to the scene. This tutorial is made with Xcode 9 and built for iOS 11.

Open Xcode and create a new Project. Choose the Game template. Choose Next

For product name, use IOS11ParticleEmitterTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure SpriteKit is selected as Game Technology. Choose Next

Create a New File. Choose iOS->SpriteKit Particle File. Choose Next.

Choose Rain as Particle Template

Enter Rain as Filename. This will create a Rain.sks file and an corresponding spark file in the Assets Library. When the file is created it is opened. Open the Attribute Inspector. The Particle Emittor properties can be edited and the changes will be applied immediately.

Here is a short description of the properties:

Background : used for testing for the appearance of the particle emitter in the preview

Particle Texture: image file containing the texture

Birthrate: defines the rate at which new particles are emitted

Lifetime: controls the length of time in seconds that a particle is visible

Position Range: defines the location from which particles are created.

Angle: the angle from which the particle will move away from the creation point.

Speed: initial speed at time of creation

Acceleration: amount of acceleration or deceleration of a particle

Scale: amount of growth during the lifetime of a particle

Rotation: amount of rotation during the lifetime of a particle

Go to the GameScene.swift file and delete everything inside the GameScene class except the update(_:) method. Add the didMove(to:) method.

override func didMove(to view: SKView) { self.backgroundColor = UIColor.black let path = Bundle.main.path(forResource: "Rain", ofType: "sks") let rainParticle = NSKeyedUnarchiver.unarchiveObject(withFile: path!) as! SKEmitterNode rainParticle.position = CGPoint(x: self.size.width/2, y: self.size.height) rainParticle.name = "rainParticle" rainParticle.targetNode = self.scene self.addChild(rainParticle) }

The path variable contains the path to the particle file within the bundle. This file is decoded using the NSKeyedUnArchiver method. Next the SKEmmiterNode object is positioned at the top middle of the screen and assigned to the scene. Build and Run the project and some rain will be falling down.

The mechanism to animate sprites with Sprite Kit is to make use of actions. You can apply a type of action to a node and Sprite Kit automatically updates the position until the action completes. Better yet, you can also chain actions together to create movement combinations easily. In this tutorial we will add some actions to a sprite. This tutorial is made with Xcode 8.3 and built for iOS 10.3

Project Setup

Open Xcode and create a new Single Game Template

For product name, use SpriteKitActionsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

We need a sprite for this tutorial so download our image and add it to the Assets catalog.

Go to the GameViewController.swift file and change the viewDidLoad method to

override func viewDidLoad() { super.viewDidLoad() let scene = GameScene(size: CGSize(width:750, height: 1334)) scene.scaleMode = .aspectFill let skView = self.view as! SKView skView.presentScene(scene) }

The gameScene scene is presented. Go to the GameScene.swift file. Here is the GameScene class defined. Delete all code and add the didMove(to:) method.

override func didMove(to view: SKView) { let apple = SKSpriteNode(imageNamed: "Apple.png") apple.position = CGPoint(x: size.width/2, y: size.height/2) self.addChild(apple) }

The apple image is assigned to the apple variable, it is centered to the screen and added to the current scene. Build and Run the project, the apple is centered to the screen.

To make this sprite move we need to create a move action and run this action on our sprite. Add the following lines to the end of the didMove(to:) method

let moveBottomLeft = SKAction.move(to: CGPoint(x: 100,y: 100), duration:2.0) apple.run(moveBottomLeft)

Build and Run, the sprite will move to the bottom-left with a duration of two seconds.

The moveTo:duration method make use of absolute positions. To move the sprite relative of the current position you can use the moveBy variant. Change the previous two lines into

let moveRight = SKAction.moveBy(x: 50, y:0, duration:1.0) apple.run(moveRight)

This will move the sprite 50 points to the right. It is also possible to chain actions together using a sequence. Delete the run line and add the following lines.

let moveBottom = SKAction.moveBy(x: 0, y:-100, duration:3.0) let sequence = SKAction.sequence([moveRight, moveBottom]) apple.run(sequence)

Build and Run, you will see the sequence action will run one action after another.

Some actions can be reversed by calling reversedAction so the new actions is the opposite of the older action. Remove the sequence line and add these two lines.

let reversedMoveBottom = moveBottom.reversed() let sequence = SKAction.sequence([moveRight, moveBottom, reversedMoveBottom])

Build and Run, you will see the moveBottom action is followed by the reversed action. It is also possible to repeat actions a number of times or even unlimited. Remove the run line and add the following lines

let endlessAction = SKAction.repeatForever(sequence) apple.run(endlessAction)

Build and Run, the action will repeat endlessly.