顯示具有 98360746 劉家維 標籤的文章。 顯示所有文章
顯示具有 98360746 劉家維 標籤的文章。 顯示所有文章

2012年6月23日 星期六

期末專案報告書

期末專案主題:Master Rabbit Puzzle



遊戲說明:

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

它是一個巴掌大的厚圓盤

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

啟動它之後

它會先隨機出題

四個顏色按鈕會依序發亮

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

去按顏色按鈕

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

也就會更困難

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

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

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

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

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

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

來回答問題

利用自己這學期的所學

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



遊戲執行畫面:

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

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

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

(圖一)


接下來就是loading的畫面

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

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

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

好讓視訊抓取乾淨的背景

(圖二)


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

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

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

才可以開始遊戲

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

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

(圖三)


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

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

或是查看高分榜

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

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

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

(圖四)


下圖是遊戲說明畫面

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

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

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

(圖五)


遊戲開始~~

系統開始出題囉

(圖六)

上方的數字是題目的順序

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

(圖七)

解答中畫面~

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

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

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

(圖八)

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

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

即可再次進行遊戲囉!




遊戲執行影片:

點我至youtube觀看影片




遊戲架構:

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

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



程式撰寫秘訣:

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

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

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

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

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

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

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

動態配置即可

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

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


程式撰寫問題:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

度也就越難。



心得:

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

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

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

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

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

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

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

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

成為雙冠王!

2012年6月2日 星期六

HW03

這次的作業是自製視訊像框

一般的視訊都有這項功能

在視訊所擷取到的影像上加一裝飾

讓視訊畫面整體看起來更加豐富

以下這張圖是我自己繪製的邊框





將它寫進程式中,讓使用者開啟視訊後可以自行選用





一開始是正常沒有邊框的狀態

當使用者點選兔子邊框後

原本普通的視訊畫面就會多出一層邊框唷




結果就像這樣

其程式的原理很簡單

就是在顯示視訊畫面之前先在上面動一些手腳

讀取邊框的圖像資訊

我在畫邊框前有些設計過

讓預期出現視訊畫面的地方顏色為白色RGB(255,255,255)

因此只要我在程式中寫下判斷

當圖像該點像素為白色

則輸出視訊畫面

反支否則輸出像框顏色

如此一來就會可以達到預期效果

心得:

相框的技術運用範圍很廣

加上視訊偵測原理(膚色偵測、去背景、減去上一張等)

能夠應用的地方就更多

例如視訊畫面有花花草草的邊框

若是使用者的身體晃動或是手揮動

花花草草就會隨之搖擺

增加了視訊的互動性

倘若是用在期末專案的話

可以考慮將遊戲畫面丟在視訊裡

並且圖像中的物件能夠跟玩家互動

依照玩家不同的動作產生不一樣的反應

讓玩家有身歷其境的感覺


2012年6月1日 星期五

期末專案構想

構想專案題目:記憶力大考驗

遊戲說明:系統會隨機順序的閃不同顏色的指示燈,玩家必須記住亮燈的順序

                   然後在有限時間內用肢體去觸碰色塊,重複方才系統閃燈之順序

                   隨著關卡的進行,閃燈的數量會越多或是限制的時間越短,而當玩家

                   記錯順序或是未在指定時間之內完成動作,則判定挑戰失敗、遊戲結

                   束。

示意圖:



1.不同色塊指示燈

2.視訊畫面縮圖

3.虛擬角色(會依照玩家的肢體擺動改變動作)

4.顯示分數
遊戲界面大致是這樣! 





遊戲流程:

遊戲主目錄 -> 遊戲說明 -> 遊戲開始 -> 遊戲結束 -> 回饋畫面

2012年5月29日 星期二

HW02

這次的作業是要我們自行撰寫錄影功能



開啟視訊後,先讓使用者選擇錄影的時間長度

設定完成後,點擊開始、視訊即開始執行錄影功能

點我新增視窗至youtube觀看錄影結果




心得:

這次的作業在程式撰寫方面不難,

不過老師在讓我們了解其視訊節取影像的原理方面

下了不少工夫,

看似簡單的功能,所蘊藏的學問可是不容小覷的,

然而我也思考過視訊錄影的功能可以發揮在什麼樣的地方,

或許可以放在我的期末專案中,

使其擔任記錄畫面並且回饋的角色,

例如在進行遊戲的過程中,

錄下玩家的畫面,在結束之後Replay給玩家看,

也算是回饋畫面的一種,我想應該是相當有趣。

2012年3月12日 星期一

HW01


工欲善其事,必先利其器。


學期的最終目標是利用視訊結合程式

做出一個互動式的小遊戲

首先,先嘗試使用bcb創造一個視窗


並使其連結視訊鏡頭


如下圖





在開啟視訊功能之前,視窗只會有歡迎文字

其他許多功能例如顯示視訊版本、調整視訊更新頻率還無法使用

開啟視訊之後,如下圖



畫面就像這樣

開啟視訊後,其他的附屬功能就可以用了唷



這次的進度很簡單


就是先稍微熟悉一些入門視訊相關的函式用法


很期待接下的課程喔

以上。