# 體感互動系統實作 僑光科技大學 資訊科技系 2021/02/26 ~ 2021/06/25 授課老師:高吉隆 電子信箱:[kevinkao888@gmail.com](mailto://kevinkao888@gmail.com) --- ## 課程大綱 * 體感互動遊戲之概論 * 體感互動遊戲之方法 * 體感互動遊戲之設計 * Scratch & Kinect 之實作 ---- ### 每週上課目標 * 前 9 週上課目標 (上課練習、作業繳交) * 後 9 週上課目標 (分組討論、專題報告) ---- |週| 上課日期 | 前 9 週上課目標 | |:-:|:----------:| --------------- | | 1 | 2021/02/26 | 體感互動遊戲之概念 | | 2 | 2021/03/05 | Kinect原理與介紹 | | 3 | 2021/03/12 | Blockly程式介紹 | | 4 | 2021/03/19 | Scratch程式教學 | | 5 | 2021/03/26 | Scratch程式練習 | | 6 | 2021/04/02 | Kinect環境安裝設置 | | 7 | 2021/04/09 | Scratch結合Kinect應用 | | 8 | 2021/04/16 | Scratch結合Kinect實作 | | 9 | 2021/04/23 | 期中考 | ---- | 週 | 上課日期 | 後 9 週上課目標 | |:--:|:----------:| --------------- | | 10 | 2021/04/30 | 期末分組製作說明 | | 11 | 2021/05/07 | 互動遊戲之案例參考 | | 12 | 2021/05/14 | 分組與討論 | | 13 | 2021/05/21 | 分組遊戲規則設計 | | 14 | 2021/05/28 | 分組版面規劃設計 | | 15 | 2021/06/04 | 分組積木程式設計 | | 16 | 2021/06/11 | 期末考試 | | 17 | 2021/06/18 | 因端午節停課一次 | | 18 | 2021/06/25 | 調至第9和第17週 | ---- ### 課程評分方式 * 平時成績:20% * 上課互動:10% * 小考:10% * 期中成績:40% (分組報告) * 報告初稿:10% * 成果展示:30% * 期末成績:40% (分組報告) * 報告初稿:10% * 成果展示:30% ---- ### 期中考成績(日資科三忠) * 平均:76分,全部加4分 * 加分後最高分:99 * 未到考:3 名 ![](https://i.imgur.com/pkMwxxP.png) ---- ### 期末考評量方式(日107忠) * 分組實作:1-4人為1組([請填組員名單](https://hackmd.io/Rc0SDU2wQ8Cy6ejIe7iq_Q)) * 題目製訂:請同學自訂題目 * 遊戲類型:適合體感操作的遊戲 * 遊戲規則:請同學條列出並製作流程圖 * 設備借用:請跟老師約定時間借Kinect * 可以滑鼠或鍵盤來替代Kinect * 繳交方式:製作5分鐘影片,含簡報、展示 * 可用[oCam](http://wis.ocu.edu.tw/base/10001/board/1000022673/000000044/WM60a47e5e1d4d5.exe)製作螢幕錄製及錄音i * 評分標準:創意性、美觀性、完整性 * 以自評(30%)、互評(30%)及老師評分(40%) * 06/24晚上前繳交,06/25 16點前上平台評分 ---- ### 期末報告題目說明 * Dr. Kawashima’s Body and Brain Exercises * [參考照片](https://www.xboxachievements.com/game/dr-kawashimas-body-and-brain-exercises/screenshots/3/) * [參考影片:IGN](https://www.ign.com/games/body-and-brain-connection) * [參考影片:Youtube1](https://www.youtube.com/watch?v=FtbMwuDi428) * [參考影片:Youtube2](https://www.youtube.com/watch?v=boTIBL0Sqkk) * [參考影片:Youtube3](https://www.youtube.com/watch?v=PtvGpshGK2M) ---- ### 題目參考1一認識時鐘體感測驗 * 二手指出時間:左手為時針、右手為分針 * 停格在某一時間超過3秒鐘,若正確即得分 ![](https://i.imgur.com/vwN6hEu.png =600x400) ---- ### 題目參考2一交通管制體感測驗 * [影片網址](https://www.ign.com/videos/2011/02/17/body-brain-traffic-control-gameplay) * 二手控制橋的位置:左右各有上、中、下 * 三種顏色的汽車要引導到正確顏色的道路 ![](https://i.imgur.com/8RWpDiP.png =600x400) ---- ### 題目參考3一比大小體感測驗 * 二手比出大於(左上及左下) * 二手比出小於(右上及右下) * 二手比出等於(二手水平) ![](https://i.imgur.com/PLyzdAo.png =600x400) ---- ### 題目參考4一數字足球體感測驗 * 二擇一選項題目列出在上方 * 以左右腳踼球來回答選項,正確則得分 * 若正確得分,守門員則蹼向不同邊 ![](https://i.imgur.com/kGoLpSU.png =600x400) ---- ### 題目參考5—打老鼠體感遊戲 * [影片網址](https://www.ign.com/videos/2011/02/17/body-brain-mouse-mayhem-gameplay) * 左右各有三個水管,不定時有老鼠跑出 * 以左手打左上及左中二個水管的老鼠 * 以左腳踼左下一個水管的地鼠,右同 ![](https://i.imgur.com/MQ8w131.png =600x400) ---- ### 題目參考6—紅白旗體感遊戲 * 事先出10道題,如紅旗舉起來 * 玩家必需按照指令完成動作,正確則得分 ![](https://i.imgur.com/eExw99k.png =600x400) ---- ### 題目參考7—圖案配對感遊戲 * [影片網址](https://www.ign.com/videos/2011/02/17/body-brain-matchmaker-gameplay) * 四週圍出現各種圖案,其中有2個是相同的 * 玩家舉左右手指出2個圖案,若一致則得分 ![](https://i.imgur.com/koqMYlZ.jpg =600x400) --- ## 各領域應用及案例參考 * 大型觸控螢幕導覽 * 地面互動投影遊戲 * VR虛擬實境看屋 * 體感互動之遊戲 * Kinect之互動遊戲 * Scratch之互動遊戲 ---- ### 大型觸控螢幕導覽:[盛源公司產品介紹](https://youtu.be/nJuwrJxuC0o) {%youtube nJuwrJxuC0o %} ---- ### 地面互動投影遊戲:[彩天科技互動投影](https://youtu.be/hC6v8CQgbL8) {%youtube hC6v8CQgbL8 %} ---- ### VR虛擬實境看屋:[三度空間互動看屋](https://my.matterport.com/show/?m=2Fupkmg3DxF&brand=0) {%vimeo 249475958 %} ---- ### 體感互動之遊戲:[台灣盈米體感互動](https://youtu.be/JxGYrhsjg58) {%youtube JxGYrhsjg58 %} ---- ### Kinect之互動遊戲:[運動大會影音試玩](https://youtu.be/vvSoYhjxBAI) {%youtube vvSoYhjxBAI %} ---- ### Scratch之互動遊戲:[Scratch互動鋼琴](https://youtu.be/Na0lX6HKeJM) {%youtube Na0lX6HKeJM %} --- ## 體感設備之介紹 * Microsoft Kinect * ASUS Xtion * Nintendo Switch * Leap Motion * HTC Vive * Google Cardboard ---- ### [Microsoft Kinect](https://youtu.be/pzfpXAbQ61U) {%youtube pzfpXAbQ61U %} ---- ### [ASUS Xtion](https://youtu.be/SvXUJCcwNz8) {%youtube SvXUJCcwNz8 %} ---- ### [Nintendo Switch](https://youtu.be/f5uik5fgIaI) {%youtube f5uik5fgIaI %} ---- ### [Leap Motion](https://youtu.be/_d6KuiuteIA) {%youtube _d6KuiuteIA %} ---- ### [HTC Vive](https://youtu.be/-mxDQycSyDg) {%youtube -mxDQycSyDg %} ---- ### [Google Cardboard](https://youtu.be/y0_QfGeBEgM) {%youtube y0_QfGeBEgM %} --- ## Kinect for Xbox 360 * 上市:2010年11月4日由微軟發表 * 售價:149美金 * 唸法:Kinetics(動力學)+Connection(連接) * 銷售:前60天內,賣出800萬台 ![](https://media.bnextmedia.com.tw/image/album/2017-10/img-1508974427-28423.jpg =80%x80%) ---- ## Kinect for windows 1.0 * 上市:2012年2月1日由微軟發表 * 售價:249美金 * 開發平台:Visual Studio + .Net Framework * SDK最後版本:Kinect Windows SDK 1.8 ![](https://images-na.ssl-images-amazon.com/images/G/01/electronics/detail-page/kinectwindows-1lg.jpg =40%x40%) ---- ### 身體就是您的控制器 * RGB彩色影像攝影機 * 3D深度影像感應器 * 麥克風陣列 ![](https://cdn1-techbang.pixfs.net/system/images/22160/original/Kinect-002.jpg?1277893275 =700x400) ---- ### 主要功能 * 彩色影像擷取 640 x 480 32-bit @ 30FPS * 深度影像擷取 320 x 240 16-bit @ 30FPS * 聲音擷取 16-bit @ 16kHz ![](https://cdn1-techbang.pixfs.net/system/images/22432/original/PrimeSensor_depth_audio_diagram.jpg?1278301346 =65%x65%) ---- ### Kinect 到底怎麼偵測3D影像? * 技術來源:PrimeSense(以色列公司) * 技術名稱:光源編碼(Light Coding) ![](https://cdn0-techbang.pixfs.net/system/images/22435/original/PrimeSensor_block_diagram.gif?1278306079 =900x400) ---- ### 另一關鍵技術:骨架追蹤系統 * 影像分析:將3D深度影像轉換成骨架追蹤系統 * 系統功能:同時偵測6人,2人骨架,每人20點 * 最佳距離為1.2 - 3.5公尺 * 水平視角57度,垂直43度,上下轉動27度 ![](https://cdn0-techbang.pixfs.net/system/images/22433/original/full_body_skeleton_580.jpg?1278302214 =900x300) ---- ### Kinect Skeleton * 共可偵測出 20 個關節,定在位空間座標中 ![](https://i-msdn.sec.s-msft.com/dynimg/IC534688.png =65%x65%) --- ### Kinect 開發應用 * VR虛擬應用:[Kinect試衣鏡](https://youtu.be/dJewTchB76w) * 3D建模:[3D物體建模列印](https://youtu.be/_cKb3oEM47E) * 身體互動:[練舞蹈](https://youtu.be/Y-iKWe-U9bY)、[智力訓練](https://youtu.be/FtbMwuDi428) * 手指互動:[彈鋼琴](https://youtu.be/V42GTXp656A) * 互動特效:[單人特效](https://youtu.be/RUG-Uvq-J-w)、[多人特效](https://vimeo.com/20366678) * 互動遊戲:[馬里奥兄弟](https://youtu.be/8CTJL5lUjHg)、[2D任天堂版本](https://youtu.be/PsC0zIhWNww) * VR空間遊戲:[馬里奥兄弟](https://youtu.be/QN95nNDtxjo) ---- ### 最大的毛病:延遲讓 Kinect 不精準 * 原因:攝影機的影像更新頻率為 30 FPS * 動作傳遞會有 1/30秒的延遅 * 主要原因是當時使用的晶片限制 ![](https://cdn1-techbang.pixfs.net/system/images/22156/original/msft-booth-e3-12_38787_640screen.jpg?1277892064 =90%x90%) ---- ### 硬體拆解:iFixIt * 最重要晶片:PrimeSense PS1080晶片 ![](https://cdn2-techbang.pixfs.net/system/images/30891/original/xKZqFJXNYEGTvYbI.medium.jpg?1288942747 =100%x100%) ---- ## Kinect for Windows 2.0 | 項目 | Kinect 1.0 | Kinect 2.0 | | ------- | -------- | -------- | | 彩色解析 | 640x480 | 1920x1080 | | 深度解析 | 320x240 | 512x424 | | 骨架偵測 | 2人骨架/20關節 | 6人骨架/25關節 | | 檢測範圍 | 0.8-4.0公尺 | 0.5 ~ 4.5公尺 | | 相機視角 | 垂直57^o^/水平43^o^ | 垂直70^o^/水平60^o^ | | App數目 | 1個 | 多個 | | 程式版本 | Win 7 / VS2010 | Win 8 / VS2012 | ---- ### 官方公告:已停止生產 * 繼續研發相關設備 * HoloLens VR眼鏡 * Cartana 語音助理 * Windows Hello 生物特徵臉部辨識系統 * 正與 Intel 合作,繼續支援程式開發 * Intel RealSense 景深攝影機 ![](https://cdn2.unrealengine.com/blogAssets/2016/Feb/Feb_04/INTEL_Figure1-770x265-367295896.png) --- ## Google Blockly * 跨平台的網頁程式編輯器(Desktop/Mobile) * 由Google在2011年開始的專案 * 開放原始碼的程式(Apache 2.0) * 創作故事、遊戲、動畫的應用程式:[Scratch](https://scratch.mit.edu/) * 應用在製作Android App:[App Inventor](http://appinventor.mit.edu/explore/) * 應用在小學生寫作程式平台:[Code.org](https://code.org/) * 亦可以產生程式:JavaScript、Pyhton等 ---- ### Google Blockly 特色 * 網頁開發,不使用Flash * 使用最少的打字來完成程式 * 完整的使用端程式:使用時不佔主機資源 * 支援各程網頁瀏覽器:Chrome、IE、Safari * 支援各種手機瀏覽器:Android、iOS * 程式語法:迴圈、判斷、函數、變數、陣列等 * 可自行定義個性化積木 * 可使用偵錯模式找出程式問題 ---- ### Google Games * [Blockly Games](https://blockly-games.appspot.com/?lang=zh-hant):操作簡易的積木式程式設計遊戲 ![](https://www.smart-kiddo.com/images/blocklygames_en.jpg =800x500) ---- ### Google Blockly 積木組合規則 * 積木的組合必需凹凸相對 * 積木中若有下拉按鈕則可改變內容 * 相連的積木組合群組,可以多個群組 ![](https://developers.google.com/blockly/images/BlocklyDemoImage.png) ---- ### 拚圖(Puzzle) * 介紹圖塊的拼接與設定方式 ![](https://1.bp.blogspot.com/-peNxxjAKv8w/VSPTGkKj2wI/AAAAAAAAAhg/GHUmn-232tM/s1600/puzzle.PNG) ---- ### 迷宮(Maze) * 用迷宮遊戲來表達迴圈與條件概念 ![](https://moaks2015.files.wordpress.com/2015/04/screen-shot-2015-04-15-at-7-19-40-pm.png) ---- ### 鳥(Bird) * 進階的條件與控制教學 ![](https://i.ytimg.com/vi/0Zwb0OdrSUg/maxresdefault.jpg) ---- ### 烏龜(Turtle) * 進階的迴圈概念遊戲 ![](https://swagraptor.files.wordpress.com/2015/04/turtle.jpg) ---- ### 影片(Moive) * 介紹數學方程式 ![](https://i.ytimg.com/vi/YXbQXTpS-b0/maxresdefault.jpg) ---- ### 池塘(Pond) * 可程式化鴨子的競賽遊戲 ![](https://bfealy47.files.wordpress.com/2015/04/screen-shot-2015-04-14-at-3-33-43-pm.png) --- ## Scratch 程式教學 * Scratch 程式下載安裝 * 網址:[http://download.scratch.mit.edu/ScratchInstaller1.4.exe](http://download.scratch.mit.edu/ScratchInstaller1.4.exe) * 安裝畫面:如下 ![](https://i.imgur.com/xPS5mzK.png) ---- ### Scratch 操作介面導覽 * 指令區:分八大類指令及各種指令 * 舞台區:成果展示區 * 角色區:選取設定角色、舞台的資料 * 腳本區:顯示角色資訊及程式、造型和聲音 ![](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/001_002.png =600x400) ---- #### Scratch 指令區 * 動作類:移動、旋轉、位置指定、傳回座標 * 外觀類:切換造型、背景、顯示文字、改特效 * 聲音:播放聲音、樂器音效、控制音量大小 * 畫筆:下筆、停筆、筆顏色、大小、色調 * 控制:當鍵按下、等待、反復、廣播(訊息)、如果 * 偵測:傳回位置值、接觸、距離、時間、音量 * 數值與邏輯運算:加減乘除、判斷、餘數、取整數 * 變數:指定變數、設定程式所需之變數 ---- #### Scratch 舞台區 * 空白區:展示成果 * 右上角開始:按綠旗表示程式開始執行 * 右上角停止:按紅鈕表示程式暫停執行 ![](https://i.imgur.com/5pKIZdB.png) ---- #### Scratch 角色區 * 新增角色:分為自行繪製、匯入現有、隨機擷取三種 * 角色區域:顯示目前舞台及各種角色縮圖和名稱 ![](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/001_005.png) ---- #### Scratch 腳本區-程式 * 顯示角色的狀態 * 名稱、座標、方向 * 顯示該角色程式內容 ![_images/001_008.png](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/001_008.png) ---- #### Scratch 腳本區-造型 * 新增造型:分為繪製、匯入和照相機 * 各種造型之資料:名稱、大小 ![_images/001_009.png](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/001_009.png) ---- #### Scratch 腳本區-聲音 * 新增聲音:分為錄音和匯入 * 各種聲音之資料:名稱、長度 ![_images/001_010.png](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/001_010.png) --- ## Scratch 案例練習一 案例參考:南港高中高慧君老師 1. 搭建一個表演的舞台 2. 設定歌手造型及其演唱的歌曲 3. 讓舞台呈現的動態效果 4. 讓歌手演唱歌曲並跳舞。 ![](https://i.imgur.com/oj3RM7q.png =600x350) ---- ### 1.搭建一個表演的舞台 1. 於角色區=>舞台=>背景=>匯入=>Media 2. 選擇Backgroud=>Indoors=>spotlight 3. 刪除白色背景舞台 ![_images/002_002.png](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/002_002.png) ---- ### 2-1.設定歌手角色 1. 於角色區=>新增角色=>開啓角色檔案=>Media 2. 選擇Costumes=>People=>breakdance1 3. 修改角色名稱為歌手 ![_images/002_006.png](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/002_006.png) ---- ### 2-2.設定歌手造型 1. 於角色區=>歌手=>造型=>匯入=>Media 2. 選擇People=>breakdance2 3. 以上動作共做3次,選擇不同歌手造型 ![_images/002_007.png](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/002_007.png) ---- ### 2-3.設定歌手歌曲 1. 於角色區=>歌手=>聲音=>匯入=>Media 2. 選擇Sounds=>Music Loops=HumanBeatbox2 ![_images/002_008.png](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/002_008.png) ---- ### 3.讓舞台呈現的動態效果 1. 於角色區=>舞台=>程式區 2. 選擇拉入:控制=>當旗子被點一下 3. 選擇拉入:控制=>重複執行 4. 選擇拉入:外觀=>將顏色特效增加25 5. 選擇拉入:控制=>等待1秒=>修改為0.1 ![_images/002_009.gif](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/002_009.gif =300x300) ---- ### 4-1.讓歌手演唱歌曲 1. 於角色區=>歌手=>程式區 2. 選擇拉入:控制=>當旗子被點一下 3. 選擇拉入:聲音=>播放聲音(...)直到播放完畢 4. 選擇拉入:控制=>全部停止 ![_images/002_010.gif](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/002_010.gif =600x400) ---- ### 4-2.讓歌手跳舞 1. 於角色區=>歌手=>程式區 2. 選擇拉入:控制=>當旗子被點一下 3. 選擇拉入:控制=>重複執行 4. 選擇拉入:外觀=>切換到造型(站立) 5. 選擇拉入:控制=>等待1秒 6. 選擇拉入:外觀=>切換到造型(跳舞1) 7. 選擇拉入:控制=>等待1秒=>修改為0.2 8. 選擇拉入:外觀=>切換到造型(跳舞2) 9. 選擇拉入:控制=>等待1秒=>修改為0.2 10. 選擇拉入:外觀=>切換到造型(跳舞3) 11. 選擇拉入:控制=>等待1秒=>修改為0.2 ---- ### 綜合複習 ![_images/002_011.png](http://hd.syes.tp.edu.tw/cc/scratch2x/_images/002_011.png) ---- ### 其他案例練習 1. 連結網頁: 2. 選擇計次式迴圈 [連結](http://hd.syes.tp.edu.tw/cc/scratch2x/index.html) --- ## Kinect 體感設備介紹與展示 * 環境的需求程式的安裝 * 把Kinect當鍵盤使用 ---- ### 環境需求與程式安裝 * Kinect 1.0 環境需求 * Windows 7, Windows 8, Windows 8.1 * 2 GB RAM, USB 2.0, 32-bit/64-bit CPU * Kinect 1.0 程式安裝 * Kinect for Windows SDK v1.8 * 若需開發程式:[下載](https://www.microsoft.com/en-us/download/details.aspx?id=40278) * Kinect for Windows Developer Toolkit v1.8 * 若需進階的函數庫:[下載](https://www.microsoft.com/en-us/download/details.aspx?id=40276) * Kinect 設備安裝 * 插入電源插座 * 插入USB插座 ---- ### 使用 Kinect 控制鍵盤、滑鼠 * 控制鍵盤: * 網址:[CodePlex](https://archive.codeplex.com/?p=kinectpowerpoint) * 控制滑鼠: * 網址:[CodePlex](https://archive.codeplex.com/?p=kinectmouse) ---- ### 把Kinect當鍵盤使用 * Kinect for Windows Runtime v1.8 * 若只需使用設備:[下載](https://www.microsoft.com/en-us/download/details.aspx?id=40277) * FAAST 程式安裝 * FAAST 程式:[下載](https://www.ocu.tw/download/FAAST-1.2-x64.zip) ---- ### FAAST 設定 * FAAST 設定 * 按下Sensor->Connect連接設備 * 按下Gestures->New Gesture->OK * 按下Input->Add->Add Position Constraint ![](https://i.imgur.com/e9ClPvt.png =400x200) * 按下Output->Add->Add Keyboard Event ![](https://i.imgur.com/5fw3nZK.png =400x200) * 按下Input->Add->Add Position Constraint ![](https://i.imgur.com/B9R6Lqb.png) * 按下Output->Add->Add Keyboard Event ![](https://i.imgur.com/Vetmpi6.png) * 按下Input->Add->Add Position Constraint ![](https://i.imgur.com/11CwndW.png) * 按下Output->Add->Add Keyboard Event ![](https://i.imgur.com/JkK0tGX.png) ---- ### Super Mario Game * 遊戲網址:[連結](http://www.ocu.tw/download/SuperMario.zip) * 將舉起左手取代鍵盤a鍵 * 將舉起右手取代鍵盤d鍵 * 將舉起左右手取代鍵盤空白鍵 --- ## Scratch 結合 Kinect 基本應用 * 環境基本設置 * 範例下載測試 * 案例練習 ---- ### Scratch + Kinect 環境基本設置 * 下載並安裝 Kinect Runtime 1.8:[連結](https://download.microsoft.com/download/E/C/5/EC50686B-82F4-4DBF-A922-980183B214E6/KinectRuntime-v1.8-Setup.exe) * 接上 Kinect 設備:包括電源線和 USB 線 * 下載並安裝 Scratch 1.4:[連結](http://download.scratch.mit.edu/ScratchInstaller1.4.exe) * 下載解壓縮並執行 Scratch2Kinect:[連結](http://www.ocu.tw/download/Kinect2Scratch15Final.zip) * 請按下(LAUNCH KINECT),檢查是否正常? * 再按下(CONNET TO SCRATCH) ![](https://i.imgur.com/7LLT2pj.png =400x300) ---- ### Scratch + Kinect 範例下載測試 * 開啟 Scratch 1.4 程式 * 下載並解壓縮範例專案檔:[連結](http://www.ocu.tw/download/Kinect2ScratchSamples.zip) * 開啟其中之一專案檔測試: * 選擇(檔案)->(開啟舊檔)->(選擇目錄) * 打開專案檔:Kinect2Scratch_1P_Alien_Attack.sb ![](https://i.imgur.com/mHt2NuE.png =500x300) --- ## Scratch + Kinect 範例練習 * 使用 Kinect 控制角色的位置 * 將一顆球不斷在畫面中反彈 ---- ### 使用 Kinect 控制角色的位置 * Kinect 設定:[Driver](https://download.microsoft.com/download/E/C/5/EC50686B-82F4-4DBF-A922-980183B214E6/KinectRuntime-v1.8-Setup.exe) + [Scratch](http://download.scratch.mit.edu/ScratchInstaller1.4.exe) + [Kinect2Scratch](http://www.ocu.tw/download/Kinect2Scratch15Final.zip) * Scratch 程式如下: * 角色1->程式->控制:置入[當旗子被點一下] * 角色1->程式->控制:置入[重覆執行] * 角色1->程式->動作:置入[移到 x:_ y:_] * 角色1->程式->偵測:置入[滑桿的偵測值]至[x] * 將[滑桿]改為[Head_x][Kinect需先感應] * 角色1->程式->偵測:置入[滑桿的偵測值]至[y] * 將[滑桿]改為[Head_y][Kinect需先感應] * 偵測->滑桿的偵測值:滑鼠按右鍵->開啟遠端感應器 ---- #### 使用 Kinect 控制角色的位置(2) * 程式畫面截圖: ![](https://i.imgur.com/zF0YxxR.png) * 進階練習: * 將圖片換成彈簧床 * 將座標移動控制在只能橫向移動 ---- #### 使用 Kinect 控制角色的位置(3) * 將圖片換成彈簧床 * 角色1->造型1->編輯:換成彈簧床圖片 * 清除畫面 * 匯入Costumes->Things->trampoline * 使用縮小按鈕縮小圖片->按確定 * 角色1->造型2->刪除此造型 * 將座標移動控制在只能橫向移動 * 將[Head_x]的偵測值移除 * 將[y]值改為約-130 ---- #### 使用 Kinect 控制角色的位置(4) * 程式畫面截圖: ![](https://i.imgur.com/lgM3CDi.png) --- ### 使用 Kinect 左右手同時控制 * Kinect 設定:[Driver](https://download.microsoft.com/download/E/C/5/EC50686B-82F4-4DBF-A922-980183B214E6/KinectRuntime-v1.8-Setup.exe) + [Scratch](http://download.scratch.mit.edu/ScratchInstaller1.4.exe) + [Kinect2Scratch](http://www.ocu.tw/download/Kinect2Scratch15Final.zip) * 圖片資源下載:[http://www.ocu.tw/class/kinect/LeftRightHand.zip](http://www.ocu.tw/class/kinect/LeftRightHand.zip) * 角色匯入左手圖片:並設定程式 ![](https://i.imgur.com/BGLt242.png) ![](https://i.imgur.com/i506bKm.png) ---- #### 使用 Kinect 左右手同時控制(2) * 角色匯入右手圖片:並設定程式 ![](https://i.imgur.com/6PJlRJE.png) ![](https://i.imgur.com/mLYO5Mh.png) ---- #### 使用 Kinect 左右手同時控制(3) * 角色匯入球圖片:並設定程式 ![](https://i.imgur.com/llzKk6D.png) ![](https://i.imgur.com/toBEwaS.png) ---- #### 使用 Kinect 左右手同時控制(4) * 舞台匯入背景圖片 ![](https://i.imgur.com/qiDHmiq.png) --- ### 使用 Kinect 控制角色引導其他角色 * Kinect 設定:[Driver](https://download.microsoft.com/download/E/C/5/EC50686B-82F4-4DBF-A922-980183B214E6/KinectRuntime-v1.8-Setup.exe) + [Scratch](http://download.scratch.mit.edu/ScratchInstaller1.4.exe) + [Kinect2Scratch](http://www.ocu.tw/download/Kinect2Scratch15Final.zip) * 圖片資源下載:[http://www.ocu.tw/class/kinect/AntEatNumber.zip](http://www.ocu.tw/class/kinect/AntEatNumber.zip) * 背景匯入2張圖片:並設定程式 ![](https://i.imgur.com/DlIA4ob.png) ![](https://i.imgur.com/R82Yoic.png) ---- #### 使用 Kinect 控制角色引導其他角色(2) * 角色匯入螞蟻圖片:並設定程式 ![](https://i.imgur.com/v6vOW8d.png) ![](https://i.imgur.com/kUruqzC.png) ---- #### 使用 Kinect 控制角色引導其他角色(3) * 角色匯入引導球圖片: ![](https://i.imgur.com/AUZY8jJ.png) ![](https://i.imgur.com/183H9kH.png) ---- #### 使用 Kinect 控制角色引導其他角色(4) * 角色匯入數字1圖片:以此類推製作數字2-8 ![](https://i.imgur.com/a96ua5g.png) ![](https://i.imgur.com/XqzqoqU.png) --- ### 使用 Kinect 設計飛彈射擊遊戲 * Kinect 設定:[Driver](https://download.microsoft.com/download/E/C/5/EC50686B-82F4-4DBF-A922-980183B214E6/KinectRuntime-v1.8-Setup.exe) + [Scratch](http://download.scratch.mit.edu/ScratchInstaller1.4.exe) + [Kinect2Scratch](http://www.ocu.tw/download/Kinect2Scratch15Final.zip) * 圖片下載:[http://www.ocu.tw/class/kinect/MissileShot.zip](http://www.ocu.tw/class/kinect/MissileShot.zip) * 背景匯入1張圖片:背景.png ![](https://i.imgur.com/B7PBJ8I.png) ---- #### 使用 Kinect 設計飛彈射擊遊戲(2) * 角色匯入射擊目標圖片:並設定程式 ![](https://i.imgur.com/wsiZkU6.png) ![](https://i.imgur.com/hbHtRMa.png) ---- #### 使用 Kinect 設計飛彈射擊遊戲(3) * 角色複製射擊目標:目標上按右鍵選擇[複製] ![](https://i.imgur.com/5X2zi3a.png) * 更改射擊目標名稱:目標2-10 * 修改起始 x 座標:將 x 座標自動往前加 80 * 修改起始 y 座標:第二排目標需減 50 * 設定起始方向:奇數排設為 1,偶數排設為 -1 ![](https://i.imgur.com/mNbtC1p.png) ---- #### 使用 Kinect 設計飛彈射擊遊戲(4) * 角色匯入太空船圖片:並設定程式 ![](https://i.imgur.com/6v6ZvNJ.png) ![](https://i.imgur.com/yjg7r7j.png) ---- #### 使用 Kinect 設計飛彈射擊遊戲(5) * 角色匯入飛彈圖片:並設定程式 ![](https://i.imgur.com/wUEPoCn.png) ![](https://i.imgur.com/6yClluz.png =500x250) --- ### 使用 Kinect 設計飛彈射擊雙人遊戲 * Kinect 設定:[Driver](https://download.microsoft.com/download/E/C/5/EC50686B-82F4-4DBF-A922-980183B214E6/KinectRuntime-v1.8-Setup.exe) + [Scratch](http://download.scratch.mit.edu/ScratchInstaller1.4.exe) + [Kinect2Scratch](http://www.ocu.tw/download/Kinect2Scratch15Final.zip) * 圖片下載:[http://www.ocu.tw/class/kinect/MissileShot.zip](http://www.ocu.tw/class/kinect/MissileShot.zip) * 背景匯入1張圖片:背景.png ![](https://i.imgur.com/B7PBJ8I.png) ---- #### 使用 Kinect 設計飛彈射擊雙人遊戲(2) * 角色匯入射擊目標圖片:並設定程式 ![](https://i.imgur.com/wsiZkU6.png) ![](https://i.imgur.com/hbHtRMa.png) ---- #### 使用 Kinect 設計飛彈射擊雙人遊戲(3) * 角色複製射擊目標:目標上按右鍵選擇[複製] ![](https://i.imgur.com/5X2zi3a.png) * 更改射擊目標名稱:目標2-10 * 修改起始 x 座標:將 x 座標自動往前加 80 * 修改起始 y 座標:第二排目標需減 50 * 設定起始方向:奇數排設為 1,偶數排設為 -1 ![](https://i.imgur.com/mNbtC1p.png) ---- #### 使用 Kinect 設計飛彈射擊雙人遊戲(4) * 角色匯入太空船圖片:並設定程式為太空船1 ![](https://i.imgur.com/RwCLIQY.png) ---- #### 使用 Kinect 設計飛彈射擊雙人遊戲(5) * 角色匯入太空船圖片:並設定程式為太空船2 ![](https://i.imgur.com/RwCLIQY.png) ---- #### 使用 Kinect 設計飛彈射擊雙人遊戲(6) * 角色匯入飛彈圖片:並設定程式為飛彈1 ![](https://i.imgur.com/3XE2Csd.png) ---- #### 使用 Kinect 設計飛彈射擊雙人遊戲(6) * 角色匯入飛彈圖片:並設定程式為飛彈2 ![](https://i.imgur.com/lWSnZXk.png) ---- #### 使用 Kinect 設計飛彈射擊雙人遊戲(7) * 完成畫面如下 ![](https://i.imgur.com/6c8xPES.png)