mirror of
https://github.com/Gongxh0901/kunpolibrary
synced 2025-04-19 18:08:42 +00:00
132 lines
3.0 KiB
Markdown
132 lines
3.0 KiB
Markdown
## 四叉树
|
||
> 四叉树是一种通过空间划分来进行高效碰撞查询的数据结构。
|
||
|
||
#### 基本概念
|
||
|
||
1. 形状类型
|
||
|
||
```typescript
|
||
import { QuadTree, Box, Circle, Polygon } from 'kunpocc';
|
||
|
||
// 1. 矩形
|
||
const box = new Box(x, y, width, height, tag);
|
||
|
||
// 2. 圆形
|
||
const circle = new Circle(x, y, radius, tag);
|
||
|
||
// 3. 多边形
|
||
const points = [v2(x1, y1), v2(x2, y2), v2(x3, y3)];
|
||
const polygon = new Polygon(points, tag);
|
||
```
|
||
|
||
2. 配置参数
|
||
|
||
```typescript
|
||
// 四叉树配置
|
||
const QTConfig = {
|
||
MAX_SHAPES: 12, // 每个节点最大形状数量
|
||
MAX_LEVELS: 5, // 最大深度
|
||
}
|
||
```
|
||
|
||
|
||
#### 使用示例
|
||
|
||
1. 创建和初始化
|
||
|
||
```typescript
|
||
import { QuadTree, Box, rect } from 'kunpocc';
|
||
|
||
// 创建四叉树（参数：区域范围，层级，绘制组件）
|
||
const bounds = rect(0, 0, 800, 600); // x, y, width, height
|
||
const quadTree = new QuadTree(bounds);
|
||
|
||
// 添加形状
|
||
const player = new Box(100, 100, 50, 50, 1); // 玩家碰撞体，tag=1
|
||
const enemy = new Circle(200, 200, 25, 2); // 敌人碰撞体，tag=2
|
||
quadTree.insert(player);
|
||
quadTree.insert(enemy);
|
||
```
|
||
|
||
2. 碰撞检测
|
||
|
||
```typescript
|
||
// 检测指定形状与特定标签的碰撞
|
||
const collisions = quadTree.collide(player, 2); // 检测玩家与 tag=2 的形状碰撞
|
||
if (collisions.length > 0) {
|
||
console.log('发生碰撞！');
|
||
for (const target of collisions) {
|
||
// 处理碰撞逻辑
|
||
}
|
||
}
|
||
```
|
||
|
||
3. 动态更新
|
||
|
||
```typescript
|
||
// 在游戏循环中更新四叉树
|
||
function update() {
|
||
// 更新形状位置
|
||
player.position = v2(newX, newY);
|
||
enemy.position = v2(newX, newY);
|
||
|
||
// 更新四叉树
|
||
quadTree.update();
|
||
|
||
// 检测碰撞
|
||
const collisions = quadTree.collide(player, 2);
|
||
}
|
||
```
|
||
|
||
4. 清理
|
||
|
||
```typescript
|
||
// 清理四叉树
|
||
quadTree.clear();
|
||
```
|
||
|
||
|
||
#### 形状操作
|
||
|
||
1. 位置和缩放
|
||
|
||
```typescript
|
||
// 设置位置
|
||
shape.position = v2(x, y);
|
||
|
||
// 设置缩放
|
||
shape.scale = 1.5;
|
||
|
||
// 获取包围盒
|
||
const boundingBox = shape.getBoundingBox();
|
||
```
|
||
|
||
2. 特定形状操作
|
||
|
||
```typescript
|
||
// 矩形重置
|
||
box.resetPoints(x, y, width, height);
|
||
|
||
// 圆形半径
|
||
circle.radius = newRadius;
|
||
|
||
// 多边形顶点
|
||
polygon.points = newPoints;
|
||
```
|
||
|
||
|
||
#### 性能优化建议
|
||
|
||
1. 合理设置配置参数：
|
||
- `MAX_SHAPES`：较小的值会导致更频繁的分裂，较大的值会降低查询效率
|
||
- `MAX_LEVELS`：控制树的最大深度，防止过度分割
|
||
|
||
2. 碰撞检测优化：
|
||
- 使用合适的标签系统，只检测需要的碰撞
|
||
- 根据游戏需求选择合适的形状（圆形计算最快）
|
||
- 避免使用过于复杂的多边形
|
||
|
||
3. 更新策略：
|
||
- 仅在必要时更新四叉树
|
||
- 对于静态物体，可以使用单独的四叉树
|
||
- 动态物体频繁更新时，考虑使用更大的边界范围 |