App Inventor學習記錄172-ScratchCard,簡單好用的製作刮刮樂外掛

之前在這一篇刮刮樂,用小畫家的橡皮檫功能做中,有介紹刮刮樂的做法。這次來介紹一個更好用的外掛,可以更快的完成製作刮刮樂的功能。

記錄一下:
App Inventor學習記錄172-ScratchCard,簡單好用的製作刮刮樂外掛


這次範例的完成品如下。

在這個外掛中,我們可以設定覆蓋最上層,也就是要被刮開的那一層的圖型是什麼,可以設定 3種排板的方式,這個等一下會說明。
另外,也可以設定被刮開多少之後,顯示全部的畫面。雖然有一些小 bug,但使用起來真的很方便。


畫面編排的部份如下。

這次記得要把 scratch card這個外掛匯到 app inventor中。
忘記怎麼匯入 aix外掛檔的話,請參考:怎麼匯入 app inventor的外掛(extension)到程式中


全部的程式方塊如下。


第 1部份的程式方塊記錄。

建立清單_模式,這個清單中放的三種項次,分別是 CLAMP、REPEAT、MIRROR,這三個項目就是刮刮樂覆蓋層圖形的配置模式。這個部份大家看範例會比較清楚,這裡就不說明了。


第 2部份的程式方塊記錄。

when screen 1.initialize當螢幕初始化的時候。
set scratch card 1.tile mole to,設定刮刮樂覆蓋層的重覆模式,這裡用 pick a random item list的方塊,從清單_模式中隨機選擇 1模式來使用。

設定 vertical arrangement 1垂直配置的寬度和高度,把它們都設定成螢幕寬度的大小。所以我們就會取得一個正方型大小的垂直配置出來。

set scratch card 1.overlay width to設定覆蓋層寬度,以及 set scratch card 1.overlay height設定覆蓋層高度,這兩個,我們都把它設定成垂直配置的寬度。
這個很重要,overlay的寬度和高度最好是設定成佈滿整個垂直配置的大小,不然覆蓋的圖片太小的話,就會跑出不該跑出的東西來

set scratch card 1.overlay image,這一個就是設定覆蓋層要用的圖片是什麼

call scratch card 1.setup,呼叫設定程式。
layout,這裡我們放垂直配置進去。

set scratch card 1.stroke width,這是設定刮刮樂的大小,把它想成畫筆大小就可以了。
把 labe2 的文字,設定成 scratch card.tilemode 覆蓋層使用的模式。這樣等一下比較好區分。


第 3部份的程式方塊記錄。

button 1是跟第 2部份是完全相同的。所以這個部份其實也可以改成一個小程式來做。


第 4部份的程式方塊記錄。

when scratch card1.on reveal percent changed,當刮刮樂被刮開的比例產生變化的時候。
把 label 1的文字和 label 3的文字,用兩種方式設定成刮開的比例。這個主要是看一下 get percentcall scratch card 1.reveal percent取得的值有什麼不同。

加入判斷式,判斷 call scratch card 1.reveal percent取得的值,如果這個值大於 0.98的時候,則 call scratch card 1.reveal呼叫顯示底圖程式,把刮刮樂最下層的圖片顯示出來。

至於這裡為什麼要設 0.98的這個數字,這是我測試出來的結果,大家可以設定成別的數字,數字越大就是要刮越多才會顯示底圖的圖片。


第 5部份的程式方塊記錄。

when scratch card 1.on reveal當底圖的圖片完全顯示出來的時候。
這裡把 label1的文字設定成 scratched。
也可以用這個方塊,來設定刮完之後,自動判斷對獎的程式。


第 6部份的程式方塊記錄。

call scratch card1.reveal,這個程式,就是移除覆蓋層,完全顯示底圖的程式。


第 7部份的程式方塊記錄。

call scratch card 1.mask,這個程式則是把圖片加上覆蓋層的程式。
請大家跟第 3部分的寫法比較一下。
直接用這一個程式去覆蓋的話,在底圖比覆蓋層圖片大的時候,會出現點小問題。所以不建議這樣用,建議用第 3部份的寫法


這裡一次的外掛已經相當的好用,但是我心目中的刮刮樂,應該還是要像台彩發的那一種,裡頭有很多號碼,湊齊 3個一樣的就中獎。目前是有想法要怎麼做,但是一直寫不出來……等寫出來了,再來跟大家分享。

這次的 aia檔的下載連結如下:
NO_172_Scratchcard.aia

APP INVENTOR外掛
名稱:ScratchCard
外掛來源:community.appinventor.mit.edu
外掛載點:
https://community.appinventor.mit.edu/t/scratch-card-scratch-your-image/48306

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響