100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import { _decorator, Component, Graphics, Color } from 'cc';
|
||
const { ccclass, property } = _decorator;
|
||
|
||
// import RAPIER from '@dimforge/rapier2d';
|
||
|
||
export const RAPIER_PTM_RATIO:number = 32.0;
|
||
|
||
@ccclass('RapierDebugRenderer')
|
||
export class RapierDebugRenderer extends Component {
|
||
@property(Graphics)
|
||
graphics: Graphics = null!;
|
||
|
||
// 可选：可调整的线宽
|
||
@property
|
||
lineWidth: number = 1.0;
|
||
|
||
// 可选：坐标缩放系数
|
||
@property
|
||
scale: number = RAPIER_PTM_RATIO;
|
||
|
||
@property
|
||
onoff: boolean = false;
|
||
|
||
|
||
private _world: any = null; // RAPIER.World 类型
|
||
|
||
/**
|
||
* 设置物理世界引用
|
||
* @param world RAPIER物理世界实例
|
||
*/
|
||
public setWorld(world: any) {
|
||
this._world = world;
|
||
}
|
||
|
||
/**
|
||
* 在每帧更新中调用以渲染调试图形
|
||
*/
|
||
update() {
|
||
if (!this._world || !this.graphics) return;
|
||
|
||
this.onoff && this.render(this._world);
|
||
}
|
||
|
||
clear(){
|
||
this.graphics&&this.graphics.clear();
|
||
}
|
||
|
||
/**
|
||
* 渲染物理世界的调试信息
|
||
* @param world RAPIER物理世界
|
||
*/
|
||
render(world: any) {
|
||
// 获取调试渲染数据
|
||
const { vertices, colors } = world.debugRender();
|
||
|
||
// 清除之前的绘制内容
|
||
this.graphics.clear();
|
||
|
||
// const g = this.graphics;
|
||
// g.lineWidth = 10;
|
||
// g.fillColor.fromHEX('#ff0000ff');
|
||
// g.moveTo(-40, 0);
|
||
// g.lineTo(0, -80);
|
||
// g.lineTo(40, 0);
|
||
// g.lineTo(0, 80);
|
||
// g.close();
|
||
// g.stroke();
|
||
// g.fill();
|
||
|
||
// 遍历所有线段进行绘制
|
||
for (let i = 0; i < vertices.length / 4; i++) {
|
||
// 从颜色数组中获取当前线段的颜色
|
||
const r = Math.floor(colors[i * 8] * 255); // 转换为 0-255 范围
|
||
const g = Math.floor(colors[i * 8 + 1] * 255);
|
||
const b = Math.floor(colors[i * 8 + 2] * 255);
|
||
const a = colors[i * 8 + 3] * 255; // alpha 直接使用 0-255 范围
|
||
|
||
// 设置线条样式
|
||
this.graphics.lineWidth = this.lineWidth;
|
||
this.graphics.strokeColor = new Color(r, g, b, a);
|
||
|
||
// 获取线段的起点和终点坐标
|
||
// 注意：Cocos Creator 使用左下角为原点的坐标系，y轴向上为正
|
||
// 而 RAPIER 可能使用不同的坐标系，因此这里做适当调整
|
||
|
||
// 获取原始坐标
|
||
let x1 = vertices[i * 4] * this.scale;
|
||
let y1 = vertices[i * 4 + 1] * this.scale;
|
||
let x2 = vertices[i * 4 + 2] * this.scale;
|
||
let y2 = vertices[i * 4 + 3] * this.scale;
|
||
|
||
|
||
// 执行绘制
|
||
this.graphics.moveTo(x1, y1);
|
||
this.graphics.lineTo(x2, y2);
|
||
this.graphics.close();
|
||
this.graphics.stroke();
|
||
}
|
||
}
|
||
} |