第三章 遊戲介面及其開發過程說明
3.1 遊戲概述
3.1.1 遊戲名稱 BABY PARTY
主要用Borland C++ Builder5.0(BCB5.0)來開發使用者的介面和 整個遊戲的主要架構，而video 方面則是用 Webcam 攝影機 來幫助拍 攝影像，以Webcam 所擷取的影像便表了使用者的行為，進而用來驅 動遊戲介面以播放聲音和圖片．
3.2 開發環境及工具介紹
3.2.1 硬體設備
作業系統: Windows XP Home 中文版 CPU:Intel Pentium M 1.3G
Memory:256MB
3.2.2 軟體工具
Borland C++ Builder 5.0
程式編輯的主要工具，用來開發使用者的介面。
圖 3-1 Borland C++ Builder 5.0 Adobe Illustrator 10.0.3
主要用在繪製介面中所用到的圖片和背景。
Adobe Illustrator 10.0.3 Adobe Photoshop 7.0
主要的功能是用來編輯和修改由Illustrator 所編繪出來的圖片。
圖 3-3 Adobe Photoshop 7.0
Sonic Foundry-Sound Forge 6.0
主要功能是對這次遊戲中用到的聲音做剪輯和修改的動作。
圖 3-4 Sonic Foundry-Sound Forge 6.0
3.3 遊戲控制器介紹說明
這是一塊我們自己自製的面板，上面有著我們設計的圖樣和顏 色，主要的功用就是用來讓使用者和遊戲做互動的媒介，這塊面板是 針對小孩子所設計的，有淺顯易見的鮮明顏色，讓小孩子可以清楚地 認識每一個按鍵，然後讓小孩子在遊戲的過程中，所有在遊戲控制器 上面做出動作的，皆經由Webcam 拍攝影像之後做判定，如果是正確 的操作，便驅動遊戲介面，做出對應的影像或聲音的互動。
圖 3-5 遊戲控制器
3.3.1 遊戲按鍵( GAME BUTTON)
遊戲按鍵共有四顆，這是遊戲主要的控制按鈕，也就是遊戲鍵，
遊戲中的各個選項都是經由這四顆按鈕來讓使用者點擊選取 。由於這 四個按鍵在遊戲中是互相搭配使用，且功能類似，因此放在一起討論。
3.3.2 開始/暫停按鍵( START/STOP BUTTON)
這一顆按鍵主要的功能是讓使用者在遊戲中，可以即時地暫停以
3.3.4 往下一個按鍵( FORWARD BUTTON)
這顆按鍵主要的功能是讓使用者移動進入下一步的選項，遊戲中 會依照遊戲狀態不同而影響此鍵的功能，並會對使用者作出清楚的提 示。
․註:角落的三的黑點是用來幫助辨識
3.4 遊戲介面環境說明
3.4.1 介面設計說明
此介面因為一部分是要經由電腦來操作，故介面的設計是以親子 的角度切入，讓家長可以幫助小朋友做一些功能的調整進而從旁教導 小朋友。介面整體的設計以其功能性為主，盡量讓介面的功能可以趨 近人性化，並且符合實際操作的情形來設計選項。
圖 3-6 遊戲介面主要環境
3.4.2 遊戲功能選單
遊戲功能選單包含了遊戲中會用到的一些功能，例如上一個以及
下一個，選單主要是讓親人在陪伴小朋友的時候可以點選控制。
圖 3-7 遊戲介面-遊戲功能選單
3.4.3 遊戲模式選單
遊戲模式選單包含了遊戲裡面所有的模式，可以直接點選每一個 單項的遊戲，或是按照遊戲的步驟一項一項慢慢進行。
圖 3-8 遊戲介面-遊戲模式選單
3.4.4 遊戲控制器選項
遊戲控制器選項其實和手上的遊戲控制器有著一樣的功能，在介 面中亦設計了一樣的控制器，方便做輔助控制和操作。
圖 3-9 遊戲介面-遊戲控制器選項 3.4.5 音樂選項
這邊包含了一些附屬的選項，可以對遊戲的一些設定作一些基本 的變化和調整。
圖 3-10 遊戲介面-音樂選項
3.5 各項遊戲主題介紹
圖 3-11 聲音遊戲基本練習的遊戲畫面 Step 2 開始練習
進入到聲音遊戲--基本練習的主畫面之後，會看到畫面中有跟 遊戲控制器(圖 2-1)對應的七個六角形圖案，接著，便可以開 始使用遊戲控制器來操作了，如果按下開始鍵便可以開始進行 聲音的基本練習。
Step 3 結束練習或重新開始
進行聲音遊戲—基本練習的練習的過程中，可隨時選擇重新來 過或是小朋友覺得已經信心十足想前往下一關 聲音遊戲-小測
聲音遊戲-小測驗 遊戲流程(圖 3-12) Step 1 進入遊戲畫面
如果不想一步一步來的話，亦可以直接從介面上方的工具選項 點選遊戲模式選單(同前)，選擇聲音遊戲—小測驗(或是直接按 熱鍵 F2)，即可進入聲音遊戲--小測驗來為剛剛的練習作一個 Test。
圖 3-12 聲音遊戲小測驗的遊戲畫面
Step 2 開始遊戲
戲控制器，按下開始按鍵即可以開始進行測驗。
識基本的旋律以及節奏的快慢。
節奏遊戲-基本練習 遊戲流程 Step 1 進入遊戲畫面
如同前面的說明，亦可以從介面上方的工具選項，點選遊戲模式 中的節奏遊戲—基本練習或是可以使用鍵盤按下熱鍵 F3，即可以 進入遊戲畫面。
圖 3-13 節拍遊戲基本練習的遊戲畫面
Step 2 開始遊戲
圖 3-14 節拍遊戲小測驗的遊戲畫面
Step 2 開始測驗
進入到節奏遊戲—小測驗的遊戲後，畫面中醫樣會有相對應的遊 戲控制器六角形圖案讓小朋友可以清楚地對應到手上的遊戲控制 器。然後依照之前的介紹和提示，當你按下遊戲控制器上的開始 按鍵之後，便可以開始進行小測驗遊戲。
Step 3 結束測驗或是重新測驗
測試的過程中，答對不會扣分，但是如果答錯，分數會下降，如
有太大的挫折感或是覺得太容易而沒有挑戰性。
第四章 影像辨識和使用者行為部分
4.1 辨識想法及做法說明
4.1.1 想法說明
數位影像處理大都利用數值矩陣的方式來處理圖形資料，矩陣中 的元素其值的大小代表影像中所對應的圖點的亮度值，這些元素我們 稱之為像素、點素、圖元或畫素 (pixel)。
本次專題是想利用擷取影像中的像素(pixel)來對顏色做分析，就是 以RGB 值來分析判斷控制板上的區塊位置以及行為。
4.1.2 取得遊戲控制器區域
將控制器置於攝影範圍內，先以CCD 攝影機拍攝控制器，在控制 器上的四個角落做記號(圖 3-1)，以方便辨識時取得控制器的定位(如 下圖的四個角落) 。
圖 4-1 遊戲控制器的辨識
4.1.3 判定遊戲控制器上的按鍵
相對於在電腦螢幕上顯示的按鈕，在控制器上將會把 7 個按鈕塗 上利於辨識的 7 種不同的顏色，以顏色為基礎進行判定，這樣可以增 加辨識的效率。
4.1.4 判定是否按下按鍵
對於這個問題，由於是要模擬＂按下＂的行為目前的想法是＂利 用顏色＂以及＂設定區域＂兩個方法合併來解決＂利用顏色＂的方法 是在使用者的指尖套上指套或是貼上有色貼紙，當然顏色要跟按鈕和 板子做區分
․如下圖(圖 3-2)，當指套完整的在顏色區塊按鈕內部的區域停留一小 段時間(例如:一秒，到時會以 CCD 的解析度去修正靈敏度)，如果條件 成立，則判定為按下按鈕
圖 4-2 判定手指按下按鈕
․如下圖(圖 3-3)，經掃描後發現指套並沒有完全位於顏色區塊的按鈕 內，則判定沒有按下按鈕
圖 4-3 手指未進入按鈕的區域
4.2 辨識實做
4.2.1 實作理論說明
首先用電腦畫的原圖直接以判斷 RGB 值的方式來處理，如表 1-1 是最先設定的 RGB 值。
RGB 值
區塊顏色 R G B
1 (橙色) 255 150 0 2 (水藍色) 0 255 255
3 (紅色) 255 0 0
4 (黃色) 255 255 0
5 (綠色) 0 255 0
6 (紅紫色) 255 0 255
7 (藍色) 0 0 255
表４-1 各區塊的RGB 顏色分析表。
取得RGB 值再以程式來判斷是否符合，若符合則顯示白色，結果如圖 4-4，圖 4-5。接著再將指套放入顏色區塊中，見圖 4-6，圖 4-7 如此將可判斷出是否有指套進入顏色區塊，進而啟動控制器。
圖 4-4 遊戲控制器-原始圖
圖 4-5 遊戲控制器-經過RGB 抓取比對後的圖
圖 4-6 黑色的指套進入遊戲控制器中
圖 4-7 黑色的指套進入後經過 RGB 抓取比對後的圖
4.2.2 實作相片測試
圖 4-8 數位相機拍攝過後的遊戲控制器(未加閃光燈)
圖 4-9 數位相機拍攝過後的遊戲控制器(未加閃光燈) 比對後的圖
4.2.3 實作發現的問題
經過多次實驗以及討論，發現光線的影響過大使得 RGB 值變 化太大無法掌握，其中還發現在越亮的情況下拍攝，同一顏色區塊 的 RGB 值變化範圍越小，實際上，在實驗後發現用閃光燈所拍攝的 照片比沒有用閃光燈的更容易判斷，判斷出來的範圍更明顯，如圖 4-10，4-11 與圖 4-8，4-9 做比較更可明顯看出光線的影響。
圖 4-10 數位相機拍攝過後的遊戲控制器(閃光燈)
圖 4-11 數位相機拍攝過後的遊戲控制器(加入閃光燈)經比對後 由於對光線的影響方面遲遲無法突破，所以改用其他方法試驗。
4.2.4 嘗試解決的方法
第二個想到的方法是常常看到的灰階的方式，做法是試圖把照片 先經過灰階的處理來得到較單純的圖，接著用邊緣偵測來偵測出不同 區塊各自的範圍。
在數位矩陣中之元素，其明亮度依量化值而定出不同之灰階(gray level) 。一般而言，灰階為 2 的冪次方，如 28 即表示有 256 個灰 階。
邊緣偵測的梯度運算子:
圖 4-13 圖 4-12 再經過邊緣偵測的結果。
此方法確實可偵測出區塊邊緣，但由於程式功力不足，又找 不到方法可以個別分出七個不同區域，所以此方法又無法做到完 美。
第五章 軟體評估與討論
Illustrator & Pgotoshop 兩個軟體來搭配進行編輯繪圖，最後完成介面 所有使用到的圖片。程式方面則是完全用 Borland C++ Builder 來結 合音樂和圖片包裝製成整個遊戲的介面。目前完成了兩個遊戲部分，聲音遊戲以及節奏遊戲，整理的結構大致皆以定型，剩下一些後續的 動作再做最後的修改，希望能呈現更生動活潑的介面出來。
5.1.2 辨識程式部分
本次辨識的部分因為本身對於影像處理的方法了解的還不夠透 徹，一開始決定要偵測小朋友在遊戲控制板上的行為之後，便開始尋 找相關的資料，一開始是先往膚色去著手進行，後來因為介面的開發 過程遇中到一些問題，因此才把使用者的方面改變成有指套的存在，
也就是讓小朋友手指套上一個具有顏色的環套，這樣利用這個顏色，
可以增加辨識的效率和辨識度，這是最先的方向。後來經過幾次測試 發現，顏色經過數位像機以及WebCam 拍攝過後的 RGB 值偏差不小，
因此又開始尋找另外的解決方法，後來朝向兩個方向去解決，一方面 提升光對 RGB 值的影響，另一方面則想從圖形的形狀下手，於是開始 測試一些關於亮度的演算法例如:HSV ，YCrCb...等，但因為之前沒 修過相關課程，所以又花了一些時間，但最後並沒有很大的突破。因 為影像經拍攝過後的 RGB 值偏差，因此無法正確判定出區域。
5.2 專題需加強部分
一些其他的解決方案是否可行，希望能把 WebCam 的拍攝部分順利地補 上去，讓整個遊戲的架構更完整一點。
第六章 心得感想
是最令人高興的，是自己的成長，學到了不只學業課業上的知識，更 了解到一些待人處世的道理。
再來，我要感謝我的老師—何信瑩 教授的指導，因為您的嚴格和
再來，我要感謝我的老師—何信瑩 教授的指導，因為您的嚴格和