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狀態，程式就去處理按鈕被選取後該做的事。我們選擇第二種方法來實作，一個游標與按鈕的示意圖如下：

Some extensions for AIRKinect（2）KinctSprite

在開始開發我們的extensions之前，還有一份文件應該先下載來研究：Human Interface Guidelines。這是在設計Kinect應用程式時可以參考的一些基本守則。接著就讓我們開始吧。

Some extensions for AIRKinect（1）AIRKinect簡介

雖然我應該在第0篇把基本的東西介紹完，在第1篇進入重點，但我發現不稍微介紹一下AIRKinect的一些類別，後面會有點難懂。以下就稍微介紹幾個重要的類別，詳細內容就請參考線上文件。

Some extensions for AIRKinect（0）準備事項

AIRKinect是一套讓我們可以使用Adobe AIR來開發Kinect的native extention。可以搭配OpenNI或Microsoft Kinect SDK來使用，可以在Windows 7或Mac OSX上跑。目前最新版本是2.2版，基本功能大致上都有了，效能也相當不錯。但若想開發體感的應用程式，似乎還需要一點小工具。雖然AIRKinect更新還算頻繁，不過也說不準甚麼時候會提供我們需要的功能，例如常用UI跟Gesture。既然如此，就自己動手來刻一些小工具吧。

增加一個Custom Tab到Facebook粉絲頁(Timeline也適用)

新增一個自訂的頁籤到Facebook粉絲頁一直都是經營粉絲頁一個重要的功能。隨著Facebook不斷改版，這個月底粉絲專頁又要全面升級成Timeline版型，新增自訂頁籤的方法也一直在變。由於現在最新的加法有點詭異，問Google也會找到一堆過時的方法，所以就來記錄一下。

使用 FlashDevelop 開發 AIR 3.2 RC + Starling Framework1.0 行動裝置專案

AIR 3.2 RC 與 Starling Framework 1.0都在一個禮拜前Release了，AIR 3.2的一大重點是行動裝置上可以支援Stage 3D API了，而Starling Framework也正式更新到1.0。因此我們終於可以拿它來開發行動裝置上高效能的2D遊戲了。當然配合Away 3D 4.0等3D API也能開發高效能的3D遊戲。這篇來整理一下使用FlashDevelop如何開發並發佈到行動裝置上。

再次介紹TexturePacker

上次介紹Starling Framework的時候介紹了TexturePacker這個工具，用來產生MovieClip需要的Sprite Sheet圖檔與Data file。開始用這個工具主要是因為他是官方推薦的，所以轉出來的格式絕對沒有問題，使用了幾次之後，發現它支援了一堆格式，而且也有好幾個優點，值得跟大家再介紹一下。