2014年12月25日 星期四

第六章 有趣的出氣筒遊戲

我的出氣筒
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)點選左邊工具箱中的筆刷,在上方的屬性工具列調整其屬性。由左到右依序是顏色、形狀、大小、透明度、柔邊。


  找不到喜歡的顏色嗎?
  找一張有你想要顏色的圖片,點選左邊工具箱中的色彩選擇工具,在你想要的顏色上按左鍵,你想要的顏色就會被吸出來了!


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


2.3 專題建置
1. 新增專案:MyPunchingBag
按下Start new projects,新增「專題名稱:MyPunchingBag」的專案。
進入App InventorDesigner視窗
(註:專案名稱開頭不能是數字;專案名稱中可用底線,但是不能使用空格或其他特殊字元)

2. 匯入圖片和音效
點選視窗右側的Components下方的Media,按下Upload File上傳圖片及音效。
1.jpg2.jpg3.jpg4.jpg5.jpgwaaa.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





  

4 則留言:

  1. 影音解說在此:
    Part1 https://www.youtube.com/watch?v=hhCSJYHUywA
    Part2 https://www.youtube.com/watch?v=kpH8z4KP9DM

    原始碼(.aia)下載連結:https://drive.google.com/file/d/0Bz_3MvZ2YjRnWkVDWW9WU3VxUmM/view?usp=sharing

    Ted Lee

    回覆刪除
    回覆
    1. 老師,一定要修圖嗎?

      刪除
    2. 泰布布上已放修好的圖了喔!

      刪除
  2. 修正程式:
    https://drive.google.com/file/d/0B_9NUWwOyRGIWVBCSWNSMGZpTzg/view?usp=sharing

    回覆刪除