倒數計時器 ( 具備設定畫面、大型數字 )
在「倒數計時 ( 基本版 )」裡已經可以實作基本的倒數計時器,這篇教學將會更進一步,將倒數計時器改成「大型數字」的版本,並可以開啟「設定畫面」來進行倒數時間的設定。
快速導覽:
繪製角色造型
使用「繪畫」工具建立角色「number」,作為倒數計時的「顯示數字」,使用「文字」工具在畫布中輸入數字,尺寸大約 56x124 ( 左側造型可以看到實際尺寸 )。
繪製 10 組造型,造型內容是 1~9 和 0,並根據造型內容設定造型名稱為 1~10 ( 數字 0 的名稱為 10 )。
使用「繪畫」工具建立角色「setting」,作為倒數計時的「設定按鈕」,點擊後會彈出設定畫面,使用「方形」工具在畫布中繪製一個白色長方形,尺寸大約 279x86。
白色長方形的長寬尺寸如下圖所示,可以將數字 00:00 完全包覆,根據個人設定的不同進行調整。
使用「繪畫」工具建立角色「start」,作為倒數計時的「開始/暫停按鈕」,點擊後會開始倒數計時或暫停,角色中有三組造型,分別使用「方形」工具在畫布中繪製一個綠色、紅色和橘色長方形,綠色的文字為 START,紅色的文字為 STOP,橘色的是 TIME's UP,尺寸大約 241x67。
使用「繪畫」工具建立角色「reset」,作為倒數計時的「重新設定按鈕」,點擊後會將倒數時間歸零重置,使用圓形和方形工具繪製按鈕,尺寸大約 70x67。
使用「繪畫」工具建立角色「bg」,作為倒數計時的「背景/設定面板」,角色包含兩組造型,第一組是背景畫面,名稱設定為 bg,使用文字工具繪製。
角色「bg」的第二組造型是是設定面板,名稱設定為 popup,使用方形工具和文字工具繪製,尺寸大約是 405x282,幾乎將整個舞台遮蔽。
使用「繪畫」工具建立角色「ok」,作為倒數計時的「確認設定按鈕」,點擊後會設定倒數時間,使用方形工具和文字繪製按鈕,尺寸大約 122x55。
所有角色完成後,隱藏 ok 角色,並將其他角色在舞台上如下圖的配置進行排列。
積木程式原理 ( number )
點擊「number」角色,從左側積木清單裡新增函式「顯示數字」,函式裡使用 x、y 和 num 三個參數,並勾選「執行完畢再更新畫面」,這個函式會負責將放在 num 裡的數字,轉換成大型文字的方式顯示。
「顯示數字」函式裡,使用 num_string 變數將 num 數字轉換成文字,並在只有個位數字時於前方補 0,接著依序取出十位數和個位數,根據數字替換造型,接著透過「畫筆」積木的「蓋章」功能,在畫面中蓋下對應的造型。
完成後簡單執行函式,舞台上就會出現大型數字。
新增函式「顯示時間」函式,勾選「執行完畢再更新畫面」,這個函式會負責顯示目前倒數的時間。
設定點擊綠旗的時候,將「分鐘」和「秒」變數為 0,並執行「顯示時間」函式,函式內容使用「顯示數字」函式,在指定的位置顯示「分鐘、與「秒」變數的數值。
設定收到廣播「start」的時候,如果「分鐘」和「秒」都不為 0,就會進行每秒一次的重複迴圈,每次重複時將秒數減少 1,並換算分鐘和秒數,當重複結束後發送「end」廣播訊息以及播放鬧鐘音效。
按照下圖設定收到廣播「ok」、「reset」和「stop」的行為,ok 表示倒數時間設定完成要顯示時間,reset 表示時間歸零重設,stop 表示暫停倒數,其中 reset 和 stop 會透過「停止這個物件的其他程式」來停止倒數的重複迴圈。
積木程式原理 ( setting )
點擊「setting」角色,點擊綠旗時除了定位,也設定圖像效果「幻影」為 99.9 ( 由於設定 100 會造成「當角色被點擊」積木無法點擊,所以要設定為 99.9 使其「看不到但又點得到」,不過使用重複迴圈的方式仍然可以點擊,參考「點擊隱藏的角色」 ),接著設定當角色被點擊時,如果 state 變數為 stop 時就會發送 setting 廣播訊息,避免在倒數過程中還可以同時進行設定。
積木程式原理 ( start )
點擊「start」角色,點擊綠旗時除了定位,設定 state 變數為 stop,切換造型為 start,並設定面朝 90 度 ( 因為倒數結束時會抖動按鈕表示時間到,所以一開始先定位角度 )。
設定點擊 start 角色時,停止其他所有重複的程式 ( 停止抖動效果 ),並根據目前的名稱發送對應的訊號和切換對應的造型。
設定收到廣播「stop」和「reset」訊號的程式,兩者差異在於 reset 需要額外設定面朝 90 度以及停止其他重複迴圈。
設定收到廣播「end」訊號時表示倒數結束,除了將 state 設定為 end 以及改變造型,也會透過重複迴圈製作抖動效果。
積木程式原理 ( reset )
點擊「reset」角色,設定點擊角色時,發送 reset 訊號。
積木程式原理 ( bg )
點擊「bg」角色,設定點擊綠旗時,將造型改成 bg 並移動到最上方第二層,同時隱藏「分鐘」和「秒」變數,收到 setting 訊號時改成 popup 造型並顯示變數,收到 ok 訊號時又換成 bg 造型和隱藏變數,這個做法主要可以讓角色在「背景」與「設定畫面」之間做切換。
積木程式原理 ( ok )
點擊「ok」角色,設定點擊綠旗時,這個角色會隨著 bg 角色而顯示或隱藏,當 bg 角色是 popup 造型時會顯示,是 bg 造型時會隱藏,點擊角色時後發送 ok 的廣播訊息。
變數設定
點擊「bg」角色,從左側積木清單裡,將「分鐘」和「秒」變數勾選顯示,並在舞台中使用滑鼠在變數上按右鍵,選擇「滑桿」。
設定為滑桿後,繼續按右鍵選擇「變更滑桿數值範圍」,將「秒」變數的數值範圍設定為 0~59,「分鐘」變數的數值範圍設定為 0~99。
完成後點擊數字開啟設定畫面,將按照下圖將變數排列到適合的位置。
完成效果
所有角色的程式都完成後,點擊綠旗,點擊數字就能設定倒數時間,點擊 START 就開始倒數,時間結束後會產生抖動效果。
範例解答
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~