Flash游戲制作-《填色游戲》

./大學(xué)軟件技術(shù)學(xué)院二維動畫課程設(shè)計報告題目名稱Flash游戲制作——《填色游戲》姓名玉清專業(yè)數(shù)字媒體藝術(shù)班級08級1班指導(dǎo)教師徐卓二0一0年一月十五日課程設(shè)計任務(wù)書一、目的：本次課程設(shè)計的目的是通過使用FlashActionScript3.0編程技術(shù)制作一個Flash小游戲或交互場景動畫,使學(xué)生在鞏固本學(xué)期FlashActionScript編程技術(shù)和上一學(xué)期Flash動畫制作的基礎(chǔ)上,進(jìn)一步培養(yǎng)學(xué)生的動畫制作能力和編程技術(shù),學(xué)會應(yīng)用所學(xué)知識制作交互場景動畫和Flash小游戲,積累制作flash動畫和游戲的經(jīng)驗,鞏固課程所學(xué)的理論知識,為以后工作打下基礎(chǔ)。二、要求：每位同學(xué)從所給題目中選擇一個作為本次課程設(shè)計的主題,使用FlashActionScript3.0制作一個小游戲或交互場景動畫,設(shè)計要求如下：作品主題積極向上,容健康完整；作品中的游戲主角或場景須為自己獨立創(chuàng)作,并自己編寫程序完成游戲或場景功能；作品中要充分利用所學(xué)知識進(jìn)行制作,功能相對完整,運(yùn)行流暢,畫面美觀,形式生動活潑,觀賞性實用性強(qiáng)；撰寫不少于3000字的報告,報告結(jié)構(gòu)合理,語句通順,能夠說明制作過程和原理。同時上交作品文件〔SWF及FLA文件兩種格式和課程設(shè)計報告。三、時間與地點：—；上午8：00—11：30；下午13：30—15：30地點：西3#實驗樓204四、進(jìn)度計劃：1月4日選題1月5日搜集資料,確定選題1月6日編寫劇本1月7-8日設(shè)計分鏡臺本并準(zhǔn)備素材繪制主要角色及場景1月11日動畫制作1月12-14編寫程序及測試完善1月15日撰寫報告目錄目錄2第一章游戲功能概述3第二章角色與場景設(shè)計42.1角色設(shè)計42.2場景設(shè)計4第三章游戲功能設(shè)計與實現(xiàn)63.1模塊一：取色功能63.1.1主要功能及函數(shù)介紹63.1.2代碼63.2模塊二：輔助功能93.2.1簡介93.2.2代碼9第四章音樂的添加11第五章小結(jié)12第六章心得體會13致14參考文獻(xiàn)15.第一章游戲功能概述填色游戲的主要功能是由游戲提供未涂色的圖片,由玩家根據(jù)自己的喜好給空白圖片添加上相應(yīng)的顏色。游戲提供畫筆,調(diào)色板,空白圖片輪廓等,其中畫筆跟隨鼠標(biāo)移動,用畫筆提取調(diào)色盤中的顏色,然后填充在空白圖片中,調(diào)色盤提供了紅,綠,藍(lán),紫等十一種顏色,為玩家提供了巨大的選擇空間,調(diào)色盤設(shè)置為可移動的,用畫筆可以任意拖動調(diào)色盤的位置,游戲提供了六可愛的圖片,供玩家游戲。我們還為按鈕添加了聲音,使游戲者在玩的過程中不至于太單調(diào),此外,我們還為游戲添加了音樂,游戲者可以根據(jù)自己的喜好選擇邊玩游戲邊聽音樂,或者是沒有音樂,可以任意控制音樂的播放,主界面如圖1。圖1主界面第二章角色與場景設(shè)計2.1角色設(shè)計主要角色是六空白圖片輪廓,根據(jù)游戲需要,我分別從書本網(wǎng)絡(luò)上搜集了一些簡單漂亮的圖片,然后根據(jù)圖片分別繪制出相應(yīng)角色,有小蘑菇,尾巴燃著火的小龍,福娃晶晶,目不轉(zhuǎn)睛注視蘋果的小狗,身著官服的九品芝麻官,還有可愛的小精靈。其中小蘑菇如圖2所示,福娃晶晶如圖3所示,還有小精靈如圖4所示,是我負(fù)責(zé)制作的。圖2小蘑菇圖3福娃晶晶圖4小精靈根據(jù)游戲需要,繪制完所有角色之后,我們又將其按部分分割填充顏色,分別轉(zhuǎn)化成元件,以便添加相應(yīng)的偵聽事件,方便填充顏色,有的甚至分割成二十多塊,部分元件如圖5。圖5元件實例2.2場景設(shè)計游戲的主場景我們繪制了一個大象形的繪圖板,為了使場景美觀,我們又導(dǎo)入了一幅位圖圖片作為背景襯在大象形畫板的后面,主場景主要運(yùn)用了暖色調(diào),給人一種溫馨愉悅的感覺。這些細(xì)小的地方均為我們兩個人合作,具體效果如圖5。圖5場景圖片第三章游戲功能設(shè)計與實現(xiàn)3.1模塊一：取色功能主要功能及函數(shù)介紹本游戲的取色模塊主要實現(xiàn)用畫筆從調(diào)色板中提取顏色,取色之后再將其添加到目標(biāo)區(qū)域,即畫筆點擊某塊特定的區(qū)域?qū)嫻P的顏色添加到其中。游戲功能的實現(xiàn)主要運(yùn)用了事件偵聽和顏色設(shè)置函數(shù),鼠標(biāo)單擊目標(biāo)更改目標(biāo)顏色,達(dá)到提取顏色和添加顏色的目的。此項功能的實現(xiàn)主要運(yùn)用了Transform類,每個顯示對象都有一個transform屬性,它是Transform類的實例,Transform類有一個colcrTransform屬性,此屬性又有一個ColorTransform類的實例,通過設(shè)置此實例的color屬性可以改變可視對象的顏色。方法是先定義一個ColorTransform類的變量用來存儲顏色,然后將相應(yīng)的顏色值存儲在變量中,要改變目標(biāo)顏色時,將存儲在剛剛定義的變量賦值給實例的transform.colorTransform屬性即可。代碼1.導(dǎo)入相應(yīng)的類importflash.events.MouseEvent;importflash.geom.ColorTransform;2.分別給調(diào)色盤上的顏色按鈕添加事件偵聽和函數(shù)pan.hei.addEventListener<MouseEvent.CLICK,makeHei>;//給黑色按鈕〔實例名pan.hei添加事件偵聽pan.bai.addEventListener<MouseEvent.CLICK,makeBai>;pan.lv.addEventListener<MouseEvent.CLICK,makeLv>;//給綠色按鈕〔實例名pan.lv添加事件偵聽pan.huang.addEventListener<MouseEvent.CLICK,makeHuang>;pan.lan.addEventListener<MouseEvent.CLICK,makeLan>;pan.zi.addEventListener<MouseEvent.CLICK,makeZi>;//給紫色按鈕〔實例名pan.zi添加事件偵聽pan.danlan.addEventListener<MouseEvent.CLICK,makeDanLan>;pan.hong.addEventListener<MouseEvent.CLICK,makehong>;pan.juhuang.addEventListener<MouseEvent.CLICK,makejuhuang>;//給橘黃色按鈕〔實例名pan.juhuang添加事件偵聽pan.fenhong.addEventListener<MouseEvent.CLICK,makefenhong>;pan.shenlv.addEventListener<MouseEvent.CLICK,makeshenlv>;3.單擊顏色按鈕時筆頭的顏色變?yōu)榘粹o顏色varcolorInfo:=bi.bitou.transform.colorTransform;//定義ColorTransform對象,用來保存產(chǎn)顏色<1>筆頭變成黑色函數(shù)functionmakeHei<event:MouseEvent>:void{colorInfo.color=0x000000;//將黑色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色}functionmakeBai<event:MouseEvent>:void{ colorInfo.color=0xFFFFFF;//將白色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色}〔2筆頭變成綠色函數(shù)functionmakeLv<event:MouseEvent>:void{ colorInfo.color=0x00cc00;//將綠色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色 }<3>筆頭變成黃色函數(shù)functionmakeHuang<event:MouseEvent>:void{ colorInfo.color=0xffff00;//將黃色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色 }<4>筆頭變成藍(lán)色函數(shù)functionmakeLan<event:MouseEvent>:void{ colorInfo.color=0x0000ff;//將藍(lán)色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色 }<5>筆頭變成紫色函數(shù)functionmakeZi<event:MouseEvent>:void{ colorInfo.color=0x9900ff;//將紫色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色 }<6>筆頭變成淡藍(lán)色函數(shù)functionmakeDanLan<event:MouseEvent>:void{ colorInfo.color=0x00ffff;//將淡藍(lán)色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色 }<7>筆頭變成紅色函數(shù)functionmakehong<event:MouseEvent>:void{ colorInfo.color=0xff0000;//將紅色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色 }<8>筆頭變成橘黃色函數(shù)functionmakejuhuang<event:MouseEvent>:void{ colorInfo.color=0xff6600;//將橘黃色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色}<9>筆頭變成粉紅色函數(shù)functionmakefenhong<event:MouseEvent>:void{ colorInfo.color=0xff00ff;//將粉紅色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色 }<10>筆頭變成深綠色函數(shù)functionmakeshenlv<event:MouseEvent>:void{ colorInfo.color=0x006600;//將深綠色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//將筆頭〔實例名bi.bitou的顏色改為colorInfo的顏色 }3.2模塊二：輔助功能簡介通過用畫筆拖動調(diào)色盤,來實現(xiàn)移動調(diào)色盤的位置；將調(diào)色盤中的顏色制作成按鈕,用畫筆點擊不同的按鈕,畫筆提取不同的顏色。代碼1.下一按鈕及聲音stop<>;varmyButton:button=newbutton<>;//定義一個button類的元件實例xia.addEventListener<MouseEvent.CLICK,next2>;//給下一按鈕添加事件偵聽functionnext2<e:MouseEvent>{gotoAndPlay<7>;myButton.play<>;//按鈕聲音播放}此部分代碼完成的任務(wù)是,單擊下一按鈕,圖片切換到下一,讓玩者進(jìn)行下一圖片顏色的填充,單擊按鈕的同時觸發(fā)聲音事件。2.上一按鈕及聲音shang.addEventListener<MouseEvent.CLICK,front1>;//給上一按鈕添加事件偵聽functionfront1<e:MouseEvent>{ gotoAndPlay<6>; myButton.play<>;//按鈕聲音播放 }此部分代碼完成的任務(wù)是,單擊上一按鈕,圖片切換到上一,讓玩者進(jìn)行上一圖片顏色的填充,單擊按鈕的同時觸發(fā)聲音事件。3.隱藏畫筆bi.addEventListener<Event.ENTER_FRAME,moveBi>;//給畫筆〔實例名bi添加事件偵聽functionmoveBi<e:Event>{ Mouse.hide<>;//鼠標(biāo)隱藏 bi.x=mouseX+1; bi.y=mouseY-7;//定義畫筆〔實例名bi的位置坐標(biāo)}此部分代碼的作用是實現(xiàn)畫筆跟隨鼠標(biāo)移動,隱藏鼠標(biāo)并改變鼠標(biāo)的位置,讓鼠標(biāo)剛好位于畫筆頭部,以便下面的操作。4.調(diào)色盤的移動pan.addEventListener<MouseEvent.MOUSE_DOWN,dragPan>;pan.addEventListener<MouseEvent.MOUSE_UP,stopDragPan>;//給調(diào)色盤〔實例名pan添加事件偵聽functiondragPan<e:MouseEvent>{ Mouse.hide<>;//鼠標(biāo)隱藏 pan.startDrag<>;}//添加開始拖動函數(shù)functionstopDragPan<e:MouseEvent>{ Mouse.hide<>;//鼠標(biāo)隱藏 pan.stopDrag<>;}//添加停止拖動函數(shù)此部分代碼實現(xiàn)的是調(diào)色盤的拖動,在調(diào)色盤上添加事件偵聽,然后添加的拖動函數(shù),隱藏鼠標(biāo),畫筆跟隨鼠標(biāo)移動。第四章音樂的添加導(dǎo)出的游戲,效果基本還算令人滿意,然而游戲過程中沒有聲音,玩起來未免有點單調(diào),我們又給游戲添加了聲音來配合游戲,首先是按鈕的聲音,每次單擊按鈕都會有相應(yīng)的聲音配合,在前面的代碼中已經(jīng)介紹了。我添加了music按鈕,并添加了事件偵聽事件,讓鼠標(biāo)點擊按鈕時,播放預(yù)定的音樂。開始的Play按鈕,我添加了音樂,鼠標(biāo)在按鈕圍時可以播放音樂,而鼠標(biāo)移出按鈕之后音樂播放停止。添加音樂使玩者在游戲過程中可以聽音樂,從而達(dá)到游戲的放松與娛樂目的。游戲開頭有點生硬缺乏活力,為了使游戲更吸引人,我們對片頭部分進(jìn)行了完善,添加了動畫讓Play按鈕在鼠標(biāo)移入時,進(jìn)行左右搖擺的動畫。第五章小結(jié)游戲制作過程中遇到很多問題,主要問題是：畫筆從調(diào)色盤中提取顏色之后筆頭的顏色無法隨之改變,解決方法是對每個按鈕添加事件偵聽,然后根據(jù)按鈕顏色設(shè)置筆頭的顏色,但是此法有個弊端就是無法提取筆頭的顏色將其添加到目標(biāo)區(qū)域中,我們試了很多函數(shù)但是還是無法提取到筆頭的顏色,最后在老師的提醒下我們應(yīng)用了事件偵聽目標(biāo)函數(shù)〔e.target最終解決了這個問題。開始我們對所有單擊目標(biāo)添加了事件偵聽事件,結(jié)果是無論單擊哪一個元件實例,元件實例都會變色,甚至按鈕的顏色都被改變了,經(jīng)過反復(fù)嘗試,我們將要添加顏色的實例部分重新命名為mi其中i為整數(shù),然后對mi添加事件偵聽,解決了這個問題。第六章心得體會通過這次的Flash游戲的設(shè)計制作,我學(xué)到了很多課本上沒有的東西,對FlashActionScript3.0也有了進(jìn)一步深刻的認(rèn)識,更學(xué)到了一些Flash游戲制作設(shè)計的寶貴經(jīng)驗。一個看似簡單的小游戲凝聚了作者的很多心血。在開始制作之前我們查閱了好多資料,包括從網(wǎng)上下載小游戲作為參考,最后我們選定了一個填色游戲,雖然我們下載了游戲的源文件,但是,源文件的代碼是ActionScript2.0跟ActionScript3.0有這很大的不同,或者說基本上是完全不同的,因此,我們沒有參考源文件的代碼,直接根據(jù)游戲的功能,應(yīng)用所學(xué)知識和現(xiàn)有資料重新編寫代碼,一部分一部分的添加修改和完善,最終終于完成了填色游戲的制作,尤其是在畫筆顏色的提取和圖形顏色的添加上,我更是費了不少的時間和心血,由一個顏色到多個顏色,由一個色塊到多個色塊,一點點慢慢完善修改,最終解決了所有的錯誤,達(dá)到了想要的效果。然而,此次游戲制作,我最深的感觸就是團(tuán)隊合作的重要,起初我對團(tuán)隊的理解就是每個人各自把自己的東西做完就行了,對合作的理解更是困難,然而這次的作品是我和王璐兩個人合作完成的,這次的合作使我深刻體會了了一個團(tuán)隊該如何合作,來創(chuàng)造出更好的作品,雖然我們只是一個兩個人的小團(tuán)隊,但是,有小才能有大,就像是我們編寫代碼,一個大的代碼是由一個個小的代碼組成的,而一個個小代碼又必須互相配合才能組成這個有這強(qiáng)大功能的完善大程序。致在這一年的ActionScript3.0的學(xué)習(xí)中,我學(xué)到了很多以前甚至不曾接觸過的東西,期間得到了老師和同學(xué)的許多幫助,他們教會了我許多東西,尤其是在專業(yè)學(xué)習(xí)中,課堂上老師耐心細(xì)致的講解讓我受益匪淺；課下,同學(xué)們也給與我許多無私的幫助,讓我對所學(xué)知識有了更深刻的認(rèn)識和理解。非常感老師和同學(xué)們的關(guān)心與幫助。首先,非常要感我的指導(dǎo)老師,感她對我學(xué)習(xí)上細(xì)致的指導(dǎo)和幫助,無論什么時候,老師總是細(xì)心的講解,認(rèn)真的指導(dǎo)我們修改作品,幫助我們解決難題,給我們提了很多寶貴的意見和建議。在完成作品的過程中,我們遇到很多問題,老師多次提出的指導(dǎo)性、啟發(fā)性的建議,提高了作品的整體水平,也使得課程設(shè)計報告結(jié)構(gòu)更加緊湊和嚴(yán)密。其次,我要感那些給我?guī)椭凸膭畹耐瑢W(xué)們,在我因為一些失誤心煩意亂無法靜下心學(xué)習(xí)時,是她們鼓勵我?guī)椭?讓我有信心和耐心做完做好這一任務(wù),正因為有了