Rebuilding Apple’s WWDC 2017 Demo App With SceneKit and SwiftUI | by Mark Lucking | Jun, 2022

An try at updating Cunning 2 recreation code

A screenshot from the foxy2 demo code

Sadly, the final time Apple talked about SceneKit at any actual size was in 2017, though it did make an look of a form in 2018. In 2017 they did a superb presentation with a rocking demo that appeared actually good, foxy2.

Fortuitously, the demo code continues to be accessible and might be downloaded here. A demo that remarkably nonetheless works!

All of which received me pondering, you already know, just a few issues have modified since 2017 in Swift and iOS, and since one of the best ways to learn the way code is to interrupt and nicely — repair it, I believed I’d have a go at updating the cunning 2 code to 2022 and certainly doc my journey doing so, be a part of me.

Foxy2 with SwiftUI

The plan is to rebuild the foxy2 demo code utilizing SwiftUI to handle a heads-up show and perhaps do just a few different upgrades whereas I’m at it. In the long run, I’ve an thought for a spin-off recreation utilizing foxy2 as the principle character, however okay — one step at a time.

Primary Constructing Blocks

Bon — I want a SceneKit embedded inside SwiftUI with a HUD working over it on the SwiftUI interface [that part of foxy2 we’ll need to do differently].

I’ll use the subscription sample described on this article from the Mix framework to hyperlink the SwiftUI HUD with my SceneKit. In concept, I ought to be capable to copy and paste a lot of the code from the previous undertaking to the brand new; we will see.

To Code

The primary job was to replace foxy2 and run it, which I’m happy to say was a no brainer [apart from the security issue with Xcode, which you need to fix with the privacy tab in systems preferences].
Trying via the code, I famous it had variations for iOS, macOS, and even tvOS. All of which is nice, though I plan to concentrate on iOS solely.

A 2022 Model

I begin by making a template for my up to date foxy2 as a normal SwiftUI-based app, with a ContentView that appears like this.

The crucial line right here is the reference to the GameController.

Subsequent, I copied throughout the iOS and Shared code from the foxy2 code I downloaded. I make no sense to listing them out right here since I’ll embrace the ultimate undertaking so that you can obtain. I additionally copy throughout the Artwork, Belongings, and audio.

I make one crucial change. I substitute the init within the GameController with a makeView perform and add the required returns for stated perform on the finish of the tactic.

I compiled and took a take a look at what I received.

A snapshot of the preliminary foxy2 rebuild on SceneKit underneath SwiftUI

Though I can transfer across the scene [because I have the .allowsCameraControl setup, I have no control of foxy himself yet, although, given I flying from the seat of my pants, it is a good start.

Continuing to fish through the code, I find the reference to foxy, who sadly seems to be called “model”, no brownie points for that Apple on that, along with a collection of routines to animate him in the scene.

To understand it better, I create a HUD in my SwiftUI interface and link it through a Combine framework subscription.

On the SwiftUI side, it looks like this.

Circle()
.fill(Color.white)
.opacity(0.1)
.frame(width: 64, height: 64, alignment: .center)
.onTapGesture(count: 2, perform:
spinning.send(true)
)
}

Within the Character class I define the other side of the subscription with a corresponding call to action.

spinner = spinning.sink(receiveValue:  [self] bool in
print("spinner")
if bool assault()
)

Utilizing it and others, I piece collectively how the code works by attempting out completely different routines. I discover the strolling animation, the spinning animation and others. Some work as I outlined right here; some simply want me to set a variable, like this one.

burner = burning.sink(receiveValue:  [self] bool in
print("burning" )
if bool isBurning = true
)

Routines that make cunning do various things…

A animated GIF with some foxy2 strikes

However wait — the very last thing I wish to do is re-invent the wheel right here. I must re-use as a lot because the code as attainable.

I determine to relocate the SCNSceneRendering code to a separate SceneDelegate file, and I take away the reference to it underneath ExtraProtocols sort alias and certainly all through the code. On the similar time, I transfer over the render perform I spot within the GameController.

In fact, I bumped into privateness points with the variables and eliminated the privateness constraints from the GameController. Sure, the short & soiled resolution; sorry, maybe I’ll revisit it later.

Seeking to change the minimal code to get the ball rolling, I substitute the touches and start to code with my subscription sample, triggering the delegate from there.

I set off it with my SwiftUI interface — observe I up to date the protocol right here as nicely. I used bool to tell apart between the dpad that will transfer the digicam and the dpad that moved cunning. Once more, sure an enum would have been a more sensible choice.

I wanted to vary the GameController code to handle the brand new protocol as nicely, modifications that appear to be this.

On reflection, I may/ought to have completed this otherwise — perhaps by-passing utilizing the protocol altogether — the topic of a second revision of the foxy2 code, maybe.

Appears to be like good, however evidently, the physics aspect of issues continues to be not working — I double again and look via the code. I discovered this line referencing the now up to date renderer and adjusted it to this.

scene!.physicsWorld.contactDelegate = self

I check it once more; this time, I can choose up the gem, though the enemy continues to be not recognizing me. I notice I commented out an excessive amount of code and want so as to add this again into the combination within the setup character routine.

character!.physicsWorld = scene!.physicsWorld

I wish to say that was it! And I mounted every thing — however it wasn’t, and I didn’t — I concern I could have run right into a GameKit framework bug. Here’s a video of the ultimate run. As you possibly can see, it nearly works. Be happy to obtain the undertaking and show me incorrect! Inform me what I did incorrect.

Conclusion

There’s something incorrect with the GamePlayKit framework implementation here? I’m not certain what; right here is the undertaking as is — you’re greater than welcome to determine what I did incorrect 🙂

Watch this area as they are saying to see if I can resolve the final challenges to make the up to date model work in addition to the unique, nay higher 🙂

More Posts