App Inventor 使用計時器做出簡易跳躍效果
首先祝大家雙十國慶日快樂!!
今天要來教如何使用 App Inventor 裡的計時器元件,做出簡單的角色跳躍。
那麼以下請跟著教學:
1. 先開啟 App Inventor,並新增一個專案「JUMP」。
需要元件有:畫布、圖像精靈、按鈕、計時器及音效。
圖像精靈就是我們的遊戲角色
當按鈕被點選時,讓角色做跳躍的動作。
角色跳躍時會用到計時器 2 和 3,計時器 1 是當 App 剛啟動時,設定角色位置用的。
接著我們來設定各個元件的屬性
畫布:高度、寬度填滿、背景顏色「1d8cffff」。
圖像精靈:高度、寬度 50 像素。
計時器1:啟用計時取消勾選、間隔設為 2000。
計時器2:啟用計時取消勾選、間隔設為 20。
計時器3:啟用計時取消勾選、間隔設為 30。
音效來源設定等等上傳的音檔
切換到程式設計
先拖拉以下方塊
變數 temp 等等要來做角色跳躍的最高點,及降落時用的。
當 App 初始化後,將計時器1啟用,因為剛剛是設定為兩秒,所以在兩秒後才會執行計時器1.計時的方塊。
當 計時器1.計時 執行後,馬上把啟用關閉,並進行初始化設定。
P.S. 這個的用意是要讓 App 啟動後,過一小段時間再設定角色的位置,有點像其它程式語言的 sleep,因為我用 BlueStacks 模擬器連接時,如果沒有停一小段時間,直接設定角色位置的話,它不會跑到我要的正確位置,很奇怪!
圖像精靈的圖片為:
https://e7.pngegg.com/pngimages/217/148/png-clipart-super-mario-8-bit-super-mario-bros-video-game-jump-angle-heroes.png
拖拉當按鈕被點選的方塊
記得要將音檔上傳,並設定來源,這樣播放時才有聲音。
拖拉 當計時器2.計時 方塊
剛剛設定 計時器2 屬性的計時間隔為 20,也就是 0.02 秒會執行一次。
要讓角色往上跳,就要將它的 y 座標變小。
P.S. 原點 0, 0 在最左上角,往右 x 值會增加,往下 y 值會增加。
每次計時都將 temp 減一,當 temp 為 0 後就不要讓角色繼續向上移動,所以把 計時器2 關閉,並將 計時器3 開啟做降落。
拖拉 當計時器3.計時 方塊
降落時角色會往下,也就是 y 座標會增加,在這裡我直接讓他加 temp 的值。
當然 temp 的值也要每次都加一,這樣才能做出讓角色在空中停留一下下,下降時會增快的視覺效果。
最後就是當角色下降到地板後,就將降落計時器關閉。
P.S. 這裡的判斷不能用大於等於畫布高度,因為角色的高寬最一開始設定為 50 像素,而在設定角色的 x, y 座標時,是以角色圖片的左上點為基準。所以當角色降落到地板後,角色的 y 座標絕對會比 畫布 的高度還小,如果不將 畫布 高度減去 角色的高 50像素 的話,條件就不會成立,計時器3 會一直開著。
同理,如果想讓角色的位置置中的話,不能只將 x 座標設為 畫布的寬度除以 2,還要再減去 角色寬度的一半。
老師你圖片畫得好爛啊!!!!!!我還是看不懂!!?
Ans:這樣請在文章底下留言,我再想想看該如何說明。😭
那麼這次的 App 教學就到這,趕緊來模擬測試看看!