第6章動畫與游戲V11ppt課件

1、第第6章章 動畫與游戲動畫與游戲哈爾濱工程大學(xué) 王向輝.本章學(xué)習(xí)目標(biāo)： 動畫效果是游戲中不可缺少的內(nèi)容，本章主要介紹畫布Canvas和精靈ImageSprite的使用方法，以及一些高級的動畫功能，如邊緣檢測、碰撞處理和精靈操縱等。掌握畫布的使用方法 理解畫布的坐標(biāo)系統(tǒng) 掌握精靈的使用方法掌握球Ball的使用方法了解邊緣檢測和碰撞處理的原理.6.1 畫布 畫布是一種可在其上繪制圖像的控件，初始的畫布像一張空白幻燈片，沒有任何內(nèi)容，用戶可以在畫布上繪制各種圖形，也可以在畫布上加載圖片作為畫布的背景，或是在畫布上顯示文字。畫布是常用的控件，除了作為繪制圖形的承載體以外，還經(jīng)常作為游戲的背景畫面。 畫

2、布是一個具有觸控感應(yīng)的二維平面圖板，采用經(jīng)典的二維坐標(biāo)系，原點(diǎn)在畫布的左上角。右圖使用坐標(biāo)點(diǎn)(X,Y)說明畫布的坐標(biāo)系，X表示坐標(biāo)點(diǎn)距離左側(cè)邊緣的距離，Y表示坐標(biāo)點(diǎn)距離上邊緣的距離，且X和Y都取正值。6.1.1畫布介紹.6.1 畫布 在基本控件庫中可以找到畫布Canvas），將畫布拖拽到界面設(shè)計(jì)區(qū)后，畫布僅僅顯示為一個小圖標(biāo)，如下圖所示。6.1.2畫布使用.6.1 畫布 除可使用寬度和高度屬性控制畫布的大小外，畫布還支持更改背景顏色(BackgroundColor)和更改背景圖片(BackgroundImage)、設(shè)置畫筆的顏色(PaintColor和寬度(Linewidth），以及畫布是否可

3、見Visible等屬性。畫布的全部屬性如右圖所示，屬性說明參照下表。n畫布屬性屬性屬性說明說明BackgroundColor背景顏色BackgroundImage背景圖片F(xiàn)ondSize字體大小Linewidth畫筆寬度PaintColor畫筆顏色TextAlignment文字排列方式Visible畫布控件是否可見Width畫布寬度Height畫布高度.6.1 畫布 畫布支持的事件有拖拽事件Dragged）、觸碰事件Touched）、快速劃動事件Flung）、觸碰按下事件TouchDown和觸碰抬起事件TouchUp），如下表所示。n畫布事件事件事件說明說明Dragged拖拽事件Flung快速

4、劃動事件TouchDown觸碰按下事件TouchUp觸碰抬起事件Touched觸碰事件，由觸碰按下動作和觸碰抬起動作組成.6.1 畫布n畫布事件 以下圖場景為例，說明畫布事件的響應(yīng)規(guī)律。此圖演示手指從A點(diǎn)按下，緩慢的沿弧線，從B點(diǎn)滑動到C點(diǎn)，然后抬起手指的過程。 手指接觸到A點(diǎn)時產(chǎn)生TouchDown事件；手指從A到B再到C的移動過程中，將多次產(chǎn)生Dragged事件；在手指離開C點(diǎn)時，產(chǎn)生TouchUp事件。TouchDown和TouchUp事件只在手指觸碰到屏幕和離開屏幕時產(chǎn)生。如果手指的觸碰點(diǎn)和抬起點(diǎn)是同一點(diǎn)，將引發(fā)Touched事件；如果手指在屏幕上移動了，則不會引發(fā)Touched事件。

5、畫布的Touched、TouchDown和TouchUp事件.畫布的Dragged事件 Dragged事件在手指移動過程中持續(xù)產(chǎn)生，主要用來跟蹤手指的移動軌跡。該事件提供三個坐標(biāo)，分別是移動開始坐標(biāo)點(diǎn)StartX和StartY）、事件產(chǎn)生時的當(dāng)前坐標(biāo)點(diǎn)CurrentX和CurrentY）、前一個事件產(chǎn)生時的坐標(biāo)點(diǎn)PrevX和PrevY）。6.1 畫布n畫布事件 以右圖場景為例，如果從A點(diǎn)到C的過程中，只在B點(diǎn)和C點(diǎn)產(chǎn)生了Dragged事件，則在C點(diǎn)產(chǎn)生的事件中，移動開始節(jié)點(diǎn)是A，當(dāng)前節(jié)點(diǎn)是C，前一個事件產(chǎn)生是在B點(diǎn)。.畫布的Flung事件 畫布的Flung事件只有手指在屏幕上快速劃動的時候才會

6、產(chǎn)生。以右圖場景為例，在從A經(jīng)過B到C的過程中，如果手指在屏幕上移動的足夠快，則當(dāng)手指在C點(diǎn)抬起時，會產(chǎn)生Flung事件。Flung事件中會提供劃動開始節(jié)點(diǎn)的坐標(biāo)、劃動方向、速度、速度在X軸和Y軸的分量。6.1 畫布n畫布事件 邏輯編輯器中的畫布事件如下圖所示：.6.1 畫布 CanvasEvent示例說明畫布的事件響應(yīng)的時機(jī)和提供的數(shù)據(jù)。下圖分別是在界面編輯器中的界面和手機(jī)運(yùn)行時的界面。CanvasEvent示例中上方是畫布控件，下方是各種事件數(shù)據(jù)的顯示區(qū)域。在上方的畫布上進(jìn)行觸碰操作或滑動操作，事件的響應(yīng)結(jié)果便會顯示在界面下部。n畫布控件示例CanvasEvent.6.1 畫布示例Canv

7、asEvent邏輯控制模塊如下：n畫布控件示例CanvasEvent Flung事件和Dragged事件處理函數(shù)邏輯模塊.6.1 畫布n畫布控件示例CanvasEvent TouchDown事件和TouchUp事件處理函數(shù)邏輯模塊 Touched事件處理函數(shù)邏輯模塊.6.1 畫布n畫布方法 CanvasEvent示例詳細(xì)介紹了畫布所支持的事件，以及事件的使用方法。下面具體介紹畫布所支持的方法，如清空畫布、繪制圖形、畫布保存等。畫布所支持的全部方法如下表所示。方法方法說明說明Clear清除畫布DrawCircle繪制圓形圖形DrawLine繪制線條DrawPoint繪制圓點(diǎn)DrawText繪制文

8、字DrawTextAtAngle以一定角度繪制文字GetBackgroundPixelColor獲取背景圖片指定像素的顏色GetPixelColor獲取圖片指定像素的顏色Save畫布保存SaveAs畫布另存為SetBackgroundPixelColor設(shè)置背景圖片特定像素的顏色.6.1 畫布n畫布方法 畫布所支持的方法，像Clear和Save是不需要用戶提供任何參數(shù)，但絕大多數(shù)方法都需要用戶提供坐標(biāo)作為基本參數(shù)，如DrawPoint和GetPixelColor。下圖給出了畫布所有方法中需要用戶提供的參數(shù)。.6.1 畫布 在介紹“畫圖板示例之前，先說明一下如何使用手機(jī)的相機(jī)和加速度傳感器。相機(jī)

9、控件 相機(jī)控件是一個非可視化控件，可利用手機(jī)的鏡頭進(jìn)行拍照。相機(jī)控件在媒體控件區(qū)Media可以找到，如下圖所示。6.1.3 相機(jī)與加速度傳感器.6.1 畫布 相機(jī)控件只支持一種方法TakePicture，此方法被調(diào)用時，手機(jī)將進(jìn)行拍照。該方法結(jié)束后會引發(fā)AfterPictures事件。n相機(jī)方法相機(jī)控件的TakePicture方法n相機(jī)事件 AfterPicture事件在拍照完成后被產(chǎn)生，其中image是手機(jī)中用來存放拍攝照片的路徑信息。相機(jī)的AfterPictures事件.6.1 畫布u加速傳感器控件u 加速傳感器控件用來檢測手機(jī)加速度大小，可在三個方向測量手機(jī)晃動時的加速度，測量單位為米/

10、秒2(m/s2)。加速傳感器控件在傳感器控件區(qū)Sensors可以找到，如下圖所示。6.1.3 相機(jī)與加速度傳感器 加速傳感器控件支持X加速度、Y加速度、Z加速度，每個加速度數(shù)值都有正值和負(fù)值。其中，設(shè)備左側(cè)抬高時,X加速度數(shù)值為正，右側(cè)抬高時，X加速度數(shù)值為負(fù)。手機(jī)處于水平位置，下部抬起時Y加速度為正，上部抬起時Y加速度為負(fù)。手機(jī)處于水平位置，屏幕朝上時Z加速度為正，朝下時Z加速度為負(fù)。此外，手機(jī)屏幕朝上且水平放置時，Z加速度約為9.8m/s2。.6.1 畫布n加速傳感器屬性n 加速傳感器控件還支持MinimumInterval、Available和Enabled屬性，屬性的具體含義如下表所示

11、：6.1.3 相機(jī)與加速度傳感器屬性屬性說明說明Available手機(jī)是否具有加速感應(yīng)器件Enabled加速感應(yīng)器控件是否可用XAccel水平加速度YAccel垂直加速度ZAccel豎直方向MinimumInterval手機(jī)晃動的最小間隔.6.1 畫布n加速傳感器事件n 加速傳感器控件支持的事件有AccelerationChanged和Shaking。6.1.3 相機(jī)與加速度傳感器加速傳感器控件的事件 AccelerationChanged事件在加速傳感器的加速度改變時調(diào)用，并根據(jù)加速傳感器的變化返回X、Y、Z加速度值，可以在三個方向上確定手機(jī)晃動時的加速度大小。 Shaking事件在手機(jī)搖晃

12、時會被多次調(diào)用。.6.1 畫布 前面的內(nèi)容詳細(xì)的介紹了畫布的使用方法，下面介紹一個更為復(fù)雜的示例PaintPic。在PaintPic示例中，除了用到畫布控件外，還使用了相機(jī)控件(Cemera)和加速傳感器控件(AccelerometerSensor)。6.1.4 畫圖板示例PaintPic PaintPic示例主要實(shí)現(xiàn)如下功能。利用畫筆在畫布上繪制線條或者圓形圖案，并可選不同的畫筆顏色，使用“清空畫布按鈕或者搖晃手機(jī)的方式清空畫布，調(diào)用手機(jī)照相功能，將所拍攝的圖片作為畫布的背景，將畫布的背景和繪制的圖像保存成文件。 PaintPic示例的運(yùn)行界面如右圖所示。n示例PaintPic功能.6.1

13、畫布 PaintPic示例中大量使用了按鈕和水平布局，并且使用了兩個非可視化控件相機(jī)和加速傳感器。6.1.4 畫圖板示例PaintPicn示例PaintPic界面設(shè)計(jì) 右圖編輯區(qū)最下方的“Cameral1和“AccelerometerSensor分別就是相機(jī)和加速傳感器。雖然在界面設(shè)計(jì)圖中可看到非可視化控件，但在程序?qū)嶋H運(yùn)行過程中是完全不可見的。.6.1 畫布獲取全局變量6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì) 邏輯功能設(shè)計(jì)的第一步是定義一個全局變量paintsize，表示繪制圓形圖案的半徑。定義全局變量要從Built-In Definition Variabl

14、e獲取全局變量模塊，被拖拽到編輯區(qū)后會自動命名為Variable1，如下圖所示。.6.1 畫布給paintsize全局變量賦值6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì) 點(diǎn)擊全局變量的名稱部分“Variable1”，將其更為“paintsize”。通過Built-In Math Number添加一個數(shù)值模塊，將數(shù)值更改為4。這樣便將全局變量paintsize賦值為4，如右圖所示。paintsize變量的值為4，表示繪制圓形圖案的半徑為4個像素。大圓形按鈕和“小圓形按鈕點(diǎn)擊事件 邏輯功能設(shè)計(jì)的第二步是響應(yīng)“大圓形按鈕和“小圓形按鈕的點(diǎn)擊事件。這兩個按鈕可以控制繪制圓

15、形圖案半徑大小，“大圓形按鈕將半徑設(shè)置為10即paintsize = 10），“小圓形按鈕將半徑設(shè)置為4即paintsize = 4）,如下圖所示。.6.1 畫布畫布觸撞事件6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì) 下面添加響應(yīng)畫布的觸碰事件，即在畫布上以paintsize變量作為半徑，以觸碰點(diǎn)x，y作為中心點(diǎn)繪制圓形圖案。 在My Blocks DrawingCanvas 中獲取畫布的DrawingCanvas.Touched 與DrawingCanvas.DrawCircle事件，并將二者組合。再將My Blocks My Definitions 中將 x、

16、 y和paintsize全局變量添加到DrawingCanvas.DrawCircle模塊上，這樣就完了畫布觸碰事件的處理。如下圖所示。.6.1 畫布畫布拖拽事件6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì) 添加響應(yīng)畫布的拖拽事件，即在畫布上繪制線條。 在My Blocks DrawingCanvas 中獲取畫布的DrawingCanvas.Dragged事件與DrawingCanvas.DrawLine，并將二者組合。再將My Blocks My Definitions 中選取 prevX、prevY、currentX、currentY添加到DrawingCanv

17、as.DrawLine模塊，完成畫布拖拽事件的處理。如右圖所示。.6.1 畫布 畫筆顏色修改按鈕事件6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì) 添加響應(yīng)三個修改畫筆顏色按鈕的事件，且初始化的時候設(shè)置畫筆的顏色。先從My Blocks DrawingCanvas DrawingCanvas.PaintColor獲取到控制畫筆顏色的模塊，在Built-In Colors中分別獲取表示紅色、綠色和藍(lán)色的模塊，將顏色模塊與DrawingCanvas.PaintColor屬性組合在一起，就可以實(shí)現(xiàn)修改畫筆的顏色。然后再將這些組合模塊分別與RedButton.Click、Gr

18、eenButton.Click和BlueButton.Click組合完成響應(yīng)畫筆顏色修改按鈕的事件，如下圖所示。.6.1 畫布 畫筆顏色修改按鈕事件6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì) 畫筆的缺省顏色為黑色，而PaintPic示例中畫筆只有紅色、綠色和藍(lán)色可選，這樣需要在屏幕頁初始化的時候修改畫筆顏色，將畫筆顏色修改為紅色。 屏幕頁初始化模塊在My Blocks Screen1 Screen1.Initialize中，該模塊會在屏幕頁啟動時被調(diào)用，一般用來初始化控件的屬性等操作。 畫布清空邏輯 清空畫布有兩種方法方法，一種通過點(diǎn)擊“清空畫布按鈕實(shí)現(xiàn)，另一種通

19、過晃動手機(jī)實(shí)現(xiàn)。 清空畫布的方法在My Blocks DrawingCanvas DrawingCanvas.Clear，該模塊會將畫布上所有畫筆所繪制的內(nèi)容全部清除，但畫布背景內(nèi)容不會有變化。.6.1 畫布6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì) 畫布清空邏輯 加速度傳感器的晃動事件在My Blocks AccelerometerSensor1 AccelerometerSensor1.Shaking中，該事件在晃動手機(jī)時被調(diào)用，經(jīng)DrawingCanvas.Clear模塊與其組合，就可在晃動手機(jī)時清空畫布內(nèi)容。 畫布清空邏輯兩種實(shí)現(xiàn)方法邏輯模塊如下圖：.6.

20、1 畫布6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì)畫布背景更換邏輯 畫布背景更換功能同樣是支持兩種更換方法，一種是點(diǎn)擊“選中圖片按鈕，在手機(jī)的圖片庫里面選擇畫布背景，另一種是通過手機(jī)拍照，將拍攝的圖片更換為畫布背景。 更換畫布背景圖片通過修改My Blocks DrawingCanvas DrawingCanvas.BackgroundImage屬性實(shí)現(xiàn)，將指定的圖像image賦值給BackgroundImage屬性，就完成了畫布背景的修改。 除了從相機(jī)獲取圖像外，還可從ImagePicker獲取背景圖片。ImagePicker的AfterPicking方法在用戶

21、選擇圖片后被調(diào)用，該方法與修改畫布背景的模塊組合在一起，并將ImangePicker.Selection作為圖像參數(shù)傳遞給BackgroundImage屬性，就可以實(shí)現(xiàn)畫布背景的更改。.6.1 畫布6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì)畫布背景更換邏輯 相機(jī)控件在用戶點(diǎn)擊TakepicButton按鈕時，調(diào)用TakePicture方法拍照，在獲取到照片后，會立即調(diào)用AfterPicture方法，用獲取的照片修改畫布背景。畫布背景更換邏輯.6.1 畫布6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì)畫布內(nèi)容保存 該方法的實(shí)現(xiàn)是通過調(diào)用Dr

22、awingCanvas.Save方法，直接將畫布內(nèi)容保存到手機(jī)的SD卡中，并將該方法返回的文件路徑傳遞給SaveStatusLabel.Text屬性，顯示在界面的最下方。畫布內(nèi)容保存為文件.6.1 畫布6.1.4 畫圖板示例PaintPicn示例PaintPic邏輯功能設(shè)計(jì)模塊編輯器中全部邏輯功能如下圖所示。.6.1 畫布6.1.4 畫圖板示例PaintPicn示例PaintPic運(yùn)行效果 PaintPic示例在手機(jī)上的運(yùn)行結(jié)果如右圖所示。在模擬器上運(yùn)行該示例時，則不可以使用手機(jī)拍照和通過晃動手機(jī)清空畫布功能。.6.1 圖像精靈6.2.1 精靈介紹 圖像精靈(ImageSprite)是一種可在

23、畫布中自由移動的圖像，并可與球體Ball）、其它圖像精靈和畫布邊緣產(chǎn)生碰撞效果，因此圖像精靈經(jīng)常用于游戲開發(fā)。下圖是游戲中的圖像精靈。.6.2 圖像精靈6.2.2 精靈使用 將精靈放置在畫布上，精靈就接受觸摸或拖動操作，如果設(shè)置精靈自身關(guān)于運(yùn)動的一些屬性，精靈則可以按照預(yù)定的方式移動。動畫類別中的圖像精靈 例如，為實(shí)現(xiàn)一個圖片精靈每隔1000毫秒向左側(cè)移動10個像素，則需設(shè)置其速度(Speed)屬性值為10像素，時間間隔(Interval)屬性為1000毫秒，方向Heading屬性設(shè)置為180度，激活Enabled屬性設(shè)置為True。精靈的旋轉(zhuǎn)屬性Rotates設(shè)置為True時，圖片會根據(jù)精靈

24、的朝向變化進(jìn)行轉(zhuǎn)動，設(shè)置好的參數(shù)如右圖。.6.2 圖像精靈6.2.2 精靈使用 圖像精靈支持的屬性如右表。其中屬性Picture需要指定一個圖片，是精靈在畫布上的圖像。屬性Rotates表示是否允許精靈旋轉(zhuǎn)，如果允許，圖像精靈在改變移動方向Heading時，圖片會自動旋轉(zhuǎn)以匹配新的移動方向。 X和Y是圖像精靈在畫布上的坐標(biāo)，X為0時，表示圖像精靈已經(jīng)到達(dá)畫布的左側(cè)邊界；Y為0時，則表示圖片精靈已經(jīng)到達(dá)畫布的上邊界。 Enabled屬性表示圖像精靈是否會被激活，如果精靈與移動相關(guān)的屬性被設(shè)置，同時Enabled為true，則圖像精靈會在畫布上移動。 Visible屬性決定了圖像精靈在畫布上是否可

25、見。n精靈屬性屬性屬性說明說明Picture精靈圖片Enabled是否激活I(lǐng)nterval移動頻率Rotates是否允許精靈旋轉(zhuǎn)Heading移動方向Speed移動速度X所在位置橫坐標(biāo)Y所在位置縱坐標(biāo)Width圖片寬度Height圖片高度Visible是否可見.6.2 圖像精靈6.2.2 精靈使用 屬性Heading是圖像精靈的移動方向，取值范圍是0到360，其中，0表示水平向右，90代表垂直向上，180代表水平向左，270表示垂直向下。精靈朝向數(shù)值代表含義如下圖所示。n精靈屬性.6.2 圖像精靈6.2.2 精靈使用 圖片精靈支持的事件包括碰撞事件、拖拽事件、觸壁時間、非碰撞事件和觸摸事件等，

26、所支持的全部事件如下表所示。n精靈事件事件事件說明說明CollidedWith碰撞事件EdgeReached觸壁事件NoLongerCollidingWith不再碰撞事件Touched觸摸事件Dragged拖拽事件Flung快速劃動事件TouchUp觸碰抬起事件TouchDown觸碰按下事件.6.2 圖像精靈6.2.2 精靈使用n精靈事件 圖片精靈的事件模塊如下圖所示。碰撞事件、不再碰撞事件和觸壁事件屬于碰撞檢測事件，這部分內(nèi)容將在“高級動畫功能小節(jié)介紹。.6.2 圖像精靈6.2.2 精靈使用n精靈方法 精靈控件的方法實(shí)現(xiàn)了精靈的移動、反彈和碰撞檢測動作。圖像精靈支持的方法如右表和右圖所示。方

27、法方法說明說明Bounce精靈從邊緣反彈ColldingWith檢測精靈是否碰撞MoveIntoBounds精靈超出邊界時將精靈移至邊界內(nèi)MoveTo將精靈移動到指定坐標(biāo)點(diǎn)PointTowards將移動方向朝向另一個精靈PointInDirection將移動方向朝向指定坐標(biāo)點(diǎn) ColldingWith方法用來檢測圖像精靈是否發(fā)生碰撞，返回值為true時，說明與指定精靈或畫布邊緣發(fā)生碰撞；返回值為false時，則未發(fā)生碰撞。 MoveIntoBounds方法是將超出邊緣的控件，重新移動至畫布邊緣范圍內(nèi)。.6.2 圖像精靈6.2.3 打地鼠示例Mole Mole示例是經(jīng)典的“打地鼠游戲，鼴鼠在5個

28、洞中隨機(jī)出現(xiàn)，但出現(xiàn)的時間非常短暫，因此要集中精力快速點(diǎn)擊洞口的鼴鼠，每次成功的點(diǎn)擊鼴鼠得1分，積累到10分游戲勝利。Mole示例的運(yùn)行界面如右圖所示。.6.2 圖像精靈6.2.3 打地鼠示例Mole 點(diǎn)擊“Play按鈕開始游戲，鼴鼠會隨機(jī)出現(xiàn)在洞口，每次點(diǎn)擊鼴鼠將會產(chǎn)生一次震動反饋，同時“分?jǐn)?shù)加1。在游戲進(jìn)行中，如果用戶點(diǎn)擊“Reset按鈕，分?jǐn)?shù)將清零，在重新點(diǎn)擊“Play按鈕后重新開始游戲。游戲積累到10分后，將出現(xiàn)“恭喜你，你贏了!”的游戲勝利提示，并發(fā)出“叮咚聲音，如右圖所示。.6.2 圖像精靈6.2.3 打地鼠示例Mole 在Mole示例的資源中，共有5張圖片和1個聲音文件，這些資源

29、都是游戲中不可缺少的，資源的說明如下表。文件文件說明說明PlayButton.png“Play”按鈕圖片ResetButton.png“Reset”按鈕圖片grass.jpgCanvas1畫布的背景圖片hole.png洞口精靈的圖片mole.png鼴鼠精靈的圖片DingDong.mp3游戲獲勝的“叮咚”聲音.6.2 圖像精靈6.2.3 打地鼠示例Mole 時鐘MoleClock控制著鼴鼠精靈周期性的移動，因此設(shè)置MoleClock時鐘的Enable屬性為false，讓時鐘在用戶點(diǎn)擊“Play按鈕后再啟動。時間間隔TimerInterval為10000毫秒10秒），TimeAlwaysFires

30、設(shè)置為true。 將聲音控件Sound的Source屬性設(shè)置為已經(jīng)上傳的DingDong.mp3文件。 將標(biāo)簽WinTextValueLabel的Enable屬性設(shè)為false，在用戶游戲勝利時再顯示該標(biāo)簽內(nèi)容。nMole示例界面設(shè)計(jì).定義全局變量n示例Mole邏輯功能設(shè)計(jì) 模塊編輯器中，首先定義兩個全局變量holes和currentHole，如下圖所示。Holes是表示洞口圖像精靈的列表，在定義時先調(diào)用“make a list方法獲得一個空列表，在屏頁初始化時動態(tài)添加元素。currentHole表示當(dāng)前洞口的圖像精靈，在自定義的MoveMole函數(shù)中使用。6.2 圖像精靈6.2.3 打地鼠示

31、例Mole.屏幕頁Screen1的Initialize事件n示例Mole邏輯功能設(shè)計(jì) 屏幕頁的初始化事件完成三項(xiàng)工作，如右圖所示：（1初始化五個表示洞口的圖像精靈的Picture屬性；（2設(shè)置時鐘MoleClock的TimeEnabled屬性為false；（3設(shè)置圖片精靈Mole的Enabled屬性為false。6.2 圖像精靈6.2.3 打地鼠示例Mole.Advanced區(qū)的模塊n示例Mole邏輯功能設(shè)計(jì) 初始化圖片精靈Hole1到Hole5有兩種方法：（1在界面編輯器中設(shè)置其Picture屬性為上傳文件hole.png；（2在屏幕頁初始化函數(shù)中動態(tài)修改Hole1到Hole5的Pictur

32、e屬性。本示例使用第二種方法。 6.2 圖像精靈6.2.3 打地鼠示例Mole 這里用到了Advanced Any ImangeSprite ImageSprite.Picture模塊，如右圖所示。Advanced區(qū)的模塊可以對所有同類型的控件進(jìn)行操作，比如修改所有標(biāo)簽的文字、修改所有按鈕的顏色等。.Advanced區(qū)的模塊n示例Mole邏輯功能設(shè)計(jì) ImageSprite.Picture模塊，如下圖所示，槽component用來拼接圖像精靈ImageSprite模塊，槽to用來拼接圖片Picture屬性。Advanced區(qū)的其它模塊有著與ImageSprite.Picture模塊相似的結(jié)構(gòu)和

33、槽，可以分別拼接各自支持的控件類型和屬性值。 6.2 圖像精靈6.2.3 打地鼠示例Mole.n初始化holes列表n示例Mole邏輯功能設(shè)計(jì) 全局變量holes的初始化是通過調(diào)用Built-In Lists add items to list方法，將所有表示洞口的圖像精靈控件加載到全局變量holes中，如右圖所示。6.2 圖像精靈6.2.3 打地鼠示例Mole.循環(huán)調(diào)用ImageSprite.Picture模塊n示例Mole邏輯功能設(shè)計(jì) 在foreach循環(huán)中，調(diào)用ImageSprite.Picture模塊，將每個表示洞口圖像精靈的Picture屬性都賦值為hone.png。如下圖所示。6.

34、2 圖像精靈6.2.3 打地鼠示例Mole.MoveMole函數(shù)n示例Mole邏輯功能設(shè)計(jì) 為了重復(fù)利用已有代碼，將鼴鼠的移動做成函數(shù)MoveMole，這個函數(shù)將鼴鼠的圖像精靈隨機(jī)的出現(xiàn)在五個洞口中的任意一個，邏輯模塊如下圖所示。 MoveMole函數(shù)函數(shù)首先調(diào)用pick random item方法，在hones列表中隨機(jī)選取一個圖像精靈，賦值給全局變量currentHole。后調(diào)用鼴鼠圖像精靈Mole的MoveTo方法，將currentHole中圖像精靈的坐標(biāo)X和坐標(biāo)Y作為參數(shù),傳遞給MoveTo方法，這樣就可以將鼴鼠圖像精靈移動到全局變量currentHole所代表的洞口上面。6.2 圖像

35、精靈6.2.3 打地鼠示例Mole.MoveClock時鐘的Timer方法n示例Mole邏輯功能設(shè)計(jì) 在時鐘MoleClock的觸發(fā)事件中，只調(diào)用MoveMole函數(shù)，移動表示鼴鼠的圖像精靈，如下圖所示。6.2 圖像精靈6.2.3 打地鼠示例Mole.StartButton和ResetButton按鈕點(diǎn)擊事件n示例Mole邏輯功能設(shè)計(jì) 在游戲初始化階段，MoleClock時鐘不運(yùn)行，點(diǎn)擊“Play按鈕后，MoleClock時鐘才開始運(yùn)行。在點(diǎn)擊“Reset按鈕，或者用戶游戲勝利后，時鐘MoleClock又變?yōu)椴贿\(yùn)行狀態(tài)。時鐘是否運(yùn)行，由屬性TimeEnabled控制。 表示鼴鼠的圖像精靈Mol

36、e的Enabled屬性的邏輯與時鐘MoleClock一樣，也是在用戶點(diǎn)擊“Play按鈕后允許用戶點(diǎn)擊(true)。在點(diǎn)擊“Reset按鈕后，變?yōu)椴豢牲c(diǎn)擊(false)。 按鈕事件中還完成了分?jǐn)?shù)歸零和隱藏勝利信息等功能。6.2 圖像精靈6.2.3 打地鼠示例Mole.圖像精靈Mole的Touched事件n示例Mole邏輯功能設(shè)計(jì) 為在游戲啟動后立即產(chǎn)生鼴鼠移動的效果，在StartButton的點(diǎn)擊事件中主動調(diào)用MoveMole函數(shù)，完成鼴鼠的一次移動。 在Mole的Touched事件中，用戶每次觸碰精靈，都要調(diào)用一次MoveMole函數(shù)，移動一次鼴鼠，并發(fā)出震動反饋(Sound.Vibrate)

37、。若游戲分?jǐn)?shù)(ScoreVaueLabel.Text)小于10，則每此觸碰都會將游戲分?jǐn)?shù)增加1。若已大于等于10，則游戲結(jié)束，發(fā)出游戲勝利的音效(Sound.Play)，并停止時鐘(MoleClock)，使鼴鼠圖像精靈失效(Enabled為false)，提示勝利消息(WinTextValueLable.Visible為true)。6.2 圖像精靈6.2.3 打地鼠示例Mole.Mole示例的全部邏輯模塊A）n示例Mole邏輯功能設(shè)計(jì)6.2 圖像精靈6.2.3 打地鼠示例Mole.Mole示例的全部邏輯模塊B）n示例Mole邏輯功能設(shè)計(jì)6.2 圖像精靈6.2.3 打地鼠示例Mole.6.3 高級

38、動畫功能6.3.1 碰撞檢測 碰撞檢測是在精靈的運(yùn)動過程中，檢測到精靈自身邊緣與其他精靈或畫布邊緣接觸的技術(shù)，在開發(fā)游戲過程中經(jīng)常會被使用到。 下圖是瘋狂小鳥的游戲截圖，這其中就大量使用到了碰撞檢測技術(shù)。例如小鳥在飛行過程中碰撞到石塊，小鳥和石塊都要有相應(yīng)的反應(yīng)，小鳥會彈回去，石塊會裂開。再例如兩個落在一起的小豬，上方的小豬和下方的小豬只可以邊界互相接觸，而不能夠重合。.6.3 高級動畫功能6.3.1 碰撞檢測 碰撞檢測技術(shù)的實(shí)現(xiàn)要運(yùn)用數(shù)學(xué)和物理知識，在不同的情況下采用不同的碰撞檢測方式，本節(jié)主要介紹碰撞檢測的基本原則和使用方式。 一般情況下，只有游戲中的物體發(fā)生移動后才有必要進(jìn)行碰撞檢測，所

39、以碰撞檢測的流程分為三步：更新物體位置 進(jìn)行碰撞檢測 碰撞處理。 實(shí)現(xiàn)碰撞檢測通常包括三個方面的內(nèi)容。 首先，確定檢測對象。游戲在運(yùn)行中會有很多實(shí)體對象，在進(jìn)行碰撞檢測時并不需要對所有的實(shí)體對象都檢測一遍，如靜止的寶箱沒有必要去檢測和另外的寶箱是否發(fā)生了碰撞。所以在開始碰撞檢測之前，首先要確定碰撞檢測的對象是什么。 其次，檢測是否碰撞，這是檢測的核心環(huán)節(jié)。在這個環(huán)節(jié)需要綜合考慮游戲本身的需求，以及運(yùn)行平臺的性能等問題，合理的選擇碰撞檢測的算法。 最后是處理碰撞。當(dāng)檢測到碰撞發(fā)生的時候，就需要根據(jù)碰撞的類型進(jìn)行相應(yīng)的處理，例如炮彈會在碰到目標(biāo)后爆炸并給目標(biāo)帶來傷害。.6.3 高級動畫功能6.3.

40、2 球的使用 球體(Ball)是特殊的圖像精靈，具有與圖像精靈相似的屬性，完全相同的事件和方法。不同之處在于球體不能夠有自定義的外觀，但可以改變球的大小和顏色。.6.3 高級動畫功能6.3.2 球的使用 球體的屬性包括球體大小、顏色、移動頻率、移動方向和移動速度等，所有屬性參考下表。n球體屬性屬性屬性說明說明Radius球的半徑PaintColor球體顏色Enabled是否啟動球體Interval球體移動頻率Visible球體是否可見Heading球體移動方向Speed球體移動速度.6.3 高級動畫功能6.3.2 球的使用 球體與圖像精靈具有相同的事件和方法，下面的內(nèi)容主要介紹與碰撞檢測相關(guān)的

41、事件和方法。球體中與碰撞檢測相關(guān)的事件有碰撞事件、不再碰撞事件和觸壁事件。碰撞事件CollidedWith是當(dāng)前圖像精靈與其它精靈或畫布邊緣發(fā)生碰撞時產(chǎn)生的事件，該事件的參數(shù)other是被碰撞精靈的名稱。n球體事件與方法碰撞事件.6.3 高級動畫功能6.3.2 球的使用 不再碰撞事件NoLongerCollidingWith是當(dāng)前精靈與已經(jīng)產(chǎn)生碰撞的精靈分開時產(chǎn)生的事件，是碰撞事件的對立事件。當(dāng)兩個精靈產(chǎn)生碰撞時，先發(fā)生的是碰撞事件，如果兩個精靈被彈開，隨即便會產(chǎn)生不再碰撞事件。該事件的參數(shù)other1是被碰撞精靈的名稱。n球體事件與方法不再碰撞事件.6.3 高級動畫功能6.3.2 球的使用

42、觸壁事件EdgeReached在圖像精靈移動到畫布邊緣時發(fā)生。當(dāng)一個精靈運(yùn)動到畫布邊緣時，則會產(chǎn)生觸壁事件，如果不對此事件做任何處理，精靈則會移動出畫布邊界；相反，如果在觸壁事件中將精靈的運(yùn)動方向逆轉(zhuǎn)，則精靈又會重新回到畫布中。n球體事件與方法觸壁事件.6.3 高級動畫功能6.3.2 球的使用 觸壁事件的參數(shù)edge表示所到達(dá)的畫布邊緣，用數(shù)字表示畫布不同的邊緣，其具體的含義如下圖所示。n球體事件與方法1表示上方north）2表示右上northeast）3表示右側(cè)east）4表示右下southeast）-1表示下方south）-2表示左下方southwest）-3表示左側(cè)west）-4表示左上

43、方northwest）.6.3 高級動畫功能6.3.2 球的使用 在球體的方法中，最常用的就是Bounce方法，與EdgeReached事件配合使用可將球體從畫布邊緣反彈回畫布中。當(dāng)EdgeReached事件檢測到碰撞后，調(diào)用Bounce方法，并將EdgeReached事件檢測到的碰撞邊緣Edge參數(shù)傳遞給Bounce方法，精靈可以根據(jù)此參數(shù)進(jìn)行邊緣反彈。n球體事件與方法邊緣檢測事件邏輯模塊.6.3 高級動畫功能6.3.3 方向傳感器 在介紹“乒乓球示例之前，先來說明一下如何使用手機(jī)的方向傳感器。方向傳感器控件(OrientationSensor)是一個非可視化控件，可用來測定手機(jī)的三軸角度的

44、變化。界面編輯器中的方向傳感器控件如下圖所示。.6.3 高級動畫功能6.3.3 方向傳感器 將手機(jī)正面向上的放置在水平桌面上，沿手機(jī)屏幕水平方向左右定義為x軸，水平方向后前定義為y軸，垂直于手機(jī)屏幕的方向上下定義為z軸，手機(jī)三個維度如下圖所示。 方向傳感器可以反饋三個數(shù)據(jù)Roll、Pitch和Azimuth。方向傳感器的數(shù)據(jù)單位是度，且有正負(fù)之分。 Roll表示手機(jī)x軸與水平面的夾角，范圍從-90到90。手機(jī)處于水平放置時數(shù)值為0，向左側(cè)傾斜時數(shù)值由0遞增到90，向右傾斜時數(shù)值由0遞減至-90。 Pitch表示手機(jī)y軸與水平面的夾角，范圍從-90到90。手機(jī)水平放置時為0，y軸正方向朝下傾斜時

45、數(shù)值由0增加到90，y軸正方向朝上傾斜時數(shù)值由0遞減至-90。 Azimuth表示方位，手機(jī)水平放置時磁北極和y軸的夾角，范圍從0到360。y軸正方向指向正北時為0，指向正東為90，指向正南為180，指向西東為270。.6.3 高級動畫功能6.3.3 方向傳感器 方向傳感器控件通過相關(guān)屬性包括方向傳感器的啟動、方位角和設(shè)備翻轉(zhuǎn)大小等，來確定設(shè)備的方向改變。方向傳感器屬性說明如下表。n方向傳感器屬性屬性屬性說明說明Available方向傳感器是否可用Enabled啟用方向傳感器Azimuth方位角Pitch垂直翻轉(zhuǎn)角度Roll水平轉(zhuǎn)動角度Magnitude傾斜程度Angle傾斜角Magnitud

46、e，表示手機(jī)傾斜程度，是一個介于0和1之間的數(shù)。Angle，表示傾斜角大小。.6.3 高級動畫功能6.3.3 方向傳感器 方向傳感器只有一個事件OrientationChanged，在手機(jī)方向發(fā)生變化時產(chǎn)生，返回Roll、Pitch和Azimuth數(shù)據(jù)。即使靜止的放置在水平面上，手機(jī)方向傳感器仍然能夠檢測到微小的方向變化，所以可以認(rèn)為OrientationChanged事件是持續(xù)發(fā)生的事件，事件中的處理過程務(wù)必要簡單、高效。n方向傳感器事件方向傳感器的OrientationChanged事件.6.3 高級動畫功能6.3.3 方向傳感器 Orientation示例可令讀者使用自己的手機(jī)感受如何使

47、用方向傳感器，以及分析Roll、Pitch和Azimuth數(shù)據(jù)的具體含義。Orientation示例的運(yùn)行界面如下圖所示。n方向傳感器應(yīng)用示例Orientation.6.3 高級動畫功能6.3.3 方向傳感器Orientation示例界面設(shè)計(jì)圖如下圖所示。n方向傳感器應(yīng)用示例Orientation.6.3 高級動畫功能6.3.3 方向傳感器Orientation示例的全部邏輯模塊如下圖所示。n方向傳感器應(yīng)用示例Orientation.6.3 高級動畫功能6.3.4 乒乓球示例Pong 本節(jié)介紹一個經(jīng)典的小游戲“乒乓球”，游戲中的小球會向畫面下方以一定角度掉落，通過控制畫面下方的球板，阻止小球落

48、到地面上。小球碰到球板后會彈起，每次接觸球板都會得1分。游戲中可以使用觸碰的方法控制球板，也可以使用方向傳感器控制球板。Pong示例運(yùn)行界面如右圖所示。.6.3 高級動畫功能6.3.4 乒乓球示例Pong Pong示例使用的控件有球體、圖像精靈、畫布、方向傳感器、音效播放器，以及常見的按鈕、標(biāo)簽和復(fù)選框等控件。 將所有游戲需要的資源文件上傳到App Inventor中。Pong示例的界面設(shè)計(jì)如右圖所示。 因?yàn)橛螒蚴强v向設(shè)計(jì)的，因此需要關(guān)閉手機(jī)的屏幕旋轉(zhuǎn)功能，即將Screen1的ScreenOrientation屬性設(shè)置為Portrait。音效播放器的Source屬性設(shè)置為DingDong.mp

49、3，將球體的初始位置坐標(biāo)設(shè)置為X為20，Y為20，球體的半徑(Radius)也設(shè)置為20。.屏幕頁的Initialize事件n示例Pong邏輯功能設(shè)計(jì) 在屏幕頁的Initialize事件中，將球體Enabled屬性設(shè)置為false，避免球體在沒有正式開始游戲前移動。還要將方向傳感器的Enabled屬性設(shè)置為false，在用戶手動選擇復(fù)選框“傳感器控制后，才可以啟動傳感器。6.3 高級動畫功能6.3.4 乒乓球示例Pong屏幕頁的Initialize事件.復(fù)選框的Changed事件n示例Pong邏輯功能設(shè)計(jì) 復(fù)選框“傳感器控制的Changed事件的邏輯如圖6.66所示。在每次復(fù)選框修改事件中，判斷復(fù)選框的狀態(tài)，如果復(fù)選框被選中，則啟動方向傳感器，否則就關(guān)閉方向傳感器。