How to integrate SpriteKit with SwiftUI

SpriteKit is a powerful game development framework for creating 2D games on Apple platforms. It also provides a physics engine, animation handling and particle systems, simplifying the creation of dynamic gaming experiences.

Over the past few months, I’ve been working with SpriteKit to develop Anda Pela Sombra, a game centered around Brazilian folklore. In this article, I will demonstrate how to build communication between a SpriteKit scene and a SwiftUI project using the Delegate pattern.

SpriteKit + SwiftUI

Getting Started

Feel free to repeat the following steps on any of your projects. For demonstration purposes, I’m going to create a simple game scene. You can find the full project here.

In this game, players control a square by dragging their fingers across the screen. The goal is to collide with squares of the same color, while avoiding squares of different colors. The score reflects the player’s performance and is updated with each action taken.

1. Create a Game Scene

An SKScene object represents a scene of content in Sprite Kit where every game element is represented by a node. The scene is the root node and these nodes provide content that the scene renders for display.

Our scene is quite simple. Its primary role will be to set up the nodes, configure the game logic, and handle interactions within the game scene.

1. The setUpPlayer, method will create the player node and set up its physics properties.
2. The setUpEnemy and setUpAlly methods will create the ally and enemy nodes, as well as set their physics properties.

2. Handling interactions and collisions

We will begin by creating an extension responsible for handling touch interactions within the game scene. Whenever the player drags their finger across the screen, the square will move accordingly.

This next extension will manage the collision logic. In the following steps, we will implement the ‘add score’ and ‘subtract score’ functions within this section.

3. Add the Game Scene to a SwiftUI view

In SwiftUI, to display a scene, you present it using a SpriteView. The SpriteView allows us to render any SKScene subclass directly within SwiftUI, and it can resize the scene if requested.

Remember to set its frame dimensions to match the width and height of the game scene to prevent distortion.

Initializing the game scene as a computed property allows you to set up specific properties of the game scene.

4. Using delegation to communication between views

In the example above, the collision system is functional, but it currently only prints messages to the console. How can we update the score label located in our SwiftUI view?

A solution I found was to implement the delegate pattern. The delegate pattern is a design pattern where one object delegates certain responsibilities or behaviors to another object. In this context, it allows our scene, responsible for game logic, to communicate with the SwiftUI view.

When a collision occurs, the Scene can inform the delegate (our SwiftUI view) about the event, enabling the view to update the score label or perform any necessary actions based on the game state.

The first step involves creating a protocol that defines the required properties and methods that the object responsible for updating the game score must implement.

Next, we will add a delegate property to our game scene, specifying the type of our created protocol.

Following this, a method within our game scene will be created. This method will be responsible for invoking the delegate whenever a point is scored in the game.

Now, in our SwiftUI view, we must conform to the protocol we created.

Additionally, we will incorporate the scoring logic.

With these implementations in place, every time a collision occurs, the score will be automatically updated.

Conclusion

Certainly, the example provided in this article is quite basic. However, what holds significance here is the underlying thought process. Delegation can be employed for diverse objectives in your projects. In some situations, it might not even be the best solution for your needs at that particular moment.

I recommend this article if you want to learn more about the subject and understand other methods of integration.

For a more extensive demonstration of this concept, I invite you to experience it in action. Download ‘Anda Pela Sombra’ at the App Store and immerse yourself in the world of Brazilian folklore!