期末專案報告

期末專題報告書

遊戲名稱：神奇齒輪

設計目的：利用視訊互學習齒輪的應用

遊戲方式：使用者可選擇控制主要齒輪使其轉動


遊戲畫面：


遊戲開始時預設為小齒輪

當玩家選擇小齒輪時，小齒輪變為黃色

當玩家選擇大齒輪時，大齒輪變為黃色

玩家可令選擇的齒輪進行轉動
分為逆時針轉動和順時針轉動

遊戲影片：


http://www.youtube.com/watch?v=7fihlQ92Feg&feature=youtu.be

槓桿原理之蹺蹺板獵物任務

期末專題報告書

遊戲名稱：槓桿原理之蹺蹺板獵物任務

設計目的：透過視訊互動的方式，傳授槓桿原理中支點、施力臂與抗力臂的關係。

遊戲方式：使用者將可以選擇五種不同大小的力量，將蹺蹺板另一端的石頭準確擊中目標物。

遊戲畫面：

1.使用者可以選擇五種力量：

力量一：

力量二：

力量三：

力量四：

力量五：

2.總共有四個關卡，各有不同的目標物，每過一關，目標物會越來越小：

第一關：山豬     (目標物最大)

第二關：山羌     (目標物次大)

第三關：火雞     (目標物次小)

第四關：小豬     (目標物最小)

3.每擊中一個目標物，分數會加1000分，最後擊中完四個目標物後，遊戲就結束了，遊戲結束後會顯示玩家所花費的時間：

製作過程：

        當初選擇這門課「互動視訊遊戲製作」的最主要原因就是要製作有關於國小科學教育的遊戲，希望國小學童透過視訊遊戲互動的方式，不僅娛樂效果滿分，也讓學童可以學習到相關的科學概念。我所選擇的科學概念是「槓桿原理」，遊戲的構想來自於綜藝節目常見的踩蹺蹺板接東西的遊戲，當初規劃是讓使用者可以選擇「五種不同的力量」及「三種不同位置的支點」，藉此傳授槓桿原理中支點與力量的關係，但是因為時間和能力有限，最後期末報告展示時只做出一個固定支點和五種力量。

        製作遊戲中，我首先遇到的問題是如何將在這學期所寫的程式整理並刪減我所不需要的程式碼，要增加程式碼很簡單，但是要刪除或縮減程式碼可就不簡單了，所以我先重新理解及嘗試修改老師所教學的課程進度，並同時思考哪些程式碼和功能是我可以運用的，也常常和同學討論有關於程式碼的邏輯。接著就是規畫我遊戲的流程及架構，並且一步步新增遊戲的功能，其中我遇到的問題是拋物線球體軌跡的方程式，由於視訊大小並沒有所謂的負值，但是方程是跑出來是有正負值的，所以如何邊界換算是很重要的，這部分我研究了一兩天，眼看著離報告的時間越來越接近，後來我放棄了，最後我是利用Excul人工運算的方式，計算大概拋物線飛行的座標。


        我是利用影像差異來偵測使用者所處碰的位置，但是這部分常常出問題，可能是燈光問題或程式續沒有弄好，最後花最多時間當然是在除錯的地方，當程式碼越來越多，就越理解「變數命名」和「程式碼清楚排列」的重要性，不然要從茫茫的程式碼中除錯真的很痛苦。


心得：
        當初會選擇這門課是因為指導教授希望我們學會擴充虛擬實境的技術，而老師也在第一堂課時後就仔細說明課程的流程及教學架構，每次上課也都很認真的和我們討論程式碼或程式邏輯，老師也常常灌輸一些寫程式的技巧和想寫好程式的方式，老師還以寫程式的時間拿來譬如空姐的飛行時間，每天都固定寫半小時或一個小時，慢慢累積寫程式的時間是很驚人的，且寫程式這種技術真的是越磨越強，寫程式的功力絕對與付出的時間成正比。

        老師的教學態度真的很認真，每次上課都會分享他這週的進度，都讓我笑稱老師是在跟我們Meeting，看過歷屆的課程進度，知道這學期的教學進度真的是越來越慢，原因是我們吸收的進度太慢，跟不上老師預設的課程，在此覺得可以給老師一些意見，或許老師可以在上課前的四五天，先將完整程式碼及原理說明大概的放上網路，讓學生可以先預習內容，這樣看不懂或是寫程式遇到的問題也可以於課程中討論，並且於上課程教學完後的兩天內要上傳修改範例程式所制訂的作業，相信這樣課堂前預習、上課討論分享，最後複習修改範例程式的教學流程，應該會有不錯的效果，但是前題還是要學生肯花時間磨能力呀!!!


最後謝謝曾經幫助我的同學，也老師這學期來的指導、意見和麥當勞。

Youtube的網址：http://www.youtube.com/watch?v=T9EqbeW1-Js&feature=youtu.be


        

成果發表展

這次我的專案是類似太鼓達人的控制器

可以自己用視訊打鼓

利用鍵盤案件 X 和 > 兩個按鍵是紅色敲擊紐

而  Z 和  ? 兩個按鍵是藍色部

手動到區塊就相等於按一下鍵盤的 X 和 > 兩個按鍵

當然別的區塊就相等於按一下鍵盤的   Z 和  ?  兩個按鍵

期末專案報告書

期末專案主題:Master Rabbit Puzzle

遊戲說明:

小時候我曾玩過一個益智玩具

它是一個巴掌大的厚圓盤

圓盤上有四個不同顏色的按鈕

啟動它之後

它會先隨機出題

四個顏色按鈕會依序發亮

發亮完之後就換我去照著剛剛發亮的順序

去按顏色按鈕

題目會隨著遊戲的進行越來越長

也就會更困難

一旦順序錯誤，遊戲就結束

長大後，我也曾在網頁上玩過這樣的小遊戲

我覺得這是訓練記憶力還不錯的方法

而我所撰寫的期末專案遊戲方式一樣

只不過是由視訊來取代按鈕

玩家動動身體動動手就可以控制遊戲中的角色

來回答問題

利用自己這學期的所學

藉由這次期末專案來重溫兒時回憶



遊戲執行畫面:

遊戲一開始執行時，會先有一小段動畫

就和其他小遊戲一樣，秀出工作室的LOGO

而Rabbit Studio就是我個人自創的小工作室囉

(圖一)


接下來就是loading的畫面

這個畫面可不是沒有意義的唷

在這個時候視訊鏡頭正在擷取背景影像

因此畫面上也有文字提示要把鏡頭前的畫面先淨空

好讓視訊抓取乾淨的背景

(圖二)


loading結束之後，就是人兔轉換畫面

玩家必須站定好正確的位置

使得自己的投影包覆在黃色的轉換儀中

才可以開始遊戲

這個過程的目的在於讓玩家站在正確的位置

取好對的距離，在接下來的遊戲中比較能夠順利進行

(圖三)


經過人兔轉換儀之後，每個玩家都變身成兔子囉

接下來可以選擇要直接開始遊戲還是觀看遊戲說明

或是查看高分榜

而選擇的方式一樣是去觸碰想要的選項

當觸碰判定到時選項外框會閃爍、字體會變黑

持續觸碰一段時間就會開始執行選項囉!

(圖四)


下圖是遊戲說明畫面

倘若看完說明要開始遊戲的話

只要觸碰右上角的紅色指示區塊即可

(在畫面的右下角有縮影圖方便玩家掌握區塊位子唷)

(圖五)


遊戲開始~~

系統開始出題囉

(圖六)

上方的數字是題目的順序

之後玩家就是要照著這些順序去解答

(圖七)

解答中畫面~

回答全部正確的話，就是再次出題

題目會越來越長、越來越難

倘若答錯，就會直接進入結算畫面

(圖八)

可以看到畫面上方顯示的是得分

如果想再玩一次，就去觸碰左方的AGAIN按鈕

即可再次進行遊戲囉!




遊戲執行影片:

點我至youtube觀看影片




遊戲架構:

開頭動畫->loading畫面->設定畫面->選單->(教學)->

開始遊戲->遊戲結束->再次遊戲or遊戲結束



程式撰寫秘訣:

變數很多要註解-遊戲規模越大，會用到的變數就越多

除了變數名稱要取的有意義之外，在宣告變數時候面加

個註解，在日後忘記變數的使用方法時，可以回去看

函數和函數之間拉大距離-我會在每個函數之間用註解

的方式把它們隔開，這樣比較好管理

Form裡面物件越少越好-這樣程式在執行的時候比較

流暢，不常用到的物件，在需要用到該物件的時候

動態配置即可

熟悉每個物件的屬性-這樣可以直接在程式裡面控制

物件的屬性，讓遊戲整體更有變化


程式撰寫問題:

首先我遇到的第一個最大的問題，就是視訊是左右相反

的，我舉起右手但是視訊中的影像是舉起左手，這樣在

判定上面左右就會相反，因此我將擷取到的影像陣列整

個重新排序一遍，使其左右相反。

而判斷玩家的位置就是拿現在擷取中到畫面和先前存取

的背景畫面相減，差異過大的地方判定為玩家，在利用

這些點來判斷玩家要執行的動作，像是我一開始的就定

位置、選擇觀看遊戲說明或是開始遊戲、遊戲進行中、

遊戲結束後再次進行或是結束遊戲，都由這個來控制。

再來我遇到的問題是如何切換畫面，Image->Visible是很

好用的屬性，我利用它來做出切換畫面的功能，顯示要

秀出的畫面、隱藏舊的畫面全靠Visible，至於要做出動

畫效果，就在巢狀迴圈中的外層for裡加上Refresh()函數

就會有類似動畫的感覺囉!但是有些電腦會出現閃爍的

狀況，像我的電腦就是，此時只要在程式中加上指令

DoubleBuffered=true; 這樣閃爍的問題就解決了!

而我利用了兩個陣列分別儲存題目和玩家的答案，系統

出題後將正解記在題目陣列，玩家回答時，也會依序將

解答記在陣列，之後在拿兩個陣列中的資料做比對，完

全符合就代表過關!此時我又有一個變數控制關卡數，進

入下一關前關卡數加一，這樣題目的長度就會加一，難

度也就越難。



心得:

這項期末專案我從禮拜一早上開始做，一直做到禮拜四的

凌晨3點，連續四天的心無旁鶩做出的作品我還蠻滿意的，

但是美工和音效部分我認為可以再更完善，有礙於時間真

的不足，所以沒有用得很好，但是還是很開心有這種機會

可以這麼過癮的寫程式，專案發表會看到其他同學的作品

，大開眼界了一番，頓時也很想回去把自己的程式再改的

完善一點，總之學到了很多~~

謝謝老師請的午餐，最後謝謝同學們都把票投給我，讓我

成為雙冠王!

期末專案報告

這次專案作品-視訊版StepMania


把原本用手指觸動鍵盤的節奏遊戲

轉換成透過視訊來和身體作互動


程式部分

我分成三個部分做處理

第一部分

Auto:
先把整個視訊的設定都把他調整好

然後右上角有個 5

表示倒數5秒後開始取背景影像

而做到後面時 才發現需要利用到鏡射

上網搜尋了一下 都是OpenCV的資料

只好自己寫了 利用Swap把左右兩邊的像素作互換

結果是成功 只是影像邊緣會出現鋸齒狀 不過影響不大


第二部分

Load Image:
這部分就跟作業像框一樣

選好自己所做好的圖 載入圖片就行

第三部分

Start:
透過老師的 程式範例五 來把影像轉換成二元圖


Threshold預設為1600 結果不會太差


而重要部分是觸動虛擬按鍵的判斷


因為我六個按鍵 所以分成個六個區塊來處理


設了6個Count 來算出二元影像中 各區塊的白色pixel有多少個


當白色pixel數目達到某個數值後 便啟動按鍵 (數值預設為50 位於右下角)


利用keybd_event搭配鍵盤虛擬碼便能啟動某按鍵


例如: 左 keybd_event(VK_LEFT, 0, KEYEVENTF_KEYUP, 0);


把三個部分完成後


後面就是不斷地做測試


像是6個區塊有稍做調整


以及人需做在哪個位置會比較好




實際操作影片

心得:
這次的成品其實跟最初的構想不太一樣


像是原本的構想按鍵畫面和程式構想部分


由於在中間按鍵容易受到身體的干擾


原本有做套於手指 以利判斷的小道具

效果不大 所以最後不採用

而把按鍵都調到最上面

另外

原本程式是想利用膚色做判斷

後來發現膚色的判斷不夠精準 & 容易受干擾


而改成用二元圖判斷比較穩定

這程式應用到的一些功能 老師上課和範例程式都有講到

所以認真上課 跟 作業須花時間去做 還滿重要的

而pixel的處理方面要寫過影像處理的作業 會比較清楚

這課程學到許多跟視訊相關的應用

透過設計遊戲專案 也把學到的東西都應用上了

還滿有成就感的

雖然程式還是有小不穩定




                        

期末專案報告書

專案名稱：

歡樂製造機!!!

這是我應用相關的APP所做出來的專案海報。因為現在已經有很多這種應用，我就想先從相關的開始介紹，所以我就直接用相關應用程式做出一張照片來表達我想做的專案!!!

 專案版面

 功能：

可以從網路上擷取自己想要的圖案，然後去背。也可自行作畫後去背，之後將圖案Load進image裡以便點取。(就像是版面的右半邊的圖，那些圖都是從網路上抓下來然後自己去背之後的)
也提供相框來給使用者進行選取。另外此專案也有提供錄影及拍照的功能唷~ ^^
這樣也提升了此專案的趣味性，可以跟小圖案做一些互動，以製造出有趣的影像。

 拍照範例 

1. 小圖案 範例

2. 相框 範例

介紹影片：




專案心得： 


 此專案為未完成版，雖然做出來的程度只到老師所教過的地方，且在夏令營最後的五天當中，因為課程的進度沒有完全的跟上，所以會一直卡關，以致於做不出完成品來...
這個專案真的要做的好的話，其實會需要大量的圖片才會有多樣性，但是相對的也會花大量的時間去進行去背的工作，那程式的部分也就會相對的變弱下來..
在做這個專案，所遇到的困難幾乎都是程式的部份，平時應該就要把不會的地方都弄懂，花時間下去一點一滴的完成才是.. 。 雖然我還不精於程式的部份，但是因為老師都會把課程的內容都放在部落格上，雖然課程已經結束了，但是資源都還在，且這個部分以後會經常使用到，之後我會盡量把缺少的都補上來。

期末專案報告書

龍洞大冒險

        其實這個遊戲我花大部分的時間在構思遊戲玩法和構圖上面，大家專案的構想爭奇鬥艷，一個比一個有創意，讓我頗為苦惱，沒想到我的一句玩笑居然變成了遊戲。

首先我在程式的撰寫分為三大部分

Party1:

         利用課堂上教的程式碼開啟視訊，並使用相框作業的技巧加入我要讓玩家方便定位的相框。這裡面還有個比較特殊的功能是一開始看不到的，就是老師推薦給我的地圖製作功能，此功能是為了讓龍在碰到黃色邊框(遊戲中為勇者的祝福)時會被扣一點愛心，而愛心皆被扣光則結束遊戲。

相框:          

           if ((blackRGB[j][i][0] != 0)

             || (blackRGB[j][i][1] != 0)

             || (blackRGB[j][i][2] != 0)

上面程式碼為相框CallBack裡調整要被標記的顏色，從上而下分別是RGB。沒被被標記的顏色則會在視訊開始時成為擋在視訊畫面前的相框。

地圖:

          for (j=0;j<480;j++)
               {
                    ptrImage = (BYTE *)imBackground->Picture->Bitmap->ScanLine[j];
                    for (i=0;i<640;i++)
                   {
                      iB = ptrImage[i*3];
                      iG = ptrImage[i*3+1];
                      iR = ptrImage[i*3+2];
                      ucMapRGB[j][i][0] = (unsigned char) iB;
                      ucMapRGB[j][i][1] = (unsigned char) iG;
                      ucMapRGB[j][i][2] = (unsigned char) iR;
                      ucMapYUV[j][i][0] = (unsigned char) (((66*iR+129*iG+25*iB+128)>>8)+16);
                      ucMapYUV[j][i][1] = (unsigned char) (((-38*iR-74*iG+112*iB+128)>>8)+128);
                      ucMapYUV[j][i][2] = (unsigned char) (((112*iR-94*iG-18*iB+128)>>8)+128);
                    }
                }
此程式碼在讀入我用Image元件加入的相框圖片，因為我在Visible設為false所以開啟程式時會自動隱藏，imBackground為圖片名稱。



            // 將計數器歸零
iBlackCounter = 0;
           iOrangeCounter = 0;
            iYellowCounter = 0;
            // 開始統計該區塊哪個顏色最多?
            for (i=0;i<8;i++)
                {
                for (j=0;j<8;j++)
                    {
                        if ((ucMapRGB[m*8+j][n*8+i][0]==0)
                        &&(ucMapRGB[m*8+j][n*8+i][1]==255)
                        &&(ucMapRGB[m*8+j][n*8+i][2]==255))
                        iYellowCounter++;
if ((ucMap[m*8+j][n*8+i][0]==255)
                     &&(ucMap[m*8+j][n*8+i][1]==127)
                     &&(ucMap[m*8+j][n*8+i][2]==39))
                       iOrangeCounter++;
                    }
                }
             // 設定最大且超過一定數量的色彩區塊之對應值
             if ( (iOrangeCounter > iYellowCounter)
                  &&(iOrangeCounter > iBlackCounter)
                  && (iOrangeCounter > 25))
                  a = 1;
             //判斷是否結束

iYellowCounter = 0是用來計算原區塊有多少黃色，一旦有區塊OrangeCounter超過25且大於iYello和iBlack就判定碰到黃色邊框，然後設a為1，以方便後面判斷扣愛心一下。


Part2:
擷取背景:
        程式會先讀曲目前視訊三十張照片來計算平均影像，以達到讀取背景的目的，特別要注意的是讀取背景時，視訊畫面不可以改變，不然接下來的色彩差異會有所偏差。

色彩差異:
        會判斷擷取的背景和膚色差異來達到視訊互動的效果，因為時間不夠所以遊戲的玩法從人可以在虛擬的視訊中拿著劍砍龍，變成用手去推龍。(上圖為我畫了很久的劍，讓它露個面)




開始遊戲:

        Form1->MediaPlayer1->Close();              //關閉音效
        Form1->MediaPlayer1->FileName="C:\\02.wav";//開啟音效02
        Form1->MediaPlayer1->Notify=true;
        Form1->MediaPlayer1->Open();
        Form1->MediaPlayer1->Play();
用此程式碼在關閉封面的音效，開啟戰鬥畫面音效。


// 設定虛擬物件的大小
    iObjectWidth = 25;
    iObjectHeight = 25;
這邊讓我卡很久，就算經過老師提醒我還是回家後才解決問題，接下來程式會讀入我設定的橘色龍元件，但是執行時都會出現奇怪的顏色，就算更改iObjectWidth、iObjectWidth值也沒用，更改我原件的大小為25X25後才解決。


 iDeltaX = iDeltaX * -1;
 iDeltaY = iDeltaY * -1;
原本老師的程式碼是讓原件消失，這段程式碼的目的是在讓原件碰到手後有種反彈的感覺。
接下來就會開始遊戲搂！

Part3:
        遊戲的人性化設計，我覺得一個遊戲要玩得好玩，就是在人性化設計這一方面。如果你要開啟一個小遊戲還要東按一下西按一下，那誰會來玩呢？可是礙於我程式能力真的還不夠強，只能把開啟視訊、相框和地圖等放在一個Button裡，換句話說，就是一個Button我只能呼叫一個CallBackFuntion，如果按另一個按鈕前一個CallBackFuntion就會被自動關閉，這是我介面無法全部人性化的主因。



左圖有個結束的按鈕，是我設計在玩遊戲或是視訊偵測錯誤時，不用整個程式關掉就可以重新回到主標題，個人認為這功能是遊戲一定要有的，不然也太鳥了吧。

第一次玩遊戲一定會摸不著頭緒吧，沒關西！只要去說明就可以找到完整的遊戲說明和貼心小提示唷。


心得:
        這次專案對我來說意義重大，因為我一直以為進入資工就是要製作遊戲，誰知道我現在天天和OS還有英文鬼混，學習到的程設計巧也多半找不到和遊戲的關連。但是，這次的期末專案真的讓我體會到製作遊戲的辛苦和我程設能力的不足，不僅僅是製作美觀的圖片，還要懂得如何設計出能達成你Idea的程式，還有就是要敢問敢做、肯花時間下去，沒有一個好玩的遊戲是三兩下就完成的。
        身為我第一個設計出來的遊戲，雖然還是未完成品，但我很以它為榮。將來一定會繼續把這遊戲完成，長大後讓我兒子玩的第一款電腦遊戲就是我設計的豈不美哉。
聽完我的廢話來看看程式實際RUN的樣子吧！

                         

期末專案報告書

遊戲名稱:閃躲子彈(Dodge Bullets)
這次期末專案的構想是來自以前在網路上玩到的一個小遊戲

遊戲畫面

 遊戲畫面２

碰到子彈後，出現的分數畫面

這次的期末專案要製作的是擴充實境的互動小遊戲，擴充實境就是將實物和虛擬物件做基本的互動，例如碰觸後消失、拖拉物件、將物件放大或縮小等等都是擴充實境，而這次我所做的專案將以上述的小遊戲做為範本來製作。

以下是我的遊戲介面

一開始進入的遊戲介面

 賤兔與追他的子彈

碰到賤兔後出現的結束視窗

原本的構想是玩家利用頭去控制中央的賤兔，閃躲從四面八方來的子彈，時間撐最久者獲勝，但這種普通的Webcam要找出人頭的話，必須使用Open CV來偵測，因此一開始我就遇上這道難關。後來想說改利用顏色偵測來讓賤兔跟著顏色差異的點移動，例如瀏海貼或胸針之類的物品來控制，但想想似乎又不太可行，因為我們所認知的點和電腦所認知的點差很多，我們想像的點在電腦的認知裡可能是一大堆點的集合，如下圖

偵測到紅筆的畫面

紅筆的ＵＶ值範圍(感謝李佳芳同學提供)

可以看到電腦找到的幾乎都是一大片的範圍，因此賤兔到底要跟著哪一個"點"移動就是一項很大的問題了。因此經過同學的建議之下，我決定利用控制項來控制賤兔的移動，但由於時間不足，最後還是沒能將其完成，這是第一個賤兔的移動方式所碰到的問題。

接著遇到的問題是如何將子彈亂數產生在畫面上，一開始修改老師的程式碼時是用很笨的方法，一個物件就宣告一個變數，但這樣我的子彈數量就會是固定的，而且程式碼會變的又臭又長，後來問了廖宗育同學之後，他交了我一個辦法，就是利用一個for迴圈，將子彈的編號全部跑過一次，如下：
for(iDragonBallID=0;iDragonBallID<=6;iDragonBallID++)

利用這行就能將所有的子彈都叫出來，但位置都要從新調整過，否則會全部疊在一起，而我是先將所有子彈以亂數rand()的方法出現在畫面上，如下       

 iObjectX1 = rand() % 590;
 iObjectY1 = rand() % 430;

要注意的是，如果要使用rand()，要先在最上面#include <time.h>才可以使用。

亂數子彈產生圖

但這種亂數產生的方式和我所要的追蹤賤兔效果不太一樣，但既然都做出來了，就將它變成另外一種模式了。而追蹤賤兔的演算法在詢問過老師之後，大致了解該怎麼運行，就是將追蹤者的座標扣掉被追蹤者的座標後，再利用

iDeltaX = 5;

iDeltaY = 5;

控制追蹤的位移大小，也就是速度，將追蹤者的位移大小設定的比被追蹤者大，感覺就會像是在追一樣，且還可以利用Track Bar元件讓玩家自己控制追蹤的速度，但這些想法卻都因為時間不足只好停留在我的腦袋裡了。

心得與反省：其實這次專案的製作過程很特別，不是在家裡一個人完成，而是像夏令營的方式，利用一個禮拜的時間在學校和同學老師討論過後，再將專案"生"出來。可惜的是， 我因為暑修課程時間剛好卡到，導致５天的夏令營我只到了３天，其中兩天還是下午才到，甚至還錯過最重要的第６次範例程式講解，縱使我全心全力想把專案做出來，但這種對程式一知半解的後果當然是淒慘無比，真的就像老師說的，我們都太天真以為只要熬夜個一兩天就能做出來。而且心裡其實還有很多想法想加進這次的專案，例如我本來還想要玩家邊玩時，一邊錄影，這樣在遊戲結束之後就可以看到剛剛玩遊戲時自己的糗樣，但卻因為會造成遊戲的停格而做罷，雖然這次我是屬於沒有完成的那一部分，但我所學到不比完成專案的同學們少，不管是在程式碼或是在自己的態度上都要做很大的修正，如果當下碰到不會的地方，真的要立刻問同學或老師，而不是坐在那邊看著螢幕一個下午還Debug不出來，否則在DEMO完後，就會像我一樣有很多的不甘心與遺憾，同時也謝謝老師在第四天颱風天還陪我們到晚上１０點，雖然電腦關機了，但回家後被你教的部分真的很快就code出來了，這次未完成版的ＤＥＭＯ影片會在之後更新成完整版的，就在給你上過課之後。

以下的遊戲ＤＥＭＯ為未完成版，影片的後段為最上方小遊戲的ＤＥＭＯ，藉以讓大家知道我到底想做什麼遊戲。

遊戲ＤＥＭＯ未完成版


P.S在做專案的過程中有發現一個小技巧，若是你想在main menu元件上的按鍵加上熱鍵，只要在選擇按鍵後，如下圖

在左方的屬性設定中找一個ShortCut再輸入你要的熱鍵就可以了

因此在我的遊戲中才能按下鍵盤就立刻開始遊戲

互動視訊專題報告

這次我所做的是太鼓達人視訊版

視訊互動的方式來玩太鼓達人

在程式上面,測試了不少方法


EX1:觸碰到讓物件消失或者是產生事件,閃躲..觸碰..攻擊..等等




若以太鼓達人這遊戲來看:產生多個圖形到定點碰觸會消失跑至盡頭也會消失

觸碰啟發事件的方式

用timer來讓圖形自動進去重覆的跑

這樣就會像太鼓達人一樣一直有圖形出來

EX2:視訊控制滑鼠控制圖形

用GetCursorPos()函數很容易就可以直接取的滑鼠的位置

在學校寫的時候,BCB6不能直接使用GetCursorPos(),但XE2可以

圖形位置由     Mouse->GetCursorPos().x

                         Mouse->GetCursorPos().y 

而圖形就可以隨著滑鼠移動

再用視訊(顏色偵測)去控制滑鼠!

藍色的圖案跟著滑鼠向下移

EX3:視訊控制項

由視訊觸碰物件啟發的方式來控制鍵盤

keybd_event('Z','z',0,0); //模擬鍵盤按下Z

        keybd_event('Z','z',KEYEVENTF_KEYUP,0);//模擬鍵盤放開Z

這樣就會像鍵盤一樣按下放開了

可以用Edit來更改所按的按鍵,這樣就不用把程式寫死

最後選擇使用控制項的方式來執行,用控制項來做的話可以玩所有的遊戲

只要增加圖案(做為模擬鍵盤所用的觸發點)

就可以玩其他遊戲,或做更複雜的事情

遊戲可以是自己設計,也可以是其他的平台

控制項的精準度要慢慢喬,跟圖形大小形狀有差

而部分功能是用timer來控制執行,這樣我就不用按這麼多按鈕

使用上比較輕鬆,之後會陸續修改,讓使用上更方便

本來差異會是白色,由於transparent屬性顏色選為白色就變透明的

start~開始玩!

改造form的形狀,我將form的transparent屬性顏色選為白色

除了我要的形狀外都設計成白色

這樣我的form的形狀就可以是不規則的樣子,任意設計改變

新介面!按那個按鍵就可以開始玩!

遊戲執行畫面:

心得:

這次學習互動視訊遊戲課程,收穫良多

玩的不亦樂乎,自己設計自己玩

在學習的過程中,先看懂範例程式,越早看懂越好

接著去修改範例程式,從小的修改到大的程式修改,讓程式變化更大

遇到問題時,自己解決或自己查資料,這樣記憶比較深刻

真的不行時,才問人

最重要的是每一周的進度都要跟上,這樣後面的事情才不會擠到

不過這次太晚準備,感覺上並沒有很好,之後會繼續完成

甚至讓這程式能與好幾款遊戲接合

在遊戲上,創意與畫面真的很重要,能不能夠吸引人就看這兩點

完成度也很重要,最後無法呈現結果就很可惜

課程建議:

上次的作業是修改範例程式來達到相框的目的

幾乎每一周的課程都可以用這方式來達到完整的學習

很多視訊程式有不少小功能,都是可以做得到,ex:十連拍,各式各樣的相框,讀秒拍攝...等

期末專案報告

有關於我的期末專案報告
首先得從我的專案構想靈感說起
但是有鑑於已經有發過一篇構想
所以在此直接引用!!
http://hwshow-vgc.blogspot.tw/2012/06/blog-post.html
最後的DEMO作品其實跟我的理想還有點差距

這算是我目前設計的最完整的一支程式
所以在程式的完整度上比較執著
但是反而使遊戲性上的完整度較低了

以下是我這次設計的互動視訊遊戲
根據了上面引用的構想設計的
原本的理想是所有的觸碰點都同時觸控才進入下一關
但是遊戲的規則稍有改變

這是最後完成品的遊戲規則
1.不必同時觸碰，但同樣必須所有觸碰點皆觸碰過也可以通關
2.遊戲有時間限制，所以同時將所有觸碰點同時觸碰可以加速通關速度
3.關卡無上限，但是通關數越多分數越高
所以結合以上3種規則
時間內通關數越多分數自然越高

但是最後DEMO的作品還少了時間的限制

這是DEMO時的遊戲介面
龍珠為觸碰點
但是DEMO時發現龍珠的距離還不夠遠
達不到我所想的觸碰所有出現的龍珠需要誇張的大動作的效果

上面的兩張圖
第一張是玩家的站立準備位置
第二張是所有可能出現的觸碰點位置

接著這張圖要介紹的
是為了DEMO所顯示的所有偵測畫面
由左到右分別是Background，Difference，BinaryDifference，BinaryDifference-Block


接下來要說的是這次設計所碰到的問題

第一點：
在同時出現的觸碰點中，分別觸碰沒有問題
但是在同時觸碰的情況下
只有編號最前面的一個會被觸碰
原因是我每次回呼時就會重置一次觸碰點boolin變數的true or false
解決的辦法是當所有出現的觸碰點接被觸碰，也就是false
才會重置觸碰點

第二點：
第一點的問題解決後能夠正常的進行遊戲
但是所有觸碰點接觸碰也就是通關後
畫面會立刻重置造成下一關的準備時間不足
造成在觸碰動作還未收回前已經進入下一關
直接觸碰到下一關的觸碰點
而在為了解決這個問題的部分
我嘗試了幾種方法

Sleep( milisecond );

其中
milisecond = 1000 為1秒
milisecond = 2000 為2秒
依此類推...

這是讓程式休息 milisecond 時間後才繼續直行
但是這個方法會讓整個程式停頓而不是我要的等待效果
接下來我使用另一種方法

if( iTimeBefore != 0 )
    iTimeBefore = clock();
iTimeAfter = clock();
while(iTimeAfter - iTimeBefore != milisecond )


但是發現這段程式的雖然寫法不同
但是跟Sleep的結果一模一樣
最後是我最終的解決方法


if( iTimeBefore != 0 )
    iTimeBefore = clock();
iTimeAfter = clock();
if( iTimeAfter - iTimeBefore != milisecond )
{
    重置遊戲畫面( 進入下一關 );
    iTimeBefore = 0;
}

這樣的話程式不但不會停頓
而且還會在等待 milisecond 後才進入下一關
讓玩家有機會收回動作後
等待下一關的觸碰點出現


最後就是大家在成果展上看到的實際DEMO
在這門課上其實真的學到很多遊戲設計上實用的經驗
雖然過程中常常讓我有很累很疲憊
甚至有不想繼續修課的想法
但是做出來的成果讓我覺得這學期修這門課很值得