[教學] AIRKinect 的魔法帽子

Kinect 與Flash 的連接, 我們透過AIRKinect (安裝參考)簡單地完成. 以下為大家介紹魔法帽子範例, 當一個人走進Kinect 範圍, 在螢幕為她蓋上一個魔法帽子.

1. 在程序啟動時, 對AIRKinect 物件加入三個事件監聽器:
     CameraImageEvent.RGB_IMAGE_UPDATE - 影像每次更新產生的事件
     UserEvent.USERS_WITH_SKELETON_ADDED - 發現一個新骨架時事件
     UserEvent.USERS_WITH_SKELETON_ADDED - 骨架離開Kinect 事件

   if (Kinect.isSupported()) {
     // <----- get Kinect instance
     _device = Kinect.getDevice();
     
     // <----- add listener for Kinect
     _device.addEventListener(CameraImageEvent.RGB_IMAGE_UPDATE, rgbImageUpdateHandler, false, 0, true);
     _device.addEventListener(UserEvent.USERS_WITH_SKELETON_ADDED, skeletonsAddedHandler, false, 0, true);
     _device.addEventListener(UserEvent.USERS_WITH_SKELETON_REMOVED, skeletonsRemovedHandler, false, 0, true);
     
     ...
     
     // <----- start the Kinect
     _device.start(settings);
   }
   

   
   
2. 當發現一個新骨架, 我們建立一個帽子MovieClip, 產生魔法效果:
   
   

   

   帽子(_Hat1) 魔法效果是由Flash IDE 的時間軸製作

   ...
   [Embed(source="assets/hat1.swf")]
   private var _Hat1:Class;
   ...
   private function skeletonsAddedHandler(event:UserEvent):void{
     for each(var addedUser:User in event.users){
       var sprite:Sprite = new Sprite();
       var head:SkeletonJoint = addedUser.getJointByName("head");
       var headRGB:Point = head.position.rgb;
       sprite.name = addedUser.trackingID.toString();
       sprite.x = headRGB.x;
       sprite.y = headRGB.y;
       
       // <----- add the MovieClip to stage
       sprite.addChild(new _Hat1() as MovieClip);
       _sprites.push(sprite);
       this.addChild(sprite);
     }
   }
   

   
   
3. 若骨架離開Kinect, 把相對於這個骨架的帽子刪除:

   private function skeletonsRemovedHandler(event:UserEvent):void{
     for each(var removedUser:User in event.users){
       for(var i:int=0; i<_sprites.length; i++){
         var id:String = removedUser.trackingID.toString();
         if(_sprites[i].name==id){
           this.removeChild(_sprites[i]);
           _sprites.splice(i, 1);
         }
       }
     }
   }
   

   
   
4. 影像每次更新時, 追蹤每個骨架頭部(head) 和頸部(neck) 關節位置, 計算兩者距離來決定帽子大小, 並利用TweenLite 把帽子移至頭部:
   
   

   

   Kinect 關節名稱

   private function rgbImageUpdateHandler(event:CameraImageEvent):void{
     // <----- get Kinect RGB Camera image to display
     _bitmapData.draw(event.imageData);
     
     for each(var user:User in _device.users) {
       if (user.hasSkeleton) {
         var head:SkeletonJoint = user.getJointByName("head");
         var neck:SkeletonJoint = user.getJointByName("neck");
         var headRGB:Point = head.position.rgb;
         var neckRGB:Point = neck.position.rgb;
         var diff:Number = Math.abs(neckRGB.y - headRGB.y);
         var diffBase:Number = 50;
         var scale:Number = diff/diffBase;
         var id:String = user.trackingID.toString();
         
         // <----- find the MovieClip
         for(var i:int=0; i<_sprites.length; i++){
           if(_sprites[i].name==id){
             // <----- change the MovieClip position
             TweenLite.to(_sprites[i], 0.1, {x:headRGB.x, y:headRGB.y, scaleX:scale, scaleY:scale});
             break;
           }
         }
       }
     }
   }
   

大家可以 [下載] 範例試試看.

後記:
微軟推出的Kinect 硬體在不同的版本, 是有不同的支援上限:
Kinect for Xbox 360 是由2009 年6 月份推出, 支援追蹤兩組骨架, 解像度640x480 @30Hz.
Kinect for Windows 是由2012 年2 月份推出, 支援追蹤四組骨架, 解像度1280x960 @30Hz.