Make sure to have “Include notification scene” unchecked.

2. Watch Face Set Up

Now you should be able to see “Face” and “Face Extension” folder. Create an Asset folder. Drag and drop a watch face background (watch_face.png) that you want to use in that folder. Then drag and drop watch_face.png into Assets.xcassets. Here is the background I used:

Click on GameScene.sks, then drag and drop the watch_face.png from the asset folder onto the template. Resize it to fill the screen.

Create a new Color Sprite and name it “HourHand”. Naming here is important because this is how the code will recognize the sprite later. Resize it to your desire dimension for the hour hand of a watch. The “Anchor Point” of this sprite should be 0 for its Y axis so that it rotates at the bottom of the watch hand. You can also use images for watch hands. Just make sure you’ve added them in the Asset folder and Assets.xcassets. In this example I’ll just use simple color sprite.

Do the same twice for “MinuteHand” and “SecondHand”.

3. Animating the Watch Face

Overwrite GameScene.swift under “Face Extension” with the following code:

import SpriteKit class GameScene: SKScene { //Define SKSpriteNode for watch hands var secondHand:SKSpriteNode = SKSpriteNode() var minuteHand:SKSpriteNode = SKSpriteNode() var hourHand:SKSpriteNode = SKSpriteNode() override func sceneDidLoad() { if let secHand:SKSpriteNode = self.childNode(withName: "SecondHand") as? SKSpriteNode{ secondHand = secHand } if let minHand:SKSpriteNode = self.childNode(withName: "MinuteHand") as? SKSpriteNode{ minuteHand = minHand } hourHand = hrHand } } override func update(_ currentTime: TimeInterval) { // Called before each frame is rendered let date = Date() let calendar = Calendar.current let hour = CGFloat(calendar.component(.hour, from: date)) let minutes = CGFloat(calendar.component(.minute, from: date)) let seconds = CGFloat(calendar.component(.second, from: date)) secondHand.zRotation = -1 * deg2rad(seconds * 6) minuteHand.zRotation = -1 * deg2rad(minutes * 6) hourHand.zRotation = -1 * deg2rad(hour * 30 + minutes/2) } func deg2rad(_ number: CGFloat) -> CGFloat { return number * .pi / 180 } }

Select an iPhone emulator with Apple Watch. Click on the Run button, and you should have the watch face running on an Apple Watch emulator:

4. Hiding Status Bar Clock

The clock on the upper right hand corner will only be hidden when an app is displaying a modal. To do this, we need to first create another Interface Controller inside Interface.storyboard under the “Face” folder. Name this controller the “IntroInterfaceController” and drag the Main Entry Point to this new controller. This way the app will start with this view first.

Next, create a new swift file with WatchKit Class template and give it the same name “IntroInterfaceController”. Make sure it is the subclass of “WKInterfaceController”.