網頁

2017年11月15日 星期三

手機 App 程式設計- AppInventor2-畫布的應用-擲球 (Fling ball)

範例圖片:

建立新專案
在  「My Projects」  , 選 「Start  new project」。


輸入 專案的名稱,名稱只能使用大小寫字母、數字及「 _」符 號,名稱的第一個字元必須是英文字母,很像 Visual Basic 命名規則,但不能使用中文字。
我輸入 : flingball,按 「OK」。

將 Screen1 元件的 title改為 擲球

在  Drawing and Animation  選單下面 選 「Canvas」(畫布)元件。


選 Canvas1  此元件,右邊的 Properties 屬性視窗,有很多此元件的屬性可改。
  • Width 改成 Fill parent (實際寬度將以所包含元件的母元件寬度來自動決定)。
  • Height:Fill parent。

在  Drawing and Animation  選單,選「ImageSprite」元件,拖曳到介面設計區 Canvas1,此元件名稱預設為ImageSprite1。
ImageSprite(圖片精靈元件,在 Canvas元件上可以製作出移動與旋轉的動畫效果的元件 )

選 ImageSprite1此元件,右邊的 Properties 屬性視窗,有很多此元件的屬性可改。
Picture:None(表示 沒有圖片),按下面的 Upload File,按「選擇檔案」,選 一張圖片上傳,如「ball-s.gif」。

結果如下:

將  ImageSprite1此元件的 Picture屬性設為 剛才 上傳的圖片 ball-s.gif。

選 Canvas1  此元件,將 BackgroudColor 設為 Pink(粉紅色)。

按螢幕 右上方的 Blocks, 切換到 Blocks 模式。

選 ImageSprite1,按 「when  ImageSprite1.Flung 」 此block。
(flung 是 fling 的被動式,fling:擲 )
使用者手指滑過 ImageSprite1元件時觸發本事件。

選 ImageSprite1,按 「set  ImageSprite1.heading to 」 此block。
滑鼠移到 heading 上面 出現 「get heading」,將此 block 插入到 「set  ImageSprite1.heading to 」的後面。
將 「set  ImageSprite1.heading to 」移入到 「when  ImageSprite1.Flung 」 此block內。

選 ImageSprite1,按 「set  ImageSprite1.speed to 」 此block。
選 Built-in 的 Math,按 「X 」block(相乘),並插入到 「set  ImageSprite1.speed to 」的後面。


鼠移到 speed 上面 出現 「get speed」,將此 block 插入到 「相乘  」block內。

選 Built-in 的 Math,按 「number」block,並插入到 「相乘」block 的第2個位置。

 輸入 20,如果球跑太快,可以輸入小一點的數值,如6。
選 ImageSprite1,按 「set  ImageSprite1.Rotates to 」 此block。
選 Built-in 的 Logic,按 「true」block,並插入到 「set  ImageSprite1.Rotates to 」的後面。

「when  ImageSprite1.Flung 」 此block內容如下:
程式說明:
Heading 設定 ImageSprite 元件移動的方向。向右為0度,向上為90度,向左為180度,向下為270度。
Speed每個間隔時間所移動的距離,單位為像素 (pixel)。get speed x20 ,所以愈移愈快。
如果 ImageSprite1(圖像精靈)的Speed 設為10,Interval 設為 50 ,即每50 毫秒(ms) 移動 10 像素(pixels)。
Rotates為 true,ImageSprite 元件在移動時,元件的角度會隨方向旋轉。

選 ImageSprite1,按 「  when ImageSprite1.EdgeReached 」 此block。


碰到 Cansvas 元件的邊界,呼叫本事件。
Canvas元件被碰撞的邊界會以 edge 回傳,依順時針方向,上方為1,右上角為2,右邊為3,右下角為4,下方為-1,左下角為-2,左邊為 -3,左上角為 -4。
選 ImageSprite1,按 「call ImageSprite1.Bounce」 此block並將之插入到 「  when ImageSprite1.EdgeReached 」 此block內。
Bounce 反彈,通常與 EdgeReached 事件同時使用,當  ImageSprite 圖片精靈元件碰到Canvas  元件邊界時,像球體一般反彈。

滑鼠移到 edge  上面 出現 「get edge」,將此 block 插入到 「call ImageSprite1.Bounce」block的 edge 後面。
 
下面的 Show Warnings 都是0,表示沒有錯誤。

如果 Connect /Emulator ,是灰色
請先按 Connect / Reset Connection , 再按  Connect /Emulator

如果你沒有先啟動 aiStarter,會有下列的訊息,請先執行 aiStarter此程式。
當初在安裝 aiStarter ,若有在桌面上建立捷徑,可直接選捷徑執行。
若桌面上沒有 aiStarter 此捷徑,那就在「開始功能表/所有應用程式」 找。

 aiStarter  啟動後,再按 Connect /Emulator

執行結果如下,滑動此球會改變行進的方向和速度(上一次速度的20倍),碰到邊緣會反射回來且會旋轉。
如何讓球體撞到邊緣時,發出聲音?
選 Media/Sound  此元件,拖曳 Sound元件到 元件設計區, 預設名稱 為 Sound1,會掉到下面的Non-visible components區。

 按 Upload File , 上傳 聲音檔 (如hit.wav)。

按 Screen1 此物件, 選 「when Screen1.Initialize do」此block。

按 Sound1 此物件, 選 「 set Sound1.Source to」此block。
按 Text  , 選 「 text string」此block,插入到 「 set Sound1.Source to」此block的後面,並輸入聲音檔的檔名,如 hit.wav。


將 「 set Sound1.Source to」block,插入到 「when Screen1.Initialize do」block 內。

如果 「 set Sound1.Source to」獨立在外面,不插入到  「when Screen1.Initialize do」block 內,會有錯誤訊息。

-----------------------------------------------------------------------------------------------
參考:設定物件聲音檔 另一種方式,但最好會在程式內設定物件的聲音檔。
將 Sound1 的 Source 改為 hit.wav 。

--------------------------------------------------------------------------------------------------
按 Sound1 此物件, 選 「 call Sound1.Play」此block,並插入到「  when ImageSprite1.EdgeReached 」 block內 。

最後 block 畫面為:
手機的執行結果: