第六章 有趣的出氣筒遊戲

我的出氣筒

1.1 專題介紹：我的出氣筒

　　我的出氣筒是一個可以不斷的點擊畫面，讓畫面上的主角產生變化，來藉此發洩情緒的小遊戲。而在打敗主角時還會有音效，此時可以按再來一次的按鈕使遊戲重來。這是一個簡單可紓壓的小遊戲。

1.2 專題重點

※學習使用按鈕元件

※能夠利用Photo Impact X3做簡單修圖

※會使用變數來更換按鈕圖片

◎需求元件：數張接續變化的圖片

2. 專題實作：我的出氣筒

2.1專題總覽

　　執行程式後，不斷點擊畫面，使畫面上的主角產生變化，當最後一張圖片出現時遊戲結束，此時會播放遊戲結束之聲音，之後按下按鈕"再來一次"可再重新進行遊戲。

  

2.2數張接續變化的圖片製作(以Photo Impact X3繪製)

   ◎需求元件：魔術師原始圖

　　製作出氣筒前，需先利用Photo Impact X3進行影像處理，完成程式的所需元件。本範例一共需要五張不同階段的圖片並且要有連續性，第一張為原始圖，接下來每完成一個階段要記得存一次檔。為方便繪製，建議所找的圖片背景為無色或白色。

步驟一：讓角色的臉腫起來

(1)  功能表列中的特效，按下扭曲中的創意扭曲。

(2)選取範本中的第四個往外擴張，在想要腫起來的地方點選或按住滑鼠往外推。

(3)若需要還原，可點取範本中的第一個，在想要還原的地方點選或按住滑鼠即可。

※注意：可以先選好不要變形的區域，適時調整筆刷大小把不想變形的地方選出來 (紅色為不想變形處)，要先把筆刷的＋和－取消再套用範本效果。

步驟二：扭曲

(1)  點選上方功能表列中的特效，按下扭曲中的以格線變形。

(2)  格線大小越小控制點越多，能拉扯的越細微，請選取適合的格線大小。

(3)  滑鼠拖曳移動控制點，再選取測試，即可在下方預覽其效果。

步驟三：流血和瘀青

(1)點選左邊工具箱中的筆刷，在上方的屬性工具列調整其屬性。由左到右依序是顏色、形狀、大小、透明度、柔邊。

※  找不到喜歡的顏色嗎？

　　找一張有你想要顏色的圖片，點選左邊工具箱中的色彩選擇工具，在你想要的顏色上按左鍵，你想要的顏色就會被吸出來了！

步驟四：存檔

　　製作完各種可怕表情的圖片後，記得點選上方功能表列中的檔案，選取另存新檔，將檔名依序設為1、2、3、4、5，存檔類型設為JPG，按下存檔，完成五張或數張的出氣筒圖片。這樣就可以開始寫程式了喔！

2.3 專題建置

1. 新增專案：MyPunchingBag

按下Start new projects，新增「專題名稱：MyPunchingBag」的專案。

進入App Inventor的Designer視窗

(註：專案名稱開頭不能是數字；專案名稱中可用底線，但是不能使用空格或其他特殊字元)

2. 匯入圖片和音效

點選視窗右側的Components下方的Media，按下Upload File上傳圖片及音效。

將1.jpg、2.jpg、3.jpg、4.jpg、5.jpg、waaa.mp3依序上傳，注意：每一次選擇檔案只能選取一個檔案，選取好一個檔案後就按OK，重複上述動作完成上傳。

上傳檔案：Media/Upload File

2.4 介面配置

本專題只有一個頁面，非五個頁面。

3.調整版面屬性

點選視窗右側的元件屬性(Properties)中，將允許捲動(Scrollable)取消勾選。並把水平對齊(AlignHorizontal)和垂直對齊(AlignVertical)都設定為Center。

所有元件水平方向置中：Properties/AlignHorizontal/ Center

所有元件垂直方向置中：Properties/ AlignVertical/ Center

取消捲軸：Properties/Scrollable/取消勾選

4.新增按鈕(為了感應使用者點擊圖片)

在視窗左側的組件面板(Palette)中，點選用戶介面(User Interface)中的按鈕(Button)，將其拖曳至中間的工作面板(Viewer)視窗中。接著點選Components下方的Rename，將其名字改為image(請先確定Button1為反白狀態，代表現在正修改Button1)。

新增按鈕：Palette/User Interface/Button

重新命名：Components/ Screen1/ Button1/ Rename: image

5.把圖片放到按鈕上，並修改屬性

在視窗右側的元件屬性(Properties)中，點選圖像(image)選取第一張圖片(1.jpg)，將圖片放到按鈕上。在視窗右側的元件屬性(Properties)中，將文字(Text)屬性中的文字清空，按鈕寬度(Width)屬性改成270 pixels，高度(Height)屬性設定為 300pixels。

放入圖片：Properties/ image/ 1.jpg

更改屬性：Properties/Text:

Width: 270 pixels

Height: 300 pixels

6.新增按鈕(再來一次)，並更改屬性

在視窗左側的組件面板(Palette)中，點選用戶介面(User Interface)中的按鈕(Button)元件，將其拖曳至中間的工作面板(Viewer)視窗中按鈕(image)的下方。接著在視窗右側的Components中，點選Button1，確認正在編輯此按鈕，點選下方的Rename，將其名字改為again。在視窗右側的元件面板(Properties)中，將文字(Text)中輸入"再來一次"，並將它預設不顯示(Visible) 取消勾選。

新增按鈕：Palette/ User Interface/ Button(放置在按鈕(image)的下方)

重新命名：Components/Screen1/Button1/Rename: again

修改屬性：Properties/ Text: 再來一次

Properties/ Visible/取消勾選

7.音效設置

在視窗左側的組件面板(Palette)中，點選Media中的聲音(Sound)元件，將其拖曳至中間的工作面板(Viewer)視窗中，它會自動跑到最下方。在視窗右側的元件屬性(Properties)中，點選來源文件(Source)選取音效(waaa.mp3)，將音效設定成waaa.mp3。

音效設置：Palette/Media/ Sound(拖曳至畫面預覽(Viewer)視窗中)

          Properties/ Source/ waaa.mp3

使用元件及其重要屬性

名稱	屬性	說明
Screen1	Properties/ Scrollable/ 取消勾選 Properties/AlignHorizontal/ Center Properties/ AlignVertical/ Center
image	Properties/ image/ 1.jpg Properties/ Text:            Width: 273 pixels            Height: 273 pixels	點擊按鈕
again	Properties/ Text: 再來一次 Properties/ Visible/取消勾選	到最後一張圖時按鈕再出現
Sound1	Properties/ Source/ waaa.mp3	音效

2.5 專題分析和程式拼塊說明

請先從視窗右上角的 Designer 視窗切換至 Blocks 視窗。

8. 設一個變數 i (表示第幾張圖，1是由於一開始是第一張圖)

在左側的Blocks中，點選Built-in中的Variables，在彈出的拼圖式程式區塊中選取 initialize global name to，置於預覽視窗中。並且將name改為i。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取0，並且放置在initialize global i to的後面。並且將0改成1。

拉出方塊：Blocks/ Built-in/ Variables/ initialize global name to

將name改成i

Blocks/ Built-in/ Math/ 0

將0改成1

9.設一個變數click，表示記錄點擊的算術運算值，初始值為0

在左側的Blocks中，點選Built-in中的Variables，在彈出的拼圖式程式區塊中選取initialize global name to，置於預覽視窗中。並且把name改成click。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取0，並且放置在initialize global click to的後面。

拉出方塊：

Blocks/ Built-in/ Variables/ initialize global name to

將name改成click

Blocks/ Built-in/ Math/ 0

10. 做一個當點擊畫面(圖片)時

在左側的Blocks中，點選Screen1中的image，在彈出的拼圖式程式區塊中選取when image. Click do，置於預覽視窗中。

拉出方塊：

Blocks/ Screen1/ image/ when image. Click do

11. 讓點擊一次畫面(圖片)時，變數click會記錄

在左側的Blocks中，點選Built-in中的Variables，在彈出的拼圖式程式區塊中選取set 　　 to，放在when image. Click do的裡面。並且把空格設為global click。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取+，放置在set global click to的右邊。在左側的Blocks中，點選Built-in中的Variables，在彈出的拼圖式程式區塊中選取get 　　，放在 +的左邊。並且把空格設為global click。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取0，放置在 +的右邊。並且把 0 改成 1 。

拉出方塊：Blocks/ Built-in/ Variables/ set global click to

Blocks/ Built-in/ Math/ +

Blocks/ Built-in/ Variables/ get global click

Blocks/ Built-in/ Math/ 0

將0 改成 1　

12.當畫面(圖片)點擊3下時

在左側的Blocks中，點選Built-in中的Control，在彈出的拼圖式程式區塊中選取if then，放置在set global click to的下方。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取=，放置在 if的右邊。在左側的Blocks中，點選Built-in中的Variables，在彈出的拼圖式程式區塊中選取 get 　　，放在 =的左邊。並且把空格設為global click。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取0，放置在 =的右邊。並且把0改成3。

拉出方塊：Blocks/ Built-in/ Control/ if then

Blocks/ Built-in/ Math/ =

Blocks/ Built-in/ Variables/ get global click

Blocks/ Built-in/ Math/ 0

將0改成3

13.將換下一張圖

在左側的Blocks中，點選Built-in中的Variables，在彈出的拼圖式程式區塊中選取set 　　 to，放在if then的裡面。並且把空格設為i。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取+，放置在set global i to的右邊。在左側的Blocks中，點選Built-in中的Variables，在彈出的拼圖式程式區塊中選取 get 　　 ，放在 +的左邊。並且把空格設為global i。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取0，放置在 +的右邊。並且把0改成1。

拉出方塊：Blocks/ Built-in/ Variables/ set global i to

Blocks/ Built-in/ Math/ +

Blocks/ Built-in/ Variables/ get global i

Blocks/ Built-in/ Math/ 0

將0改成1

14. 每當換一張圖片時，點擊計算值回歸至0，重新計算

在左側的Blocks中，點選Built-in中的Variables，在彈出的拼圖式程式區塊中選取 set 　　 to，放在if then的裡面。並且把空格設為global click。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取0，放置在 set global click to的右邊。

拉出方塊：Blocks/ Built-in/ Variables/ set global click to

Blocks/ Built-in/ Math/ 0

15.當變數i(計算顯示圖片的張數)為2時

在左側的Blocks中，點選Built-in中的Control，在彈出的拼圖式程式區塊中選取if/then，放在if/then的下方，即為 when image. Click do中的第二個 if/then。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取 =，放置在 if的右邊。在左側的Blocks中，點選Built-in中的Variables，在彈出的拼圖式程式區塊中選取 get 　　，放在 =的左邊。並且把空格設為global i。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取0，放置在 =的右邊。並且把0改成2。

拉出方塊：Blocks/ Built-in/ Control/ if then

Blocks/ Built-in/ Math/ =

Blocks/ Built-in/ Variables/ get global i

Blocks/ Built-in/ Math/ 0

將0改成2

16.此時，圖片出現第二張

在左側的Blocks中，點選Screen1中的image，在彈出的拼圖式程式區塊中選取set image. Image to，放入第二個if/then，也就是get global i = 2的下方。在左側的Blocks中，點選Built-in中的Text，在彈出的拼圖式程式區塊中選取" "，放在 set image. Image to的右邊。並且將空格中填入2.jpg。

拉出方塊：Blocks/ Screen1/ image/ set image. Image to

Blocks/ Built-in/ Text/ " "

將空格改成" 2.jpg"

重複此步驟5次，完成圖片更換為2.jpg~5.jpg，共4個，如下圖所示。

17.當圖片到第五張時，即使使用者繼續點擊也不再進行更換圖片的動作，使圖片停留在最後一張

在左側的Blocks中，點選Screen1中的image，在彈出的拼圖式程式區塊中選取set image. Enabled to，放入set image. Image to "5.jpg"的下面。在左側的Blocks中，點選Built-in中的Logic，在彈出的拼圖式程式區塊中選取 false，放在 set image. Enabled to的右邊。

拉出方塊：Blocks/ Screen1/ image/ set image. Enabled to

Blocks/ Built-in/ Logic/ false

18.在圖片更換成第五張時要撥放音效

在左側的Blocks中，點選Screen1中的Sound1，在彈出的拼圖式程式區塊中選取call Sound1. Play，放在set image. Enabled to false的下方。

拉出方塊：Blocks/ Screen1/ Sound/ call Sound1. Play

19.點選按鈕(again)時

在左側的Blocks中，點選Screen1中的again，在彈出的拼圖式程式區塊中選取when again. Click do，置於預覽畫面中。

拉出方塊：Blocks/ Screen1/ again/ when again. Click do

20. 當按鈕按下時，變數i(顯示圖片的變數)會重新從1計算

在左側的Blocks中，點選Built-in中的Variables，在彈出的拼圖式程式區塊中選取set 　　 to，放在when again. Click do的裡面。並且把空格設為global i。在左側的Blocks中，點選Built-in中的Math，在彈出的拼圖式程式區塊中選取 0，放置在set global i to的右邊。並且將0改成1。

拉出方塊：Blocks/ Built-in/ Variables/ set global i to

Blocks/ Built-in/ Math/ 0

將0改成1

21.畫面(圖片)更換回第一張

在左側的Blocks中，點選Screen1中的image，在彈出的拼圖式程式區塊中選取set image. Image to，放在set global to 1的下方。

在左側的Blocks中，點選Built-in中的Text，在彈出的拼圖式程式區塊中選取" "，放在 set image. Image to的右邊。並且將空格中填入1.jpg。

拉出方塊：Blocks/ Screen1/ image/ set image. Image to

Blocks/ Built-in/ Text/ " "

將空格改成"1.jpg"

22.使圖片可以再因為點擊而更換

在左側的Blocks中，點選Screen1中的image，在彈出的拼圖式程式區塊中選取set image. Enabled to，放入set image. Image to "1.jpg"的下面。在左側的Blocks中，點選Built-in中的Logic，在彈出的拼圖式程式區塊中選取true，放在 set image. Enabled to的右邊。

拉出方塊：Blocks/ Screen1/ image/ set image. Enabled to

Blocks/ Built-in/ Logic/ true

3.其他應用

1. 簡單：簡易電子相簿。

2. 普通：增加可撥放的音效，使不同頁面都有不同音效。

3. 進階：參考清單元件，製作頁數更大之電子相簿，並搭配背景音效。

※完整程式：

程式專案檔QRcode：

手機執行檔QRcode：