Crowns and Sprites in WatchOS 3

It’s been a bit over a year since we got the Apple Watch, and right at a year since we got watchOS 2. Back then, we were excited to be given a way to interact with the digital crown. You created a WKInterfacePicker in IB, filled it with picker items, and it would react to the crown for you. It was usable, but limited. It required you to give up screen space, even though you could make it invisible.

This year we’ve been given a much better solution with the WKCrownSequencer. It is a system-generated object that you retrieve from your interface controller (by calling [self crownSequencer]) and assign a delegate to it. The delegate methods will be called when the rotation rate of the crown changes.

To see how it worked, I wrote a very simple watch project that only had a single label. I made the interface controller conform to WKCrownDelegate, and added this code:

- (void)willActivate {
    [super willActivate];
    self.crownSequencer.delegate = self;
    [self.crownSequencer focus];
}

- (void)crownDidRotate:(WKCrownSequencer *)crownSequencer rotationalDelta:(double)rotationalDelta {
    self.totalDelta = self.totalDelta + rotationalDelta;
    [self updateLabel];
}

- (void)updateLabel {
    [self.label setText:[NSString stringWithFormat:@"%f", self.totalDelta]];
}

(totalDelta is declared as a CGFloat property.)

When you run the app and turn the crown, you will get a sense for what rotationalDelta means. A value of 1.0 appears to indicate that the crown has completed a full rotation. That’s a nice usable way to access the information: you can multiply by 360.0 for degrees, or 57.296 for radians.

New Modes of Interaction

By enabling access to the raw data from the crown, Apple is opening up the ways in which we can use it. There’s much more flexibility here than WKInterfacePicker offered. You could use the sequencer to read velocity just as easily as you could position. In fact… the crown might make for good gameplay.

I have a Flappy Bird clone that I wrote to play with SpriteKit on the watch. Like all such clones, when you tap the screen, you add an upward impulse to the bird, after which gravity begins to bring the bird back down. We could just as easily add an upward impulse from the crown input. In fact, if you turned the crown at the right speed, you could offset the gravity effect completely and play Hovering Bird!

The code to implement the spinner was five lines. We conform to the WKCrownSequencerDelegate protocol, and set ourselves as the sequencer’s delegate. Then, we implement the method to catch the event, adding whatever rotationalDelta we see to the vertical velocity of the bird.

I am not sure that Spinny Bird is any easier than Tappy Bird, but it is fun. I can also imagine a competitive “tug of war” game with another watch owner, or using the crown to aim in a “missile command” game. And there’s one famous old game built around a rotary encoder that I might take a stab at implementing…

What are you gonna make?