如何在完全不懂服務器開發的情況下做一個實時聯網對戰的微信小游戲 ...

發布時間：2018-05-08 14:22 所屬欄目：小程序開發教程

根據微信官方對外公開的消息，微信小游戲的腳步越來越接近了。它的開發者資格門檻和使用者門檻都很低，以后必將引爆一波"全民開發小游戲"浪潮。

官方的開發工具創建項目即可獲取 `打飛機` 的源碼，這是一個很小但五臟俱全的2D游戲，相信大多數嗅覺靈敏的程序員小哥哥們都已經體驗并且親手改造過啦。

但是如果你想借助微信的平臺，做一個交互性、可玩性很強的 `聯網游戲` ，就有一定的難度啦。，第一波流量紅利你也能輕松抓?。∵@次教程我們就來討論 **如何在完全不懂服務器開發的情況下做一個實時聯網對戰的微信小游戲** （聯網飛機大戰）。

為了能通讀這篇文章，你最好：

已經掌握開發簡單的微信小游戲，能看懂官方打飛機源碼就行，甚至會用 Javascript 輸出HelloWorld也行
略懂Java，其實不懂也行，在JS的基礎上很容易引申，主要是要有面向對象的思想

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

PS：微信小游戲、Unity3D的SDK都是開源的,歡迎各位糾錯

最簡單的步驟

獲取比目游戲云服務 (下稱官網)的賬號，文章下方有獲得方式；
在官網下載微信小游戲Demo+SDK，導入到微信開發者工具(下稱工具)，并修改AppKey；
在官網配置玩家同步屬性，并發布下載的云端代碼，然后在官網選擇一個云服務器開啟(PS:云服務器是免費的)；
試運行Demo，如果console沒有報錯的話，點擊工具的預覽，用微信掃描二維碼；
現在，就可以在游戲內創建房間，體驗電腦與手機聯網對戰啦；

接下來大概介紹一下微信小游戲項目開發的要點，云端代碼的詳解和U3D版本的教程將陸續推出。

運行效果

左邊的是微信小游戲-開發者工具的游戲頁面，與右邊的 Unity3D-MacOS-Editor 跨平臺玩

運行效果如下：

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

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

目前的Demo跨平臺玩耍還有點小問題，例如玩家、怪物的移動速度不統一。但同平臺對戰是高度一致的。這個問題與SDK沒有關系，都是Demo本地項目的參數設置，主要是因為Unity項目都用的是絕對值，微信小游戲項目都是相對值，后續Unity也采用相對值的方式，完善Demo。

如何從零開發

論游戲開發的經驗，相信各位讀者中比我厲害的人多了去了。我這里就根據我個人的開發歷程，圍繞聯網飛機大戰這個項目，講一下從零開發游戲的步驟吧。(嫌麻煩的可以不用看這一篇)

確定游戲主題、玩法；
理清多個客戶端之間需要同步的屬性、互相通知的事件；
分析客戶端與服務器需要交互的事件；
制作/收集圖片、動畫、音效素材；
開發/照搬游戲世界的物理引擎，包括物體渲染、移動、碰撞檢測(以及內存管理)等；
先開發服務端游戲邏輯（Java云端代碼），有利于理清整個游戲的邏輯；
后開發客戶端游戲邏輯、接入SDK；
測試、發布；

玩法：這個項目準備做成可以容納超多人同時在線的飛機大戰，所有設定基本上和微信小游戲官方Demo一樣，增加了幾個設定：


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

客戶端間屬性同步、事件通知：玩家僅有兩個屬性需要自動同步、分發，一個是位置，另一個是分數；直接同步的事件僅有開火


- 位置：這是一個2D游戲，所以玩家位置可以用float[2]類型表達
       但是為了保持一致性，Demo用了int[2]，數值由0-65535，表達0%-100%
       (一致性，是指跨平臺或分辨率、屏幕大小不同時，坐標需要達成一致最好用百分比)
- 分數：僅云端代碼有權限修改，根據Player、Bot的擊落事件加分
       可以在游戲結束時，結算成經驗值，保存到Bmob數據庫

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

客戶端-云端交互事件：需要服務器做的事情有：保存房間信息；分配隊伍；正式通知游戲開始；刷怪邏輯；判定Bot淘汰；判定Player淘汰；添加Player分數；判定勝負結果；戰績記錄


- 房間、戰績信息：通過云端代碼的Bmob數據庫操作API完成
- 分配隊伍：在客戶端Scene.OnLoad后通知服務器，服務器進行隊伍分配
          將玩家隨機、均勻分成兩隊，然后下發，客戶端處理完畢再通知服務器
- 正式開始：服務器確認所有客戶端處理了隊伍信息后，通知所有客戶端開始游戲
- 刷怪邏輯：隨機Bot的陣營、x軸位置、類型、名字，下發給客戶端處理
- Bot淘汰：任意客戶端上報'目睹'某Bot被擊毀，云端即采信、下發、記分
          所謂'目睹'，就是客戶端渲染時進行碰撞檢測，發現這個Bot的hp為0
- Player淘汰：n個客戶端'目睹'某Player被擊毀，在短時間內n>=m，云端才采信、下發、記分
             當玩家僅有2、3人時，m為1，也就是上報即采信
             當玩家有4、5、6人時，m為2，不采信單個上報
             當玩家超過6人時，m為3，也就是起碼3人上報才采信
             '短時間'目前是設為2000ms，也就是上報信息的有效期為2秒
- 判定勝負結果：兩隊最后一人同時淘汰時平局；某隊先于敵隊全員淘汰則敗


素材：來自美工／Unity Assets商店


物理引擎：來自微信官方Demo(Sprite.js)／腦洞+造輪子／第三方途徑下載


// 小改進后的矩形碰撞檢測：
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點已經有說明，這里放幾段代碼：
- 測試、發布：灰常好玩，下階段準備做成四個陣營的玩法
- 開發體驗
  
  在基本素材、組件(物理引擎)等預備充分的情況下，花了不到兩個小時就將一個單機游戲改造成了聯網對戰的游戲，而且邏輯也足夠健壯，效果還是很酷的。再加上SDK是開源的，有什么問題很容易定位。
  
  總體來講，Bmob Game SDK真正拉低了網絡游戲開發的門檻，完全沒有了以前龐大、繁雜的后端開發和服務器運維工作，讓很多受限于資源、只能開發單機游戲的團隊和項目有了新的出路~