App Inventor學習記錄100-用畫布、球形精靈元件,做遊戲搖桿(蘑菇頭)

這是打算加到App Inventor學習記錄98-球型精靈遊戲 1中的一個功能,這次不用手指頭,而是用模擬搖桿的方式來做。不難,但是用要到一點數學。
記錄一下:
App Inventor學習記錄100-用畫布、球形精靈元件,做遊戲搖桿(蘑菇頭)


做好的畫面就像這樣。

這個移動的模式相信大家在別的遊戲上都有試過。這次要做的就是這個。


這次的畫面配置如下:

建議勾選 ExtendMovesOutsideCanvas,勾選這個項目的差別大家可以自行試試。


全部的程式碼如下:


第 1部份的程式碼說明:

這些變數值,用下面的圖片來解釋。順便說明一下 app inventor圖像精靈、球形精靈的設定方法。


這裡畫了一個圖來說明。

我們如果直接把球形精靈的 x,y座標,設定成畫布的中心點的時候,我們會發現實際的情形會上圖這樣。因為在 app inventor中,不管是圖像精靈或是球形精靈,它們用來決定位置的點,都是在左上角的這個點


但這次我們要把球形精靈的圓心設定到畫布中心

我們的做法,就是把球形精靈的 x座標,設定成畫布中心減去一個球形精靈的半徑
球形精靈的 y座標也是一樣的做法。


接下來的這一張圖是代表球形精靈被拖曳的情形。

當前的 x,y座標所取的值,同樣會是在左上角的虛擬交點這裡
所以如果我們直接把球形精靈移動到當前 x,y座標的話,球會在出現在右下角。


如果我們要球形精靈的中心移動到我們手指頭點到的地方

就要用同樣的方法,把球形精靈的 x座標,移動到當前的 x座標再減去藍球的半徑。
y座標的設定方法也是相同,把球形精靈的 y座標,移動到當前的 y座標再減去藍球的半徑。


把球形精靈的座標設定常見的問題介紹過一遍了。
接下進入正題,講一下我們這次要達成的目標。

如果藍球超出了紅線了,我希望讓球形精靈可以移動到紅線上。
而且不會超出紅線的範圍。


這裡我把相關會用到的點都標示出來了。請對照我們第 1部份的程式碼中,設定很多個變數的部份一起看。我們的目標就是取得 x3,y3這兩個座標。
\

這裡會用到簡單的三角形計算公式。我們計算出 D值,我們也有 r值,我們可以利用三角型的比例原則,去取得 x3,y3的座標,有了這個座標之後,再分別減去藍球的半徑之後,就會可以到我們想要的效果。


第 2部份的程式碼說明:

建立一個叫畫布大小及中心值設定的程式。
這裡比較重要的部份就是把畫布的寬度和寬度設定成一樣,這樣子比較好計算。
然後把 x1,y1的座標都設定一下。


第 3部份的程式碼說明:

建立一個叫設定搖桿底座半徑的程式。
這裡把紅球半徑的 r值,設定成畫布寬布乘 0 .25,這個比例大家自己抓一下。


第 4部份的程式碼說明。

建立一個叫搖桿底座移到畫布中心的程式。
在這個程式中,我們把搖桿底座這個球形精靈的中心點移到畫布的中間。


第 5部份的程式碼說明。

建立一個叫設定搖桿大小及 Z座標移到中間的程式。
把搖桿這個球形精靈的半徑也設定一下。
搖桿這個球形精靈的 z座標,設定成 2。數字越大,圖片就會在越上層
然後把搖桿這個球形精靈的座標設定一下,讓它的中心可以出現在畫布的中心。


第 6部份的程式碼說明:

當程式開始執行的時候,呼叫這四個剛剛寫好的程式。


第 7部份的程式碼說明:

在畫面編排,有勾選計時器的啟用計時功能,而且計時間隔設定成 10
在計時器計時的時候,就一直把這幾個標籤的文字,設定成相關的變數。
這樣有助於確認程式寫的有沒有問題。


第 8部份的程式碼說明。

當搖桿這個球形精靈被壓下的時候,把搖桿啟用這個變數設定為真。


第 9部份的程式碼說明。

當搖桿這個球形精靈被鬆開的時候,把搖桿這個球形精靈重新移動到畫面的中心點。
然後把搖桿啟用這個變數,設為假。


第 10部份的程式碼說明

在這個部份我們就可以用三角型的比例元則,去取得 x3,y3的座標
取得 x3,y3的座標,再把搖桿這個球形精靈移動到 x3,y3的座標減去藍球的半徑就可以了。

這裡再加入一個流程判斷式,如果藍球超出紅球的範圍的時候,就把藍球移動到紅球的邊界上。


到這裡我們就得到了這個效果。


如果再加上 arctan去取得角度的話,我們就會得到像下面這樣。


這裡要用到很久以前學的三角函數的部份……這部份可以說是畢業後就還給老師,然後就再也沒有用過。為了解決這個問題還特別的去查了一下。如果怎麼用斜率去取角度……

好的,這次aia檔的下載連結如下:
點我下載 NO_100_joystick.aia

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

發表迴響