目錄
【iVX 初級工程師培訓教程 10篇文拿證】01 了解 iVX 完成新年賀卡
【iVX 初級工程師培訓教程 10篇文拿證】02 數值綁定及自適應網站制作
【iVX 初級工程師培訓教程 10篇文拿證】03 事件及猜數字小游戲
【iVX 初級工程師培訓教程 10篇文拿證】04 畫布及我和 iVX 合照
【iVX 初級工程師培訓教程 10篇文拿證】05 畫布及飛機大戰游戲制作
【iVX 初級工程師培訓教程 10篇文拿證】06 數據庫及服務
【iVX 初級工程師培訓教程 10篇文拿證】07 08 新聞頁制作
【iVX 初級工程師培訓教程 10篇文拿證】09 聊天室制作
高分提升請查看專欄:
iVX入門到精通
大話 IVX 實戰到精通
十一、飛機大戰
制作微信小游戲大致流程與微信小程序、Web類似,不同的在于是組件的使用。
11.1.1 完成游戲角色制作
首先我們創建一個微信 2D小游戲:
創建好游戲場景后在游戲界面中可以添加圖片,作為游戲中的元素。點擊圖片組件在畫布中繪制一個主角飛機。點擊圖片后在畫布中拖動鼠標繪制區域后將會彈出資源選擇框:
選中我們需要添加的圖片素材后,此時畫布中就會出現主角飛機圖片:
我們點擊圖片,拖拽到合適大小:
11.1.2 完成物理世界添加
為了方便之后飛機與敵機之間檢測物理碰撞,我們需要在畫布中添加一個物理世界,并將主角飛機作為物理世界的子對象:
為了使主角飛機能夠收到物理世界的影響,需要給主角飛機添加一個物體。在對象樹種點擊飛機圖片組件,在左側組件欄中點擊物體進行添加:
此時我們通過 web 瀏覽器進行調試,點擊預覽:
為了更好的方便觀察,我們在出現的瀏覽器窗口中按下 F12,選擇該窗口為手機瀏覽器窗口:
我們刷新界面后將會看到主角飛機從上往下掉落:
由于在物理世界中發生碰撞,物體之間將會出現旋轉等情況,我們需要飛機頭一直正朝著上方,需要禁止主角飛機的旋轉角度。點擊飛機主角下的物體組件,在屬性欄中將物體的固定旋轉角度開啟:
11.1.3 完成子彈對象反重力運動
接下來開始設置子彈自動發射,我們先在畫布中再次添加一個子彈圖片組件,并且在這個子彈圖片組件下添加物體組件:
此時預覽發現子彈會自動掉落,解決這個問題只需要在子彈組件下添加一個運動組件:
我們點擊運動組件,設置移動方向為 90 度則為垂直向上運動,隨后給與這個方向設置移動速度,設置為 -600 則為表示反方向運動,最后還需要開啟自動播放才會生效:
接著我們預覽將會發現已經成功的使該子彈反方向進行運動,此時還要注意要將子彈的固定旋轉屬性開啟,否則子彈將會在之后的碰撞中發生不理想的效果。
11.1.4 使用對象組創建子彈
由于子彈是需要間隔一定時間進行自動發射,我們現在使用對象組組件對子彈進行統一管理。此時添加一個對象組添加到物理世界中,選擇管理的范圍為整個畫布(此處需要頂部和底部留一點空隙用于之后的碰撞處理):
添加完畢后發現飛機和子彈都不見了,這是因為對象組覆蓋了飛機主角圖片與子彈圖片。此時將對象組在對象樹的次序放到最底部即可(在對象樹種越靠近頂部顯示的優先級越高)。
接著把子彈圖片組件添加到對象組下:
由于子彈是間隔發射,此時我們需要在前臺中創建一個觸發器定時發射子彈:
隨后設置觸發器的時間間隔為 0.3,并且開啟自動播放:
接著為觸發器設置事件,條件為觸發器觸發時,使用對象組組件的創建對象動作并設置模板對象為子彈對象:
我們接著給子彈設置一個初始的出現位置,這個位置我們可以設置成主角飛機的位置,之后再通過微調使子彈出現的位置在飛機機頭即可:
我們運行程序將會發現子彈將會自動發射:
11.1.5 子彈優化
此時子彈并不會自動消失,我們可以在頂部加一個矩形組件命名為頂部,該組件添加物體組件后,設置位置為固定 xy 坐標與固定旋轉角度:
接下來我們為子彈添加一個事件,該事件觸發為開始碰撞,選擇碰撞對象為頂部,動作為當前對象自動移除:
此時再預覽項目則會發現子彈會自動消失,但是頂部的物體存在邊框和顏色,我們點擊頂部組件,更改背景顏色的透明度為 0,再更改該組件的邊框寬度為 0,該組件就可以從視覺上消失在這個頁面之中:
接著我們開始為這個飛機主角添加移動事件。我們點擊前臺添加事件,當手指按下,飛機主角組件將會在指定范圍內移動到該位置:
11.1.6 設置敵機
接著我們添加敵機。在對象組中添加一個圖片組件,并且為其添加物體組件:
點擊物體組件,設置阻尼為 0.95 并開啟固定旋轉角度,此時該飛機從頂部掉落速度將會減慢:
我們此時再給敵機組件一個碰撞事件,當碰到子彈時自動消失:
再給子彈組件添加一個事件,碰到敵機自動消失:
此時我們開始批量創建敵機,我們創建一個數值變量命名為隨機 x,用于敵機的隨機橫軸位置:
接著我們在觸發器中給隨機 x 變量隨機值:
接著在觸發器中使用對象組創建飛機對象,X 值為隨機x 變量值, Y 值給與一個固定值距離頂部一定距離即可:
此時敵機未擊中將會掉落到屏幕底部,此時在底部添加一個透明的矩形組件命名為底部,敵機觸發后自動消失:
11.1.7 優化游戲
接下來創建一個變量記錄擊落敵機數量:
在子彈觸碰到敵機時該數值加一:
我們在前臺創建一個文本命名為擊落,用于顯示該變量值并且設置初始文本為 0:
之后在子彈觸碰敵機時添加一個動作,將顯示該變量的內容:
此時預覽內容將會實現計分效果:
最后在主角飛機中添加觸碰到敵機時的動作:
以上事件當主角飛機觸碰敵機使使用物理世界以及觸發器執行暫停動作游戲則會停止。
最終考慮用戶體驗,我們在停止后再顯示一個游戲結束文本。在前臺中添加一個文本命名為游戲結束,默認為不可見:
在敵機觸碰到主角時添加游戲結束文本顯示操作即可: