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

 

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

 

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

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

1. 已經(jīng)掌握開發(fā)簡單的微信小游戲，能看懂官方 打飛機(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，兩者可以跨平臺互通一起玩，且接口規(guī)范高度一致，基本上覆蓋市面上所有的主流終端

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

最簡單的步驟

1. 獲取 比目游戲云服務(wù) (下稱 官網(wǎng))的賬號，文章下方有獲得方式；
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)對戰(zhàn)啦；

 

運(yùn)行效果

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

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

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

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

目前的Demo跨平臺玩耍還有點(diǎn)小問題，例如玩家、怪物的移動速度不統(tǒng)一。但同平臺對戰(zhàn)是高度一致的。 這個(gè)問題與SDK沒有關(guān)系，都是Demo本地項(xiàng)目的參數(shù)設(shè)置，主要是因?yàn)閁nity項(xiàng)目都用的是絕對值，微信小游戲項(xiàng)目都是相對值，后續(xù)Unity也采用相對值的方式，完善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. 制作/收集圖片、動畫、音效素材；
5. 開發(fā)/照搬游戲世界的物理引擎，包括物體渲染、移動、碰撞檢測(以及內(nèi)存管理)等；
6. 先開發(fā)服務(wù)端游戲邏輯（Java云端代碼），有利于理清整個(gè)游戲的邏輯；
7. 后開發(fā)客戶端游戲邏輯、接入SDK；
8. 測試、發(fā)布；

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

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

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

- 位置：這是一個(gè)2D游戲，所以玩家位置可以用float[2]類型表達(dá)
       但是為了保持一致性，Demo用了int[2]，數(shù)值由0-65535，表達(dá)0%-100%
       (一致性，是指跨平臺或分辨率、屏幕大小不同時(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)績記錄

  
  - 房間、戰(zhàn)績信息：通過云端代碼的Bmob數(shù)據(jù)庫操作API完成
  - 分配隊(duì)伍：在客戶端Scene.OnLoad后通知服務(wù)器，服務(wù)器進(jìn)行隊(duì)伍分配
            將玩家隨機(jī)、均勻分成兩隊(duì)，然后下發(fā)，客戶端處理完畢再通知服務(wù)器
  - 正式開始：服務(wù)器確認(rèn)所有客戶端處理了隊(duì)伍信息后，通知所有客戶端開始游戲
  - 刷怪邏輯：隨機(jī)Bot的陣營、x軸位置、類型、名字，下發(fā)給客戶端處理
  - Bot淘汰：任意客戶端上報(bào)'目睹'某Bot被擊毀，云端即采信、下發(fā)、記分
            所謂'目睹'，就是客戶端渲染時(shí)進(jìn)行碰撞檢測，發(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)后的矩形碰撞檢測：
  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)有說明，這里放幾段代碼：

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 測試、發(fā)布：灰常好玩，下階段準(zhǔn)備做成四個(gè)陣營的玩法

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

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

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