02361072 互動視訊遊戲製作課程心得

        一開始選這門課也沒太多念想，因為本身對需要做專案的課程不太喜歡，可這學期想盡量將課表排滿，所以把能修的選修都修滿了。雖然一開始修課動機薄弱，但經過第一堂課遠坤老師的講授，按部就班的課程進度還有VR的介紹讓我有了上課的動力。

        還記得一開始老師用了許多電影、動畫、遊戲一些相關影視產業來介紹何為實境、何為虛擬、何為擴增...結果我一下課回家就把上課介紹到的實境電影──《楚門的世界》給載來看，好看！其中演員(戲中的)不斷重複的一些日常被楚門戳破時，有點想笑但內心又深深的感到可悲，現實何嘗不是如此(電影寓意甚多，值得看)。經由老師舉了許許多多生活中的例子，讓我們很快就能理解也讓我們被深深吸引。

        除了相關應用和發展歷程，還有老師不斷分享給我們的最新資訊，有設計、遊戲上的；還有許多視覺上的應用，給予更加便利的觀察與彈性，不用花費多餘的材料來製作模型。到了期中，上過遠坤老師課的都知道，按部就班來就沒什麼好需要擔心的。

        每次上課聽到虛擬實境新的應用或類似的技術發想，都會深深吸引住我的眼球，覺得這也太好玩了吧！不過到了自己要實作時，又懶蟲上身缺乏耐心，加上一開始沒有乖乖地跟著進度，後面剩一兩天開始動工BUG一堆只能嗚呼哀哉，徒喚奈何。(實作三完)

        最一開始的發想是一種推娃娃的機器(下圖)，這遊戲機的玩法就是操縱上下左右移動，最後對準洞口按下確定，高一點低一點點點點都不行！因為用手來控制操縱手把來推動機器多少會有點細微的差距，難度超高，所以想做個虛擬的來玩玩，利用影像擷取來直接偵測手部移動感覺應該比機器靈活的多。或許以後這種需要人手親自觸碰操控的機械都將被淘汰～

02360076_作業2

作業二

做出可以放入相框的按鈕

先明白如何將圖片放入視窗內

再將圖片改成想要的大小

以及將陣列大小改為旱象片原始大小相同

就可以順利將相框放入視窗

遇到問題 : 

圖片原始大小與陣列大小不符合

右邊就會出現亂象

但是修改為相同後就可以呈現了

原本老師給的範例

將圖片放入視訊視窗

解決問題前

右邊會重複出現

最後修改圖片以及陣列大小

將相框圖片放入視窗

02360076_期末專案

期末專案

主題 : 史迪奇大作戰

想法 :

先用processing做一款由鍵盤控制的小遊戲 

再運用老師上課所教的程式加以改變 

將圖片改為按鈕用來連接鍵盤

用以下程式做鍵盤連結

keybd_event("ASCII碼",0,0,0);

Delay(100);

keybd_event("ASCII碼",0,KEYEVENTF_KEYUP,0);

遇到問題 :

1.圖片原始大小與顯示大小不符合

程式就會出問題

但是修改為相同後就可以呈現了

2.Binary 沒有設定到鏡射

所以取道的背景一直是不相同的

那整個程式也無法運作

3.win10 突然無法使用XE2

因為有些連結無法連結到資料庫

最後多存檔幾次就可以解決了

遊戲開始

遊戲進行

遊戲勝利

遊戲失敗

心得 :

本身就對遊戲很有興趣

但是都沒體驗過用視訊來玩遊戲

所以選擇了這門課

因為有興趣

在寫程式與構想發麵也沒有卡關太久

一路算順利地寫出專案

也非常感謝老師在我有問題時

隨時都能給予最快速與正確的解答

這次是很大的經驗也學到很多

雖然幾乎都是用老師的程式碼

但是其實上課認真去學

整個操作都是很順利的

也讓大三下這歌沒什麼程式課程的學期

學到很多程式碼的撰寫

更讓我獲益良多的是

老師上課教很多現在最熱門的互動遊戲

就算是以前看過或是現在才知道的

都讓我有新的了解

這堂課不是讓我們有背就有分的課程

而是讓我們學以致用的課程

很開心有選到這門課^ ^

遊戲影片連結

小朋友齊打交-使用視訊介面遊玩

互動視訊:期末專案

小朋友齊打交-使用視訊介面遊玩

設計發想:

   在這學期的課程中學到許多有關於視訊互動的方法及程式技巧，最後期末的專案開發時，想將課程中對背景差異偵測的技巧應用在童年的回憶上----”小朋友齊打交”。小朋友齊打交是一款可以4人同時在同一台電腦透過鍵盤一起遊玩的2.5D遊戲，但想想那畫面，可想而知那是非常非常擁擠的。若是能透過攝影機對手部動作的偵測並將其設置到相對應的按鍵上，那就可以從小小的鍵盤解脫出來，獲得更加的遊戲體驗。

 

製作歷程:

最初設想使用色彩偵測，對應到滑鼠上，用來設置遊戲畫面的基礎設定。依據視訊鏡頭中接收到的單一藍點(藍筆筆蓋)做為控制。嘗試讓程式能夠追蹤該藍點的移動路徑，讓滑鼠接收路徑的軌跡並模擬出一樣的路徑。但隨之而來的困難為如何偵測滑鼠定位(X,Y坐標軸)以及視訊擷取視窗所擷取的藍點定位(X,Y座標軸)。以及如何讓程式內的滑鼠移動擴充Window系統介面。最後在第二個問題時遇到無法突破的瓶頸，並放棄這個主題。

在第一次嘗試失敗之後，決定跳過設置的步驟，直接開始遊戲。使用背景差異偵測的技巧做開發。在製作過程中遇到的困難為鏡像處理以及按鍵偵測的精準度。鏡像處理的問題沒有花太久的時間就成功解決；但可惜的是對按鍵偵測的準確度，直到最後都沒辦法完美的偵測。按鍵的介面也比理想中的狀況差異甚遠。

介面介紹:

https://youtu.be/TjaAOrUqm6Y

移動介紹:上下左右

https://youtu.be/Qt6nlV3Kfb4

動作介紹:守跳攻

https://youtu.be/7BAfQFHlCFA

施放技能:

1. 技能:火焰彈

https://youtu.be/Co5oo-eZCmQ

2. 技能:烈火焚身

https://youtu.be/RyBDFWTgNxY

3. 技能:大轟炸

https://youtu.be/9lPrxDhQK2Q

製作心得:

   在這次專案製作中，學習到了許多如:按鍵偵測，Delay函式的使用，滑鼠事件呼叫，HHook，win10真的頗難用，而最大的體悟就是現實與理想真的有段差距，且最痛苦的事情是花了極多的時間卻在最後不得已而放棄的那種失落；但這也讓我不禁想起Steve Jobs在史丹佛大學給畢業生的一段話:"你無法預先把點點滴滴串連起來，只有在未來回顧時，你才會明白那些點點滴滴是如何串在一起的。"（you can't connect the dots look-ing forward; you can only connect them looking backwards ）。

最後非常感謝老師在這堂課的指導，當我遇到問題時，協助我並給予我明確的提示，讓我能夠順利的完成這次專案的開發。

互動視訊：作業

作業一: 視訊擷取視窗基本訊息處理
在這個作業中，嘗試抓取許多的基本視訊擷取視窗的訊息及設定功能；
對整個概念有了更進一步的理解。

作業二:影像色彩選擇

在這次作業中學會了對視訊擷取視窗色彩的調校，但在使用調色盤這個工具時卻出現了無法正確顯示所想要顏色的問題。

作業2-1:灰階

作業2-2:調色盤

作業三:膚色偵測

這個作業花了我許久的時間，一來是一開始對這部分沒有完善的理解，一知半解的狀況下去實作也遇到了許多的困難，不過感謝老師及時的指導讓我可以順利完成這部分的作業。最後遇到的困難是有時背景與膚色調相近的部分也容易被截取進去。

作業四:相框

在實境中放入虛擬元件的單元中，對壁虎的放置，互動等等的學習其實並沒有很了解；但透過這次的作業練習讓我可以更加明白指令的呼叫及程式技巧。但遇到的困難是相框在最後480處就會重複，我猜應該是BYTE*  ptr...的那個變數呼叫內容有錯誤。不過嘗試了許久並沒有成功。好在最後和同學討論下找到了問題點，果然是在變數設置時的錯誤，不過其實沒有那麼複雜，只是陣列長寬取錯了。

02360466 何京霖 平時作業

平時作業

 Driver Infomation

 Auto Run

 Video Format

 Gray mode

 Color Mode

 Mirror Mode

壁虎互動

02360334-陳毓升 小朋友下樓梯

互動視訊遊戲製作-小朋友下樓梯

為何想做小朋友下樓梯:

 因為這款遊戲在許多人的童年中有著深刻的回憶，而簡單的操作讓他容易上手，所以我第一個想到的遊戲就是小朋友下樓梯。

遊戲畫面與玩法:

下圖為遊戲方式:透過背景差異偵測來偵測物件的移動，可看到2個方向鍵，當碰到時會往對應的方向行走，藉此來下樓梯。

心路歷程:

雖然老師給了很多範例程式，但還是有許多地方必須自己去Debug，也了解到許多關於視訊處理的方式，透過自己下去動手寫軟體，不斷的一直實驗，不斷的測試，當中也有軟體出問題運行不了重灌，真的是心灰意冷，但也許寫程式就是這樣，需要相當的耐心與毅力，這堂課也許不簡單，但讓我學習到許多，當初也不知道自己會不會完成，但堅持下去讓我得到了甜美的果實。

操作影片:

資工三甲—王凱平

企劃書

一．  創作動機

從小就很喜歡玩接東西的遊戲，所以修這門課的時候就想做一個接接樂的遊戲。剛好又是互動遊戲的專題，就可以用自己的身體來當做小時候玩的遊戲裡面的接物盆或聚寶盆之類的東西，未而完成與兒時回憶的互動。

二．  製作前的準備

老師從怎麼連接攝影機開始教起，我一開始覺得，教這些幹嘛，這不是誰都會的東西嘛，結果真的輪到自己動手實做的時候，才發現沒有想象的那麼簡單。雖然知道USB接上去就可以用，可是以前從來不知道一台攝影機有這麼多參數可以更改和參考。之後老師開始佈置作業給我們去做，老師的blog裡面有整個教材，可以供我們學習和參考。我一直在拖，不想好好做，等到真正要做期末專案的時候才發現自己什麼都不會。所以開始認真地追趕大家的進度。等到我把作業的進度趕上，才開始做期末專案，這時已經只剩兩天了。

三．  開始製作

在把必要的作業都做完後，終於開始了自己的期末專案歷程，一開始先用老師給的範例程式當做小白鼠，測試了一下壁虎可不可以從天而降，根據自己以前做processing的經驗，想說一個for廻圈就可以解決問題，結果一上來就碰了壁，google了各種方法都不讓過，在實在沒辦法的情況下，求救于老師，才知道需要timer才能使一張圖片每一秒在不同的位置。在解決了第一個大難題之後，我又繼續前行，可是好景不長，由於之前想要投機取巧，沒有做background的功能，結果到了摸到圖片就消失這的時候，發現各種complie不過，只好請求各位同學，才知道原來要做background才可以摸到消失。在我的心裡，一直覺得只要會了勻速下降和摸到消失我的專案就做完了，可是我太天真了，自以為看得懂老師給的範例程式，之前複製貼上的尷尬點瞬間爆了出來，完全看不懂程式碼的我要怎麼將一張圖片勻速下降變成10張圖一起？絞盡腦汁之後，在夾縫中發現了一縷陽光，終於寫出了兩張圖片一起下降的程式。然而就在我以為大功告成的時候，發現我的兩隻壁虎在消失后和從天而降之前會出現好幾隻壁虎的情景，這讓我卡了大概2個小時而不知其所以然，最後實在解不出來去請教老師，原來是重新出現的位置的起始位置的X2Y2沒有重新設定，所以會出現好多壁虎。又一大問題解決了，終於可以安心地做下去了，然而就在給老師演示之後，我犯了這天底下最白癡的錯誤：在還沒有將檔案上傳到fb的時候就將電腦關機了。所以，結果大家都知道的，重做吧，不過新的一輪讓我吸取了上次的經驗，我減少了憤怒鳥的數量，使觸摸消失變得不會那麼難檢測，只是我不知道是硬體原因還是怎樣，明明binary和block都可以正常的監測到我的手和身體部位是白色的，然而play的時候要面積很大憤怒鳥才會消失。後來我覺得可能的原因是timer的速度，所以我降低了他們下降的速度，然而情況并沒有好轉。可是我的時間只夠做到這裡。

四.遊戲名稱與玩法

我做的是接憤怒鳥的小遊戲，遊戲玩法很簡單，就是用你身體的部分去觸碰從天而降的憤怒鳥，觸碰到憤怒鳥就會加分，不小心碰到豬就會扣分，遊戲沒有時間限制，只是玩久了會蠻累的，所以一般大家都是玩到累了看分數。這款遊戲也可以多人同時玩，大家可以合作一起接憤怒鳥，就可以使分數更高。

五．  總結

修完這門課，我覺得我的最大體會就是不要拖泥帶水和自以為是，自己不知道的東西還多著呢，要學的東西還多著呢。不要以為能做完就不早做，早做晚做都得做，還不如早早做完，玩得也舒心。再就是粗心大意了，再也不要沒上傳完就關機了，太白癡了。最後，謝謝老師的精心指導和各位同學的悉心幫助，這學期這門課沒白修，有學到東西。

02360635 鄭瑞銘 ─ 互動媒體期末專案

專案應用程式名稱：AR Video Controller

專案目的

        為了能夠讓觀眾在觀賞影片時能夠使用自己認為最舒服的姿勢，並且不需要改變自己體位的操作影片播放器，意即：不用離開椅背、不用起身操作滑鼠和鍵盤，即能夠將影片快轉、暫停等操作，以達到舒適的影片觀看環境。

        本專案將利用課程學習到的擴增實境相關技術，並結合免費下載的媒體播放應用程式來完成可體感操作的影片觀賞環境。

專案運作環境需求

• 本專案應用程式
  作為影片播放的控制器來使用，功能包含：    1.暫停 / 播放 (Space)
      2.視窗縮放 (Enter)
      3.快進 (Right Arrow)
      4.倒轉 (Left Arrow)

• The KMPlayer
  本專案所使用的媒體播放應用程式。
• 一部不危害兒童及青少年身心健全成長的示範影片
  基於兒童及青少年身心健全成長相關法條、維護社會善良風俗，以及維持純潔的學術交流環境，本專案在程式運行方面選用的示範影片只會有違法下載並播放的著作權和專利權等智慧財產問題。

應用程式環境設定流程

1. 於專案應用程式的資料夾根據路徑：02360635_鄭瑞銘_互動視訊期末專案→W32→Debug→Project1.exe，執行應用程式。
2. 於視窗功能表：Option→Window...→Create/Recreate，建立視訊窗格。
   
3. 請務必將攝影機畫面調整成畫面上半部不要有自己身體，並且確認雙手能伸展到視訊窗格左上、右上兩個角落。
   
4. 於視窗功能表：Option→Controller Set...→Set Sensor，
   此時請將自己的姿勢維持在流程3的狀態直到視窗右下角讀秒至31。
5. 於視窗功能表：Option→Controller Set...→Build Controller，在畫面上方建立四枚功能按鍵。
   
   
6. 啟動The KMPlayer並且播放影片，此時請務必將鍵盤輸入設定成英文輸入模式，否則The KMPlayer的暫停和播放快捷鍵將無法使用，然後即可開始優雅且舒適的享受影片。
   

應用程式操作

本專案主要使用視訊窗格的上半部部分，按鍵配置由左而右分別是：

• 左：倒轉
• 中上：視窗縮放
• 中下：暫停 / 播放
• 右：快轉

根據環境設定流程3的身體測試結果：

• 兩手向左上和右上伸去應能觸碰到倒轉和快轉兩個按鍵。
• 自己頭頂上方應能伸手碰到按鍵─暫停 / 播放。
• 兩手向上伸懶腰的話則剛好能觸碰到視窗縮放的按鍵，經測試之後即使是用一個螢幕也能在全螢幕模式操作。

開發心得

        本專案在操作需求度方面並無要求連擊、按鍵靈敏度等遊戲需求，因此程式方面如：畫面載入、鏡射、動作偵測的部分只要參考李遠坤老師在本學期課程中提供的教學教材即可完成，而開發的時間主要花在如何將這些功能盡可能整合成幾個按鍵來處理，因此在除錯過程花了相當多時間，尤其在動作偵測的部分甚至花了半天時間來處理，在此特別感謝如此認真備課、教導的李遠坤老師。

        而在本專案中使用到按鈕事件則要特別感謝莊惟傑同學無私地分享經驗談，因此我才能在發表前的晚上將專案有驚無險地完成。

        最後我要對所有參與此次課程的同學們說一聲：「大家辛苦了！」

02362422 卓景昭 小朋友下楼梯_视讯互动版

02362422 卓景昭

我做的专案是让视讯镜头成为一个控制器，以实现游戏的目的。

专案构思：

在一开始的时候，我的想法是在BCB中直接建构一个游戏，来完成这门课的专案。但是在期末动起手后，我打消了这个念头。原因有二：一是太过于复杂，时间来不及，无法做出第一版来展示。二是美工差，不管从游戏画面，还是体验，都无法让人满意。在参考了历届学长姐的优秀作品后，我决定从控制器着手，制作游戏控制器。

这个专案最关键的技术在于能让摄影机辨识用户在镜头中的位置，以进一步实现虚拟键盘的功能。由于时间紧，我只制作了阳春版，只有左右两个键，通过触碰图中两张图的位置来实现。由于摄影机硬体的限制，目前用手在镜头前玩时用户体验会比较好，若用户在镜头远处，全身入镜玩，反应较慢，所以本次demo就用比较的简单的方法来进行。

在几天的制作中，遇见的困难很多。从简单的缺少宣告，到无法进行background，重新制作专案，我都有遇到过。其中，最让我印象深刻的是添加不同的图片到视讯窗口。这是我这个专案的转折点。之前在尝试放入图片到视讯窗口时，参考老师的程式码范例，是没有问题的。但要放自己的图片时，却出现scan line index out of range。询问了很多同学，都不清楚这个问题出在哪里，后来我通过自己查资料，查到了在进行ScanLine[j]，如果j大于图片的大小，阵列读取图片时会发生错误，无法从图片读取到像素点，就会发生scan line index out of range.

       

程式主界面

制作了Auto按钮 方便执行

8*8block监测模式

ColorMode

BianryMode

游戏影片：

  在制作虚拟按钮时，因为没有注意到keybd_event在按下后需要release，导致了程式一执行，按钮就会不停的按下，即使没有达到触发条件。后来经过同学的指导，才明白问题出在哪里。

由于时间紧迫，我在排版和选图设定上没有做得很好。导致左右键的位置有点近。在游玩的时候，常常会因为身体碰到，而导致误操作。若有机会制作第二版，这将会是主要的改进方向。

制作心得

当时选这门课是因为觉得这门课好玩，经过了一学期的学习，的确如我所期待，课程很有趣，期末的专案也很有挑战性。因为期末其他事情耽搁了一些时间，导致这个专案只有一周的时间来构思+制作。专案的程式码大部分来自于老师，经过后续不断的修改，达到了预期的效果。游戏方面我选用了经典的小朋友下楼梯，因为它通过左右键控制，就可以达到不错的游戏体验。在后续实作部分，有个小插曲：我的专案制作完成后，虽然在记事本中测试按键有效，但在游戏中却无法通过控制器控制，我查阅了相关资料，没有发现问题所在，后来和同学讨论，明白了在按键Event之间需要加入Delay（在按下和放开之间），否则程式无法侦测到我的操作。通过这次专案，我的程式能力相较之前有所提高，虽然程式码大部分来自于老师，但是使用和修改程式码需要对程式码有一定的理解，否则是无法进行修改的。相应提高的还有逻辑思考能力，专案中callbackfunction非常多，表面上看起来执行顺序很跳跃，但在理解程式码后，就明白了程式的执行顺序，在弄明白这些后，增添新功能也就变得不那么困难了。