【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作
目錄
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】01 了解 iVX 完成新年賀卡
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】02 數(shù)值綁定及自適應(yīng)網(wǎng)站制作
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】03 事件及猜數(shù)字小游戲
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】04 畫(huà)布及我和 iVX 合照
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】05 畫(huà)布及飛機(jī)大戰(zhàn)游戲制作
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】06 數(shù)據(jù)庫(kù)及服務(wù)
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】07 08 新聞頁(yè)制作
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】09 聊天室制作
高分提升請(qǐng)查看專(zhuān)欄：
iVX入門(mén)到精通
大話 IVX 實(shí)戰(zhàn)到精通
十一、飛機(jī)大戰(zhàn)
制作微信小游戲大致流程與微信小程序、Web類(lèi)似，不同的在于是組件的使用。
11.1.1 完成游戲角色制作
首先我們創(chuàng)建一個(gè)微信 2D小游戲：
創(chuàng)建好游戲場(chǎng)景后在游戲界面中可以添加圖片，作為游戲中的元素。點(diǎn)擊圖片組件在畫(huà)布中繪制一個(gè)主角飛機(jī)。點(diǎn)擊圖片后在畫(huà)布中拖動(dòng)鼠標(biāo)繪制區(qū)域后將會(huì)彈出資源選擇框：
選中我們需要添加的圖片素材后，此時(shí)畫(huà)布中就會(huì)出現(xiàn)主角飛機(jī)圖片：
我們點(diǎn)擊圖片，拖拽到合適大小：
11.1.2 完成物理世界添加
為了方便之后飛機(jī)與敵機(jī)之間檢測(cè)物理碰撞，我們需要在畫(huà)布中添加一個(gè)物理世界，并將主角飛機(jī)作為物理世界的子對(duì)象：
為了使主角飛機(jī)能夠收到物理世界的影響，需要給主角飛機(jī)添加一個(gè)物體。在對(duì)象樹(shù)種點(diǎn)擊飛機(jī)圖片組件，在左側(cè)組件欄中點(diǎn)擊物體進(jìn)行添加：
此時(shí)我們通過(guò) web 瀏覽器進(jìn)行調(diào)試，點(diǎn)擊預(yù)覽：
為了更好的方便觀察，我們?cè)诔霈F(xiàn)的瀏覽器窗口中按下 F12，選擇該窗口為手機(jī)瀏覽器窗口：
我們刷新界面后將會(huì)看到主角飛機(jī)從上往下掉落：
由于在物理世界中發(fā)生碰撞，物體之間將會(huì)出現(xiàn)旋轉(zhuǎn)等情況，我們需要飛機(jī)頭一直正朝著上方，需要禁止主角飛機(jī)的旋轉(zhuǎn)角度。點(diǎn)擊飛機(jī)主角下的物體組件，在屬性欄中將物體的固定旋轉(zhuǎn)角度開(kāi)啟：
11.1.3 完成子彈對(duì)象反重力運(yùn)動(dòng)
接下來(lái)開(kāi)始設(shè)置子彈自動(dòng)發(fā)射，我們先在畫(huà)布中再次添加一個(gè)子彈圖片組件，并且在這個(gè)子彈圖片組件下添加物體組件：
此時(shí)預(yù)覽發(fā)現(xiàn)子彈會(huì)自動(dòng)掉落，解決這個(gè)問(wèn)題只需要在子彈組件下添加一個(gè)運(yùn)動(dòng)組件：
我們點(diǎn)擊運(yùn)動(dòng)組件，設(shè)置移動(dòng)方向?yàn)?90 度則為垂直向上運(yùn)動(dòng)，隨后給與這個(gè)方向設(shè)置移動(dòng)速度，設(shè)置為 -600 則為表示反方向運(yùn)動(dòng)，最后還需要開(kāi)啟自動(dòng)播放才會(huì)生效：
接著我們預(yù)覽將會(huì)發(fā)現(xiàn)已經(jīng)成功的使該子彈反方向進(jìn)行運(yùn)動(dòng)，此時(shí)還要注意要將子彈的固定旋轉(zhuǎn)屬性開(kāi)啟，否則子彈將會(huì)在之后的碰撞中發(fā)生不理想的效果。
11.1.4 使用對(duì)象組創(chuàng)建子彈
由于子彈是需要間隔一定時(shí)間進(jìn)行自動(dòng)發(fā)射，我們現(xiàn)在使用對(duì)象組組件對(duì)子彈進(jìn)行統(tǒng)一管理。此時(shí)添加一個(gè)對(duì)象組添加到物理世界中，選擇管理的范圍為整個(gè)畫(huà)布（此處需要頂部和底部留一點(diǎn)空隙用于之后的碰撞處理）：
添加完畢后發(fā)現(xiàn)飛機(jī)和子彈都不見(jiàn)了，這是因?yàn)閷?duì)象組覆蓋了飛機(jī)主角圖片與子彈圖片。此時(shí)將對(duì)象組在對(duì)象樹(shù)的次序放到最底部即可（在對(duì)象樹(shù)種越靠近頂部顯示的優(yōu)先級(jí)越高）。
接著把子彈圖片組件添加到對(duì)象組下：
由于子彈是間隔發(fā)射，此時(shí)我們需要在前臺(tái)中創(chuàng)建一個(gè)觸發(fā)器定時(shí)發(fā)射子彈：
隨后設(shè)置觸發(fā)器的時(shí)間間隔為 0.3，并且開(kāi)啟自動(dòng)播放：
接著為觸發(fā)器設(shè)置事件，條件為觸發(fā)器觸發(fā)時(shí)，使用對(duì)象組組件的創(chuàng)建對(duì)象動(dòng)作并設(shè)置模板對(duì)象為子彈對(duì)象：
我們接著給子彈設(shè)置一個(gè)初始的出現(xiàn)位置，這個(gè)位置我們可以設(shè)置成主角飛機(jī)的位置，之后再通過(guò)微調(diào)使子彈出現(xiàn)的位置在飛機(jī)機(jī)頭即可：
我們運(yùn)行程序?qū)?huì)發(fā)現(xiàn)子彈將會(huì)自動(dòng)發(fā)射：
11.1.5 子彈優(yōu)化
此時(shí)子彈并不會(huì)自動(dòng)消失，我們可以在頂部加一個(gè)矩形組件命名為頂部，該組件添加物體組件后，設(shè)置位置為固定 xy 坐標(biāo)與固定旋轉(zhuǎn)角度：
接下來(lái)我們?yōu)樽訌椞砑右粋€(gè)事件，該事件觸發(fā)為開(kāi)始碰撞，選擇碰撞對(duì)象為頂部，動(dòng)作為當(dāng)前對(duì)象自動(dòng)移除：
此時(shí)再預(yù)覽項(xiàng)目則會(huì)發(fā)現(xiàn)子彈會(huì)自動(dòng)消失，但是頂部的物體存在邊框和顏色，我們點(diǎn)擊頂部組件，更改背景顏色的透明度為 0，再更改該組件的邊框?qū)挾葹?0，該組件就可以從視覺(jué)上消失在這個(gè)頁(yè)面之中：
接著我們開(kāi)始為這個(gè)飛機(jī)主角添加移動(dòng)事件。我們點(diǎn)擊前臺(tái)添加事件，當(dāng)手指按下，飛機(jī)主角組件將會(huì)在指定范圍內(nèi)移動(dòng)到該位置：
11.1.6 設(shè)置敵機(jī)
接著我們添加敵機(jī)。在對(duì)象組中添加一個(gè)圖片組件，并且為其添加物體組件：
點(diǎn)擊物體組件，設(shè)置阻尼為 0.95 并開(kāi)啟固定旋轉(zhuǎn)角度，此時(shí)該飛機(jī)從頂部掉落速度將會(huì)減慢：
我們此時(shí)再給敵機(jī)組件一個(gè)碰撞事件，當(dāng)碰到子彈時(shí)自動(dòng)消失：
再給子彈組件添加一個(gè)事件，碰到敵機(jī)自動(dòng)消失：
此時(shí)我們開(kāi)始批量創(chuàng)建敵機(jī)，我們創(chuàng)建一個(gè)數(shù)值變量命名為隨機(jī) x，用于敵機(jī)的隨機(jī)橫軸位置：
接著我們?cè)谟|發(fā)器中給隨機(jī) x 變量隨機(jī)值：
接著在觸發(fā)器中使用對(duì)象組創(chuàng)建飛機(jī)對(duì)象，X 值為隨機(jī)x 變量值， Y 值給與一個(gè)固定值距離頂部一定距離即可：
此時(shí)敵機(jī)未擊中將會(huì)掉落到屏幕底部，此時(shí)在底部添加一個(gè)透明的矩形組件命名為底部，敵機(jī)觸發(fā)后自動(dòng)消失：
11.1.7 優(yōu)化游戲
接下來(lái)創(chuàng)建一個(gè)變量記錄擊落敵機(jī)數(shù)量：
在子彈觸碰到敵機(jī)時(shí)該數(shù)值加一：
我們?cè)谇芭_(tái)創(chuàng)建一個(gè)文本命名為擊落，用于顯示該變量值并且設(shè)置初始文本為 0：
之后在子彈觸碰敵機(jī)時(shí)添加一個(gè)動(dòng)作，將顯示該變量的內(nèi)容：
此時(shí)預(yù)覽內(nèi)容將會(huì)實(shí)現(xiàn)計(jì)分效果：
最后在主角飛機(jī)中添加觸碰到敵機(jī)時(shí)的動(dòng)作：
以上事件當(dāng)主角飛機(jī)觸碰敵機(jī)使使用物理世界以及觸發(fā)器執(zhí)行暫停動(dòng)作游戲則會(huì)停止。
最終考慮用戶體驗(yàn)，我們?cè)谕Ｖ购笤亠@示一個(gè)游戲結(jié)束文本。在前臺(tái)中添加一個(gè)文本命名為游戲結(jié)束，默認(rèn)為不可見(jiàn)：
在敵機(jī)觸碰到主角時(shí)添加游戲結(jié)束文本顯示操作即可：
總結(jié)
以上是生活随笔為你收集整理的【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【iVX 初级工程师培训教程 10篇文拿
- 下一篇： 【iVX 初级工程师培训教程 10篇文拿