Add a 3D Touch meter/gauge to your SpriteKit game in Swift 👇📱

 

meter

 

With the iPhone 6S and iPhone 6S Plus Apple added a feature called 3D Touch. Using 3D Touch, the iPhone can detect how much pressure is applied to the screen.

This could be useful for any type of functionality that requires varying degrees of input. For example: increasing a character’s jump height, or increasing a weapon’s speed depending on how much pressure is applied.

This tutorial will show you how to build a simple force meter in your SpriteKit game to detect how much pressure the user has applied to the screen, and display it via a HUD element.

 

meter1

  • Launch Xcode and create a new SpriteKit game. Call it ForceMeter or whatever, and make sure Language is Swift, Game Technology is SpriteKit, and Devices is iPhone.

 

  • First, let’s create some SKSpriteNodes to represent the meter background, and the area that will be filled when pressure is applied. Select the GameScene.swift file, and underneath the  “import SpriteKit” statement add the following:

 

 

  • We’ll also add a label to display the amount of pressure applied, a default text string to show when no pressure is applied, and a constant to represent the maximum 3D touch value. Below the fillNode, add the following:

 

Note: 3D touch represents pressure as float values from 0.0 to maximumPossibleForce which on the iPhone 6S and iPhone 6S Plus is 6.666666666667. It’s a strange value and according to Apple, maximumPossibleForce may be different based on different hardware. For now, the correct way to do this would be determine what maximumPossibleForce is based on the first touch you receive, but Apple acknowledges this is not ideal and will be addressed in the future. For now let’s just assume 6.66 is maximumPossibleForce to make this easier ?

 

  • When the scene launches, the didMoveToView(view: SKView) method is called. We don’t need the demo code, so delete it. Next, set the properties for the nodes  so the method looks like this:

 

 

  • If you’re new to SpriteKit, it might look like a lot is going on but really we just added the meterBackground, the fillNode, and the text table and sized and positioned them.

 

  • We won’t need anything in touchesBegan, so you can just delete or comment out what’s inside. I don’t recommend deleting the method because if you add more to this project, you’ll almost certainly be using it later.

 

  • We will need to implement touchesMoved though, as this is where the force detection happens. Add the following method after the touchesBegan method.

 

 

  • We are checking the touch.force property, and if it’s less than our maximum pressure value, we resize the fillNode and the label will change to the pressure amount value (truncated to 2 decimal places), and the meter will rise. When pressure is reduced, the label and meter adjust accordingly. If the maximum force has been applied, we change the meter colour to red and display a “MAX” message in the label.

 

  • Finally let’s implement the touchesEnded method so that our meter resets with no pressure is applied:

 

 

That’s about it. You can download the Xcode project from Github here.

A couple of notes:

  • You need to test this on a device that supports 3D Touch (iPhone 6S and 6S Plus as of this writing and the iOS Simulator does not support it)
  • You’ll notice the meter doesn’t go to MAX very smoothly and just jumps abruptly. This is a bug I was too lazy to be bothered with  an exercise left to the reader.