Blogs from the Ranch

< Back to Our Blog

Crowns and Sprites in WatchOS 3


Steve Sparks

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

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?


Steve Sparks

Not Happy with Your Current App, or Digital Product?

Submit your event

Let's Discuss Your Project

Let's Discuss Your Project