Dare with Bamboo: Skin Ink Development


Development of Skin Ink has been going from strength-to-strength!
Although it has had it’s fair share of “issues”!

Wacom Bamboo is an unusual, but fantastic platform to develop for.
Bamboo itself is the name of a series of tablets, whilst the Bamboo Dock is the software tool that we’re integrating with.  The Dock and Bamboo SDK are written in AS3 (ActionScript 3).  We use Adobe Flash CS5 for our development work and integrating the SDK into our projects was a cinch.

Now, getting the hardware to talk to our application (through the SDK) and making use of the events and values returned was the first hurdle, albeit an incredibly fun hurdle!
From here, we need to make use of this data, as well as create an actual game out of the ideas.

Skin Ink is a drawing game, through and through, so it relies on us being able to draw lines.  Sounds simple enough and there are plenty of tutorials out there for how to achieve simple art or drawing applications very quickly.  One issue we encountered was handling the sheer amount of information being drawn to the screen.
You see, the simple way of drawing lines to the screen is to make use of AS3’s “Vector Graphics” class.  Several DisplayObjects – something that can be displayed – in Flash allow us to make use of the “Graphics” class, these include Sprite and MovieClip.  But the performance issue we hit upon comes from one simple fact:
The Graphics class uses Vector drawing.
Vectors are drawn every frame.
So if we draw a line, then we draw one vector image.  Continue to drag the stylus and you draw even more lines (even though you think it’s one continuous line, it’s actually a collection of many shorter lines).  Each one of these lines are drawn every frame – and Bamboo operates at 45fps!
We needed some optimisation here, and fortunately, there’s an easy approach.  Draw the Vector lines, as you would.  But then “draw” these Vector lines to a Bitmap object, and clear all the vector lines.  Bitmaps are only drawn once (under special circumstances they might be redrawn), so even the update to add new lines is a quick and simple task – both for us as the programmer, but also for application.

The last thing I want to talk about today has also been the toughest challenge for us to solve – but boy, has it been an interesting ride!
We intend on scoring the player based on their accuracy of matching stencils already applied to the “Body”, which they must then trace with a tattoo machine.  AS3 has collision detection and this can actually be per-pixel!  But what it can’t tell us is how far away from the edge of the object we are, or similarly how much into the object we are.  Sure, you can calculate how far from the object centre (or action point, which can be anywhere!) you are, but for complex shapes, this doesn’t help with knowing the lines accuracy.
We needed our own mechanism!
The first thing we needed to do was figure out a logical and robust way of storing the stencil data.  We would need to be able to draw this stencil to the screen BUT also be able compare any point along the stencils line with the mouse position.  This comparison would be our accuracy.

Solving this accuracy issue has, pretty much, made the game.  The “Ink Trial” mode (sort of like a “Time Trial” mode in other games, but here you must be as accurate as you can in order to regain ink, so you can complete additional stencils) now has clearly defined win/lose conditions and a scoring mechanism.

We’ll post more details about the development of Skin Ink as we get to them – but for now, back to the grindstone!