Playtime - weird game-style clocks for Playdate

My first SDK app:
(beta .pdx download below)

Playtime City Scroll

(Right click these and Open in new Tab or the GIFs won't play?)

That corner digit is the date. But the time shows when you fiddle with the controls:

Playtime Digits

Lots of styles:

Playtime Styles

Details:

  • Game-style clock with 20 themes/background styles… and counting!

  • Theoretically power-efficient? (But I don’t have hardware yet to test.) It’s doing nearly nothing in between minutes—except the buttons are active.

  • FPS set to 10, and the update loop does nothing except refresh the 1-minute timer that awaits the next change, and check if the battery is at 35% or below.

  • It prevents sleep—unless it reaches 35% power, and then the default 60-second sleep is enabled.

  • Crank to wind the clock forward back (1 hour per revolution).

  • Dock crank to resume timekeeping.

  • D-pad up/down to change minutes manually. (Timekeeping resumes at the next minute to prevent accidentally messing up the time and not knowing!)

  • D-pad left/right to change hours manually.

  • A to cycle Hour-only, Minutes-only, or Both (this helps you learn to see the digits).

  • B to cycle through themes—your choice is saved and restored. (But I have bigger plans for turning this into a product for sale some day: other kinds of weird clocks, unrelated to this one—so then B would take you to a gallery of all the clock choices.)

  • System Menu option to cycle three different digit shapes (only 1s, 4, and 7s are affected).

  • The minute digits are easy to see—and so are the hour digits once you know what to look for! Depending on the chosen style, the time can be quicly readable—or a bit of a puzzle. The ENTIRE SCREEN is a big hour number:

Lastly, a look at my current favorite style, counting from 12:00 to 12:14:

Playtime Platforms

12 Likes

(Hmm... those are all animated GIFs... but some of them don't play in the forum unless you right-click and open in new window? Safari here.)

Giving out a nice "Game & Watch" vibe, pretty cool!

Are there plans to make the sprites move and interact with the clock?

I've thought about that (or even making it literally playable). For battery life, I'm thinking no, for now. But power use is speculative at this point, and many people will use it plugged in, so... maybe! When I have the hardware I will think more about the extras I want to add.

I definitely want to add more totally different kinds of clocks.

Devising weird timepieces is a hobby of mine—here are the 1.5 zillion Apple Watch faces I have made. (They run in the Apple Watch browser—which means they also run in any browser: I use them on an old iPad as a desk clock.)

Some of those I intend to port to Playtime. "Phi" and "Hebdomad" for starters.

1 Like

Wow, that's an amazing watch collection! Very creative, I can't wait to see what else you bring over to the playdate.

It looks good the way it is, but if you do decide add the animation, it would be cool if the crank was used to power up the animation for a few minutes (based on how fast and for how long it is cranked), and after the "crank power" is exhausted the animation would stop (extra points if you make it funny).

If that's too much work, you could also just use the playdate.getPowerStatus() method to determine if animation should be used when it is plugged in.

Keep up the good work!!

1 Like

This is so cool! I love it.

It's inspired me to port an old clock screensaver of mine

1 Like

Would be cool so if Games could register a "clock" update loop with the system.

1 Like

Definite Game & Watch vibes!

This is very cool. It took me a minute to work out how I was supposed to be seeing the hour (especially for the 12 in the last gif) but now it's twigged it feels very clever!

1 Like

Thanks! Actual animation is at least a possibility... although I lean towards keeping the power use lean

I find it a lot easier to see the hours if the theme keeps the screen mostly white, with black lines "carved" into it. Easier still if the minutes are rendered with a different look from the hour lines. And easiest of all if the theme is simple and uncluttered! But it's also fun to make the time a little hidden sometimes. So I have themes at both extremes.

BTW I expanded this digit guide to show minute examples, including how the "Busiest" setting (in System Menu) affects the minutes (only 1s, 4s, and 7s). It adds small extra marks to ignore, in order to make those digits occupy their full half of the screen:

1 Like

Here's a beta version 1 .pdx, if anyone wants to try this work-in-progress.

The file size is... let's see... 38... kilobytes ??? That puts Playdate development in perspective for me :flushed: I had to zip it for the forum... which made it larger :rofl:

I am now defaulting to the lowest digit complexity (System Menu).

Playtime.pdx.zip v1.0.2 (42.5 KB)

3 Likes

How retro is too retro?

Playtime ASCII

4 Likes

No clock is an island :desert_island:

Playtime Map

3 Likes

Not all the clocks will be "skins" for that one clock. Playtime will be a gallery of many clocks, some analog... like this one—circles in the Golden Ratio (phi) orbiting each other:

Playtime Phi
5:45 / Quarter to Six

The big circle is simply the "face," the small inner circle is the hour "hand," and the outer circle is the minute "hand."

Because there are no hour markings, I make it easy to tell where each hand is by "snapping" it to the nearest mark. So, on a normal analog clock, that hour hour hand would be CLOSE to 6 but in between 5 and 6. This clock snaps it right to 6. No ambiguity to process.

The minute hand snaps to the nearest 5-minute mark. It will advance to "10 to 6" halfway between 5:45 and 5:50. Again, no ambiguity—you can tell the time at a glance one you're used to the style.

Plus by not updating all those in-between states, battery life is spared.

4 Likes

I would naturally interpret that as 6:45, not 5:45. If you're quantising the movement I'd expect it to be floored, not rounded, as that's usually how clocks work in my experience (a ticking minute hand on a clock will tick when the second hand reaches 0, not 30).

2 Likes

That was my first instinct too, and fear not: that will be an option! You can play with different options in the web version I made for Apple Watch:

(Under Mode, turn off "To/Past" and it will work as you describe.)

The reason this is the default though, is to follow the way MOST people read analog clocks—if they regular users of them! I have always used mostly digital clocks, and when I read an analog clock, I do it the way you describe.

But the better way to read an analog clock (especially with few/no markings) is to read the minutes first, traditionally as "to" or "past." Then look at the hour hand. Reading the hour hand first doesn't work well: is it almost 6? A little past? Whereas having read the minutes first, you know that.

So for example: at 5:55, someone used to analog clocks expects the hour hand to be near the 6, not near the 5.

I have no such habits, so I can read the time either way (as long as I know which!)—but I still want a reasonable default.

And that default is: reading the time as "to" or "past" the nearest hour. If you're just reading imaginary digits left-to-right (like my digital clock habits tell me to do!) then the other setting would be better.

1 Like

Here's the most traditional clock in the collection:

  • Biggest digits the screen can fit (they get narrower if you choose the 24-hour mode)

  • Inverse dark-on-light version too, with slightly smaller inset digits, for the classic "LCD" look

  • Very quick "LCD fade" transitions (probably... unless I decide I don't like it!)

  • A bit of subtle anti-aliasing on the angles and circles—should be all but invisible at real-world viewing distances--whereas the jaggies this prevents were very visible

  • Custom LCD segments for Day and Date, within the colon dots

3 Likes

I swear people were saying you must compile separately for the device vs. the Simulator... but I have my Playdate now and Playtime runs just fine on it as is! Have at it!

So I guess that step only applies to C code.

I'm working on the "gallery" UI now so you can pick a clock quickly instead of having to cycle through them one at a time.

1 Like

First look at the clock gallery UI. Scrolls vertically.

D-pad to choose. Right side shows a preview of the highlighted clock (or About screen in this example).

(A) to select a clock—shows a screen with a longer explanation, and sometimes clock-specific options. (A) again to start the clock.

Within each clock, (A) can have unique custom functions. But (B) always goes back, and D-pad and crank always change the time in various ways (to help learn to read the weirder clocks—or just as a "fidget toy").

2 Likes

The collection's not final yet, but I can see the finish line ahead...

Playtime Gallery

The controls have sound, but I'm not happy with that yet.

4 Likes

Details screen once you choose a clock. Most clocks will have at least one customizable option. The d-pad both selects an option and, if you keep hitting Down, scrolls the explanation text below. D-pad Left/Right to change the selected option.

Playtime-Details-Screen