使用 Popup Window 做新浪微博登入與授權

最近做了一的大陸那邊的案子，需要串新浪微博的 API，記錄一下最後採用的方法，以免之後忘了。基本的問題是：前端(不管 js 或 as)按下開始/登入按鈕， Popup window 做微博登入與授權，然後接著登入後的遊戲。

HTML5 與 CSS3 資源整理

最近開始學HTML5與CSS3。因為網路上相關資源太多了，所以開一篇文章來作簡介與連結整理。東西會在我真正試過或看過才會放上來，所以一開始這篇的內容會很少，之後會慢慢增加。

AIRKinect Demo（6）AR

Kinect有彩色影像，也可以辨識User，有20個關節的2D、3D座標，自然是很適合拿來玩AR擴增實境。例如我們可以在User頭上戴上奇怪的帽子：


或是在場景上放個固定的虛擬物件：


再讓User跟這個虛擬物件互動，例如當User"碰觸"它時做點反應：


當然也有很多人配合Gesture，做出一堆奇奇怪怪的東西。

AIRKinect Demo（5）使用Gesture控制的體感遊戲

研究Kinect當然要試著開發幾個體感遊戲來玩玩。而體感遊戲中，我最想拿來試試的就是格鬥遊戲啦！以下就是我試著開發出來的Street Fight on Kinect Alpha，只是個簡單的Demo遊戲。

AIRKinect Demo（4）只有User去背的PointCloud

PointCloud是另一個Kinect提供給我們的資訊，簡單講就是把畫面上每個像素的顏色與深度z座標傳給我們，如此一來，我們可以把這些點拆解開來，放到3D座標裡面，可以玩出像這樣的效果：


不過因為傳回來的是全畫面的像素，所以背景什麼的就一起進來了。這時候我們可以利用UserMask的資訊，比對之後，就可以把User的像素取出來，具有深度，就得到這樣的效果：


這樣就得到User的PointCloud資料了。這樣的3D資訊(雖然只有正對Kinect那一面)，就可以拿來結合一些特效，玩出像是Denon最近一個活動的效果：
http://usa.denon.com/us/headphone/index.html

AIRKinect Demo（3）還是UserMask之Human Torch與Starling Particle

繼昨天成功將火焰特效套到UserMask上之後，今天開始考慮使用Stage3D來做特效，以便提高效能。第一個想到的就是之前玩過的Starling，以及它的外掛Starling Particle System。目前兩個都已更新到1.2版了。Starling Particle System可以玩出哪些效果可以參考之前介紹過的Particle Editor與Particle Designer。

要將UserMask與Starling Particle System結合，只要想辦法將UserMask轉成Texture，然後不斷更新給Particle System，就可以解決了。由於Particle System只能在一開始建構式的時候指定texture，因此這部分我們要自己加上更新texture的方法。經過小小的努力與測試之後，我成功啦：


測試結果，效能確實好很多。另外，Particle System有很多參數都可以即時控制，例如改變火焰大小、顏色、速度、方向等等，所以想結合音樂來變化也不是難事。而我們又有Particle Editor這樣的界面可以迅速調出超多種視覺特效，這真的是太強大了！

AIRKinect Demo（2）也是UserMask之Human Torch

使用UserMask抓出User影像後，還有很多很多的效果可以做。網路上也很容易可以搜尋到用AS3寫的影像處理特效，拿來跟UserMask結合，就可以很輕易玩出很炫的互動裝置。如果再配合音樂，用音樂頻率變化再進一步與影像結合，那就更High啦！不過，也是要搭配好的電腦才行。

AIRKinect Demo（1）UserMask

Kinect除了體感遊戲，還有其他的玩法。其中一個就是UserMask。所謂UserMask，就是Kinect會將偵測到的User去背出來，然後將這個去背影像獨立傳回來。前幾天去東京玩，在台場的SEGA JOYPOLIS入口，看到一個互動裝置，會將路過的人一段時間內的影像存下來，然後重疊播出，就變成一個有趣的影像：

Some extensions for AIRKinect（4）KinectGestureRecognizer

最後來看一下如何辨識Gesture。Gesture本身的定義有點廣，幾乎非語言的肢體表達都可以算是。參考Human Interface Guidelines，它把Gesture分成三大類：
1. Static Gestures：也就是Potures，一個靜態的姿勢，例如user擺出T字型。
2. Continuous Gestures：只要user在Kinect前就一直追蹤。
3. Dynamic Gesture：基本上是一個動作，可能包含了方向、經過時間等等因素，例如Swipe手勢。
可以想像，有無數種Gesture的可能，也就是說我們沒辦法開發出一個或有限個辨識器來滿足每個應用程式的需求。因此在我們的extensions裡面，先做出一個GestureRecognizer辨識器的雛形，以及一個Manger來管理所有的GestureRecognizer，然後試著開發出一個Static與一個Dynamic Gesture Recognizer，往後只要依循同一個開發模式，慢慢加入新的辨識器，這個extensions就會越來越強大，而每個應用程式在使用不同的辨識器的時候做法都一樣，很輕易可以達到程式碼重複使用的目的。Continuous Gestures因為只是一直的追蹤，暫時先不納入我們的考量。

Some extensions for AIRKinect（3）KinectCursor與KinectButton

接著我們來解決一個問題：在電腦上，我們用滑鼠點選按鈕；在行動裝置觸控螢幕上，我們用手指點選按鈕；在Kinect上，我們也會面臨提供一個或多個按鈕，讓使用者來選取。根據Human Interface Guidelines，我們可以設計一個游標跟著user的左手或右手移動，而當游標碰到按鈕時，如果直接觸發選取的效果，很容易發生user誤觸的狀況。解決的方式有兩種：一種是當user手往前推，才會試著去判斷是否選取某個按鈕；第二個方法是，當游標移動到按鈕上，進入hover狀態，按鈕出現一些hover的視覺效果(例如變色)，而游標進入一個倒數的狀態，在倒數完成前，uer可以把游標移開，此時倒數就會停止，按鈕與游標都回到normal狀態。若游標倒數時間到了，則進入selected狀態，程式就去處理按鈕被選取後該做的事。我們選擇第二種方法來實作，一個游標與按鈕的示意圖如下：