前言
大家好,IT侠最近研究了下四叉树,本来想用cocos creator写,但是发现电脑装不了dashboard(cocos牛逼,是我电脑太渣了) 所以就有了这个demo。
写本篇文章有2个出发点:
- 在H5下使用ECS框架;
- 用ECS框架与四叉树结合来辅助物体之间碰撞检测;
因为东西比较多,所以我打算分2篇文章来介绍,本篇我们就来介绍下如何在h5下使用ECS框架。
正文
最终效果
先给大家看看demo运行起来的效果,看看四叉树在对象很多的情况下的威力
- "田字"黑线是构建好的4叉树节点,方便调试
- 高亮黄色的就是需要检查是否与主角发生碰撞的块
- 高亮紫色的就是和主角发生碰撞的块
技术栈
-
typescript编译器
- 因为ECS框架和四叉树用的是TS写的所以需要tsc工具将ts编译回js
-
require.js
- 一个模块加载器,用来加载tsc工具编译后的amd规范的模块文件
-
hammer.js
- 多点触摸手势库,用来监听处理用户输入
代码实现
先给大家看看项目基本文件结构:
/css css文件
/img 图片资源
/src
/game ECS系统文件
character.js 角色系统
collision.js 碰撞系统
decay.js 衰减系统
enemy.js 敌人系统
main.js 逻辑入口文件
render.js 渲染系统
sketch.js 四叉树划线辅助系统
time.js 时间系统
userInput 用户输入系统
/lib 代码库
/js tsc编译后的js文件夹
/ecs ECS框架文件
hammer.js 触摸行为库
quadTree.ts 四叉树
require.js 模块加载器
tscofig.json tsc编译配置
/misc
utils.js 工具函数库
index.html 项目入口文件
项目入口核心代码
加载必要的css文件和库文件
<!--加载 .css 文件 -->
<link rel="stylesheet" type="text/css" href="./css/main.css">
<!--加载 require.js 文件 -->
<script src="./src/lib/require.js"></script>
<style>
#output{
position: absolute;
top:700px;
}
</style>
下面的代码加载main.js文件 获取canvas,主角图片等对象,方便后面ECS框架来操作:
<script>
//异步加载main.js 获取到的canvas,主角图片等对象
require(['./src/game/main.js'], function (gameStart) {
//获取canvas节点
let _canvas