App Inventor學習記錄118-用畫布和圖像精靈的圖片替換,做技能樹效果

技能樹很多地方都可以看到,我們家小胖有提到這個問題,所以這次就用 canvas畫布,以及 imagesprite圖像精靈這兩個元件來試作。

記錄一下:
App Inventor學習記錄118-用畫布和圖像精靈的圖片替換,做技能樹效果


這次的完成品範例演示如下。

一定要點了最上面的圓圈之後,才能點開下一級的圓圈。
點了圓圈之後,原本的白色圓圈會變成黃色,路徑也會跟著變色。
最下方的四個圓圈都被點過了之後,就會跳出全部解鎖的訊息。


畫面配置如下。

就是一個 canvas畫布裡頭,放了 7個 imagesprite圖像精靈。
一個 notifier訊息框元件,是用來做最後的提示用的。

程式上每一個 imagesprite圖像精靈的連接線,都是在程式開始的時候,用畫線功能做的。
這裡用到的素材有兩個 1.png是白色圓圈,2.png是黃底圓圈。


全部的程式碼如下。|


第 1部份的程式碼說明。

為了可以一次處理所有的圖像清單,比如說調整圖像大小,位置等等的。
先建立一個變數清單_image_list,把 7個圖像精靈都放到這個清單中。

建立變數_圖 1~變數_圖 7,它們的預設值是 false。
因為每一個 imagesprite圖像精靈都可以被按下,但是我們沒有辦法記錄那一個圖像精靈是不是已經被按過,所以在這裡建立 7個變數,用來記錄圖像精靈有沒有被按過。
沒被點擊過的值是 false,有被點擊過的值是 true


第 2部份的程式碼說明。

這一個看上去很長,但大部份都是重覆的動作。
首先,我們用 for each item in list,把變數清單_image_list中,所有 imagespirite圖像精靈的寬度和高度,都設定成 50px。

然後調整每一個 imagespirite圖像精靈,在 canvas畫布中的位置。
這裡比較花時間些,因為在 app inventor的 canvas中,imagespirite的位置,是抓左上角的點來計算的,所以在調整位置的時候,就要用圖像精靈本身的寬度和高度,去調整對應的位置。
這個部份,這裡就不多說明,大家可以參考一下之前介紹過的這篇:
調整畫布精靈的位置,讓游標正確顯示

調整好 imagespirite圖像精靈的位置之後,就是畫線的工作。
這裡寫了一個叫畫折線的小程式,呼叫這個小程式,把對應的圖像精靈原件給填上去就行了。


第 3部份的程式碼說明。

畫折線這個小程式的內容如上。程式中加入了 4個參數,分別是上圖 X,上圖 Y,下圖 X,下圖 Y
然後 call canvas 1.drawlin呼叫畫布畫線的功能 3次,畫了 3條線。

這 3條直線的起點和終點,都是依照上圖 X,上圖 Y,下圖 X,下圖 Y的參數來定。
所以我們之後在用這個程式的時候,就只是把對應的值給加進去就可以了。
請參照第 2部份程式方塊的使用情形。


第 4部份的程式碼說明。

建立一個叫解鎖全部成就的小程式。
如果變數_圖 4變數_圖 5變數_圖 6變數_圖 7的值,都是 true的話
則呼叫 notifier訊息框,跳出提示訊息。

也就是說,當圖像精靈 4~7都已經被按下之後。
才會出現這個訊息。


第 5部份的程式碼說明。

when imagespirite 1.touched,當圖像精靈 1被點擊的時候。
把它的圖片,設定成 2.png,也就是黃底的圓圈。
把變數_圖 1的值設定成 true,代表這個圖片被點擊過了。
set canvas1.paintcolor,把畫布的畫筆顏色設定成橘色。
set canvas1.linewidth,把畫布的畫筆寬度,設定成 5。


第 6部份的程式碼說明。

when imagespirite 2.touched,當圖像精靈 2被點擊的時候。
先判斷變數_圖 1的值是為是不是為 true,如果值為 true的話,再進行下面動作。
把它的圖片,設定成 2.png,也就是黃底的圓圈。
把變數_圖 1的值設定成 true,代表這個圖片被點擊過了。

call 畫折線,呼叫畫折線的程式。
上圖 X的值代入 imagesprite1.X,圖像精靈的 X的值。
上圖 Y的值代入 imagesprite1.Y,圖像精靈的 Y的值。
下圖 X的值代入 imagesprite2.X,圖像精靈的 X的值。
下圖 Y的值代入 imagesprite2.Y,圖像精靈的 Y的值。

imagesprite 3被點擊的做法也是相同。


第 7部份的程式碼說明。

when imagespirite 4.touched,當圖像精靈 4被點擊的時候。
先判斷變數_圖 2的值是為是不是為 true,如果值為 true的話,再進行下面動作。
把它的圖片,設定成 2.png,也就是黃底的圓圈。
把變數_圖 4的值設定成 true,代表這個圖片被點擊過了。

call 畫折線,呼叫畫折線的程式。
上圖 X的值代入 imagesprite2.X,圖像精靈的 X的值。
上圖 Y的值代入 imagesprite2.Y,圖像精靈的 Y的值。
下圖 X的值代入 imagesprite4.X,圖像精靈的 X的值。
下圖 Y的值代入 imagesprite4.Y,圖像精靈的 Y的值。

call 解鎖全部成就,呼叫解鎖全部成就程式。
它就會去判斷,是不是已經點亮了最下方的 4個圖片。

imagesprite 5~7被點擊的做法也是相同。


這次的範例,是由上到下,所以看上去就是一個技能樹的樣子。
之後還會在做一個由下到上點亮的,看上去就會是七龍珠天下第一武道會的賽程表。

技能樹的部份,應該還要加上洗點的功能。
圖片也要更改成比較好看的,這裡只是先用兩種圖片做個區別而己。

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

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

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

發表迴響