[分享] 20131014 台大職治 - 體感復健軟體製作工作坊

今天龍骨幫來到了臺灣大學醫學院職能治療學系暨研究所，與各位同學分享：

1、目前體感技術的應用 - 龍骨王 業務經理 Stacy
2、體感應用於復健上的經驗談 - 龍骨王 業務經理 Stacy
3、Kinect的原理與限制 - 龍骨王 藝術總監 Mak
4、快速透過scratch開發體感遊戲 ->亮亮

踏入體感遊戲這兩年，不管跟隨老師或與Stacy奔波，亮亮發現程式人員或企劃人員通常是沒有復健醫療背景的，導致在體感遊戲設計上，都會以工程/遊戲企劃角度做一項不符合復健者使用之體感遊戲，整個開發階段就會一再調整、一再更改、一再溝通，導致花更多時間在"溝通"上。

然而復健師或治療師有相關醫療背景，卻缺乏了使用程式的經驗，那麼要如何快速讓工程與醫療背景的人員能激起共同火花呢?就需透過Scratch協助大家囉!Scratch是由美國麻省理工學院媒體實驗室(MIT Media Lab)所開發的一種新的程式語言。學習Scratch簡單上手、開發快速、無需任何程式經驗。Link:What's Scratch?

所以就算是醫療背景者使用Scratch也能一下就上手啦!相信同學們下午都有了不同的體驗且玩得不亦樂乎，看大家認真的表情，亮亮也教得很起勁呢!!!

想跟他們一樣厲害嗎?想學習Scratch嗎?
Scratch體感遊戲班即將開班，到時大家都要來參加唷! 

Scratch 相關文章：

0. [教學] Scratch & Kinect 軟體下載與安裝

1. [教學] Scratch 介面介紹 - 工具列

2. [教學] Scratch 介面介紹 - 舞台編輯區

3. [教學] Scratch 介面介紹 - 繪圖編輯器

4. [教學] Scratch 介面介紹 - 程式編輯區

5. [教學] Scratch 程式物件教學 - 動作

6. [教學] Scratch 程式物件教學 - 外觀

7. [教學] Scratch 程式物件教學 - 控制

8. [教學] Scratch 程式物件教學 - 變數
9. [教學] Scratch 小蜜蜂遊戲教學 - .exe版本
10. [教學] Scratch 小蜜蜂遊戲教學 - 體感版本 for Kinect

11. [教學] Scratch & Kinect 兩位使用者操作說明

Shine.

11. [教學] Scratch & Kinect 兩位使用者操作說明

從以前做研究，到現在深入職場。做了相同領域，延續了自己的夢想。但在服務這些高齡者/復健者同時，最深植我心的是其實他們需要家人/朋友間的陪伴與鼓勵。不信你這樣回想看看，您是否曾經拿最新型的智慧型手機回家，並且告訴你的父母這多好用多好用，還可以上網跟你傳Line，結果你的父母只拿這支手機撥打給你，因為他們只想聽到孩子的聲音。或者你買了一台昂貴的運動器材回家，你告訴你的父母這可以瘦身、功能又很多，結果呢...他們用沒幾天又跑去公園跟隔壁的王伯伯李阿姨邊散步邊聊天。如果一樣產品無法賦予聯繫彼此間的話題與心靈，對高齡者/復健者來說，不過就多了一樣展示品。

因此，開發體感遊戲過程中，也別忘了加入多人遊戲選項，對於高齡者/復健者來說更能激發他們的使用意願與激勵。

而Scratch 與 Kinect連結方式在上篇有向各位講解：10. [教學] Scratch 小蜜蜂遊戲教學 - 體感版本 for Kinect。

本章節要為各位講解如何透過Scratch & Kinect 抓取兩位使用者關節點方式。

1. 連接Kinect for Xbox360、Kinect for Windows於PC、Notebook。

2. 打開"Kinect2Scratch 1.5版本"，忘記如何使用Kinect2Scratch的同學可參考此link： 10. [教學] Scratch 小蜜蜂遊戲教學 - 體感版本 for Kinect

 3. Kinect2Scratch中有個設定選項：Two Player mode enabled (啟用兩位玩家模式)，請將此選項打勾。

4. 確認是否以點選連接"Connect to Scratch(連結至Scratch)"。

5. 打開各位做的Scratch 遊戲，點選 "偵測" → "滑桿的偵測值" 按滑鼠右鍵 → "啟動遠端感應器"，即可在滑桿區域看到所有透過Kinect SDK所抓取的20個關節點。但是你會發現怎麼只有一位A使用者的關節點，另一位B使用者的關節點呢?

原因是他必須完全抓到兩位使用者後，才會在Scratch "滑桿的偵測值"顯示兩位使用者資料，並且以先抓到的使用者命名為1，後抓到的使用者命名為2。所以在關節點後方就會有1&2。

[分享] 20131006 彰基醫院 - 體感復健軟體製作工作坊

體感遊戲不再是一般年輕人才能享受的娛樂，不論家中的高齡者/復健者一樣也能享受到遊戲的樂趣，從遊戲過程中預防認知老化或促進復健動機/意願。龍骨王為了達成這使命，不論上山下海都要讓大家了解，我們心中對高齡者/復健患者的愛。於是今日我們龍骨幫來到了彰化基督教醫院，為各位量身打造了 "體感復健軟體製作工作坊"。

一開始由我們龍骨王創辦人CEO Ray(陳誌睿) 打頭陣，和所有復健師、護理師/建國科大的老師與學生，介紹了使用體感技術應用於復健之經驗談，台上的Ray是不是很帥氣呢?緊接著就由我們龍骨貝介紹目前體感應用與好處啦!!!龍骨貝真不愧是當家花旦，氣勢也不輸給Ray!!!!

時間很快輪到亮亮上場教學Scratch，包含Scratch介面、工具列、程式物件介紹與小蜜蜂教學。一整天下來大夥都很厲害聽了亮亮五個小時的課程，就能快速做出一款屬於他們自己的體感遊戲唷!

讓大家看看他們的成果照!分別為：用手左右位移控制角色吃魚與電流急急棒。

有同學也想跟他們一樣厲害，可快速開發屬於自己的執行檔&體感遊戲嗎?

那就別忘了，要繼續收看亮亮的Scratch & Unity教學唷!

未來亮亮也將繼續為各位服務，
如有開授相關課程資訊也都會在Blooger分享給各位。 

謝謝龍骨幫所由成員，謝謝彰基醫院所有工作人員，謝謝櫻山大飯店的香腸，謝謝我的筆電...下次開課於10/14 台大物理治療系  - 體感復健軟體製作工作坊。

10. [教學] Scratch 小蜜蜂遊戲教學 - 體感版本 for Kinect

大家小蜜蜂遊戲完成了嗎?如果未完成的同學請參閱上一篇：9. [教學] Scratch 小蜜蜂遊戲教學 - .exe版本。
今天我們要教如何將.exe版本轉換成可透過Kinect使用的方式。

使用設備&軟體：
1. Kinect for Xbox360
2. 驅動Kinect軟體 Microsoft Kinet SDK v1.5
3. Win8/Win7筆電

操作步驟：
首先，先請各位至0. [教學] Scratch & Kinect 軟體下載與安裝 下載 Kinect 驅動軟體，解壓縮後會看到以下內容。

1. Scratch部分相信大家應該已安裝完成，現在我們要開始安裝Kinect SDK部分。今天我們使用的Kinect連接Scratch軟體為"Kinect2Scratch 1.5版本"，如下圖。因此在Kinect for Xbox驅動軟體部分，請至Scratch&Kinect安裝檔 → Kinect for Xbox360 → 安裝 "Microsoft Kinet SDK v1.6"。

2. 將Kinect插上電源與筆電。

3. 打開"Kinect2Scratch 1.5版本"。

Launch Kinect(連結Kinect)：Kinect2Scratch屬於連結Kinect與Scratch的中介軟體，所以按下"Launch Kinect"後，即可看到深度影像(左)與RGB影像(右)，如下圖。並且確認抓取玩家資訊後，玩家就會獨立出來呈現紅色。

Connect to Scratch(連結至Scratch)：接收到玩家資訊後，點選 "Connect to Scratch"。

Configure Skeleton(設定骨架資訊)：
Two Player mode enabled (啟用兩位玩家模式)。
Launch Kinect automatically (自動連結Kinect)。
Connect to Scratch automatically (自動連結Scratch，前提也需自動連結Kinect)。
3D mode (Z axis) enabled (啟用Z軸值)。













4. 打開各位做的Scratch 小蜜蜂遊戲，點選 "偵測" → "滑桿的偵測值" 按滑鼠右鍵 → "啟動遠端感應器"。

5. 即可在滑桿區域看到所有透過Kinect SDK所抓取的20個關節點。

http://msdn.microsoft.com/en-us/library/microsoft.kinect.jointtype.aspx

6. 更改板子互動方式，上篇是透過滑鼠控制板子左右位移，現在改為透過右手X值控制位移，如下圖所示。

7. 開始試試看遊戲吧! 也可將Scratch轉成執行檔給親朋好友玩，但要注意的是別人的電腦也要安裝Microsoft SDK 與 Kinect2Scratch唷!

Scratch 相關文章：

0. [教學] Scratch & Kinect 軟體下載與安裝

1. [教學] Scratch 介面介紹 - 工具列

2. [教學] Scratch 介面介紹 - 舞台編輯區

3. [教學] Scratch 介面介紹 - 繪圖編輯器

4. [教學] Scratch 介面介紹 - 程式編輯區

5. [教學] Scratch 程式物件教學 - 動作

6. [教學] Scratch 程式物件教學 - 外觀

7. [教學] Scratch 程式物件教學 - 控制

8. [教學] Scratch 程式物件教學 - 變數
9. [教學] Scratch 小蜜蜂遊戲教學 - .exe版本
11. [教學] Scratch & Kinect 兩位使用者操作說明

Shine.

8. [教學] Scratch 程式物件教學 - 變數

程式物件共分為八大項：動作、外觀、聲音、畫筆、控制、偵測、運算與變數。其中變數部分又分為 "產生一個變數" 與 "產生一個列表(矩陣)"，亮亮先跟各位介紹"產生一個變數"。

點選程式物件中的 "變數"，可看到有兩個選項可供各位選擇"產生一個變數" 與 "產生一個列表(矩陣)"，如下圖。

點選"產生一個變數"，就會出現自定義變數名稱的對話框，假設變數名稱為"遊戲分數"。另外，選擇 "適用所有腳色"，為什麼要選擇 "適用所有腳色" 呢?因為，遊戲得分不只會受到單一腳色影響，如果今天各位設置的變數只有要給此腳色使用，就選擇"只適用此腳色"囉!結果如下圖。

完成以後，會出現 "刪除一個變數"，如果各位今天要刪除此變數就點選 "刪除一個變數"。刪除一個變數底下又出現五個細項：舞台區顯示遊戲得分、將變數的值設為0、將變數的值增加1、顯示變數與隱藏變數。為了能讓大家很快熟悉此用法，我們直接進入實作練習。

遊戲故事：當腳色1(小貓)碰到女主人，遊戲得分就加五分，並且讓女主人消失。小貓就持續往前走，碰到背景的黑框就轉向，並且再次出現女主人。(重複執行)

製作流程：

1. 點選舞台背景 → 程式編輯區點選 "造型" → "編輯" →舞台背景增加黑框，如下圖。

2. 透過舞台中的 "開啟腳色檔案" 增加一隻腳色(女主人)。

3. 於程式物件點選 "產生一個變數" → 變數名稱：遊戲分數 → 選擇 "適用所有腳色"。

4. 將舞台區顯示遊戲得分做勾選，讓舞台上可看到 "遊戲得分0"，舞台結果顯示如下圖。

5. 給予程式物件： 

(1) 腳色2 顯示方式：

腳色1部分："當綠旗被點一下"，遊戲得分的"變數值設定為0"，如果今天腳色1"碰到黑色"，就"透過廣播訊息"傳送"腳色2顯示"(持續"重複執行")。

腳色2部分：當腳色2接收"腳色2顯示"的廣播訊息，就顯示自己的"外觀"。

(2) 腳色2 隱藏方式：

腳色1部分："當綠旗被點一下"，如果小貓"碰到腳色2"，就"透過廣播訊息"傳送"腳色2消失"，沒碰到腳色2時，就"持續移動10步"，且"碰到邊緣就反彈"(持續"重複執行")。

腳色2部分：當腳色2接收"腳色2消失"的廣播訊息，就隱藏自己的外觀，並且將"變數遊戲得分的值增加5"分。

6. 開始按下綠旗試試看吧!

亮亮小提醒：
如需刪除程式編輯區裡的程式物件，移除方式(一)按著滑鼠左鍵，拖曳程式物件離開程式編輯區、(二)選擇程式物件點擊滑鼠右鍵 → 刪除。

7. [教學] Scratch 程式物件教學 - 控制

遊戲的核心是 "控制 (Script)" ，Scratch的 "控制" 又等同於在其他程式語言，舉如JAVA、C#、Object-C等。在Scratch "控制 (Script) " 是以物件化呈現，好讓不會程式的同學們也能立即上手。所以不會程式的同學們也別擔心，看完亮亮對Scratch "控制 (Script) "的介紹後，大家便能得心應手囉!

Scratch "控制 (Script) "總共分為九大類：開始執行、等待、重複執行、反復...次、訊息廣播與接收、如果(if)、條件成立觸發程式，否則...、等待直到條件成立、反覆執行，直到條件成立。

1. 開始執行：如何讓腳色或遊戲開始執行呢?Scratch幫各位準備了三種模式：當綠旗被點一下、當按下甚麼鍵(下圖)、當腳色被點一下。

實作練習：
"當綠旗被點一下"、"當按下甚麼鍵"、"當腳色被點一下"將三種方式拖曳至程式編輯區。

"當綠旗被點一下" → 腳色"重複執行"+"移動1步"，並且"碰到邊緣就反彈"。
"當按下空白鍵"→ 腳色的動作"旋轉15度"。
"當腳色被點一下" → 遊戲"全部停止"。

2. 等待：等待多少秒數後，才執行下個程式物件。可參閱前一篇6. [教學] Scratch 程式物件教學 - 外觀 外觀變換與等待之使用方式。

3. 重複執行：當遊戲開始，"重複執行"就會永遠執行被包覆的程式物件，當遊戲結束才停止。

實作練習：
無加"重複執行"："當綠旗被點一下"+"移動1步"

有加"重複執行"："當綠旗被點一下" 腳色"重複執行"+"移動1步"，並且"碰到邊緣就反彈"。

4. 反復...次：如果希望是以限定次數的方式執行程式物件，就該選擇"反復...次"。

實作練習：
"反復10次" + "重複執行"+"移動1步"，會發現腳色X值只移動10步就停止位移。

5. 訊息廣播與接收：腳色A執行完自己程式編輯區的物件後，要 "呼叫" 腳色B執行B的程式物件。因此，腳色A就需要透過 "訊息廣播"傳送指令，腳色B透過"訊息接收"接收腳色A的指令。

實作練習：

除了腳色1(小貓)，再透過 "開啟腳色檔案" 增加一隻腳色(蝙蝠)，當點擊小貓一下，蝙蝠開始展現飛翔的動畫，參閱下圖。

腳色1："當腳色1被點一下"執行"訊息廣播"，廣播訊息可自定義名稱，例如定義：變換裝扮。

腳色2：程式編輯區 → 造型 → 新增一個裝扮2。當 "接受到變換裝扮的訊息"，就開始"重複執行"→ "換下一個裝扮"。

6. 如果(if)："如果"條件成立，執行一次所包覆的程式物件。"如果"條件成立，就重複執行所包覆的程式物件。"條件"此空格可嵌入 "偵測" 或 "運算" 使用，實作練習參考上圖。

7. 條件成立觸發程式，否則...："如果"條件成立，執行一次所包覆的程式物件，"如果" 條件不成立，就執行一次另個程式物件。"條件"此空格可嵌入 "偵測" 或 "運算" 使用，實作練習參考上圖。

8. 等待直到條件成立：持續等待當條件被觸發後，才執行下個程式物件。"條件"此空格可嵌入 "偵測" 或 "運算" 使用，實作練習參考上圖。

9. 反覆執行，直到條件成立：一直反復執行，直到設立的條件成立才停止動作。"條件"此空格可嵌入 "偵測" 或 "運算" 使用，實作練習參考上圖。

亮亮小提醒：
如需刪除程式編輯區裡的程式物件，移除方式(一)按著滑鼠左鍵，拖曳程式物件離開程式編輯區、(二)選擇程式物件點擊滑鼠右鍵 → 刪除。

6. [教學] Scratch 程式物件教學 - 外觀

透過上一篇大家應該了解到如何讓腳色賦予動作了吧?!

如果還不清楚的同學可參閱此Link：5. [教學] Scratch 程式物件教學 - 動作

本章節將繼續介紹Scratch 程式物件-外觀，為什麼要介紹如何操控腳色外觀呢?舉例來說：當腳色在位移時，都使用同一張圖片讓他往前行走，請問各位這樣的遊戲或動畫大家會覺得腳色是在走動嗎?

該不會有同學在電腦前面點頭吧?其實改變腳色外觀也是賦予它生命的另一形式，因為可以讓玩家很直覺的反應此腳色就是在行走，而不是阿飄。

大家了解的他重要性後，就開始教學啦!

首先，我們先使用預設腳色1(小貓)，到程式編輯區點選 "造型"，如上圖所示。小貓原本就有兩款造型："造型1/造型2"， "造型1/造型2" 可自行更改名稱。

如果要複製造型，就選擇某一造型點選 "複製按鈕" ，就可多一項造型，現在就讓我們將 "造型1/造型2"各複製一個出來吧!( "造型3/造型4")結果如上圖所示。

選擇 "造型3/造型4" 點擊 "編輯按鈕" ，會立即出現繪圖編輯器，如果忘記繪圖編輯器如何使用的同學們，請參考此Link：3. [教學] Scratch 介面介紹 - 繪圖編輯器 。請將 "造型3/造型4" 橘色小貓變成咖啡色小貓，結果如上圖所示。

小貓的造型我們都在上述改變完成了，接著我們要透過程式物件改變牠的造型。可參閱亮亮為各位整理幾個常用外觀的表格，如上圖。

1. 裝扮轉換："裝扮轉換"共有兩種切換模式：指定切換造型、依順序切換造型 。 

實作練習：

指定切換造型：現在有四個裝扮了，現在亮亮希望小貓可以 "按下綠旗" 就 "重複執行"+"邊位移"+"碰到邊緣就反彈"+"等待0.3秒" 就 "變換造型"，造型順序為1 → 4 → 3 → 2，於程式編輯區結果，如下圖所示。

依順序切換造型：如果今天造型順序為1 → 2 → 3 → 4，利用上述方式是否要複製多個 "切換到造型..." 與 "等待幾秒"?所以建議：造型有順序性的請使用 "下一個造型"，可減輕各位使用外觀物件的數量，如下圖所示。

2. 秀出文字、想像方框：共有兩種方式：限定顯示幾秒、持續顯示。

實作練習：

限定顯示幾秒："說 您好! 顯示2秒" 物件拖曳到程式編輯區，並在程式編輯區使用滑鼠左鍵點擊兩下，就會發現小貓顯示對話框說您好!並於2秒後消失對話框。

持續顯示："想著 恩..." 物件拖曳到程式編輯區，並在程式編輯區使用滑鼠左鍵點擊兩下，就會發現小貓顯示想像框顯示恩....，直到全部停止。

3. 顯示與隱藏：顯示或隱藏腳色。

實作練習：

 "按下綠旗" 就 "重複執行"+"顯示"+"等待0.3秒"+"隱藏"+"等待0.3秒"，於程式編輯區結果，如下圖所示。

亮亮小提醒：
如需刪除程式編輯區裡的程式物件，移除方式(一)按著滑鼠左鍵，拖曳程式物件離開程式編輯區、(二)選擇程式物件點擊滑鼠右鍵 → 刪除。

5. [教學] Scratch 程式物件教學 - 動作

不知道大家對Scratch的介面是否有深入了解了呢?尚未了解的同學們可參考下列幾篇文章。

0. [教學] Scratch & Kinect 軟體下載與安裝

1. [教學] Scratch 介面介紹 - 工具列

2. [教學] Scratch 介面介紹 - 舞台編輯區

3. [教學] Scratch 介面介紹 - 繪圖編輯器

4. [教學] Scratch 介面介紹 - 程式編輯區

接下來亮亮要幫各位介紹 "Scratch程式物件" 部分，"Scratch程式物件" 總共可劃分成八大項：動作、外觀、聲音、畫筆、控制、偵測、運算與變數，本章節將由 "動作" 開始介紹。

動作部分可細分為七大項，分別為：移動、旋轉、轉向、移動到特定位置、設定座標、碰到邊緣就反彈、傳回所在位置與角度。

1. 移動："移動" 預設值為10，值為正，腳色向前移動；反之，值越大移動步伐越大；反之。

實作練習：

"移動" 物件拖曳到程式編輯區，並在程式編輯區使用滑鼠左鍵點擊 "移動物件兩下"，就會發現腳色(小貓)往前了10單位的步伐。

2. 旋轉："旋轉" 分為順時、逆時針。預設值為15度，值為正，腳色往順時/逆時旋轉；反之。值越大旋轉幅度越大；反之。另外，如果腳色被旋轉到無法立刻復原時，可透過滑鼠左鍵點擊程式編輯區的腳色兩下，如上圖。

實作練習：

"旋轉-順時針" 物件拖曳到程式編輯區，並在程式編輯區使用滑鼠左鍵點擊 "旋轉物件兩下"，就會發現腳色(小貓)順時針轉了15度。

3. 轉向："轉向" 分為上下左右、自定義兩種模式。可自定義腳色朝哪個面向執行動作。

實作練習：

腳色朝左方移動5步。 "轉向" 與 "移動" 物件拖曳到程式編輯區，"轉向" 物件選擇(-90)向左，，如上圖。底下接著"移動"物件5步。

4. 移到特定座標：有三種定義方式：直接移動至指定位置、移動至特定目標位置、平滑移動至特定目標，請看上圖說明。

實作練習：

直接移動至指定位置： "移到：X:0 Y:0" 物件拖曳到程式編輯區，並且將腳色拖曳到舞台左下方，接著透過滑鼠左鍵點擊 "移到：X:0 Y:0" 物件，就可看到程式編輯區的腳色名稱 "腳色1" 底下的X與Y值變為0。

移動至特定目標位置：舞台編輯區增加一位新腳色(腳色2)至舞台中。"移到" 物件拖曳到 "腳色1" 的程式編輯區，指定對象為"腳色2"。透過滑鼠左鍵點擊 "移到" 物件，即可看到 "腳色1" 與 "腳色2" 位置一致。

平滑移動至特定目標：前面兩個方式都是直接跳到指定座標上，如果他是某個時間範圍之內移動到指定目標就開始用此物件。"在1秒內，滑行到X=0，Y=0" 物件拖曳到程式編輯區，將腳色拖曳到舞台左下方，接著透過滑鼠左鍵點擊 "在1秒內，滑行到X=0，Y=0" 物件。

5. 設定座標：設定座標位置(X,Y)、定義座標位置(X,Y)增量/減量。

實作練習：

設定座標位置(X,Y)：單一指定X或Y給予特定座標值。 "將X座標增加為10" 物件拖曳到程式編輯區，透過滑鼠左鍵點擊兩下。

定義座標位置(X,Y)增量/減量：單一指定X或Y座標值增量/減量。 "將X座標設定為0" 物件拖曳到程式編輯區，透過滑鼠左鍵點擊兩下，即可發現 "腳色1" 的X座標增加10。

6. 碰到邊緣就反彈：當腳色碰到邊緣，就轉向執行動作，如上圖範例。

7. 傳回所在位置與角度：三個物件旁邊都有可打勾區域，如果打勾可立即在舞台上看到目前腳色的X/Y座標或方向。

亮亮小提醒：
如需刪除程式編輯區裡的程式物件，移除方式(一)按著滑鼠左鍵，拖曳程式物件離開程式編輯區、(二)選擇程式物件點擊滑鼠右鍵 → 刪除。