Tuesday, January 8, 2013

prototyping a spotlight effect

At work we're tossing around some ideas about motivating users with "surprise and delight" (which sounds better than "randomness and chaos").

I've been advocating for a form of random token rewards, where part of the charm is that there are enough of them (and hopefully they're visually interesting enough) that they provide a mild motivation to get more of them. Unlike normal badges, it's not just a pride thing, but these might be able to work a Pokemon-ish "gotta catch 'em all!" effect.

I wanted to create an interaction for showing a user "hey this is the one you won" while hinting at the others that they almost won. My first thoughts were similar to the Simple Slot Machine Effect I posted earlier, though maybe with a horizontal layout rather than vertical. On further thought, I came up with a "spotlight" where a roaming spotlight lands on the one they get, and I hacked together a quick prototype:

(click to get a new set of images and rerun the spotlight)

For the trophy doodles, I used a sheet of doodles I made a while back. The spotlight effect is straightforward: there is a "stage" outer div with its overflow hidden, and it holds a single sheet of all the doodles (good enough for the prototype) and a mask div with a transparent circle in the middle, and the rest displayed gray with a 90% opacity.

The motion of the spotlight is more complex; I used some techniques I use all the time in my homebrew games, giving the spot and x and y speed, and then over  a series of timeouts I use that to adjust the offset of the mask layer. (The x speed and y speed are adjusted so the spotlight is pushed towards the center each click, if the light is going to be outside the "stage" it rebounds and loses some speed, the speed is throttled just a bit, and then finally if the thing is close enough to the center and moving slowly enough, it won't get moved again to prevent any "near the center but not quite" jitter.)

Coworkers pointe out it might be cooler to use more variable translucency, so it's even darker farther away from the spotlight, and of course with the real thing it wouldn't be a single sheet. Still it gets the idea across rather well, and only took an hour or so to churn out.

No comments:

Post a Comment