<tbody id="suqa6"></tbody>
  • <acronym id="suqa6"><kbd id="suqa6"></kbd></acronym>
    <acronym id="suqa6"></acronym>
  • 基于有向距離場(SDF)的地圖碰撞系統 | Cocos技術派第15期

    2020.5.27 技術干貨 by Cocos

    近日,ID 為?kx-dz?的開發者在 Cocos 中文社區分享了一篇名為《介紹一個基于有向距離場(SDF)的地圖碰撞系統》的技術文章,獲得諸多好評。C姐第一時間聯系到了作者,在獲得轉載授權的同時,也對這則分享背后真實游戲項目《吃雞聯盟》制作人書生進行了專訪。精彩內容,跟著C姐一起往下看吧!

    《吃雞聯盟》游戲截圖

    受訪者:書生

    編輯:C姐

    《吃雞聯盟》是由南京壹游網絡科技有限公司基于 Cocos Creator 3D 研發的一款 IO 競技小游戲。這支成立于2017年的團隊,在經歷了創業初期 H5 頁游的失利和中期的迷茫時期后,如今堅定地選擇了走小游戲開發路線,團隊負責人笑稱自己“是蕓蕓小開發者的真實縮影”。

    目前團隊共有4人,分別擔任項目制作人書生(兼行政、商務、運營…..)、技術開發毛毛熊、美術設計啊翔和策劃湯包五十六,“能者多勞”,作為公司負責人的書生很苦逼的對應了 N 個崗位。

    《吃雞聯盟》立項于2020年3月,疫情期間,成員們就通過遠程辦公的方式不斷尋找新的產品方向。團隊之前的產品都是關卡制,受限于團隊規模,關卡制的游戲又對內容的要求比較多,制作成本較高,此前的產品效果不是很理想。考慮到小游戲的特性、用戶需求以及團隊本身的能力,最終選擇了 IO 類作為后期團隊的主要研發方向。

    3月初團隊復工,產品立項,4月底完成了第一個版本,開發周期將近兩個月。這是團隊的第二款 3D 產品,也是第一款 IO 類產品,增加了 AI 來提高游戲可玩性,花費了相當多的時間在 AI 的研究上。

    游戲融合了吃雞+IO 元素,玩法很簡單,拖動人物即可控制行走并發射道具,玩家可以通過靈活的走位來發射子彈攻擊敵人,也可以通過掩體來躲避敵人攻擊。拾取游戲內的紫鉆可以提升等級,進而對技能進行解鎖和升級,比如回復血量、提高攻擊力、提高攻速、提高射程等,隨著時間的推進,游戲地圖會縮小,玩家必須移動至安全區域,否則就將喪生在毒圈中。

    除了縮圈機制之外,《吃雞聯盟》區別于其他類型射擊游戲的地方,還表現在子彈的速度上。大部分的射擊游戲屬于不對稱攻擊(闖關類的都是玩家射速高、怪物射速慢)和硬扛類(射速相同拼武器和血量),《吃雞聯盟》的子彈速度相對較慢,有比較多的可操作性,玩家可以通過操作躲避敵人的子彈,利用走位去攻擊其他玩家,這樣的機制更能讓玩家體驗操作的樂趣。

    游戲中玩家與障礙物的碰撞檢測便是采用的 SDF 技術,是怎么想到把 SDF 技術運用在這款游戲中的呢?

    洪磊分享道,“目前團隊主要發布的平臺是微信小游戲,但是微信小游戲平臺對于性能的壓制還是比較嚴重的,尤其是蘋果手機。在項目初期,團隊有兩個選擇:一是基于物理引擎,二是使用 SDF 技術。這款游戲涉及到比較多尋路算法,而且模型較多,基于性能的考慮,我們盡量在其他的方面進行優化,所以選擇使用 SDF 技術來實現碰撞檢測?!?/p>

    傳統方案上,對于這種場景的設計,大家首先想到的肯定是物理引擎,通過設置建筑物和障礙物的碰撞體(Collider)來阻擋人物的行動。

    在這種思路下,如果場景中的建筑物和人物比較多,會造成比較嚴重的性能問題,因為每一幀內對每一個人物和每一個障礙物都需要做碰撞檢測,計算量是:N (人物) * M (障礙物)。再加上飛鏢的碰撞檢測計算量,在不支持 JIT 的 iOS 平臺上可能會有不小的性能壓力。當然,基于物理引擎的碰撞檢測方式也有不少可以優化的點,比如說:

    • 使用簡單的 Builtin Physics 替代 Cannon 物理后端
    • 通過場景管理剔除不在可視范圍內的物體的碰撞計算
    • 簡化 3D 碰撞檢測為 2D 碰撞檢測,簡化盒子碰撞體為圓形碰撞體

    但是這些優化的效率都遠遠不如《吃雞聯盟》中所應用的有向距離場碰撞系統。下面就來看看開發團隊傾囊相授的基于 Cocos Creator 3D 如何實現這樣一套場景碰撞檢測系統吧!

    原文作者:kx-dz

    首先,大概實現的原理是通過插值計算得出任意點的有向距離數據,然后與單位的碰撞大小做比對,來檢測單位是否可以通行。實例圖如下:

    如果你做的是類似于《王者榮耀》這樣的偽 3D 游戲,只需要考慮平面位置因素,不需要考慮高度,不需要太精準的碰撞判定,并且地圖元素固定不會變動,這套高效的、基于有向距離場(SDF)的地圖碰撞系統可以參考使用。

    1. 原理

    將地圖劃分為 N*N 個格子,每個格子的四個角存儲有距離數據,這些數據是每個角所在點到最近的障礙的距離。如下圖:

    深色格子不可通行,交叉點數字代表該點到最近的不可通行格子的距離(下文稱“有向距離”)。

    通過有向距離數據,我們可以通過計算差值的方式算出任意點到最近障礙的距離。

    如圖所示,在判斷精靈是否可通行時,只要在精靈當前位置所在格子上的數據進行一次插值計算,即可判斷是否可通行,非常高效。

    2. 具體實現

    既然這么棒,那么,要怎樣獲得這些數據呢?

    2.1:柵格化地圖數據

    就是將地圖劃分為N*N個格子,每個格子標記為可通行/不可通行。當然,劃分的格子越多,精度越高。

    建議使用高度圖來存儲通行數據,高度圖長這個樣子:

    這是一張 128*128 的圖片,代表將地圖劃分出的 128*128 個格子。圖片上每個像素點的顏色表示是否通行,黑色為障礙,白色為通行區域。

    2.2:讀取柵格數據

    準備好圖片后就需要讀取像素信息了。

    (關于原生url的獲取,暫時沒太好的方法,只有先load資源然后再獲取nativeUrl值。如果有更好的方法請告知)

    成功的話,你會獲取到 imageData,格式差不多這樣:

    data 數據每 4 個一組,存儲了一張圖片上每個像素的 RGBA 值,順序則是按照由左向右、由上往下的順序(遵循 canvas 坐標系)。將顏色數據轉換為二維的布爾數組,即為地圖每個柵格的通行數據。

    實現代碼:

    2.3:計算柵格四角的有向距離數據
    (比較麻煩的一步。這里介紹一個笨辦法,如果有更簡單的辦法,歡迎告知)
    每個角(即柵格劃分線的交叉點)都需要計算一次。如果你將地圖劃分成了N*N個柵格,那將有(N+1)*(N+1)個交叉點的有向距離數據需要計算。

    對于每個交叉點:

    首先要遍歷所有的柵格。如果是不可通行的柵格,判斷柵格和當前點的方位關系,決定用柵格的哪個角去計算到當前點的距離。

    決定好了后,計算兩點距離。所有不可通行的柵格都要和當前點計算距離,最后取它們的最小值,即為有向距離值。

    差不多是這個意思

    實現代碼:

    優化:

    因為計算量高達 (N+1)(N+1)N*N 次,可能會消耗大量時間。經試驗,一張網格尺寸為 128*128 的地圖,在純 H5 環境以及安卓的微信小游戲環境下,計算速度尚能接受,但是在 iOS 的微信小游戲環境下,計算時間高達 50s,這顯然是不能接受的。

    所以,推薦使用事先處理好數據,然后導出 json 文件的方式,游戲運行時直接讀取現成的 json 文件即可。

    這就是以內存空間換取速度的思想,也是 SDF 系統的核心思想。

    2.4:使用 SDF 碰撞系統

    分三步:
    第一步:判斷精靈當前位置屬于哪個格子,這個很容易;
    第二步:獲取格子四個角的有向距離,并計算插值;

    插值計算代碼:

    第三步:最后取得的數值表示精靈體積半徑為多少時才能通過,否則判定為阻攔。

    2.5:檢測到碰撞后的處理

    游戲中玩家使用搖桿控制角色時,如果撞到墻面了,肯定不可以讓角色立刻停下來,那樣的操作體驗就很糟糕了。通常的做法是讓角色沿著墻面滑行。

    基于 SDF 的碰撞系統有一套處理這類情況的方式,即通過計算碰撞法線來得出玩家移動時碰到障礙后的正確方位。

    計算碰撞法線方向的代碼:

    具體的處理碰撞的代碼:

    關于 SDF 的細節就不在這里向大家詳細解讀了,目前這方面的資料相對比較稀少,感興趣的開發者朋友,可以參考《騰訊游戲開發精粹》這本書進行學習,此外,也可以多逛逛?Cocos 官方論壇,論壇上還是有很多有價值的學習資料可以挖掘的。

    最后,要感謝 Cocos 團隊在這一年多來給予我們的支持。由于 Cocos Creator 引擎的易用性,在19年做小游戲時,我們就把 Cocos Creator 作為首選引擎,后期推出了 3D 引擎,我們幾乎沒有花學習成本就成功完成了從 2D 到 3D 的團隊轉型。

    在最開始使用 3D 引擎時,我們對于優化毫無經驗,Cocos 給我們提供了很多很好的思路。特別是到了后期,產品開始一些跨渠道跨平臺的運營時,關于各個渠道的平臺差異所產生的分包問題以及參數配置問題,這些對于小開發者很不友好,沒有經驗的情況下,可能要花很長時間來應對這些問題,幸好我們跟 Cocos 團隊有密切的溝通,這些問題都很快得到解決。


    以上就是本期技術派的全部內容啦!非常感謝制作人書生接受 Cocos 的專訪,也非常感謝《吃雞聯盟》團隊慷慨的技術分享,希望游戲可以取得好成績!

    點擊這里可進入社區原貼與作者交流,為作者點贊喲!也歡迎大家在微信中搜索體驗這款小游戲。

    技術派,是 Cocos 專為開發者打造了知識分享專欄,我們將不定期邀請知名的游戲制作者,為廣大開發者分享來自真實項目的實用的開發技術和實戰經驗。歡迎大家推薦想要學習的游戲產品和想要了解的技術知識,也誠邀有技術分享意愿的開發者聯系我們噢~

    更多【技術派】文章

    技術派01 |《野蠻人大作戰》H5項目從開發到上線

    技術派02 | Cocos Creator 2.0 攝像機的靈活運用

    技術派03 | ?推薦一款可查看節點樹的插件

    技術派04?| 3D 人物渲染詳細教程

    技術派05 | 實時競技小游戲技術分享

    技術派06 | Camera 攝像機詳解

    技術派07 | 重度小游戲《三國封魔傳》技術實現方案

    技術派08 | 3D 小游戲《飛躍地平線 Plus》開發分享

    技術派09 | 暢銷 SLG《亂世王者》深度優化方案

    技術派10 | 3D小游戲《快上車》技術分享

    技術派11 | 極限開發創作筆記

    技術派12?|?競技對抗小游戲《單挑籃球》開發歷程?

    技術派13?|3D《巔峰漂移》技術分享

    技術派14?|騰訊光子《最強魔斗士》3D 開發經驗

    国产亚洲精品视觉盛宴,日韩 精品 综合 丝袜 制服,一个添下面两个吃奶把腿扒开,国产真实露脸乱子伦