Project Show @ interactive AR Game Class: 6月 2016

2016年6月30日星期四

平時作業

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

應用程式環境設定流程

於專案應用程式的資料夾根據路徑：02360635_鄭瑞銘_互動視訊期末專案→W32→Debug→Project1.exe，執行應用程式。
於視窗功能表：Option→Window...→Create/Recreate，建立視訊窗格。
請務必將攝影機畫面調整成畫面上半部不要有自己身體，並且確認雙手能伸展到視訊窗格左上、右上兩個角落。
於視窗功能表：Option→Controller Set...→Set Sensor，
此時請將自己的姿勢維持在流程3的狀態直到視窗右下角讀秒至31。
於視窗功能表：Option→Controller Set...→Build Controller，在畫面上方建立四枚功能按鍵。
啟動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非常多，表面上看起来执行顺序很跳跃，但在理解程式码后，就明白了程式的执行顺序，在弄明白这些后，增添新功能也就变得不那么困难了。

02373650 徐彩軒中二小遊戲

作品：奇怪的中二格鬥(暫定)遊戲
想法：
        曾經到新一代看到有人用Xbox one的體感鏡頭做音樂遊戲展出，看介紹人示範的樣子真的很像在跳舞，而且和平常常見的音樂遊戲很不同，是真的可以全身動起來的。不過後來好像在PS4上也出了款Just dance，也是體感的音樂遊戲。

        不過我做的不是音樂遊戲，比較類似格鬥遊戲吧？不過現階段只能作出攻擊和防禦的動作，還沒有作出判定點所以也只能看看而已。
  預計的構想是先選擇攻擊或防禦。而選擇攻擊的時候身旁會出現一個圓環，接著先接觸圓環的框一次，作為第一個判定點。再摸圓環的另一端，這樣就有兩個判定點可以直接用斜率畫出斬擊的軌跡。

不過一直做不好兩段的觸發只能退而求其次選擇現在的觸控定點發出固定的斬擊。
接著是防禦，防御現在只是觸摸定點叫出一個很中二的防禦盾，構想是來自於Arufa的墊板盾牌，看起來真的很帥。

原本的構想是對手電腦用random骰出攻擊或防禦，而玩家再做判斷攻擊。
而攻擊和防禦的判定會在下方跑出一條計量條，大概在80%~85%時後發動攻擊或防禦算是成功。

自己的攻擊和對面的斬擊可以互相抵消，用斜率去判斷。
不過一切都證明只是想太多，時間和coding能力上都有大大的不足。

心得：

        在coding上面一直都很不是了解和適應回呼函數的功能，原本作demo的作品的時候幾乎把她當成副程式再看，後來才了解兩個的差異。
        在自己作作品的時候才大概知道如何去用它來完成一些事情，這次的中二小遊戲裡面也用到了大量的回呼函數才作出來。
    一開始一直很頭痛同時不知道該怎麼叫出多個物件作觸發，後來才發現是自己想太多動到太多的參數結果衝突。後來寫起來就順理很多，不過一直想做的負源觸發寫不出來，又沒有太多的時間作嘗試。這次一直忘記要做Debug需要的顯示數值的地方，一方面是太不習慣常常做錯或忘記做很多動作，另一方面可能是太習慣Arduino的使用。
影片：

02370753 徐銘鴻 Subway Surf ( Rough )

一年前在跟學長討論問題的時候，學長建議我可以來修這門課，對於之後的專研

會有些的幫助，確實透過修習這門課在自學Android studio的時候比較容易上手。

在製作的程式時候只是複製貼上老師的範例程式，對於那些程式的意思沒有全部

了解，以致在製作期末專案的時候，很多東西都不是很了解。這幾天詢問老師的

問題的時候，老師會很有耐心的告知這些程式的意思在構想期末專案的時候，把

自己的想法跟老師說，老師會用丟問題的方式讓我自己去想怎麼做，像是給你一

根魚竿讓你自己去釣魚。

大家應該對這個遊戲應該不陌生，在高中的時候或多或少都有玩過，我以這個遊戲

為發想去製作期末專案。

遊戲執行畫面是意圖:

遊戲解說&說明:

金幣會隨機落下來，透過手碰觸上面的方塊來移動人物的位置

每吃到一塊金幣，右下角就會+5分。

https://goo.gl/VWHh28

雖然做得有些粗糙，畫面也有點慘慘的，老師說的透明影像最後也沒有把它做出來，

但透過這門課或多或少有學到一些關於影像處理的知識。

影片分享

02360831-小朋友下樓梯

這是期末專案所要遊玩的小遊戲，是大家小時候都有玩過的小朋友下樓梯!!

這邊要介紹的是操作畫面，因為怕畫面過於雜亂，所以我就沒有給按鍵弄上圖片了。
如圖所示，左上角的部分是左鍵，右上角的部分為右鍵。
然後在右下角的小小區塊放上Enter鍵，這樣就不需要再玩遊戲的時候還要用滑鼠點開始了。

期末專案的遊戲製作，都是將老師的範例程式：觸碰壁虎後消失改寫的。
在撰寫程式的時候，最先碰到的問題是：如何在玩遊戲時把畫面設成鏡像，
一開始我很天真的以為可以在點選play後再呼叫鏡像的call back function，不過執行後沒反應就知道是失敗了。
後來就是將取背景以及老師的範例程式使用到的call back function加上鏡像處理後，就能夠使操作畫面變成鏡像了。
之後遇到的問題就是鍵盤了，一開始的寫法是
if (條件式)
{
keybd_event(VK_RIGHT, 0, 0, 0);
keybd_event(VK_RIGHT, 0, KEYEVENTF_KEYUP, 0);
}
不過在操控小遊戲時就沒有反應了，上網翻了一下學長姊的部落格，知道可以在按下鍵盤與放開鍵盤的地方加上延遲，所以我就加上了
if (條件式)
{
keybd_event(VK_RIGHT, 0, 0, 0);
delay(1);
keybd_event(VK_RIGHT, 0, KEYEVENTF_KEYUP, 0);
}
然後就當機了。
最後我使用了一位學長的程式，
if (條件式)
{
iflag = 1;
keybd_event(VK_RIGHT, 0, 0, 0);
}
使用iflag來記錄按下哪個按鍵，然後外面再用switch去做判斷。
改成這樣的寫法後，就能夠玩小朋友下樓梯了。

課程心得：
能夠在最後的期末專案做出成果我很開心，
這學期上了這堂課後，能夠發現老師非常用心，
課堂教材寫得非常詳細，上課時也時常分享一些最近的擴增實境的消息。
很感謝老師在課堂上的付出，讓我能夠成功的作出成果。

實作影片：

02360466何京霖互動遊戲期末專案

主題：馬利兄弟
概念:
透過鏡頭使用自製遊戲控制器，來操控遊戲，所以先選擇小時候常玩電視遊樂器的馬利兄弟來製作，而這款遊戲的操作非常簡易，僅有方向(左右)，跳躍(A)和開火(B)這四種鍵，因此把這四種鍵設計在一個視訊裡面，如圖。

概念設計圖

利用差異偵測，來讓使用者來夠觸碰框框內的按鈕，然後發出對應按鍵訊號，由於有分短按和長按的不同，依照功能所需，長按的按鍵透過Sleep(100)來進行延遲，不然角色動起來會一頓一頓的。
keybd_event(0x58, 0, 0, 0);
Sleep(100);//(延遲0.1秒)
keybd_event(0x58, 0, KEYEVENTF_KEYUP, 0);

差異偵測圖(手)

實機操作畫面

在這款遊戲，我為了應付比較困難的操作，特別設了R1鍵和L1鍵，這兩個鍵都是結合了方向加上跳躍，再加上測試很多遍所找到的延遲時間，來做比較長遠跳躍的動作，來應付比較困難的地形。

實機操作畫面成功跳上比較高的障礙物

心得:
實際操作起來，跟鍵盤比起來，操作比較困難，但能夠有肢體互動，感覺像在玩WII或Xbox one體感遊戲一樣，當初是想直接透過雙鏡頭來做3DFPS射擊遊戲的控制器，但非常複雜，所以挑一個2D小遊戲，來當作基礎練練，之後再進一步研究研究如何製作。

實作影片:
第一部為失敗的錄影，由於家中感光環境不是那麼好所以導致差異偵測會誤判，外加上和後面有私人原因而中斷錄影。

第二部影片那這次我挑選較小的牆用小東西去點他，這次效果會比較好而在這部影片也成功跳躍到比較高的障礙物上面。

那在成果發表會上因為背景是布幕，所以很成功使用雙手去觸碰。

01361162 - 綿羊過馬路

遊戲展示影片

這次專案我選的遊戲是綿羊過馬路，會選擇這款遊戲是因為我自己很愛玩這類型的遊戲，想知道把控制方式從指頭換成身體動作的效果會是如何，本來預想是簡單的小遊戲改用互動視訊來控制應該也很容易上手，沒想到過關的難易度直接從一顆星跳到五顆星。

遊戲玩法：
上圖左邊所展示的虛擬按鍵與差異偵測的介面，右邊是遊戲畫面。遊戲本來是以鍵盤的上下左右鍵來控制綿羊的移動方向，而在此專案則玩家可以透過觸碰虛擬按鍵介面裡的上下左右箭號區塊來控制綿羊分別往前後左右移動，成功把五隻綿羊移送到對面的木柵裡就可以進級下一個關卡；移送途中若被車子撞到就會失敗，總共有三次機會；進級後機會將會重置。

專案心得：
因為老師再三的強調要把上課投影片裡的實作全部做過一遍才開始做專案，我就乖乖地跟著做完，果然實作對於做專案非常有幫助。首先是處理虛擬按鍵與差異偵測的部分，只要照著老師寫的程式碼進行部分的修改，很快就能做出所需要的玩家介面，但因為透過視訊鏡頭會使玩家的動作與螢幕所顯示的動作左右顛倒；雖然老師的程式碼有教鏡射的處理，但我剛開始沒有搞懂處理陣列的先後順序，一直Try and Error才得到想要的鏡射後再做偵測的效果。可是鏡射並不是這次專案裡面讓我卡關最久的，讓我卡了整整三天的是我自己的不小心！在處理差異偵測時，需要先擷取背景畫面，放置該畫面的TImage的Property名字是設成imBackground，而起動差異偵測程序的功能列的Property名字則設成miBackground；又剛好在建立imBackground時不小心雙擊了它，導致在程式碼產生了一個imBackgroundClick程序，而超級不小心的我就把本來應該放在miBackgroundClick程序裡的程式碼放在imBackgroundClick裡面，程式碼又沒有錯誤，最後變成編譯成功但點擊miBackgroundClick卻什麼都沒有做！而我回頭檢查程式碼時又沒有去檢查程序名字，結果這樣一個不小心的錯誤讓我Debug了三天，最後我會發現是因為突然靈機一動去雙擊miBackground功能列，才看到程序裡頭根本沒有程式碼。我學到教訓了！以後建立Property不會隨便雙擊，Debug時也會從程序名字開始小心檢查！

專案檔案
https://drive.google.com/open?id=0B5QGO4BEGv-HVWlQdWxkVlZLWmM