Ｆｌａｓｈ攝像頭游戲課件設計與開發

【摘要】攝像頭游戲是隨著技術的進步產生出來的一種新的游戲形式，它擺脫了鼠標與鍵盤的限制，給游戲者以全新的互動體驗。Flash 8提供的位圖處理功能為Flash攝像頭游戲的實現提供了可能。將攝像頭游戲技術引入到Flash課件的開發，可以充分發揮其互動性和趣味性，與傳統Flash課件相比，具有其不可替代的優勢。該文提出設計Flash攝像頭游戲課件的基本原則，并以《水果樂園》課件為例，詳細介紹了開發的過程和主要實現方法，為攝像頭游戲類課件制作提供了參考。

【關鍵詞】Flash；攝像頭游戲；課件

【中圖分類號】G434【文獻標識碼】B【論文編號】1009—8097 (2008) 01—0107—05

一 引言

攝像頭游戲是隨著攝像頭的普及和圖形圖像技術的不斷發展而出現的。它擺脫了鼠標鍵盤的限制，給游戲者帶來全新的游戲體驗，能夠實現許多傳統游戲無法實現的游戲效果。它通過攝像頭將玩家投影到游戲中，由玩家自己做動作與游戲進行交互。畫面中登場的敵人或道具都將對玩家的動作即刻做出反應，讓玩家體驗到前所未有的新鮮感。

Flash課件是用Flash的形式表現教學內容一種課件形式。Flash課件充分利用了Flash的直觀性、互動性以及娛樂性，能夠有效的調動學生的學習積極性，激發學生的學習樂趣，在當前的教學過程中發揮著越來越大的作用。Flash攝像頭游戲課件整合了攝像頭游戲和Flash課件的優點，充分體現了“寓教于樂”的教學思想。它帶給學生全新的游戲感受，能夠極大的激發學生的學習興趣。它能夠激發學生的多種感觀刺激，建立強烈的真實感，通過游戲過程中學生與游戲的互動，還能夠促進學生手、耳、眼以及肢體的相互協調，達到較好的教學效果。

二 Flash攝像頭游戲課件的設計原則

Flash攝像頭游戲課件具有較好參與性、體驗性，能夠有效增強學習效果，提高學習效率，特別適合于學生動作類技能的訓練。在設計的過程中，應遵循如下原則，體現其獨特的優勢。

（1）教學性原則

這是所有課件，應用于教學的最基本的要求，該類課件也不例外，在設計的過程中，必須針對一定的教學目標，遵循認知過程的一般規律，組織教學內容和教學活動。緊密圍繞“以學生學習為中心”的設計思路。

（2）易用性原則

攝像頭游戲課件的交互，計算機對于學習者的動作回應，都是建立在動作檢測，捕捉學習者動作影像的基礎上。設計過程中應考慮讓學習者的操作盡量簡便，易于上手使用。做好課件使用的幫助或者使用手冊。

（3）科學性原則

課件的內容，不能有科學性的錯誤，這也是設計中基本要求，必須對課件所有呈示的內容，進行嚴格仔細的審查，保證學生看到的所有知識點，都必須科學、準確，一般由課件開發小組中學科專家把好關。

（4）藝術性原則

如果一個課件的展示不但取得良好的教學效果，而日‘使人賞心悅目，使人獲得美的享受，則說課件具有較高的藝術性。這樣的課件是好的內容與美的形式的統一，美的形式能激發學生的興趣，史好地表現內容。其表現有:展示的對象結構對稱，色彩柔和，搭配合理，有審美性。

（5）體驗性原則

攝像頭游戲課件因其交互的多維化，全方位，檢測學習者動作，使得學習者的沉浸感很強，要求學習者的個人形象和課件環境融合的過程中，能讓學習能有身臨其境的感覺，所以課件在設計的過程中，注意課件環境，界面的元素，聲音的效果，都必然能激發學習者的投入感。該原則是攝像頭游戲課件設計過程中最重要的原則，也是整個課件制作的關鍵，成敗所在。

三 Flash攝像頭游戲課件的設計與實現

在兒童英語教學中，引入Flash攝像頭游戲課件，使得兒童擺脫鍵盤和鼠標的單一化的交互方式，而進行身體動作與計算機的交互，增強兒童學習的體驗感，能較好的輔助英語的學習。以下是設計與開發的“水果樂園”課件的實現步驟和主要功能代碼。

1 攝像頭圖像的捕獲

使用Camera類實現對攝像頭圖像的捕獲。Camera.get()方法返回對用于捕獲視頻的 Camera 對象的引用。當 SWF 文件嘗試訪問 Camera.get() 返回的攝像頭時，Flash Player 顯示“拒絕”對話框，用戶可從中選擇是允許還是拒絕對攝像頭的訪問，如圖1所示。

setMode()方法將攝像頭的捕獲模式設置為最符合指定要求的本機模式。

//新建一個Camera對象，實例名為my_cam，并設置對象屬性。

var my_cam:Camera = Camera.get();

my_cam.setMode(160，120，30，true);

2 攝像頭圖像的顯示

1)顯示圖像

若要實際開始捕獲視頻，必須將 Camera 對象附加到 Video 對象。attachVideo(source:Object) : Void指定將在舞臺上的 Video 對象的邊界內顯示的視頻流 (source)。

//新建一個Video對象，將Camera對象附加到Video上。

var my_video:Video;

my_video.attachVideo(my_cam);

2)水平翻轉圖像

由于攝像頭中看到的圖像與游戲者本人的方向相反。為了方便游戲者操作游戲，在加載圖像時應該把圖像左右翻轉。這一操作非常重要，將直接影響游戲者的游戲體驗。

Video._rotation 屬性可以實現對Video圖像的旋轉，但是無法實現左右翻轉的效果。

Video._xscale 屬性指示從 Video 對象注冊點開始應用的 Video 對象的水平縮放比例 。當x軸的水平縮放比例為-100時，則可以實現對Video對象的水平翻轉。默認注冊點為 (0，0)。縮放本地坐標系統將影響 _x 和 _y 屬性設置，這些設置是以整像素定義的。由于翻轉時是以左上角主測點為中心，因此在水平翻轉之后，Video對象的坐標雖然未發生改變，但是整體位置向左平移了Video. _width個像素。因此翻轉之后我們需要設置Video的新坐標為Video._x = Video._x+Video._width。

3 獲取圖像信息

要對獲取的圖像進行分析，必須將從攝像頭獲取的圖像信息提取出來。在Flash8中， Bitmap對象存儲了圖像中各點的RGB通道信息以及Alpha通道信息，可以使用new方法建立一個Bitmap對象。然后使用draw（）方法提取某一時刻video對象中的像素信息。

draw(source:Object，[matrix:Matrix]，[colorTransform:ColorTransform]， [blendMode:Object]， [clipRect:Rectangle]， [smooth:Boolean]) : Void使用 Flash Player 矢量呈現器在目標圖像上繪制源圖像。使用 Matrix、ColorTransform、BlendMode 對象以及目標 Rectangle 對象來控制呈現的執行方式。或者也可以指定縮放時是否應對位圖進行平滑處理。這只適用于當源對象是 BitmapData 對象時的情況。

import Flash.display.BitmapData;

//創建BitmapData對象

Var snapshot:BitmapData=new

BitmapData(output_vid._width，output_vid._height);

//從my_video獲取當前圖像

now.draw(my_video);

4 運動檢測的實現

該部分是整個攝像頭游戲實現的核心。主要利用了Flash 8的位圖處理功能，即BitmapData類。

1)基本思路

我們可以使用getPixel(x，y)獲取前一張圖片上每個像素點的像素值，然后對比后一張圖片中的每一點的像素值，當像素的亮度差值變化達到一定程度時，認為該點發生了運動變化。通過這種方式，得到前后兩張圖片的負片效果圖。

//閥值

tolerance=10;

//獲取當前圖像now某一點的RGB值

nc=now.getPixel(x，y);

//紅色通道

nr=nc>>160xff;

//綠色通道

ng=nc>>80xff;

//藍色通道

nb=nc0xff;

//計算該點亮度值

nl=Math.sqrt(nr*nr + ng*ng + nb*nb)

//獲取前一快照before同一點的RGB值

bc=before.getPixel(x，y);

//紅色通道

br=bc>>160xff;

//綠色通道

bg=bc>>80xff;

//藍色通道

bb=bc0xff;

//計算該點亮度值

bl=Math.sqrt(br*br + bg*bg + bb*bb);

//計算亮度值的變化

d=Math.round(Math.abs(bl-nl));

if(d>tolerance)

{

//該點發生了變化

}

但是這種方法存在計算效率問題。按圖像大小為180*160像素，每秒30幀計算，每計算一副圖片需要的計算次數為180*160*30。圖像的像素越大，需要的計算次數就越多。采用隔點檢測的方法可以在一定程度上緩解計算壓力，即每隔n個像素檢測一次，這樣電腦的計算次數減少為原來的1/n。

2)改進思路

Flash8提供的圖像混合模式可以解決上面遇到的效率問題。Flash8提供了11種圖像混合模式。每一種混合模式可以得到不同的混合效果。Different 混合模式是基于兩張圖片之間的亮度差值進行計算，從而得到圖片的負片效果。利用該模式，便可以得到移動像素的檢測圖像。

//將前一張快照before的圖像繪制到當前快照now上，使用different混合模式

now.draw(before， new Matrix()， 1， \"difference\");

圖像中黑色表示沒有發生移動，其他顏色表示發生了移動。由于Flash8提供的混合模式是采用C++編碼實現的，因此運行效率要比Action Script編碼更加高效。

5 動態顯示檢測圖像

1)處理檢測圖像

通過以上兩種方式得到的圖像中色彩范圍較廣，這增加了統計上面的困難。通過使用 threshold() 方法，可以隔離和替換圖像中的顏色范圍，并對圖像像素執行其它邏輯操作。threshold（）函數根據指定的閾值測試圖像中的像素值，并將通過測試的像素設置為新的顏色值。這樣，便得到了清晰醒目的檢測圖像。

//將大于閥值0xFF111111的像素替換為綠色。

myBitmap.threshold(myBitmap， myBitmap.rectangle， myBitmap.rectangle.topLeft， \">\"， 0xFF111111， 0xFF00FF00， 0x00FFFFFF， 1);

2)檢測圖像的顯示

Bitmap對象無法直接在舞臺上顯示，必須附著在MovieClip上面才能顯示。因此可以使用MovieClip類的attachBitmap()方法，將獲取的圖像信息顯示出來。

//創建一個影片剪輯來顯示當前圖像

this.createEmptyMovieClip(“當前”，this.getNextHighest Depth());

//將攝像頭獲取的圖像顯示在影片剪輯內

bitmap_mc.attachBitmap(now，1);

3)檢測圖像的動態顯示

要實現檢測圖像的動態顯示，必須不斷的更新當前圖像now和歷史圖像before，并進行混合處理。可以把檢測圖像的功能寫成方法snapshot()，每隔100毫秒調用一次。

偽代碼如下：

function snapshot() {

//獲取當前圖像

//獲取檢測圖像

//將檢測圖像繪制到

//將檢測圖像中RGB超過閥值0xFF111111的部分替換成綠色

//顯示檢測圖像

//本次檢測完成之后，當前圖像便成為了歷史圖像。為下一次檢測做好準備。

preBitmap = nowBitmap.clone();

}

在該方法中，關鍵在于每次檢測完成之后當前圖像和歷史圖像的更新。

6 檢測特定區域內的運動狀態

經過上面幾步操作，已經得到了檢測圖像。檢測圖像是對整幅圖像的運動情況的反映。在游戲中，經常需要檢測的是某一特定區域的運動狀態。

1)檢測某點的運動狀態

因為已經到了檢測圖像，所以在檢測某一點運動狀態時，只需要判斷檢測圖像上該點的RGB值是否大于閥值。

偽代碼如下：

pix = myBitmap.getPixel(x， y);

if (pix大于閥值) {

//該點發生了運動

}

2)檢測某區域的運動狀態

由于燈光因素、攝像頭圖像噪點等干擾因素的存在，每次只檢測一個點容易造成檢測結果的不穩定。因此，大多采用區域檢測的方式。即在檢測某點運動狀態時，檢測的不僅僅是這個點，而是以該點開始的n*n個像素的區域（n的取值根據實際情況確定，在檢測點數量較多時，n的值不宜取太大。）。如果檢測區域內的像素點變化數量超過一定閥值，如60％，則認為該區域發生了運動。

需要注意的一點是，由于看到的圖像是經過水平翻轉的，但原有的圖像內部坐標系并沒有發生變化，因此，檢測時的取點位置也要水平翻轉。

//以(rectx，recty)為頂點的rectw*recth的矩形區域的運動情況

function ismove(a， rectx， recty， rectw， recth) {

var i， j;

var sum = 0;

var pix;

for (i=1; i<=rectw; i++) {

for (j=1; j<=recth; j++) {

//圖像水平翻轉后取點位置相對變化

pix = a.getPixel(160-i-rectx， j+recty);

if (pix>132361) {

sum++;

}

}

}

//trace(\"sum=\"+sum);

if (sum>(recth*rectw/2)) {

return (sum);

//該區域發生了運動

} else {

return 0;

}

}

在該方法中，檢測圖像、檢測區域頂點坐標、檢測區域大小都為作為變量輸入。采用這種方法，提高了程序的重用性，還可以實現對運動物體的檢測。

3)檢測點的設置

所謂檢測點，實際是一個影片剪輯。在進行區域檢測時，以該影片剪輯的坐標（x，y）確定檢測區域的坐標位置。檢測點可以是一個不可見的輔助點，也可以是舞臺中運動的物體。當把運動物體做為檢測點時，隨著物體的移動，檢測區域也隨之移動，因此可以實現對運動物體的檢測。檢測點的作用：一是可以起到輔助點的作用，簡化了檢測區域定位的繁瑣工作，使定位操作可視化。二是實現了代碼的重用，起到了簡化程序的作用。

7 實現攝像頭運動檢測的控制接口

游戲中檢測點接口的作用就是返回舞臺中被觸碰的檢測點編號。在接口函數中，調用了以上幾個功能函數。返回值為檢測點編號。

function istouch() {

var max:Number = 0;

var min:Number;

var num:Number;

for (var i = 1; i<=9; i++) {

//檢測第i個檢測點是否被觸碰

min = ismove(myBitmap， this[\"point\"+i]._x-xpoint， this[\"point\"+i]._y-ypoint， 10， 10);

//每次只能激發一個點，選擇9個點中移動最顯著的一個

if (max

max = min;

num = i;

}

}

if (num) {

//返回被觸碰的點的序號

return (num);

} else {

//一個檢測點也沒碰到！;

return 0;

}

}

8 游戲交互功能的實現

游戲功能交互的實現方法和其他Flash游戲大體類似。在此游戲中，主要包括3大功能模塊：子彈系統，氣球系統 和主控制系統。其主界面如圖2所示。

1)子彈系統的實現

該部分主要是實現子彈的運動。游戲中有9個檢測點，每個檢測點都可以發射子彈。各位置發射的子彈運動方向是不同的。第i個檢測點的子彈方向為rot=i*20，初始位置在界面底部中央。

this._x = this._x-30*Math.cos(rot*Math.PI/180);

this._y = this._y-30*Math.sin(rot*Math.PI/180);

當子彈出界時，要使用this.unloadMovie()方法將該子彈實例銷毀，釋放內存。

2)氣球系統的實現

該部分主要是實現氣球的碰撞檢測，判斷氣球是否被子彈擊中需使用hitTest()函數。該函數有兩種用法：

用法 1：根據 shapeFlag 設置，將 x 和 y 坐標與指定實例的形狀或邊框進行比較。如果 shapeFlag 設置為 true，則只計算在舞臺上的實例實際占據的區域，并且如果 x 和 y 在任意一點重疊，則返回 true 值。

用法 2：計算 target 和指定實例的邊框，如果它們在任意一點上重疊或交叉，則返回 true。

3)主控制系統的實現

主控制系統是實現互動功能的核心部分。主要工作就是把游戲中所有的功能模塊集成起來，對各功能模塊進行調度和顯示。一方面，主控制系統要接收從攝像頭功能接口傳遞的信息；一方面根據接收的信息執行相應的功能代碼。

四 結束語

Flash攝像頭游戲課件能夠實現很多傳統Flash課件難以實現的效果，特別是對操作技能的培養。我們開發的《水果樂園》課件提供給一些小學，進行了英語學習實踐，效果還不錯。但是，對于Flash攝像頭游戲課件應用于學生高級思維策略的訓練，還沒有進行深入的研究，特別是角色扮演型、問題探究型等學習模式等實施，有待進一步的的探索和實踐。

——————————

參考文獻

[1]王愉，付震蓬等.Flash互動游戲的開發與設計[J].北京印刷學院學報， 2006，14(4):9-12..

[2]吳兵.Flash游戲在課堂教學中的應用研究[J].中小學電教，2006(12):39-42.

[3]孫蒞文，鄧鵬，祝智庭.基于娛教技術的體驗學習環境構建[J].中國電化教育，2005(7):24-27.

[4]顧小清.多元智能理論與課堂教學改革[J].江西教育，2004(3):85-86.

[5]王春燕.以游戲精神實現教學與游戲的融合[J].2002，22(12): 42-45.

Design and Development of Flash Courseware Based on Camera Game Technology

YU Liang GAO Feng

（Faculty of Computer Information Science， Southwest University， Chongqing 400715， China）

Abstract: Camera game is one kind of new game form which produces along with the technical progress. It gets rid of the mouse and the keyboard limit， and provides brand-new interaction experience. The Flash 8 bitmap processing function makes the realization of Flash Camera game possible. The Camera game can fully display its interaction and entertaining when introduced into the deveopment of fash Courseware. Compares with the traditional Flash Courseware， it has the superiority which can not be substituted. The thesis puts up severalprinciples for the design of Flash courseware based on camera game and introduces its development procedures particularly with the couseware named Fruits Eden.It provides the technical basis and the framework of reference for the future development.

Key words: Flash; Camera Game; Courseware