大家好，我IT俠又雙叒叕來了，上壹篇文章說了下ECS框架在H5下是如何使用的。本篇文章就來聊聊主角-四叉樹。
還是在開頭說壹下：
先給大家看看demo運行起來的效果，看看四叉樹在對象很多的情況下的威力
生成了超級多塊後四叉樹的表現
最後是關閉了調試線後的效果
四叉樹（quad-tree）是壹種數據結構，是壹種每個節點最多有四個子樹的數據結構。四叉樹常應用於二維空間數據的分析與分類。所以把四叉樹應用在二維的有效率之碰撞偵測上是非常適合的。
源碼裏的方法我就不壹壹列舉出來了，因為四叉樹的實現不是本文的重點，只介紹下四叉樹構造函數，還有包含哪些方法，以及方法的簡單解釋。github上開源很多四叉樹的實現，如果想深入了解可以自行查閱學習。
四叉樹類有以下成員方法組成：
當有Canvas組件的實體產生時候，捕獲該實體，創建壹個四叉樹,根節點包圍盒就用canvas節點的位置和寬高。然後將四叉樹對象保存到ecs對象上方便其他系統訪問。
接下來寫壹個系統"關心壹下"帶有 "Mob","Appearance","Props" 這3個組件的實體的產生。因為有這3個組件的實體我們認定是壹個怪物,怪物會和主角發生碰撞，所以需要放進四叉樹中等待提取。
調用四叉樹實例上的 insert 方法把怪物的包圍盒和怪物實體壹起打包到壹個對象上保存進四叉樹上的節點中。
現在怪物都被放進了四叉樹上，接著我們需要寫壹個用戶輸入系統，監聽玩家控制主角移動等事件。這裏用的是 hammer.js 庫來實現。
定義壹個用戶輸入系統,該系統關心"LocalControl","Props","Node","Character" 組件。有這4個組件的實體就是我們的主角實體。之後分別監聽 panstart (開始觸摸屏幕) , panmove (移動手指), panend (手擡起) 這3個事件。
可以看到IT俠在"panmvoe"事件回調中創建了壹個"HighLight"組件的實體，目的就是為了告知（world）引擎我需要高亮，如果有關心"HighLight"的系統存在的話，那麽該系統就會工作。那麽接下來就是定義壹個關心該組件的系統。
碰撞邏輯就不屬於demo功能了。開發者可以自行處理
最後就是怪物消失，我們需要更新壹下樹節點狀態。寫壹個死亡系統關心帶有"Mob","Dead" 組件的實體，這些實體被定義為了已經死亡的實體。
現在有了 創建四叉樹，將對象加入樹，檢查是否和與主角發生碰撞，還有刪除樹上空閑的子節點。等功能，相信大家已經大概了解 ECS框架是如何與四叉樹結合來做碰撞檢測的了。
如果需要源碼的可以微信和我聯系哈。支持壹下 交個朋友。
謝謝看到最後（ps: 點贊 支持壹下唄）
[ECS框架系列]-與四叉樹的壹次結合（1）
[ECS系列] 框架中必不可少的工具類
[ECS系列] World的設計思路
[ECS系列] 實體，組件，系統的設計思路
[ECS系列] 歡迎來到ECS的世界
CocosCreator 教學系列-對象池
無限嵌套的富文本打字機
CocosCreator 教學系列-打字機效果(1)
CocosCreator 教學系列-打字機效果(2)