This article talks about the first big problem I encountered when starting to develop a SpriteKit scene editor in SwiftUI. It’s a problem every SwiftUI developer has seen: a view doesn’t update when the data changes.
Initial Code
My initial idea for the scene editor interface was to have a split view with three columns.
- A scene graph to show the items in the scene
- A canvas to place items in the scene
- An inspector to view and edit details for an item
I started with the following SwiftUI view:
|
|
struct ContentView: View { @Binding var document: Level var body: some View { NavigationView { SceneGraph(document: $document) SpriteView(scene: document.scene) Inspector() } } } |
I used a SwiftUI sprite view for the canvas.
The document struct has a property that holds a SpriteKit scene.
|
|
struct Level: FileDocument { var scene: GameScene } |
GameScene is a subclass of SKScene, SpriteKit’s scene class.
The scene graph looks like the following:
|
|
struct SceneGraph: View { @Binding var document: Level var body: some View { List { ForEach(document.scene.children, id: \.self) { item in Text(item.name ?? "Node") } } } } |
My Initial Goal
My initial goal was to add a sprite to the scene by clicking or tapping on the canvas. The sprite’s location is the location of the click or tap. Adding the sprite also adds an item to the scene graph.
Problem: The SwiftUI List Doesn’t Update when Adding an Item
I ran the app and tried adding sprites to the canvas. The sprites appeared on the canvas, but the scene graph was empty.
I stepped through the code in the debugger and saw that the new sprites were in the scene’s array of children. When I saved the document the sprites appeared in the scene graph.
Adding sprites works, but the scene graph doesn’t update. This is a common problem SwiftUI developers run into. The user interface doesn’t update when the data changes.
Fix Attempts that Didn’t Work
There are two common approaches to get the user interface to update when the data changes. First, if your data model uses structs, use @State and @Binding.
Second, if your data model uses classes, make the class conform to ObservableObject. Add the @Published property wrapper to class members that you want to trigger a UI update when the member’s value changes.
I tried the following things to get the scene graph to update when adding a sprite to the scene:
- Make
GameScene conform to ObservableObject.
- Add a
@Published variable to GameScene that holds an array of the scene’s items, have GameScene conform to ObservableObject, and have the scene graph show the array of scene items.
- Make
Level a class with a @Published property for the scene and use @StateObject instead of @Binding in the scene graph.
- Add a
@Published variable that tracks whether the scene was edited and set it to true when placing the sprite.
- Add a refresh ID to the
GameScene class and change it when placing the sprite.
- Add a refresh ID to the
Level struct and change it when clicking on the canvas.
- Add a property for the level to the
GameSceneclass.
- Give the scene graph a binding to a game scene instead of a level.
- Give the scene graph a
@StateObject property for the scene.
None of these attempts updated the scene graph after adding a sprite to the canvas.
The Solution
I struggled to fix this problem for weeks. Finally I asked a question on Reddit about the problem and learned what the problem was. The problem has two parts.
First, SwiftUI’s data flow system does not automatically track changes in SpriteKit scenes. I have to manually trigger changes when the scene changes.
Second, The binding for the level in the scene graph won’t trigger an update unless I make the level show a new scene. The app is a scene editor so I am never going to change the scene in a level. Because I don’t change scenes in a level, any changes I make to the level will not trigger a UI update.
The solution to the problem has the following parts:
- Make
GameScene conform to ObservableObject.
- Send an
objectWillChange message after placing the sprite.
- Add a private property for the scene to the scene graph with the
@ObservedObject property wrapper.
- Add a private property for the level.
- Use the private property for the scene in the
ForEach block.
Sending the objectWillChange message required adding one line of code.
|
|
self.objectWillChange.send() |
I had to add the following code to the SceneGraph struct:
|
|
private var document: Level @ObservedObject private var gameScene: GameScene init(document: Level) { self.document = document self.gameScene = document.scene } |
The final thing I had to do was change the code of the ForEach block for the list to the following:
|
|
ForEach(gameScene.children, id: \.self) { item in Text(item.name ?? "Node") } |