小程序模板網(wǎng)

如何在完全不懂服務(wù)器開發(fā)的情況下做一個(gè)實(shí)時(shí)聯(lián)網(wǎng)對(duì)戰(zhàn)的微信小游戲 ...

發(fā)布時(shí)間:2018-05-08 14:22 所屬欄目:小程序開發(fā)教程
根據(jù)微信官方對(duì)外公開的消息,微信小游戲的腳步越來越接近了。它的開發(fā)者資格門檻和使用者門檻都很低,以后必將引爆一波"全民開發(fā)小游戲"浪潮。
 
官方的開發(fā)工具創(chuàng)建項(xiàng)目即可獲取 `打飛機(jī)` 的源碼,這是一個(gè)很小但五臟俱全的2D游戲,相信大多數(shù)嗅覺靈敏的程序員小哥哥們都已經(jīng)體驗(yàn)并且親手改造過啦。
 
但是如果你想借助微信的平臺(tái),做一個(gè)交互性、可玩性很強(qiáng)的 `聯(lián)網(wǎng)游戲` ,就有一定的難度啦。,第一波流量紅利你也能輕松抓?。∵@次教程我們就來討論 **如何在完全不懂服務(wù)器開發(fā)的情況下做一個(gè)實(shí)時(shí)聯(lián)網(wǎng)對(duì)戰(zhàn)的微信小游戲** (聯(lián)網(wǎng)飛機(jī)大戰(zhàn))。

為了能通讀這篇文章,你最好:

  1. 已經(jīng)掌握開發(fā)簡(jiǎn)單的微信小游戲,能看懂官方 打飛機(jī) 源碼就行,甚至?xí)?nbsp;Javascript 輸出HelloWorld也行
  2. 略懂Java,其實(shí)不懂也行,在JS的基礎(chǔ)上很容易引申,主要是要有 面向?qū)ο?nbsp;的思想

下文重點(diǎn)都是講如何快速上手開發(fā) 聯(lián)網(wǎng)的微信小游戲 , 但 如果你懂得一些U3D開發(fā),Bmob官方 也同時(shí)提供了 Unity3D版本的Demo+SDK,兩者可以跨平臺(tái)互通一起玩,且接口規(guī)范高度一致,基本上覆蓋市面上所有的主流終端

PS:微信小游戲、Unity3D的SDK都是 開源 的,歡迎各位糾錯(cuò)

最簡(jiǎn)單的步驟

  1. 獲取 比目游戲云服務(wù) (下稱 官網(wǎng))的賬號(hào),文章下方有獲得方式;
  2. 在官網(wǎng)下載 微信小游戲Demo+SDK,導(dǎo)入到微信開發(fā)者工具(下稱 工具),并修改AppKey;
  3. 在官網(wǎng)配置玩家同步屬性,并發(fā)布下載的云端代碼,然后在官網(wǎng)選擇一個(gè)云服務(wù)器開啟(PS:云服務(wù)器是免費(fèi)的);
  4. 試運(yùn)行Demo,如果console沒有報(bào)錯(cuò)的話,點(diǎn)擊工具的預(yù)覽,用微信掃描二維碼;
  5. 現(xiàn)在,就可以在游戲內(nèi)創(chuàng)建房間,體驗(yàn)電腦與手機(jī)聯(lián)網(wǎng)對(duì)戰(zhàn)啦;
接下來大概介紹一下微信小游戲項(xiàng)目開發(fā)的要點(diǎn),云端代碼的詳解和U3D版本的教程將陸續(xù)推出。
 

運(yùn)行效果

左邊的是 微信小游戲-開發(fā)者工具 的游戲頁面,與右邊的 Unity3D-MacOS-Editor 跨平臺(tái)玩

運(yùn)行效果如下:

https://www.bilibili.com/video/av21409295/

不得不說程序員自己來做UI真的丑得可以,那個(gè)"房間"界面真的無力吐槽

目前的Demo跨平臺(tái)玩耍還有點(diǎn)小問題,例如玩家、怪物的移動(dòng)速度不統(tǒng)一。但同平臺(tái)對(duì)戰(zhàn)是高度一致的。 這個(gè)問題與SDK沒有關(guān)系,都是Demo本地項(xiàng)目的參數(shù)設(shè)置,主要是因?yàn)閁nity項(xiàng)目都用的是絕對(duì)值,微信小游戲項(xiàng)目都是相對(duì)值,后續(xù)Unity也采用相對(duì)值的方式,完善Demo。

如何從零開發(fā)

論游戲開發(fā)的經(jīng)驗(yàn),相信各位讀者中比我厲害的人多了去了。我這里就根據(jù)我個(gè)人的開發(fā)歷程,圍繞 聯(lián)網(wǎng)飛機(jī)大戰(zhàn) 這個(gè)項(xiàng)目,講一下從零開發(fā)游戲的步驟吧。(嫌麻煩的可以不用看這一篇)

  1. 確定游戲主題、玩法;
  2. 理清多個(gè)客戶端之間需要 同步的屬性、互相通知的事件;
  3. 分析客戶端與服務(wù)器需要 交互的事件;
  4. 制作/收集圖片、動(dòng)畫、音效素材;
  5. 開發(fā)/照搬游戲世界的物理引擎,包括物體渲染、移動(dòng)、碰撞檢測(cè)(以及內(nèi)存管理)等;
  6. 先開發(fā)服務(wù)端游戲邏輯(Java云端代碼),有利于理清整個(gè)游戲的邏輯;
  7. 后開發(fā)客戶端游戲邏輯、接入SDK;
  8. 測(cè)試、發(fā)布;

 

玩法:這個(gè)項(xiàng)目準(zhǔn)備做成可以容納超多人同時(shí)在線的飛機(jī)大戰(zhàn),所有設(shè)定基本上和微信小游戲官方Demo一樣,增加了幾個(gè)設(shè)定:


- 有四種造型、級(jí)別不同的Bot(有些人習(xí)慣稱為 '電腦',也可以稱為'飛機(jī)NPC')
- 第3、4級(jí)的Bot可以開火,子彈(下稱Fire)飛行速度與玩家一致,4級(jí)Bot的開火頻率更高
- Bot有生命值(不再是一碰就死),分別是2、3、4、4,表示可以承受的Fire攻擊次數(shù)
- Player(玩家)和Bot都分為兩個(gè)陣營(yíng),陣營(yíng)內(nèi)無隊(duì)友傷害
- Player的陣營(yíng)由服務(wù)器隨機(jī)劃分,也可以改成玩家自己決定
- 刷怪邏輯放在云端,指定新產(chǎn)生的Bot的陣營(yíng)、位置、類型
- Player受到傷害即淘汰,F(xiàn)ire碰到任何物體都消失
- Player之間、Bot之間、Player與Bot 如果發(fā)生碰撞,會(huì)同歸于盡
- Player的開火暫時(shí)做成自動(dòng)的,而不是按鍵開火
- Player的開火事件(開火坐標(biāo))是直接發(fā)送到其它客戶端,不經(jīng)過云端代碼
- Player的淘汰交由云端處理,由云端校驗(yàn)后,再把該事件和勝負(fù)判定分發(fā)下去
- Bot的淘汰判定交由云端處理、分發(fā)
- 當(dāng)某一方Player全部死亡時(shí),另一方勝利;雙方各剩一人時(shí)同歸于盡則平局

客戶端間屬性同步、事件通知:玩家僅有兩個(gè)屬性需要自動(dòng)同步、分發(fā),一個(gè)是 位置,另一個(gè)是 分?jǐn)?shù);直接同步的事件僅有 開火


- 位置:這是一個(gè)2D游戲,所以玩家位置可以用float[2]類型表達(dá)
       但是為了保持一致性,Demo用了int[2],數(shù)值由0-65535,表達(dá)0%-100%
       (一致性,是指跨平臺(tái)或分辨率、屏幕大小不同時(shí),坐標(biāo)需要達(dá)成一致最好用百分比)
- 分?jǐn)?shù):僅云端代碼有權(quán)限修改,根據(jù)Player、Bot的擊落事件加分
       可以在游戲結(jié)束時(shí),結(jié)算成經(jīng)驗(yàn)值,保存到Bmob數(shù)據(jù)庫

- 開火:直接通知到其它客戶端,僅記錄Fire的起點(diǎn)坐標(biāo)即可,也就是[0-65535,0-65535]
        表達(dá)成byte[]時(shí),一個(gè)0-65535的int可以變成兩個(gè)0-255的數(shù)字組成
        再加上需要標(biāo)記這次通知的事件類型(開火),這里定flag為50
        也就是開火時(shí)向其它玩家發(fā)送 [50, 0-255, 0-255, 0-255, 0-255]

  • 客戶端-云端交互事件:需要服務(wù)器做的事情有:保存房間信息;分配隊(duì)伍;正式通知游戲開始;刷怪邏輯;判定Bot淘汰;判定Player淘汰;添加Player分?jǐn)?shù);判定勝負(fù)結(jié)果;戰(zhàn)績(jī)記錄

    
    - 房間、戰(zhàn)績(jī)信息:通過云端代碼的Bmob數(shù)據(jù)庫操作API完成
    - 分配隊(duì)伍:在客戶端Scene.OnLoad后通知服務(wù)器,服務(wù)器進(jìn)行隊(duì)伍分配
              將玩家隨機(jī)、均勻分成兩隊(duì),然后下發(fā),客戶端處理完畢再通知服務(wù)器
    - 正式開始:服務(wù)器確認(rèn)所有客戶端處理了隊(duì)伍信息后,通知所有客戶端開始游戲
    - 刷怪邏輯:隨機(jī)Bot的陣營(yíng)、x軸位置、類型、名字,下發(fā)給客戶端處理
    - Bot淘汰:任意客戶端上報(bào)'目睹'某Bot被擊毀,云端即采信、下發(fā)、記分
              所謂'目睹',就是客戶端渲染時(shí)進(jìn)行碰撞檢測(cè),發(fā)現(xiàn)這個(gè)Bot的hp為0
    - Player淘汰:n個(gè)客戶端'目睹'某Player被擊毀,在短時(shí)間內(nèi)n>=m,云端才采信、下發(fā)、記分
                 當(dāng)玩家僅有2、3人時(shí),m為1,也就是上報(bào)即采信
                 當(dāng)玩家有4、5、6人時(shí),m為2,不采信單個(gè)上報(bào)
                 當(dāng)玩家超過6人時(shí),m為3,也就是起碼3人上報(bào)才采信
                 '短時(shí)間'目前是設(shè)為2000ms,也就是上報(bào)信息的有效期為2秒
    - 判定勝負(fù)結(jié)果:兩隊(duì)最后一人同時(shí)淘汰時(shí)平局;某隊(duì)先于敵隊(duì)全員淘汰則敗
  • 
    素材:來自美工/Unity Assets商店
  • 
    物理引擎:來自微信官方Demo(Sprite.js)/腦洞+造輪子/第三方途徑下載
  • 
    
    
    // 小改進(jìn)后的矩形碰撞檢測(cè):
    isCollideWith(sp) {
        if (this.visible && sp.visible) {
            let dis = sp.x - this.x;
            if (-sp.width < dis && dis < this.width) {
                dis = sp.y - this.y;
                if (-sp.height < dis && dis < this.height)
                    return true;
            }
        }
        return false;
    }
  • 
    
    • Java云端代碼:在上面第3點(diǎn)已經(jīng)有說明,這里放幾段代碼:
    • 測(cè)試、發(fā)布:灰常好玩,下階段準(zhǔn)備做成四個(gè)陣營(yíng)的玩法

    • 開發(fā)體驗(yàn)

      在基本素材、組件(物理引擎)等預(yù)備充分的情況下,花了不到兩個(gè)小時(shí)就將一個(gè)單機(jī)游戲改造成了聯(lián)網(wǎng)對(duì)戰(zhàn)的游戲,而且邏輯也足夠健壯,效果還是很酷的。再加上SDK是開源的,有什么問題很容易定位。

      總體來講,Bmob Game SDK真正拉低了網(wǎng)絡(luò)游戲開發(fā)的門檻,完全沒有了以前龐大、繁雜的后端開發(fā)和服務(wù)器運(yùn)維工作,讓很多受限于資源、只能開發(fā)單機(jī)游戲的團(tuán)隊(duì)和項(xiàng)目有了新的出路~



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24344.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢