Schluffe/nage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

USE OFFSET

Browse Source
This commit is contained in:
Schluffe
2026-04-05 11:39:53 +02:00
parent f574804f68
commit f9b7e16376
11 changed files with 179 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
engine/Circle.ts
+7 -7
View File
@@ -1,13 +1,9 @@
import type { Vector } from "#/engine/Vector.ts";
export type Circle = {
position: Vector;
radius: number;
};
export function createCircle(position: Vector, radius: number): Circle {
export function createCircle(radius: number): Circle {
return {
position,
radius,
};
}
@@ -15,6 +11,8 @@ export function createCircle(position: Vector, radius: number): Circle {
export function strokeCircle(
ctx: CanvasRenderingContext2D,
circle: Circle,
x: number,
y: number,
color: string = "#fff",
alpha: number = 1.0,
lineWidth: number = 1,
@@ -24,7 +22,7 @@ export function strokeCircle(
ctx.globalAlpha = alpha;
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.arc(circle.position.x, circle.position.y, circle.radius, 0, 2 * Math.PI);
ctx.arc(x, y, circle.radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.restore();
}
@@ -32,6 +30,8 @@ export function strokeCircle(
export function fillCircle(
ctx: CanvasRenderingContext2D,
circle: Circle,
x: number,
y: number,
color: string = "#fff",
alpha: number = 1.0,
): void {
@@ -39,7 +39,7 @@ export function fillCircle(
ctx.fillStyle = color;
ctx.globalAlpha = alpha;
ctx.beginPath();
ctx.arc(circle.position.x, circle.position.y, circle.radius, 0, 2 * Math.PI);
ctx.arc(x, y, circle.radius, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
}
engine/Rect.ts
+8 -16
View File
@@ -1,18 +1,12 @@
import { copyVector, type Vector } from "#/engine/Vector.ts";
import type { Vector } from "#/engine/Vector.ts";
export type Rect = {
position: Vector;
width: number;
height: number;
};
export function createRect(
position: Vector,
width: number,
height: number,
): Rect {
export function createRect(width: number, height: number): Rect {
return {
position,
width,
height,
};
@@ -20,7 +14,6 @@ export function createRect(
export function fromMinMax(min: Vector, max: Vector): Rect {
return {
position: copyVector(min),
width: max.x - min.x,
height: max.y - min.y,
};
@@ -29,6 +22,8 @@ export function fromMinMax(min: Vector, max: Vector): Rect {
export function strokeRect(
ctx: CanvasRenderingContext2D,
rect: Rect,
x: number,
y: number,
color: string = "#fff",
alpha: number = 1.0,
lineWidth: number = 1,
@@ -37,24 +32,21 @@ export function strokeRect(
ctx.strokeStyle = color;
ctx.globalAlpha = alpha;
ctx.lineWidth = lineWidth;
ctx.strokeRect(
rect.position.x + 0.5,
rect.position.y + 0.5,
rect.width - 1,
rect.height - 1,
);
ctx.strokeRect(x + 0.5, y + 0.5, rect.width - 1, rect.height - 1);
ctx.restore();
}
export function fillRect(
ctx: CanvasRenderingContext2D,
rect: Rect,
x: number,
y: number,
color: string = "#fff",
alpha: number = 1.0,
): void {
ctx.save();
ctx.fillStyle = color;
ctx.globalAlpha = alpha;
ctx.fillRect(rect.position.x, rect.position.y, rect.width, rect.height);
ctx.fillRect(x, y, rect.width, rect.height);
ctx.restore();
}
engine/Sprite.ts
+4
View File
@@ -1,4 +1,5 @@
import { loadImage } from "#/engine/lib/loadImage.ts";
import { createVector, type Vector } from "#/engine/Vector.ts";
export type Sprite = {
src: string;
@@ -6,6 +7,7 @@ export type Sprite = {
yStart: number;
width: number;
height: number;
offset: Vector;
};
export type SpriteSheet = {
@@ -44,6 +46,7 @@ export function createSpriteSheet(
export function createSprite(
src: string,
offset: Vector = createVector(),
xStartFrame: number = 0,
yStartFrame: number = 0,
): Sprite {
@@ -55,6 +58,7 @@ export function createSprite(
yStart: yStartFrame * spriteSheet.frameHeight,
width: spriteSheet.frameWidth,
height: spriteSheet.frameHeight,
offset,
};
}
engine/dev/main.tsx
+2 -7
View File
@@ -100,16 +100,11 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
ctx.lineWidth = 1;
ctx.strokeStyle = "#6572f5";
ctx.strokeRect(
position.value.x - 0.5,
position.value.y - 0.5,
position.value.x - 0.5 + sprite.value.offset.x,
position.value.y - 0.5 + sprite.value.offset.y,
spriteSheet.frameWidth + 1,
spriteSheet.frameHeight + 1,
);
ctx.fillStyle = "#ee459e";
ctx.fillRect(position.value.x - 1, position.value.y - 1, 2, 2);
ctx.beginPath();
ctx.fill();
ctx.restore();
};
};
engine/system/drawSprites.ts
+2 -2
View File
@@ -35,8 +35,8 @@ export function drawSprites(ctx: CanvasRenderingContext2D): void {
spriteSheetMap.get(sprite.src)!,
sprite.xStart,
sprite.yStart,
position.x,
position.y,
position.x + sprite.offset.x,
position.y + sprite.offset.y,
);
}
}
engine/system/physics.ts
+112 -59
View File
@@ -1,6 +1,6 @@
import type { Circle } from "#/engine/Circle.ts";
import type { Polygon } from "#/engine/Polygon.ts";
import { createRect, type Rect } from "#/engine/Rect.ts";
import type { Rect } from "#/engine/Rect.ts";
import $ from "#/engine/Scene.ts";
import { createVector, getDotProduct, type Vector } from "#/engine/Vector.ts";
@@ -25,16 +25,20 @@ type CollisionBuffer = {
type Collide = (
collision: Collision,
cid: string,
self: Collider,
velocity: Vector,
other: Collider,
colliderA: Collider,
positionA: Vector,
velocityA: Vector,
colliderB: Collider,
positionB: Vector,
) => void;
export type Collider = {
shape: Shape;
body: Circle | Rect | Polygon;
aabb: Rect;
buffer: CollisionBuffer;
offset: Vector;
width: number;
height: number;
};
export type Collision = {
@@ -46,26 +50,37 @@ export type Collision = {
export function createCollider(
shape: Shape,
body: Circle | Rect | Polygon,
offset?: Vector,
bufferSize: number = 8,
): Collider {
let aabb = createRect(createVector(), 0, 0);
let width = 0;
let height = 0;
switch (shape) {
case CIRCLE: {
const radius = (body as Circle).radius;
const size = radius * 2;
aabb.width = size;
aabb.height = size;
aabb.position.x = body.position.x - radius;
aabb.position.y = body.position.y - radius;
width = size;
height = size;
if (offset === undefined) {
offset = createVector();
}
break;
}
case RECT: {
aabb = body as Rect;
width = (body as Rect).width;
height = (body as Rect).height;
if (offset === undefined) {
offset = createVector(-(width / 2), -(height / 2));
}
break;
}
case POLYGON: {
// TODO
if (offset === undefined) {
offset = createVector();
}
break;
}
}
@@ -73,35 +88,40 @@ export function createCollider(
return {
shape,
body,
aabb,
buffer: createCollisionBuffer(bufferSize),
offset,
width,
height,
};
}
const inflAABB = createRect(createVector(), 0, 0);
const inflAABB = {
x: 0,
y: 0,
width: 0,
height: 0,
};
function sweptAABB(
self: Collider,
velocity: Vector,
other: Collider,
colliderA: Collider,
positionA: Vector,
velocityA: Vector,
colliderB: Collider,
positionB: Vector,
delta: number,
): null | number {
inflAABB.position.x = other.aabb.position.x - self.aabb.width;
inflAABB.position.y = other.aabb.position.y - self.aabb.height;
inflAABB.width = other.aabb.width + self.aabb.width;
inflAABB.height = other.aabb.height + self.aabb.height;
inflAABB.x = positionB.x - colliderA.width;
inflAABB.y = positionB.y - colliderA.height;
inflAABB.width = colliderB.width + colliderA.width;
inflAABB.height = colliderB.height + colliderA.height;
const displacementX = velocity.x * delta;
const displacementY = velocity.y * delta;
const disX = velocityA.x * delta;
const disY = velocityA.y * delta;
let txNear = (inflAABB.position.x - self.aabb.position.x) / displacementX;
let txFar =
(inflAABB.position.x + inflAABB.width - self.aabb.position.x) /
displacementX;
let txNear = (inflAABB.x - positionA.x) / disX;
let txFar = (inflAABB.x + inflAABB.width - positionA.x) / disX;
let tyNear = (inflAABB.position.y - self.aabb.position.y) / displacementY;
let tyFar =
(inflAABB.position.y + inflAABB.height - self.aabb.position.y) /
displacementY;
let tyNear = (inflAABB.y - positionA.y) / disY;
let tyFar = (inflAABB.y + inflAABB.height - positionA.y) / disY;
if (txNear > txFar) {
[txNear, txFar] = [txFar, txNear];
@@ -131,9 +151,11 @@ function sweptAABB(
function collideWithCirle(
collision: Collision,
cid: string,
self: Collider,
velocity: Vector,
other: Collider,
colliderA: Collider,
positionA: Vector,
velocityA: Vector,
colliderB: Collider,
positionB: Vector,
) {
collision.cid = cid;
// TODO
@@ -142,13 +164,15 @@ function collideWithCirle(
function collideWithRect(
collision: Collision,
cid: string,
self: Collider,
velocity: Vector,
other: Collider,
colliderA: Collider,
positionA: Vector,
velocityA: Vector,
colliderB: Collider,
positionB: Vector,
) {
collision.cid = cid;
const x = self.aabb.position.x - other.aabb.position.x;
const y = self.aabb.position.y - other.aabb.position.y;
const x = positionA.x - positionB.x;
const y = positionA.y - positionB.y;
if (Math.abs(x) > Math.abs(y)) {
collision.normal.y = 0;
collision.normal.x = x > 0 ? 1 : -1;
@@ -161,9 +185,11 @@ function collideWithRect(
function collideWithPolygon(
collision: Collision,
cid: string,
self: Collider,
velocity: Vector,
other: Collider,
colliderA: Collider,
positionA: Vector,
velocityA: Vector,
colliderB: Collider,
positionB: Vector,
) {
collision.cid = cid;
// TODO
@@ -224,9 +250,11 @@ export function moveAndCollide(
delta: number,
): Array<Collision> {
const colliders = $<Collider>("collider")!;
const self = colliders.get(id)!.value;
const positions = $<Vector>("position")!;
const selfColl = colliders.get(id)!.value;
const selfPos = positions.get(id)!.value;
const slice = self.buffer.slice;
const slice = selfColl.buffer.slice;
slice.length = 0;
for (const [cid, collider] of colliders.entries()) {
@@ -234,25 +262,57 @@ export function moveAndCollide(
continue;
}
const other = collider.value;
const tHit = sweptAABB(self, velocity, other, delta);
const otherColl = collider.value;
const otherPos = positions.get(cid)!.value;
const tHit = sweptAABB(
selfColl,
selfPos,
velocity,
otherColl,
otherPos,
delta,
);
if (tHit === null) {
continue;
}
const collision = next(self.buffer);
const collision = next(selfColl.buffer);
collision.time = tHit;
switch (self.shape) {
switch (selfColl.shape) {
case CIRCLE: {
circleCollide[other.shape](collision, cid, self, velocity, other);
circleCollide[otherColl.shape](
collision,
cid,
selfColl,
selfPos,
velocity,
otherColl,
otherPos,
);
break;
}
case RECT: {
rectCollide[other.shape](collision, cid, self, velocity, other);
rectCollide[otherColl.shape](
collision,
cid,
selfColl,
selfPos,
velocity,
otherColl,
otherPos,
);
break;
}
case POLYGON: {
polygonCollide[other.shape](collision, cid, self, velocity, other);
polygonCollide[otherColl.shape](
collision,
cid,
selfColl,
selfPos,
velocity,
otherColl,
otherPos,
);
break;
}
}
@@ -271,7 +331,6 @@ export function moveAndSlide(
delta: number,
): void {
let timeLeft = 1;
const aabb = $<Collider>("collider").get(id)!.value.aabb;
const position = $<Vector>("position").get(id)!.value;
for (let i = 0; i < 4; i++) {
@@ -288,13 +347,10 @@ export function moveAndSlide(
}
const time = closest.time;
if (time === -Infinity) {
break; // TODO
}
const scale = Math.max(0, time - 0.001);
aabb.position.x += velocity.x * (delta * timeLeft) * scale;
aabb.position.y += velocity.y * (delta * timeLeft) * scale;
position.x += velocity.x * delta * timeLeft * scale;
position.y += velocity.y * delta * timeLeft * scale;
const dot = getDotProduct(velocity, closest.normal);
velocity.x -= closest.normal.x * dot;
@@ -305,7 +361,4 @@ export function moveAndSlide(
velocity.x *= timeLeft;
velocity.y *= timeLeft;
position.x = aabb.position.x;
position.y = aabb.position.y;
}