Spaceship Earth Tribute

I wanted to make something pretty.

Most of my prior watchfaces - sorry, all of my prior watchfaces aren't particularly eye-catching. But I had a plan. I was going to remake my first watchface, Classic SSE, with brand new assets and make it look good. I'd just received the Pebble Time Round for my birthday in november, and was having a good time using it, but didn't have anything Disney to put on it. So, it was time. But how to do it?

I'm not good at actually drawing or painting anything - let alone pixel art. So I kind-of "cheated." 

Making Art

Step 1: Create the triangles pattern again, this time ready for a higher resolution screen.

Step 2: Shade the triangles.

Oh.

Oh no.

So, I'm not good at this part. I've never been able to actually draw shadow or highlights myself. But I understood them in concept. Things facing the light would be brighter, things that were facing away would be darker. An idea formed in my head. What if I created photoshop adjustment channels for each direction of triangle, and adjust the darkness/lightness as a group? That way, all the ones pointing directly at the sun could be adjusted together, the ones pointed away, etc. So, I did. Here's the result.

(A note about the dithering artefacts - the Pebble displays only had a 64-color pallete. It was impressive for an e-ink display, but... limiting)

I really liked how this turned out.

It looks a lot better on the watch itself - the dithering looks much better on the small display, and there's some color differences that come from the lack of active backlight on the device. 

But my master stroke wasn't just to shade it like this. It was to stick that onto a separate layer on photoshop. Now I could put whatever assets I wanted underneath.

You'll note I made a bunch of images with the Epcot Iconography, too. They're now out of date, but they looked good for the time. Probably a bit messy, but they worked well. Naturally, they didn't have the SSE shading, but that was just for the Night/Day/Sunset backgrounds. Speaking of which, I set these up to be progressed through as the day did. So it would theoretically match whatever the lighting was on the actual Spaceship Earth at any given time.

Neat.

But what about the time?

Ah. That's an important part. And also probably my biggest mistake.

So, I decided to go with the "Prototype" font, used for EPCOT. That worked really well. We'd display the time on the center of the display, and even have a little monorail running beneath it, like they do in real life. You know what would be really cool, however? Rotating it to match the angle of the SSE tilt.

That was the problem.

It's easy in concept. Render the text offscreen, rotate it, then drop it back in the center of the display. Sure, it's not the most performance-friendly thing, but that's not the point. It looks pretty.

(The "50" below the text is representative of the battery level of the watch. 50%, in this case).

Isn't that classy? I love it.

Here it is on the Chalk (Pebble Time Round) platform. This also show the monorail battery indicator - the color of the monorail stripe changes with the battery voltage, going from green to red to a few different shades in between.

Rendering these screenshots again reminded me of just how badly optimized this was. I mentioned earlier that the rotation only rotated the text. Well, that would have been the smart/correct option. Instead, I decided at some point to rotate the entire image (180x180px) by whatever angle had been set by the user (default of 22 degrees). This caused the frame to take about 2.5-3 seconds to render on the watchface.

This is not good at all.

So, yeah, it is pretty, had a fun little gimmick, but was unfit for release based upon my design choices. I eventually just dropped the project, while still using it daily on my PTR. The performance impact was quite evident - while pebbles only render updates to the screen every time they're needed (for a watchface, that's typically once a minute), the amount of time this took drained so much extra battery life that it reduced the battery time for the watch to a third - from about three days on a charge to just one. Not acceptable.

Fancy Configuration!

This was the first project I did that used the newest invention in pebble configuration: Pebble Clay! This allowed you to define the entire configuration page in some simple javascript (with some nice options for configuration), and it'd generate the page on the phone itself. No more need for an external host. It worked quite well, and looked pretty nice, too

Premium Features

I wanted to make money on this, too. It had taken the longest amount of time I'd ever spent on a pebble project (up to that point), featuring lots of assets, code, and time spent on it. Luckily, there was a service gaining popularity at the time which basically allowed in-app purchases for pebble apps and watchfaces. My plan was to make all the "extra" styles of the watchface (the ones that aren't just the daytime cycle) a single $0.99 purchase. I even got that set up too, but, of course, didn't follow through thanks to the performance issues. 

Ah well. It still looks really nice.