Greymail Kinect game, arms flailing lol

Microsoft were announcing new features for Hotmail for what they called Greymail. That’s all the unwanted newsletters and the like that’s not spam and filling up your inbox. So VCCP decided to make a Kinect game for the various Hotmail events that Microsoft hold at Universities and the like. Our Creative Tech had done a quick prototype and it was decided that the game would be written in ActionScript and published as an Adobe AIR app.

AIRKinect’s SelectableHandle runs a timer before confirming a hit

A quick massage while the game counts in

I was on lead coding duties, with the database integration handed over by a fellow dev. Games screens designed by Simon Bostock, with some assets like badges and sounds supplied by a third party.

A fancy widget for inputting initials by waving your hands about

The XML lists score ranges for achievement badges

Set up

It was time to boot into Boot Camp on my mac for some Windows 7 love. After installing the Kinect for Windows SDK I then installed Adobe Flash Builder. I’m usually an FDT coder, but version 5.6 wasn’t out yet and AIRKinect uses a .ane native extension to receive data from the Kinect.

Code base

I used a simple MVC pattern. It’s really similar to the Chedds game I built last year. You can get an idea about how it’s set up and all linked together below.

This is all wrapped up in an AIR app

Essentially there’s an invisible button covering the whole screen. When the player reaches forward (measuring the hand to shoulder z distance) the coordinates are sent via a command and picked up by the game area. Then there’s a quick loop through list of onscreen targets with a bounding box only collision test. If the hand hits a target the state changes for that hand.

AirKinect & the hands

Using AirKinect to control the hands is relatively straightforward. Each hand has properties for:

1. Active. The hand is extended forward.
2. Locked. The hand has grabbed a target.

Information is read from the skeleton every frame (using AIRKinect’s SkeletonFrameEvent). The pad modifier is applied to let players reach the corners of the screen. The results are passed to CursorController to be picked up by various parts of the game. Here’s the onSkeletonFrame so you can see it’s mostly about reading the numbers and applying them to the game.

private function onSkeletonFrame(event:SkeletonFrameEvent):void
{
  var numSkeletons:uint = event.skeletonFrame.numSkeletons;
  …
  if (_skeleton != null)
  {
    _leftHandJoint = _skeleton.getJoint(AIRKinectSkeleton.HAND_LEFT);
    _rightHandJoint = _skeleton.getJoint(AIRKinectSkeleton.HAND_RIGHT);

    _rightShoulderJoint = _skeleton.getJoint(AIRKinectSkeleton.SHOULDER_RIGHT);
    _leftShoulderJoint = _skeleton.getJoint(AIRKinectSkeleton.SHOULDER_LEFT);

    var pad:Number = _cursorModel.pad;

    _leftHandJoint.x -= pad;
    _leftHandJoint.x /= (1 - pad) - pad;
    _leftHandJoint.y -= pad;
    _leftHandJoint.y /= (1 - pad) - pad;

    _rightHandJoint.x -= pad;
    _rightHandJoint.x /= (1 - pad) - pad;
    _rightHandJoint.y -= pad;
    _rightHandJoint.y /= (1 - pad) - pad;

    var m:Number = _cursorModel.distanceMultiplier;

    _leftHandCursor.update(_leftHandJoint.x, _leftHandJoint.y, _leftHandJoint.z);
    _rightHandCursor.update(_rightHandJoint.x, _rightHandJoint.y, _rightHandJoint.z);

    _xyLeft.x = _leftHandCursor.x * _sizeModel.width;
    _xyLeft.y = _leftHandCursor.y * _sizeModel.height;
    _xyRight.x = _rightHandCursor.x * _sizeModel.width;
    _xyRight.y = _rightHandCursor.y * _sizeModel.height;
    _cursorController.leftHandPosUpdated(_xyLeft);
    _cursorController.rightHandPosUpdated(_xyRight);

    // test grabbing state
    var grabRight:Boolean = _rightShoulderJoint.z - _rightHandJoint.z > 0.2;
    var grabLeft:Boolean = _leftShoulderJoint.z - _leftHandJoint.z > 0.2;
	
    // apply grabbing results
    if ((grabRight || grabLeft) && !_cursorModel.rightHandActive && !_cursorModel.leftHandActive) _cursorController.startGrabbing();
    else if (!grabRight && !grabLeft && (_cursorModel.rightHandActive || _cursorModel.leftHandActive)) _cursorController.stopGrabbing();

    if (_rightHandCursor.enabled)
    {
      if (grabRight && !_cursorModel.rightHandActive) _cursorController.announceRightHandActive();
      else if (!grabRight && _cursorModel.rightHandActive) _cursorController.announceRightHandInactive();
    }

    if (_leftHandCursor.enabled)
    {
      if (grabLeft && !_cursorModel.leftHandActive) _cursorController.announceLeftHandActive();
      else if (!grabLeft && _cursorModel.leftHandActive) _cursorController.announceLeftHandInactive();
    }
  }
  …
}

Top ten are saved to a database in local storage

It was a lot of fun using AIRKinect and even more fun testing the game. Hopefully next time I can build something for the Kinect with WPF :-).

"A" for Albatross, "Q" for Quatermaster

I’ve started a personal project to illustrate animals in professions, one for each letter of the alphabet. I’m drawing them in alphabetical order. So far I’ve done four. An albatross, bull, cat and dog. This is "A" for Ablatross. I’ll post about the others later. When I have all 26 done I’ll also have a complete set of alphabet professions :-).

Albatross Quartermaster

Before I started I already had a strong picture in my mind. "A" for Ablatross would be first and I wanted it to have a nautical theme. It was an early oportunity to do "Q" in the professions. Quartermaster has two potential, and quite different, descriptions.

Quartermaster

A military officer responsible for providing quarters, rations, clothing, and other supplies.

Quartermaster

A naval petty officer with particular responsibility for steering and signals.

Instead of trying to show the albatross playing out the Quartermaster role in a semi-realistic manner I cast him in a romanticised setting full of nautical iconography. Sunset, waves, steam ship, decks of an ocean liner, marine propellor (Why is it on deck? Let’s call it artistic licence!), an old fashion ship’s wheel, a compass and sextant.

Albatross Quatermaster poster

As the first in the series the Albatross Quartermaster also sets the style and level of detail. The nautical theme and lovely flat vector shapes add a little Art Deco (only a hint). If you like Art Deco check out Cassandre’s posters.

A bit about the process

I like to start in Sketchbook Pro where I can get a nice pencil mark. Firstly exploring the relationship between the character and the scene. Then outlining all the details. Sorting out all this upfront lets me concentrate on path making and colours in Adobe Illustrator.

The whole thing is done without transparency to keep within the limitations of Illustrator 8 EPS. The final vector is available on iStockPhoto. As a final touch I used a small app called Flare to add an old poster effect.

W3C Markup Validation Service, ajbis.co.uk has passed!

I recently ran this blog’s homepage through W3C’s Markup Validation Service. There were five errors. Two of them repeating over and over again as they where in posts pushing the total errors to a scary 36! A bit of Googling revealed that they were pretty common. Below are the tweaks I added to pass with flying colours ;-).

1. Profile attribute is obsolete

The profile attribute on the head element is obsolete. To declare which meta terms are used in the document, instead register the names as meta extensions. To trigger specific UA behaviors, use a link element instead.

That’s this bit…

<head profile="http://gmpg.org/xfn/11">

The WordPress Codex explains what XFN is about and why it is included here. In short it helps define relationships between your blog and the links you use. The suggested link tag would look like this…

<link rel="profile" href="http://gmpg.org/xfn/11" />

Adding rel attributes to links however comes with rules in HTML 5. I have decided to exclude the XFN profile and avoid any questionable rel values being added to the site. Maybe I’ll add it back in later once I’ researched XFN and know I can fully control the relationships. Either way I have a custom header PHP file in my child theme and have replaced the default thematic_head_profile with ajbis_head_profile to write in the opening head tag.

function ajbis_head_profile()
{
    $content = '<head>' . "\n";
    echo apply_filters('ajbis_head_profile', $content );
}

2. Bad value on meta tag

Bad value X-UA-Compatible for attribute http-equiv on element meta. This line of code is part of HTML5 Boilerplate.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

What is ‘X-UA-Compatible’ anyway? Well it’s there to tell Internet Explorer how to render the page. There’s some great documentation on this over at MSDN. If you are really interested then I’ recommend reading Defining Document Compatibility.

This meta tag can be removed and the X-UA-Compatible header placed in your root level .htacess. Add the following:

Header set X-UA-Compatible "IE=edge,chrome=1"

3. Datetime value on time tag

Ten errors. One for each post. Here the first one listed in the validation output. Bad value 2012-08-17T17:52:39+0100 for attribute datetime on element time: The literal did not satisfy the date format. The literal did not satisfy the datetime with timezone format. The literal did not satisfy the date or time format.

Lots of words for such a little error ;-). Thematic’s thematic_time_title includes seconds (Marked in bold below).

<time datetime="2012-08-17T17:52:39+0100">17th August, 2012 </time>

A quick read at the WordPress Codex ‘Formatting Date and Time’ and you’ find the required format. That would be ISO 8601. I have already added childtheme_override_postheader to create my HTML 5 friendly date and category strip in the header. All I had to do was change the format string passed to get_the_time.

…
echo '<h4><time datetime="' . get_the_time('c') . '">';
echo thematic_postmeta_entrydate();
echo ' </time><span>» ' . get_the_category_list(', ') . '</span></h4>' . "\n";
…

4. Keyword category is not registered

Bad value category tag for attribute rel on element a: Keyword category is not registered. Here’s an example.

<a href="http://www.ajbis.co.uk/category/designer/" title="View all posts in Designer" rel="category tag">Designer</a>

My WordPress loop adds a list of categories associated with a post (that’s pretty standard). Each link has a rel attribute of "category tag". The rel attribute in HTML 4 can be anything. It’s just there to help give a little context. W3C School defines rel as “The relationship between the current document and the linked document.” HTML 5 has a bunch of proposed acceptable values. Category is not one of them :-(.

I’ve added a filter to my child-theme’s functions.php that replaces all instances of "category tag" in the_category.

function rel_cat_fix($content) {
  $content = str_replace('rel="category tag"', 'rel="tag"', $content);
  return $content;
}
add_filter('the_category','rel_cat_fix');

5. Keyword generator is not registered

Bad value generator for attribute rel on element a: Keyword generator is not registered. This is another unlisted rel option. This time in the footer. Yep. You guessed it, “Powered by WordPress.”

<a class="wp-link" href="http://WordPress.org/" title="WordPress" rel="generator">WordPress</a>

The quick solution here was to create a new shortcode and replace the [wp-link] in the ‘Text in Footer’ box found under Appearance > Theme Options. Like so…

Powered by [html5_wp_link]. Built on the [theme-link].

The shortcode was added my Thematic child-theme’s functions.php. In this instance I’ve swapped the offending keyword generator for author.

function html5_wp_link_func($atts)
{
  return '<a class="wp-link" href="http://WordPress.org/" title="WordPress" rel="author">WordPress</a>';
}
add_shortcode('html5_wp_link', 'html5_wp_link_func');

Now that the homepage is valid HTML 5 I can check out the other pages. I’m sure there’s a few more suspect rel values floating around (Like trackback!). Remember that the specifications for HTML 5 are not finalised and subject to change (We’ll at least not at the time I wrote this). Fab if anyone finds this post useful :-).

Microsoft Ad Vision Tool, made with Silverlight

Last July I had the pleasure of creating my second Silverlight app for Microsoft Advertising (You can read about the first one here) while working at VCCP. This Silverlight tool lets you view and filter videos from the Ad Vision series in an easy to use and visually engaging way.

Turning scamps into designs

This time around a creative team was involved and came to the briefing with a scamp (Thanks Ant & Rich!). “We’d like the videos to float in 3D space… and can you put some controls down the left to filter them according to date or who is in them.” Sure, that sounds great ;-).

Here’s the designs exported from Adobe Illustrator.

Ad Vision Tool design with videos floating in 3D space

If you don’t want to filter the videos the panel on the left will slide out of the way so you can enjoy the videos clutter free.

Filter the videos with options on the left

Note the inclusion of the search box. This was removed in development. Unless the users were familiar with the speakers, or we included topics in the tagging, it wasn’t that useful.

Interesting quotes from the videos are highlighted

Actually the zoomed in ‘quote’ plaque didn’t make it into the development. Clicking the plaque takes you to the video that the quote is from.

Watch videos streamed from MSN Video

All videos are hosted on MSN Video and streamed in by the custom XAML video player. With some visual trickery the plaque in space is tweened using a XAML storyboard animation and swapped to the fixed position video player at the end.

Linq, XML and plaques

Linq is great for importing XML. All the plaque data and text (including buttons) are stored and updated in XML. Here’s a sample.

<plaque ref="plaque7" type="quote">
  <quote><![CDATA["I'm most excited about the merging of the physical and digital world."]]></quote>
  <cite><![CDATA[Trevor Kaufman]]></cite>
</plaque>

<plaque ref="plaque7" type="hidden">
  <title><![CDATA[Interview with Trevor Kaufman, CEO of Possible Worldwide]]></title>
  <desc><![CDATA[Trevor Kaufman on the future of digital creativity and keeping up with the pace of change.]]></desc>
  <video><![CDATA[mms://….wmv]]></video>
  <speaker><![CDATA[Trevor Kaufman]]></speaker>
  <thumb><![CDATA[/images/thumbs/thumb_7.jpg]]></thumb>
  <tag><![CDATA[Interviews]]></tag>
  <date year="2011" month="5" day="17" />
</plaque>

There are three types of plaques, quote, hidden and video. When clicked a quote plaque will use the ref attribute to animate to a video. The reference should match a hidden plaque’s reference. Hidden plaques are otherwise the same as the video ones.

The speaker, tag and date nodes are used by the filtering tools.

Zoom slider

The most exciting part of this project was creating the custom slider for zooming through the videos in 3D space. This was done by extending the default Slider control, appropriately named ‘ZoomSlider’. An extra dependency property (UpdateTicksHeight) was added to update the height, and tick marks along the slider, whenever the videos are filtered. Here’s the C#.

…
namespace AdVisionTool.View
{
  public class ZoomSlider : Slider
  {
    public static readonly DependencyProperty UpdateTicksHeightProperty = DependencyProperty.Register("UpdateTicksHeight", typeof(double), typeof(ZoomSlider), new PropertyMetadata(UpdateTicksHeight_Changed));

    private double _height { get; set; }

    public double UpdateTicksHeight
    {
      get { return (double)GetValue(UpdateTicksHeightProperty); }
      set { SetValue(UpdateTicksHeightProperty, value); }
    }

    public ZoomSlider()
    {
      DefaultStyleKey = typeof(ZoomSlider);
      this.Loaded += new RoutedEventHandler(ZoomSlider_Loaded);
    }

    private void ZoomSlider_Loaded(object sender, RoutedEventArgs e)
    {
      _height = base.ActualHeight;
    }

    public override void OnApplyTemplate()
    {
      AddOrUpdateTicks();
      base.OnApplyTemplate();
    }

    private void ZoomSlider_LayoutUpdated(object sender, EventArgs e)
    {
      AddOrUpdateTicks();
    }

    private void AddOrUpdateTicks()
    {
      Grid ticksOuter = (Grid)GetTemplateChild("VerticalTrackTicksOuter");
      Grid ticksInner = (Grid)GetTemplateChild("VerticalTrackTicksInner");
      Thumb thumb = (Thumb)GetTemplateChild("VerticalThumb");

      if (ticksOuter != null && ticksInner != null)
      {
        // remove any ticks from previous updates
        if (ticksOuter.Children.Count > 0)
          while (ticksOuter.Children.Count > 0) 
            ticksOuter.Children.RemoveAt(0);

        if (ticksInner.Children.Count > 0)
          while (ticksInner.Children.Count > 0) 
            ticksInner.Children.RemoveAt(0);

        GradientStopCollection stops = new GradientStopCollection();
        GradientStop stop1 = new GradientStop();
        GradientStop stop2 = new GradientStop();
        stop1.Color = Color.FromArgb(255, 242, 242, 242);
        stop2.Color = Color.FromArgb(255, 204, 204, 204);
        stop1.Offset = 0;
        stop1.Offset = 1;
        stops.Add(stop1);
        stops.Add(stop2);
        LinearGradientBrush grad = new LinearGradientBrush(stops, 90);

        int h = Convert.ToInt32(Math.Floor(_height / 20));

        // add ticks 
        for (int i = 0; i < h; i++)
        {
          Rectangle r = new Rectangle();
          r.SetValue(NameProperty, "TickOuter_" + i);
          r.Height = 3;
          r.Width = 11;
          r.HorizontalAlignment = HorizontalAlignment.Center;
          r.VerticalAlignment = VerticalAlignment.Top;
          if (i==0)
             r.Margin = new Thickness(0, 4, 0, 0);
          else
            r.Margin = new Thickness(0,i*((_height-11)/(h-1))+4,0,0);
          r.Fill = grad;
          ticksOuter.Children.Add(r);

          Rectangle g = new Rectangle();
          g.SetValue(NameProperty, "TickInner_" + i);
          g.Height = 1;
          g.Width = 9;
          g.HorizontalAlignment = HorizontalAlignment.Center;
          g.VerticalAlignment = VerticalAlignment.Top;
          if (i == 0)
            g.Margin = new Thickness(0, 5, 0, 0);
          else
            g.Margin = new Thickness(0,i*((_height-11)/(h-1))+5,0,0);
          g.Fill = new SolidColorBrush(Colors.Black);
          ticksInner.Children.Add(g);
        }
      }
    }

    public static void UpdateTicksHeight_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      ZoomSlider slider = (ZoomSlider)d;
      slider._height = (double)e.NewValue;
      slider.AddOrUpdateTicks();
    }

  }
}

Most of the Microsoft Advertising website has gone all HTML 5. The Ad Vision Tool is no longer available. For those of you with the Silverlight 4 or higher plug-in I’ve placed a copy link. :-)