Start Building a 3D Chess Game Using SceneKit and SwiftUI | by Mark Lucking | Apr, 2022

Persevering with a journey to research SceneKit & SwiftUI, I believed I’d attempt one other traditional. The purpose of this text is to construct a 3D chess recreation.

Fashions

I began taking a look at SceneKit and SwiftUI with a mannequin. A star wars mannequin in “usdz” format, certainly one of a dozen or extra codecs supported by it.

Which codecs SceneKit helps is for certain a transferring goal. I attempted utilizing “usdz”, “obj” format, and a local “scn” on this construct. All of them work, however some are higher than others, with some delicate variations. For instance, throughout the Xcode editor on “obj” fashions, though you’ll be able to change the colours, the modifications should not mirrored when it renders them.

Should you attempt to load a mannequin it doesn’t perceive, finest case it’s going to ignore you and fail to render — worse case it’s going to crash.

A helpful tip; take a look at the instruments/apps you’ll discover here on the Apple Builders web site. There’s one for changing recordsdata from completely different codecs to “usdz”.

My preliminary ideas on this have been to make use of a texture map you’ll be able to construct utilizing the core picture framework. However since I wished/wanted to have the ability to handle each sq., it made extra sense to create the board out of a grid of black and white packing containers.

The inexperienced icons you see on the prime of this image are the beginnings of a HUD to handle the board’s place. When triggered, they’re linked to the board utilizing a subscription to run actions. The board itself is constructed with a easy loop, this code.

The HUD makes use of the Mix framework to hyperlink the SwiftUI interface to the GameScene class. A code sample I discover works higher the utilizing @Revealed/@ObservedObjects.

Code that appears like this:

I feel the digicam is likely one of the most difficult points of coding inside SceneKit. On this mission, I began through the use of the .allowcameracontrol possibility on my SceneView invocation.

Having setup the HUD I changed it with some units of SCNActions to assist you to transfer across the board and throughout it to play completely different sides.

I got here up with two precept strikes — rotating the digicam across the board and taking it throughout the other facet. Determining which actions I wanted to do is past the scope of this paper, the topic I plan to cowl sooner or later. Within the meantime, right here is the code that flips the board entrance to again.

Working code that appears like this — There are 5 actions right here, that are run as a pair in parallel initially, then a single, then one other pair. The rationale I spin the board is that I would like to take action because the digicam is upside-down at that time.

My first drawback was that I couldn’t detect hits on the mannequin utilizing contact. I had confused SceneKit with SpriteKit, the place you’ll be able to outline a mannequin, give it a bodily physique after which detect contact with one other bodily physique. To detect contact, I wanted to offer each bit a geometry by making a hidden node onto which I connected my mannequin. I had too initially imagined the person choosing up the piece and dragging it throughout the board, however doing so clashed with transferring the board itself [both needing drag], so I used a dual-action the place the person picks the piece he needs to maneuver after which selects the sq. to the place he needs to maneuver it.

It’s evident in model one of many recreation I wasn’t going to attempt to validate which squares you moved to —I belief the participant to not attempt to make an unlawful transfer.

As I wrote this, it occurred to me that I might in reality give every chess piece in addition to the squares a bodily mannequin to facilitate a unique type of transfer, meals for thought, the follow-up maybe.

I didn’t make investments an excessive amount of time illustrating what occurs once you take a chunk; I merely made it disappear, changed by the winner. Extra SCNActions.

The Future

I now had a minimal viable product, as they are saying, at the very least from an indication perspective. Relying on how nicely it’s acquired, I could but return to the mission. Future jobs embody —

  • Implement a rating on the HUD along with a chunk taken maybe.
  • Validate strikes made to make sure no one cheats.
  • Implement some community code in an effort to play one other participant.
  • Implement a drag and drop kind interface to make the enjoying expertise just a little extra reasonable.
  • Make the piece speaking/loss extra dramatic 🙂
  • Implement some type of pc participant.

I hope you loved studying it and located some relevant code right here you’ll be capable to use in your tasks.

Wish to Join?Be a part of me on LinkedIn to attach, collaborate or only a chat.

More Posts