You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -79,23 +79,23 @@ Manipulate body attributes and update the collision system:
79
79
80
80
```ts
81
81
// if omitted updateNow is true
82
-
const updateNow =false;
82
+
const updateNow =false
83
83
// this should be time scaled, 1 for example
84
-
const speed =1;
84
+
const speed =1
85
85
86
86
// teleport
87
-
box.setPosition(x, y, updateNow);
88
-
box.setScale(scaleX, scaleY, updateNow);
89
-
box.setAngle(angle, updateNow);
90
-
box.move(speed, updateNow);
91
-
box.setOffset({ x, y }, updateNow);
92
-
console.log(box.dirty);// true
93
-
94
-
box.updateBody();// Update the body once, when all manipulations are done
95
-
console.log(box.dirty);// false
96
-
97
-
box.group=group;// Immediate effect, no body/system update needed
98
-
console.log(box.dirty);// false
87
+
box.setPosition(x, y, updateNow)
88
+
box.setScale(scaleX, scaleY, updateNow)
89
+
box.setAngle(angle, updateNow)
90
+
box.move(speed, updateNow)
91
+
box.setOffset({ x, y }, updateNow)
92
+
console.log(box.dirty) // true
93
+
94
+
box.updateBody() // Update the body once, when all manipulations are done
95
+
console.log(box.dirty) // false
96
+
97
+
box.group=group// Immediate effect, no body/system update needed
98
+
console.log(box.dirty) // false
99
99
```
100
100
101
101
### Step 5: Collision Detection and Resolution
@@ -104,7 +104,7 @@ Detect collisions and respond accordingly:
104
104
105
105
```ts
106
106
const callback = (result) => {
107
-
console.info(result);
107
+
console.info(result)
108
108
}
109
109
110
110
if (system.checkAll(callback)) {
@@ -116,13 +116,13 @@ if (system.checkOne(body, callback)) {
116
116
}
117
117
118
118
// Or separate bodies based on isStatic/isTrigger
119
-
system.separate();
119
+
system.separate()
120
120
```
121
121
122
122
Get exact collision points:
123
123
124
124
```ts
125
-
const { a, b } =result;
125
+
const { a, b } =result
126
126
const points =system.getCollisionPoints(a, b)
127
127
```
128
128
@@ -131,7 +131,7 @@ const points = system.getCollisionPoints(a, b)
131
131
Remove bodies when they're no longer needed:
132
132
133
133
```ts
134
-
system.remove(body);
134
+
system.remove(body)
135
135
```
136
136
137
137
And that's it! You're now ready to utilize the Detect-Collisions library in your project.
@@ -141,46 +141,46 @@ And that's it! You're now ready to utilize the Detect-Collisions library in your
141
141
To facilitate debugging, Detect-Collisions allows you to visually represent the collision bodies. By invoking the `draw()` method and supplying a 2D context of a `<canvas>` element, you can draw all the bodies within a collision system. You can also opt to draw individual bodies.
142
142
143
143
```ts
144
-
const canvas =document.createElement("canvas");
145
-
const context =canvas.getContext("2d");
144
+
const canvas =document.createElement('canvas')
145
+
const context =canvas.getContext('2d')
146
146
147
-
context.strokeStyle="#FFFFFF";
148
-
context.beginPath();
147
+
context.strokeStyle='#FFFFFF'
148
+
context.beginPath()
149
149
// draw specific body
150
-
body.draw(context);
150
+
body.draw(context)
151
151
// draw whole system
152
-
system.draw(context);
153
-
context.stroke();
152
+
system.draw(context)
153
+
context.stroke()
154
154
```
155
155
156
156
To assess the [Bounding Volume Hierarchy](https://en.wikipedia.org/wiki/Bounding_volume_hierarchy), you can draw the BVH.
157
157
158
158
```ts
159
-
context.strokeStyle="#FFFFFF";
160
-
context.beginPath();
159
+
context.strokeStyle='#FFFFFF'
160
+
context.beginPath()
161
161
// draw specific body bounding box
162
-
body.drawBVH(context);
162
+
body.drawBVH(context)
163
163
// draw bounding volume hierarchy of the system
164
-
system.drawBVH(context);
165
-
context.stroke();
164
+
system.drawBVH(context)
165
+
context.stroke()
166
166
```
167
167
168
168
## Raycasting
169
169
170
170
Detect-Collisions provides the functionality to gather raycast data. Here's how:
171
171
172
172
```ts
173
-
const start = { x: 0, y: 0 };
174
-
const end = { x: 0, y: -10 };
173
+
const start = { x: 0, y: 0 }
174
+
const end = { x: 0, y: -10 }
175
175
const hit =system.raycast(start, end, (body, ray) => {
176
176
// if you don't want the body to be hit by raycast return false
177
-
returntrue;
178
-
});
177
+
returntrue
178
+
})
179
179
180
180
if (hit) {
181
-
const { point, body } =hit;
181
+
const { point, body } =hit
182
182
183
-
console.log({ point, body });
183
+
console.log({ point, body })
184
184
}
185
185
```
186
186
@@ -189,7 +189,7 @@ In this example, `point` is a `Vector` with the coordinates of the nearest inter
189
189
## Usage in Browsers
190
190
191
191
```js
192
-
import { System } from"https://esm.sh/detect-collisions";
192
+
import { System } from'https://esm.sh/detect-collisions'
0 commit comments