繪圖動畫元件

使用者介面  多媒體 繪圖動畫:(一)畫布、(二)圖像精靈、(三)球形精靈 感測器&通訊連接專題雲端應用
2016/01/22 謝碧景(c)編製更新 

 學習目標 MIT App Inventor 2繁體中文: Create apps! 

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

一、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(球形精靈)元件如下:
 屬性  說明 
 圖片 設定精靈】的背景圖。球形精靈】無此屬性。
 旋轉 設定精靈】是否依移動方向旋轉。球形精靈】無此屬性。
 半徑 設定球形精靈】的半徑。精靈】無此屬性。
 方向 設定精靈】球形精靈】的移動方向:→0度、↑90度、←180度、↓270 
 速度 設定精靈】球形精靈】每次移動的速度 
 間隔 設定精靈】球形精靈】多久移動一次。
 X座標 設定精靈】球形精靈】相對於畫布的的X座標。
 Y座標  設定精靈】球形精靈】相對於畫布的的Y座標。
 Z座標 設定精靈】球形精靈】的層次。 


(二)常用方法
    • ImageSprite(圖片精靈或 Ball(球形精靈)元件:
 方法   說明
 反彈(邊緣數值) 精靈】球形精靈】元件從邊緣依邊緣數值的方向反彈。 
 碰撞檢測(其他精靈) 檢查精靈】球形精靈】元件是否與其他精靈(代表另一個元件)發生碰撞, 
 移動到邊界()  精靈】球形精靈】元件超出邊緣時,將它移回邊界內。 
 移動到指定位置(X,Y) 精靈】球形精靈】元件移動到(X座標,Y座標)位置。

 到達邊界(edge即方位):

*註:參閱內建指令說明繪圖動畫(Drawing and Animation)ImageSprite(圖像精靈)元件Ball(球形精靈)元件《摘自: AppInventor中文學習網指令中文化  

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

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

使用元件及其屬性設定:
*註:
1.Sound(音效)元件在Media(多媒體)類別中。
2.ImageSprite圖像精靈元件必須放入畫布中,方能使用。

2.程式設計(Blocks)頁面

    • 語系→繁體中文:

    • 語系→English:

homework 練習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)
遊戲開始:
  遊戲中,紀錄得分:




 工具網:

 Google AutoDraw 人工智慧的線上繪圖服務:https://www.autodraw.com/
 MobilesWall:免費手機、平板電腦高質感桌布 http://www.mobileswall.com/
 IconsPedia:Icons & Icon Packs→Download Free PNG Icons。
 FindSounds 特效音樂。
 最佳筆記App:用Evernote 整理您所有筆記。
 Gif Maker:Create Animated Gifs Online 線上建立 gif 動畫 http://freegifmaker.me/