第三章 坐標(biāo)系統(tǒng)以及幀延遲循環(huán)

1、Flash游戲編程游戲編程肖肖 剛剛閩江學(xué)院電子系信息教研室閩江學(xué)院電子系信息教研室Email:第三章第三章 坐標(biāo)系統(tǒng)以及延遲循環(huán)坐標(biāo)系統(tǒng)以及延遲循環(huán) 教學(xué)提要Flash中的坐標(biāo)系統(tǒng)中的坐標(biāo)系統(tǒng)視覺設(shè)計和編程的結(jié)合視覺設(shè)計和編程的結(jié)合延遲循環(huán)模式延遲循環(huán)模式利用剪輯嵌套改進(jìn)了的延遲循環(huán)模式利用剪輯嵌套改進(jìn)了的延遲循環(huán)模式 掌握掌握Flash在時間和空間上的應(yīng)用技術(shù)在時間和空間上的應(yīng)用技術(shù)1 Flash中的坐標(biāo)系統(tǒng)中的坐標(biāo)系統(tǒng)坐標(biāo)軸坐標(biāo)軸計算機(jī)屏幕的坐標(biāo)原點(diǎn)為左計算機(jī)屏幕的坐標(biāo)原點(diǎn)為左上角，并且向下為上角，并且向下為y軸增長的方向，以像軸增長的方向，以像素為單位。如下圖所示：素為單位。如下圖所示

2、： 1.1 坐標(biāo)坐標(biāo)任何可視對象都有一個坐標(biāo)值（任何可視對象都有一個坐標(biāo)值（x，y），），它的含義是它的含義是相對相對于它的參考坐標(biāo)系于它的參考坐標(biāo)系原點(diǎn)原點(diǎn)來來說，它的說，它的中心點(diǎn)中心點(diǎn)在什么位置。在什么位置。通過讀取這個坐標(biāo)值就可以知道對象的坐通過讀取這個坐標(biāo)值就可以知道對象的坐標(biāo)。標(biāo)。通過改變對象的坐標(biāo)值，也就可以改變它通過改變對象的坐標(biāo)值，也就可以改變它在屏幕上的位置。在屏幕上的位置。1.2 坐標(biāo)原點(diǎn)坐標(biāo)原點(diǎn)坐標(biāo)原點(diǎn)分為兩種情況：坐標(biāo)原點(diǎn)分為兩種情況：如果可視對象直接放置在舞臺上，則以舞臺如果可視對象直接放置在舞臺上，則以舞臺的左上角作為坐標(biāo)原點(diǎn)。的左上角作為坐標(biāo)原點(diǎn)。如果可視對象嵌

3、套在某可視對象內(nèi)，則以某如果可視對象嵌套在某可視對象內(nèi)，則以某可視對象的坐標(biāo)中心點(diǎn)作為坐標(biāo)原點(diǎn)。可視對象的坐標(biāo)中心點(diǎn)作為坐標(biāo)原點(diǎn)。也就是說，對象的坐標(biāo)值是相對的概念。也就是說，對象的坐標(biāo)值是相對的概念。指相對于它的上層對象的中心點(diǎn)，它的指相對于它的上層對象的中心點(diǎn)，它的坐標(biāo)值是多少。坐標(biāo)值是多少。 1.3 中心點(diǎn)中心點(diǎn)對象的坐標(biāo)中心點(diǎn)默認(rèn)情況下，是在對對象的坐標(biāo)中心點(diǎn)默認(rèn)情況下，是在對象外接矩形的左上角。一個五角星的坐象外接矩形的左上角。一個五角星的坐標(biāo)中心點(diǎn)如下圖所示：標(biāo)中心點(diǎn)如下圖所示： 區(qū)別以下點(diǎn)：區(qū)別以下點(diǎn)：坐標(biāo)中心點(diǎn)坐標(biāo)中心點(diǎn)幾何中心點(diǎn)幾何中心點(diǎn)變形中心點(diǎn)變形中心點(diǎn)信息中心點(diǎn)信息中心

4、點(diǎn) 程序總是以坐標(biāo)中心點(diǎn)作為對象的中心點(diǎn) 1.4 屬性嵌套屬性嵌套可視對象層次結(jié)構(gòu)中的坐標(biāo)具有嵌套的可視對象層次結(jié)構(gòu)中的坐標(biāo)具有嵌套的特點(diǎn)。假設(shè)對象特點(diǎn)。假設(shè)對象a中嵌套著對象中嵌套著對象b，則，則b相對于舞臺的相對于舞臺的x坐標(biāo)應(yīng)為坐標(biāo)應(yīng)為a.x+b.x（不考（不考慮縮放）。慮縮放）。事實(shí)上，不僅僅是坐標(biāo)，像角度、透明事實(shí)上，不僅僅是坐標(biāo)，像角度、透明度等可視對象屬性都具有嵌套的特點(diǎn)。度等可視對象屬性都具有嵌套的特點(diǎn)。如下表所示：如下表所示： 1.4 屬性嵌套屬性嵌套屬性屬性嵌套關(guān)系嵌套關(guān)系不透明度（alpha）全局不透明度=a.alpha*b.alpha活動狀態(tài)（enable）全局活動狀態(tài)

5、=（a.enable&b.enable）高度（height）全局高度=a. scaleY *b.height角度（rotation）全局角度a.rotation+b.rotation可見性（visible）全局可見性=（a.visible&b.visible）寬度（width）全局寬度=a. scaleX *b.widthx坐標(biāo)（x）全局x坐標(biāo)=a.x+b.x*a. scaleXy坐標(biāo)（y）全局y坐標(biāo)=a.y+b.y*a. scaleY鼠標(biāo)x坐標(biāo)（mouseX）全局root. mouseX =a.x+(b.x+b. mouseX) *a. scaleX鼠標(biāo)y坐標(biāo)（mouseY）全局root.

6、mouseY =a.y+(b.y+b. mouseY) *a. scaleYx縮放（scaleX）全局x縮放=a. scaleX *b. scaleXy縮放（scaleY）全局y縮放=a. scaleY *b. scaleY1.5 小結(jié)小結(jié)理解理解Flash對二維平面的坐標(biāo)系統(tǒng)布置，對二維平面的坐標(biāo)系統(tǒng)布置，以及顯示對象嵌套關(guān)系，對以及顯示對象嵌套關(guān)系，對Flash游戲編游戲編程人員來說非常重要，應(yīng)在學(xué)習(xí)過程中程人員來說非常重要，應(yīng)在學(xué)習(xí)過程中不斷深入體會。不斷深入體會。2 視覺設(shè)計和編程的結(jié)合視覺設(shè)計和編程的結(jié)合 Flash將動畫和程序完美地集成在一起，將動畫和程序完美地集成在一起，可以先在

7、可以先在Flash中設(shè)計游戲畫面、角色動中設(shè)計游戲畫面、角色動畫、特效等，然后在腳本中控制它們，畫、特效等，然后在腳本中控制它們，輕松地實(shí)現(xiàn)精美的游戲。輕松地實(shí)現(xiàn)精美的游戲。 2.1 舉例：花瓶和桌子舉例：花瓶和桌子 程序描述：房間里有一張桌子，桌子上放著一個花瓶。程序描述：房間里有一張桌子，桌子上放著一個花瓶。拖動桌子時桌子和花瓶一起移動，拖動花瓶時只有花拖動桌子時桌子和花瓶一起移動，拖動花瓶時只有花瓶移動，而且只能在桌子的寬度范圍內(nèi)水平移動。松瓶移動，而且只能在桌子的寬度范圍內(nèi)水平移動。松開鼠標(biāo)的時候，輸出桌子和花瓶的坐標(biāo)值。開鼠標(biāo)的時候，輸出桌子和花瓶的坐標(biāo)值。 2.2 舉例舉例分析分析

8、這個例子里，我們可以將花瓶和桌子分別做成剪輯。這個例子里，我們可以將花瓶和桌子分別做成剪輯。然后將它們嵌套在一個大的剪輯內(nèi)是一種不錯的做法。然后將它們嵌套在一個大的剪輯內(nèi)是一種不錯的做法。這樣當(dāng)拖動桌子時讓大剪輯移動，而拖動花瓶的時候，這樣當(dāng)拖動桌子時讓大剪輯移動，而拖動花瓶的時候，讓花瓶剪輯移動，此時可以直接參考桌子的坐標(biāo)系統(tǒng)，讓花瓶剪輯移動，此時可以直接參考桌子的坐標(biāo)系統(tǒng)，輕松達(dá)到限制花瓶移動范圍的目的。輕松達(dá)到限制花瓶移動范圍的目的。即使用如下的顯示對象層次結(jié)構(gòu)：即使用如下的顯示對象層次結(jié)構(gòu)： 2.3 制作步驟制作步驟 步驟：步驟：繪制場景繪制場景創(chuàng)建剪輯及其層次結(jié)構(gòu)創(chuàng)建剪輯及其層次結(jié)構(gòu)

9、編寫代碼編寫代碼保存與測試保存與測試具體請參看具體請參看doc文檔。文檔。 3 延遲循環(huán)模式延遲循環(huán)模式 Flash程序的一些關(guān)鍵代碼往往要求間隔程序的一些關(guān)鍵代碼往往要求間隔一段時間后被重新執(zhí)行。例如：一段時間后被重新執(zhí)行。例如：角色走路角色走路 智能大炮智能大炮實(shí)時成績顯示實(shí)時成績顯示最常用的一種方法：幀跳轉(zhuǎn)，通過在幀最常用的一種方法：幀跳轉(zhuǎn)，通過在幀之間循環(huán)跳轉(zhuǎn)而實(shí)現(xiàn)代碼的重復(fù)執(zhí)行。之間循環(huán)跳轉(zhuǎn)而實(shí)現(xiàn)代碼的重復(fù)執(zhí)行。 3.1 典型的幀循環(huán)模式典型的幀循環(huán)模式 第第1幀：初始化，用來定義需要使用到的變量并且賦初始值，以幀：初始化，用來定義需要使用到的變量并且賦初始值，以及定義各種函數(shù)。及定

10、義各種函數(shù)。第第2幀：被重復(fù)執(zhí)行的代碼幀：被重復(fù)執(zhí)行的代碼第第3幀有一條跳轉(zhuǎn)語句，跳回第幀有一條跳轉(zhuǎn)語句，跳回第2幀并播放。幀并播放。如果這段代碼有結(jié)束的需要，則在滿足結(jié)束條件的時候讓它跳到如果這段代碼有結(jié)束的需要，則在滿足結(jié)束條件的時候讓它跳到第第4幀并停止。幀并停止。 初始化關(guān)鍵代碼跳轉(zhuǎn)結(jié)果 1 2 3 4 3.2 示例程序：彈球示例程序：彈球 程序描述：程序描述：屏幕上有一個彈球，它能夠在屏幕內(nèi)作彈跳屏幕上有一個彈球，它能夠在屏幕內(nèi)作彈跳運(yùn)動，它會根據(jù)給定的參數(shù)如重力、空氣阻運(yùn)動，它會根據(jù)給定的參數(shù)如重力、空氣阻尼、碰撞損失等表現(xiàn)出相應(yīng)的運(yùn)動方式，還尼、碰撞損失等表現(xiàn)出相應(yīng)的運(yùn)動方式，還

11、可以通過鼠標(biāo)點(diǎn)擊并拋甩小球的方式給小球可以通過鼠標(biāo)點(diǎn)擊并拋甩小球的方式給小球一個初始的運(yùn)動狀態(tài)。一個初始的運(yùn)動狀態(tài)。 關(guān)鍵部分講解：關(guān)鍵部分講解： 如何實(shí)現(xiàn)運(yùn)動現(xiàn)象模擬如何實(shí)現(xiàn)運(yùn)動現(xiàn)象模擬 如何實(shí)現(xiàn)鼠標(biāo)拋甩來獲得初始運(yùn)動狀態(tài)如何實(shí)現(xiàn)鼠標(biāo)拋甩來獲得初始運(yùn)動狀態(tài) 3.3 如何實(shí)現(xiàn)運(yùn)動現(xiàn)象模擬如何實(shí)現(xiàn)運(yùn)動現(xiàn)象模擬 將將Flash文檔的幀頻率設(shè)定為文檔的幀頻率設(shè)定為50fps，采用三，采用三幀循環(huán)模式，則每過幀循環(huán)模式，則每過0.02秒，關(guān)鍵代碼就被執(zhí)秒，關(guān)鍵代碼就被執(zhí)行一遍。在關(guān)鍵代碼中，根據(jù)對象的行一遍。在關(guān)鍵代碼中，根據(jù)對象的vx和和vy計算在間隔了計算在間隔了 時間內(nèi)的位移時間內(nèi)的位移 和和

12、即可。即可。公式為：公式為：txyttgvytvxyx)21(3.3 如何實(shí)現(xiàn)運(yùn)動現(xiàn)象模擬如何實(shí)現(xiàn)運(yùn)動現(xiàn)象模擬如果要模擬風(fēng)、摩擦力下的運(yùn)動、簡諧如果要模擬風(fēng)、摩擦力下的運(yùn)動、簡諧振動等等，都有公式可循，這些公式用振動等等，都有公式可循，這些公式用ActionScript編程實(shí)現(xiàn)是非常容易的事編程實(shí)現(xiàn)是非常容易的事情。情。反彈的實(shí)現(xiàn)：在滿足邊界條件的情況下，反彈的實(shí)現(xiàn)：在滿足邊界條件的情況下，改變速度的方向，根據(jù)新的速度值計算，改變速度的方向，根據(jù)新的速度值計算，表現(xiàn)出來的即為反彈效果。表現(xiàn)出來的即為反彈效果。 3.4 如何實(shí)現(xiàn)鼠標(biāo)拋甩來獲得如何實(shí)現(xiàn)鼠標(biāo)拋甩來獲得初始運(yùn)動狀態(tài)初始運(yùn)動狀態(tài)當(dāng)彈球處

13、于被拖動狀態(tài)時，也就是用戶用鼠標(biāo)按住彈當(dāng)彈球處于被拖動狀態(tài)時，也就是用戶用鼠標(biāo)按住彈球并拋甩。在這個狀態(tài)下，每隔球并拋甩。在這個狀態(tài)下，每隔 時間比較小球當(dāng)前時間比較小球當(dāng)前坐標(biāo)與原坐標(biāo)的差異坐標(biāo)與原坐標(biāo)的差異 和和 。則瞬時速度為。則瞬時速度為 當(dāng)用戶松開鼠標(biāo)時，將這個最新的瞬時速度作為彈跳當(dāng)用戶松開鼠標(biāo)時，將這個最新的瞬時速度作為彈跳運(yùn)動狀態(tài)下的初始速度，彈球進(jìn)入彈跳運(yùn)動狀態(tài)。運(yùn)動狀態(tài)下的初始速度，彈球進(jìn)入彈跳運(yùn)動狀態(tài)。 設(shè)設(shè) 為單位時間，則理想彈跳運(yùn)動的公式可以簡化為：為單位時間，則理想彈跳運(yùn)動的公式可以簡化為： txytyvtxvyx,t，當(dāng)處于拖動狀態(tài)下當(dāng)處于彈跳狀態(tài)下，yvxvgv

14、vvyvxyxyyyx,5 . 0,3.5 具體實(shí)現(xiàn)具體實(shí)現(xiàn)步驟如下步驟如下設(shè)置文檔參數(shù)設(shè)置文檔參數(shù)繪制小球繪制小球設(shè)置三幀模式設(shè)置三幀模式編寫每一幀的代碼編寫每一幀的代碼保存與測試保存與測試具體請參考具體請參考doc文檔文檔 4 利用剪輯嵌套改進(jìn)循環(huán)利用剪輯嵌套改進(jìn)循環(huán)問題的提出：如果游戲不是一個彈球，問題的提出：如果游戲不是一個彈球，而是而是10個甚至個甚至100個呢？個呢？它們都遵循一樣的運(yùn)動規(guī)律，只是初始它們都遵循一樣的運(yùn)動規(guī)律，只是初始位置，速度不同而已。位置，速度不同而已。如果將控制運(yùn)動的代碼寫在主場景的時如果將控制運(yùn)動的代碼寫在主場景的時間軸上，那么幾乎相同的代碼，得寫間軸上，那

15、么幾乎相同的代碼，得寫10遍，遍，100遍！程序因此變得龐大，難以遍！程序因此變得龐大，難以維護(hù)。維護(hù)。我們需要采用一種新的編程策略！我們需要采用一種新的編程策略！ 4.1 利用剪輯嵌套改進(jìn)循環(huán)利用剪輯嵌套改進(jìn)循環(huán)解決方法解決方法由于彈球剪輯內(nèi)部也有時間軸，可以把控制其運(yùn)動由于彈球剪輯內(nèi)部也有時間軸，可以把控制其運(yùn)動的代碼放置在彈球剪輯內(nèi)部，只要剪輯本身的時間的代碼放置在彈球剪輯內(nèi)部，只要剪輯本身的時間軸實(shí)現(xiàn)典型的幀循環(huán)，它就可以實(shí)現(xiàn)需要的運(yùn)動效軸實(shí)現(xiàn)典型的幀循環(huán)，它就可以實(shí)現(xiàn)需要的運(yùn)動效果。果。在主場景看來，彈球剪輯就是一個在主場景看來，彈球剪輯就是一個“獨(dú)立自主，自獨(dú)立自主，自力更生力更生

16、”的對象，它不依賴于主場景的任何代碼而的對象，它不依賴于主場景的任何代碼而自行運(yùn)動著。自行運(yùn)動著。 這時，如果需要這時，如果需要100個彈球，那么只要復(fù)制個彈球，那么只要復(fù)制100個個實(shí)例就可以了，每個實(shí)例都會自動完成彈跳運(yùn)動，實(shí)例就可以了，每個實(shí)例都會自動完成彈跳運(yùn)動，不需要再添加任何代碼。不需要再添加任何代碼。 4.2 解決方法評價解決方法評價這個策略可以認(rèn)為是軟件工程關(guān)于模塊這個策略可以認(rèn)為是軟件工程關(guān)于模塊低耦合高內(nèi)聚低耦合高內(nèi)聚要求在要求在Flash里的實(shí)現(xiàn)。里的實(shí)現(xiàn)。這種思想的應(yīng)用非常廣泛，模塊獨(dú)立性策略應(yīng)用的好這種思想的應(yīng)用非常廣泛，模塊獨(dú)立性策略應(yīng)用的好壞，也是衡量開發(fā)者軟編程

17、素養(yǎng)的一個指標(biāo)。壞，也是衡量開發(fā)者軟編程素養(yǎng)的一個指標(biāo)。例如拼圖游戲中圖塊的設(shè)計，笨拙的開發(fā)者制作每一例如拼圖游戲中圖塊的設(shè)計，笨拙的開發(fā)者制作每一個圖塊，為每個圖塊編寫幾乎一樣的代碼，而聰明的個圖塊，為每個圖塊編寫幾乎一樣的代碼，而聰明的開發(fā)者，只需要制作一個剪輯，將這個剪輯復(fù)制成一開發(fā)者，只需要制作一個剪輯，將這個剪輯復(fù)制成一個陣列，控制它們的位置以及其它屬性、方法，就可個陣列，控制它們的位置以及其它屬性、方法，就可以制作出同樣的效果。而且這樣做還有一個好處，如以制作出同樣的效果。而且這樣做還有一個好處，如果需要不同的分割比例，那只要修改一下復(fù)制陣列的果需要不同的分割比例，那只要修改一下復(fù)制陣列的參數(shù)就可以了。參數(shù)就可以了。4.3 舉例：獨(dú)立的彈球舉例：獨(dú)立的彈球在上一節(jié)程序的基礎(chǔ)上修改成具有獨(dú)立在上一節(jié)程序的基