Street Painter

Step 1

Going into the Pebble Rocks Boulder Hackathon, we wanted to create something around passing one another on the street and exchanging some sort of data between the two Pebble Time smart watches; however, after researching and building bluetooth boards (with arduino), we found this to be quite a challenging task – at least what we wanted to do with it. After learning more about the smart watch, we settled on a game at ~ 1pm on Saturday afternoon – Street Painter.

Street Painter allows you and your friends to compete to paint all of the tiles displayed on an iOS device, using your pebble watch as a virtual paint brush controller - the watch's accelerometer is the primary input for the gameplay. 

Step 2

You are represented by a colored paint brush and will encounter hidden power-ups or hidden traps beneath tiles. When you get a power up, only you know what is in your personal arsenal: power ups display on each player's Pebble Time watch. Power-ups and traps include: Paint Bomb (paints all tiles adjacent to you with your color), Dry Spell (your opponent's paint brush dries out and slows them down to half the normal speed), and the Road Runner (speeds you up to two squares per turn). Manholes are a hidden trap that can trap you on the wrong square for 5 seconds.

Step 3

From a design perspective, we were really excited about how the Pebble Time displays artwork and animations. We decided that it would be really fun to try and create components that would mimic the Native experience that the Pebble showcases. We prototyped animations, but didn't have time to create a full suite of assets. We did make all of the icons as SVGs and plan to update them with animations in the near future. 

While creating these design assets, we found a few quirks to using SVGs. For one, it's really hard to display transparencies on the Pebble without using APNGs. We didn't want to use APNGs because we wanted to have more control over animations. One workaround to using transparencies that we utilized was dithering. While the Pebble doesn't support dithering with SVGs natively, we used a workaround by utilizing dot-matrix styling on the SVG itself. We accomplished this by adding 1px X 1px dots that are 1px apart from each other and then punching the 1px dots through a solid SVG rectangle so that the dots and the rectangle become one shape with a compound path.

Step 4

As the game evolved, we decided that creating a wand style controller would enhance the experience and make the accelerometer-driven gameplay inputs more consistent.  We worked with the Lulzbot team to 3D print a series of iterations until we arrived at the ideal form factor. 

On the development side, we were able to exploit the `PBPebbleCentral.defaultCentral().connectedWatches` method. Typically a pebble app will just connect to the `lastConnected` watch, but we map over all connections and assign data to each one. Each pebble is assigned an identifier and all `AppMessage` is tagged to the central game.

Unfortunately the user experience with connecting multiple pebbles to one phone is poor. Each pebble needs to be connected through the Pebble Time. We were able to connect additional pebbles by disconnecting the other ones (airplane mode), then reconnecting afterward. It would be super to have multiple connections through the iOS app in future!