繪圖動畫元件

2016/01/22 謝碧景(c)編製更新

學習目標

  • 學會Drawing and Animation(繪圖動畫)類別中【Canvas(畫布)】元件之設計與應用。

  • 學會【ImageSprite(圖像精靈)】元件之設計與應用。

  • 學會【Ball(球形精靈)】元件之設計與應用。

◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)

一、Canvas 畫布元件

  • Canvas(畫布)元件位於左側元件面板(Palette)之『繪圖動畫(Drawing and Animation)』類別中，畫布如一張白紙可在畫布上繪製點、直線、實心圓、文字等圖形，亦可將畫布的圖形存檔。

  • App Inventor 2 設計含有動畫或遊戲的程式，需使用Canvas(畫布)配合ImageSprite(圖片精靈)和Ball(球形精靈)元件，且畫布上只允許布置『繪圖動畫』類別之圖片精靈和球形精靈元件。

  • Canvas(畫布)座標是以畫布左上角(0,0)為基準點，向右為正，向下為正的相對座標。

  • 常用方法如下：

＊註：參閱內建指令說明：Drawing and Animation(繪圖動畫)→Canvas(畫布)《摘自： AppInventor中文學習網→指令中文化》

二、ImageSprite 圖像精靈

    • ImageSprite(圖像精靈)及Ball(球形精靈)元件位於左側元件面板(Palette)之『Drawing and Animation(繪圖動畫)』類別中。

    • 當ImageSprite(圖像精靈)碰撞到Canvas(畫布)的邊界時，會觸發『到達邊界』事件，並使用『反彈』方法將ImageSprite(圖像精靈)反彈。

    • ImageSprite(圖像精靈)及Ball(球形精靈)是為動畫及遊戲而設計的元件，必須配合Canvas(畫布)元件；兩者幾乎擁有相同的屬性、方法和事件，差別在ImageSprite(圖像精靈)可以外部圖片設定為『背景圖』，且有『旋轉』屬性；而Ball(球形精靈)只能以半徑設定其大小，以畫筆顏色設定單一顏色背景。

(一)常用屬性

    • ImageSprite(圖像精靈) 或 Ball(球形精靈)元件如下：

(二)常用方法

    • ImageSprite(圖片精靈) 或 Ball(球形精靈)元件：

＊註：參閱內建指令說明→ImageSprite(圖像精靈)元件、Ball(球形精靈)元件。

到達邊界
(edge即方位)

  • 練習12：在畫布中央放置一個球，當球被按下，球會以任意方向發出，球若碰到畫布邊緣則反彈，球若碰到畫布下邊界則會發出音效聲( Pop.wav、ball.png)。【重點：學會Drawing and Animation(繪圖動畫)類別中Canvas畫布、ImageSprite圖像精靈等元件的設計與應用。】(檔名：Ball.aia)

1.畫面編排(Designer)頁面：即版面配置頁面，如下圖。

  • 使用元件及其屬性設定

＊註：ImageSprite圖像精靈元件必須放入畫布中，方能使用。

2.程式設計(Blocks)頁面：

  • 語系→繁體中文：

  • 語系→English：

  • 練習13：射擊蝙蝠，蝙蝠在空中左右飛翔，當碰到左右邊界即返回飛翔，按下螢幕下方紅點，即會向上射擊蝙蝠，當紅點觸碰到蝙蝠則得1分。【重點：學會『繪圖動畫(Drawing and Animation)』類別中Canvas畫布、Ball(球形精靈)元件的設計與應用】。(檔名：Shoot.aia) 蝙蝠

1. 畫面編排(Designer)頁面：

2.程式設計(Blocks)頁面：

(1)建立 Score 變數，紀錄遊戲得分，及程式初始化：首先紅點暫停，蝙蝠飛行速度為20，接著呼叫自訂程序ShowScore 顯示得分。

  • 語系→繁體中文：

(2)自訂程序ShowScore：分數以藍色，字體大小18，在(0,30)位置顯示得分文字；紅點暫停並移至初始位置(160,360)，準備進行發射。

(3)當紅點被壓下即以速度50向上方向(註：移動方向→0度、↑90度、←180度、↓270度)發射，當紅點碰到邊界，則暫停，並移至初始位置(160,360)，準備再次發射。

(4)當蝙蝠碰到左邊界，則設定背景圖為向右飛翔圖檔；當蝙蝠碰到右邊界，則設定背景圖為向左飛翔圖檔，將蝙蝠反彈，即反向飛翔。此外，蝙蝠若碰到紅點則分數加1，並更新左上方分數。

  • 語系→English：

(三)拖曳事件

  • 拖曳ImageSprite(圖像精靈)元件會觸發被拖曳事件，如下：

＊註：參數代表意義：

(起點x座標,起點y座標) 為第一次觸碰的點。

(前點x座標,前點y座標) 為上一次的觸碰點。

(當前x座標,當前y座標) 為目前的觸碰點。

＊對圖像精靈元件拖曳，即：

圖像精靈1.X座標 = 圖像精靈1.X座標+(當前x座標 - 前點x座標)

圖像精靈1.Y座標 = 圖像精靈1.Y座標+(當前Y座標 - 前點Y座標)

(四)Z座標屬性

  • 畫布上若有多個動畫元件，會將被拖曳的元件移至最上層，而ImageSprite(圖像精靈)及Ball(球形精靈)元件的Z座標屬性代表該元件的層次，即Z座標越大代表越上層。預設Z座標屬性為1.0，在App Inventor 2會將後建立或較後拖曳的圖像精靈元件放置在最上層。

  • 延伸思考：乒乓球遊戲：當球被按下，球會以任意方向發出，球若碰到畫布邊緣則反彈，遊戲者可左右拖曳移動畫布下方之擋板，當球碰到下方擋板可得10分，球若碰到畫布下邊界則結束遊戲，並將球移至螢幕中央；畫布左上方會記錄得分。模擬器執行畫面如下圖。(專案名稱：PingPong.aia)

◆延伸思考：乒乓球遊戲：當球被按下，球會以任意方向發出，球若碰到畫布邊緣則反彈，遊戲者可左右拖曳移動畫布下方之擋板，當球碰到下方擋板可得10分，球若碰到畫布下邊界則結束遊戲，並將球移至螢幕中央；畫布左上方會記錄得分。模擬器執行畫面如下圖。(專案名稱：PingPong.aia)

  • 遊戲開始：

  • 遊戲紀錄得分