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 = { export type Circle = {
position: Vector;
radius: number; radius: number;
}; };
export function createCircle(position: Vector, radius: number): Circle { export function createCircle(radius: number): Circle {
return { return {
position,
radius, radius,
}; };
} }
@@ -15,6 +11,8 @@ export function createCircle(position: Vector, radius: number): Circle {
export function strokeCircle( export function strokeCircle(
ctx: CanvasRenderingContext2D, ctx: CanvasRenderingContext2D,
circle: Circle, circle: Circle,
x: number,
y: number,
color: string = "#fff", color: string = "#fff",
alpha: number = 1.0, alpha: number = 1.0,
lineWidth: number = 1, lineWidth: number = 1,
@@ -24,7 +22,7 @@ export function strokeCircle(
ctx.globalAlpha = alpha; ctx.globalAlpha = alpha;
ctx.lineWidth = lineWidth; ctx.lineWidth = lineWidth;
ctx.beginPath(); 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.stroke();
ctx.restore(); ctx.restore();
} }
@@ -32,6 +30,8 @@ export function strokeCircle(
export function fillCircle( export function fillCircle(
ctx: CanvasRenderingContext2D, ctx: CanvasRenderingContext2D,
circle: Circle, circle: Circle,
x: number,
y: number,
color: string = "#fff", color: string = "#fff",
alpha: number = 1.0, alpha: number = 1.0,
): void { ): void {
@@ -39,7 +39,7 @@ export function fillCircle(
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.globalAlpha = alpha; ctx.globalAlpha = alpha;
ctx.beginPath(); 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.fill();
ctx.restore(); 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 = { export type Rect = {
position: Vector;
width: number; width: number;
height: number; height: number;
}; };
export function createRect( export function createRect(width: number, height: number): Rect {
position: Vector,
width: number,
height: number,
): Rect {
return { return {
position,
width, width,
height, height,
}; };
@@ -20,7 +14,6 @@ export function createRect(
export function fromMinMax(min: Vector, max: Vector): Rect { export function fromMinMax(min: Vector, max: Vector): Rect {
return { return {
position: copyVector(min),
width: max.x - min.x, width: max.x - min.x,
height: max.y - min.y, height: max.y - min.y,
}; };
@@ -29,6 +22,8 @@ export function fromMinMax(min: Vector, max: Vector): Rect {
export function strokeRect( export function strokeRect(
ctx: CanvasRenderingContext2D, ctx: CanvasRenderingContext2D,
rect: Rect, rect: Rect,
x: number,
y: number,
color: string = "#fff", color: string = "#fff",
alpha: number = 1.0, alpha: number = 1.0,
lineWidth: number = 1, lineWidth: number = 1,
@@ -37,24 +32,21 @@ export function strokeRect(
ctx.strokeStyle = color; ctx.strokeStyle = color;
ctx.globalAlpha = alpha; ctx.globalAlpha = alpha;
ctx.lineWidth = lineWidth; ctx.lineWidth = lineWidth;
ctx.strokeRect( ctx.strokeRect(x + 0.5, y + 0.5, rect.width - 1, rect.height - 1);
rect.position.x + 0.5,
rect.position.y + 0.5,
rect.width - 1,
rect.height - 1,
);
ctx.restore(); ctx.restore();
} }
export function fillRect( export function fillRect(
ctx: CanvasRenderingContext2D, ctx: CanvasRenderingContext2D,
rect: Rect, rect: Rect,
x: number,
y: number,
color: string = "#fff", color: string = "#fff",
alpha: number = 1.0, alpha: number = 1.0,
): void { ): void {
ctx.save(); ctx.save();
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.globalAlpha = alpha; 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(); ctx.restore();
} }
engine/Sprite.ts
+4
View File
@@ -1,4 +1,5 @@
import { loadImage } from "#/engine/lib/loadImage.ts"; import { loadImage } from "#/engine/lib/loadImage.ts";
import { createVector, type Vector } from "#/engine/Vector.ts";
export type Sprite = { export type Sprite = {
src: string; src: string;
@@ -6,6 +7,7 @@ export type Sprite = {
yStart: number; yStart: number;
width: number; width: number;
height: number; height: number;
offset: Vector;
}; };
export type SpriteSheet = { export type SpriteSheet = {
@@ -44,6 +46,7 @@ export function createSpriteSheet(
export function createSprite( export function createSprite(
src: string, src: string,
offset: Vector = createVector(),
xStartFrame: number = 0, xStartFrame: number = 0,
yStartFrame: number = 0, yStartFrame: number = 0,
): Sprite { ): Sprite {
@@ -55,6 +58,7 @@ export function createSprite(
yStart: yStartFrame * spriteSheet.frameHeight, yStart: yStartFrame * spriteSheet.frameHeight,
width: spriteSheet.frameWidth, width: spriteSheet.frameWidth,
height: spriteSheet.frameHeight, 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.lineWidth = 1;
ctx.strokeStyle = "#6572f5"; ctx.strokeStyle = "#6572f5";
ctx.strokeRect( ctx.strokeRect(
position.value.x - 0.5, position.value.x - 0.5 + sprite.value.offset.x,
position.value.y - 0.5, position.value.y - 0.5 + sprite.value.offset.y,
spriteSheet.frameWidth + 1, spriteSheet.frameWidth + 1,
spriteSheet.frameHeight + 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(); ctx.restore();
}; };
}; };
engine/system/drawSprites.ts
+2 -2
View File
@@ -35,8 +35,8 @@ export function drawSprites(ctx: CanvasRenderingContext2D): void {
spriteSheetMap.get(sprite.src)!, spriteSheetMap.get(sprite.src)!,
sprite.xStart, sprite.xStart,
sprite.yStart, sprite.yStart,
position.x, position.x + sprite.offset.x,
position.y, 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 { Circle } from "#/engine/Circle.ts";
import type { Polygon } from "#/engine/Polygon.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 $ from "#/engine/Scene.ts";
import { createVector, getDotProduct, type Vector } from "#/engine/Vector.ts"; import { createVector, getDotProduct, type Vector } from "#/engine/Vector.ts";
@@ -25,16 +25,20 @@ type CollisionBuffer = {
type Collide = ( type Collide = (
collision: Collision, collision: Collision,
cid: string, cid: string,
self: Collider, colliderA: Collider,
velocity: Vector, positionA: Vector,
other: Collider, velocityA: Vector,
colliderB: Collider,
positionB: Vector,
) => void; ) => void;
export type Collider = { export type Collider = {
shape: Shape; shape: Shape;
body: Circle | Rect | Polygon; body: Circle | Rect | Polygon;
aabb: Rect;
buffer: CollisionBuffer; buffer: CollisionBuffer;
offset: Vector;
width: number;
height: number;
}; };
export type Collision = { export type Collision = {
@@ -46,26 +50,37 @@ export type Collision = {
export function createCollider( export function createCollider(
shape: Shape, shape: Shape,
body: Circle | Rect | Polygon, body: Circle | Rect | Polygon,
offset?: Vector,
bufferSize: number = 8, bufferSize: number = 8,
): Collider { ): Collider {
let aabb = createRect(createVector(), 0, 0); let width = 0;
let height = 0;
switch (shape) { switch (shape) {
case CIRCLE: { case CIRCLE: {
const radius = (body as Circle).radius; const radius = (body as Circle).radius;
const size = radius * 2; const size = radius * 2;
aabb.width = size; width = size;
aabb.height = size; height = size;
aabb.position.x = body.position.x - radius; if (offset === undefined) {
aabb.position.y = body.position.y - radius; offset = createVector();
}
break; break;
} }
case RECT: { 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; break;
} }
case POLYGON: { case POLYGON: {
// TODO // TODO
if (offset === undefined) {
offset = createVector();
}
break; break;
} }
} }
@@ -73,35 +88,40 @@ export function createCollider(
return { return {
shape, shape,
body, body,
aabb,
buffer: createCollisionBuffer(bufferSize), buffer: createCollisionBuffer(bufferSize),
offset,
width,
height,
}; };
} }
const inflAABB = createRect(createVector(), 0, 0); const inflAABB = {
x: 0,
y: 0,
width: 0,
height: 0,
};
function sweptAABB( function sweptAABB(
self: Collider, colliderA: Collider,
velocity: Vector, positionA: Vector,
other: Collider, velocityA: Vector,
colliderB: Collider,
positionB: Vector,
delta: number, delta: number,
): null | number { ): null | number {
inflAABB.position.x = other.aabb.position.x - self.aabb.width; inflAABB.x = positionB.x - colliderA.width;
inflAABB.position.y = other.aabb.position.y - self.aabb.height; inflAABB.y = positionB.y - colliderA.height;
inflAABB.width = other.aabb.width + self.aabb.width; inflAABB.width = colliderB.width + colliderA.width;
inflAABB.height = other.aabb.height + self.aabb.height; inflAABB.height = colliderB.height + colliderA.height;
const displacementX = velocity.x * delta; const disX = velocityA.x * delta;
const displacementY = velocity.y * delta; const disY = velocityA.y * delta;
let txNear = (inflAABB.position.x - self.aabb.position.x) / displacementX; let txNear = (inflAABB.x - positionA.x) / disX;
let txFar = let txFar = (inflAABB.x + inflAABB.width - positionA.x) / disX;
(inflAABB.position.x + inflAABB.width - self.aabb.position.x) /
displacementX;
let tyNear = (inflAABB.position.y - self.aabb.position.y) / displacementY; let tyNear = (inflAABB.y - positionA.y) / disY;
let tyFar = let tyFar = (inflAABB.y + inflAABB.height - positionA.y) / disY;
(inflAABB.position.y + inflAABB.height - self.aabb.position.y) /
displacementY;
if (txNear > txFar) { if (txNear > txFar) {
[txNear, txFar] = [txFar, txNear]; [txNear, txFar] = [txFar, txNear];
@@ -131,9 +151,11 @@ function sweptAABB(
function collideWithCirle( function collideWithCirle(
collision: Collision, collision: Collision,
cid: string, cid: string,
self: Collider, colliderA: Collider,
velocity: Vector, positionA: Vector,
other: Collider, velocityA: Vector,
colliderB: Collider,
positionB: Vector,
) { ) {
collision.cid = cid; collision.cid = cid;
// TODO // TODO
@@ -142,13 +164,15 @@ function collideWithCirle(
function collideWithRect( function collideWithRect(
collision: Collision, collision: Collision,
cid: string, cid: string,
self: Collider, colliderA: Collider,
velocity: Vector, positionA: Vector,
other: Collider, velocityA: Vector,
colliderB: Collider,
positionB: Vector,
) { ) {
collision.cid = cid; collision.cid = cid;
const x = self.aabb.position.x - other.aabb.position.x; const x = positionA.x - positionB.x;
const y = self.aabb.position.y - other.aabb.position.y; const y = positionA.y - positionB.y;
if (Math.abs(x) > Math.abs(y)) { if (Math.abs(x) > Math.abs(y)) {
collision.normal.y = 0; collision.normal.y = 0;
collision.normal.x = x > 0 ? 1 : -1; collision.normal.x = x > 0 ? 1 : -1;
@@ -161,9 +185,11 @@ function collideWithRect(
function collideWithPolygon( function collideWithPolygon(
collision: Collision, collision: Collision,
cid: string, cid: string,
self: Collider, colliderA: Collider,
velocity: Vector, positionA: Vector,
other: Collider, velocityA: Vector,
colliderB: Collider,
positionB: Vector,
) { ) {
collision.cid = cid; collision.cid = cid;
// TODO // TODO
@@ -224,9 +250,11 @@ export function moveAndCollide(
delta: number, delta: number,
): Array<Collision> { ): Array<Collision> {
const colliders = $<Collider>("collider")!; 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; slice.length = 0;
for (const [cid, collider] of colliders.entries()) { for (const [cid, collider] of colliders.entries()) {
@@ -234,25 +262,57 @@ export function moveAndCollide(
continue; continue;
} }
const other = collider.value; const otherColl = collider.value;
const tHit = sweptAABB(self, velocity, other, delta); const otherPos = positions.get(cid)!.value;
const tHit = sweptAABB(
selfColl,
selfPos,
velocity,
otherColl,
otherPos,
delta,
);
if (tHit === null) { if (tHit === null) {
continue; continue;
} }
const collision = next(self.buffer); const collision = next(selfColl.buffer);
collision.time = tHit; collision.time = tHit;
switch (self.shape) { switch (selfColl.shape) {
case CIRCLE: { case CIRCLE: {
circleCollide[other.shape](collision, cid, self, velocity, other); circleCollide[otherColl.shape](
collision,
cid,
selfColl,
selfPos,
velocity,
otherColl,
otherPos,
);
break; break;
} }
case RECT: { case RECT: {
rectCollide[other.shape](collision, cid, self, velocity, other); rectCollide[otherColl.shape](
collision,
cid,
selfColl,
selfPos,
velocity,
otherColl,
otherPos,
);
break; break;
} }
case POLYGON: { case POLYGON: {
polygonCollide[other.shape](collision, cid, self, velocity, other); polygonCollide[otherColl.shape](
collision,
cid,
selfColl,
selfPos,
velocity,
otherColl,
otherPos,
);
break; break;
} }
} }
@@ -271,7 +331,6 @@ export function moveAndSlide(
delta: number, delta: number,
): void { ): void {
let timeLeft = 1; let timeLeft = 1;
const aabb = $<Collider>("collider").get(id)!.value.aabb;
const position = $<Vector>("position").get(id)!.value; const position = $<Vector>("position").get(id)!.value;
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
@@ -288,13 +347,10 @@ export function moveAndSlide(
} }
const time = closest.time; const time = closest.time;
if (time === -Infinity) {
break; // TODO
}
const scale = Math.max(0, time - 0.001); const scale = Math.max(0, time - 0.001);
aabb.position.x += velocity.x * (delta * timeLeft) * scale; position.x += velocity.x * delta * timeLeft * scale;
aabb.position.y += velocity.y * (delta * timeLeft) * scale; position.y += velocity.y * delta * timeLeft * scale;
const dot = getDotProduct(velocity, closest.normal); const dot = getDotProduct(velocity, closest.normal);
velocity.x -= closest.normal.x * dot; velocity.x -= closest.normal.x * dot;
@@ -305,7 +361,4 @@ export function moveAndSlide(
velocity.x *= timeLeft; velocity.x *= timeLeft;
velocity.y *= timeLeft; velocity.y *= timeLeft;
position.x = aabb.position.x;
position.y = aabb.position.y;
} }
game/entities/hero/entity.ts
+3 -9
View File
@@ -2,7 +2,7 @@ import { defineEntity } from "#/engine/Entity.ts";
import { keyboardInput } from "#/engine/Keyboard.ts"; import { keyboardInput } from "#/engine/Keyboard.ts";
import { createEffect, createSignal } from "#/engine/lib/Signal.ts"; import { createEffect, createSignal } from "#/engine/lib/Signal.ts";
import { pointer } from "#/engine/Pointer.ts"; import { pointer } from "#/engine/Pointer.ts";
import { createRect, fillRect, strokeRect } from "#/engine/Rect.ts"; import { createRect } from "#/engine/Rect.ts";
import $ from "#/engine/Scene.ts"; import $ from "#/engine/Scene.ts";
import { import {
createSprite, createSprite,
@@ -10,7 +10,6 @@ import {
defineSpriteSheet, defineSpriteSheet,
} from "#/engine/Sprite.ts"; } from "#/engine/Sprite.ts";
import { import {
type Collider,
createCollider, createCollider,
moveAndSlide, moveAndSlide,
Shape, Shape,
@@ -21,7 +20,6 @@ import {
scale, scale,
type Vector, type Vector,
} from "#/engine/Vector.ts"; } from "#/engine/Vector.ts";
import { viewport } from "#/engine/Viewport.ts";
import charIdle from "#/game/assets/char-idle.png"; import charIdle from "#/game/assets/char-idle.png";
const [speed, setSpeed] = createSignal(0.1); const [speed, setSpeed] = createSignal(0.1);
@@ -29,10 +27,10 @@ const idleSrc = await defineSpriteSheet(charIdle, 2, 4);
const process = defineEntity("hero", { const process = defineEntity("hero", {
position: createVector(), position: createVector(),
sprite: createSprite(idleSrc), sprite: createSprite(idleSrc, createVector(-8, -8)),
animation: createSpriteAnimation(500, 2), animation: createSpriteAnimation(500, 2),
velocity: createVector(), velocity: createVector(),
collider: createCollider(Shape.Rect, createRect(createVector(), 16, 16)), collider: createCollider(Shape.Rect, createRect(24, 16)),
}); });
createEffect(() => { createEffect(() => {
@@ -44,7 +42,6 @@ let onceGuard = true;
process((id, delta) => { process((id, delta) => {
const position = $<Vector>("position").get(id)!.value; const position = $<Vector>("position").get(id)!.value;
const velocity = $<Vector>("velocity").get(id)!.value; const velocity = $<Vector>("velocity").get(id)!.value;
const collider = $<Collider>("collider").get(id)!.value;
if (pointer.isDown) { if (pointer.isDown) {
position.x = pointer.position.x; position.x = pointer.position.x;
@@ -73,7 +70,4 @@ process((id, delta) => {
velocity.x = 0; velocity.x = 0;
velocity.y = 0; velocity.y = 0;
fillRect(viewport.ctx, collider.aabb, "orange");
strokeRect(viewport.ctx, collider.aabb, "red");
}); });
game/entities/portal/entity.ts
+8 -20
View File
@@ -1,32 +1,20 @@
import { defineEntity } from "#/engine/Entity.ts"; import { defineEntity } from "#/engine/Entity.ts";
import { createRect, fillRect, strokeRect } from "#/engine/Rect.ts"; import { createRect } from "#/engine/Rect.ts";
import $ from "#/engine/Scene.ts";
import { import {
createSprite, createSprite,
createSpriteAnimation, createSpriteAnimation,
defineSpriteSheet, defineSpriteSheet,
} from "#/engine/Sprite.ts"; } from "#/engine/Sprite.ts";
import { import { createCollider, Shape } from "#/engine/system/physics.ts";
type Collider, import { createVector } from "#/engine/Vector.ts";
createCollider,
Shape,
} from "#/engine/system/physics.ts";
import { createVector, type Vector } from "#/engine/Vector.ts";
import { viewport } from "#/engine/Viewport";
import portal from "#/game/assets/portal.png"; import portal from "#/game/assets/portal.png";
const portalSrc = await defineSpriteSheet(portal, 3, 1); const portalSrc = await defineSpriteSheet(portal, 3, 1);
const position = createVector();
const process = defineEntity("portal", { defineEntity("portal", {
position: createVector(), position,
sprite: createSprite(portalSrc), sprite: createSprite(portalSrc, createVector(-8, -8)),
animation: createSpriteAnimation(400, 0), animation: createSpriteAnimation(400, 0),
collider: createCollider(Shape.Rect, createRect(createVector(), 16, 16)), collider: createCollider(Shape.Rect, createRect(16, 16)),
});
process((id, delta) => {
const collider = $<Collider>("collider").get(id)!.value;
fillRect(viewport.ctx, collider.aabb, "orange");
strokeRect(viewport.ctx, collider.aabb, "red");
}); });
game/entities/testEntity/entity.ts
+5 -1
View File
@@ -23,6 +23,7 @@ const sprites = {
yStart: 0, yStart: 0,
width: 16, width: 16,
height: 16, height: 16,
offset: createVector(-8, -8),
}, },
walk: { walk: {
src: srcs.walk, src: srcs.walk,
@@ -30,6 +31,7 @@ const sprites = {
yStart: 0, yStart: 0,
width: 16, width: 16,
height: 16, height: 16,
offset: createVector(-8, -8),
}, },
}; };
@@ -38,6 +40,8 @@ const animations = {
walk: createSpriteAnimation(250, 2), walk: createSpriteAnimation(250, 2),
}; };
const position = createVector();
const process = defineEntity<{ const process = defineEntity<{
position: Vector; position: Vector;
animation: SpriteAnimation; animation: SpriteAnimation;
@@ -52,7 +56,7 @@ const process = defineEntity<{
}; };
stuff: number; stuff: number;
}>("testEntity", { }>("testEntity", {
position: createVector(), position,
animation: animations.idle, animation: animations.idle,
animations: animations, animations: animations,
sprite: sprites.idle, sprite: sprites.idle,
game/scenes/testScene/scene.ts
+2 -4
View File
@@ -16,12 +16,10 @@ postProcess(() => {
console.log("post: ", data.name); console.log("post: ", data.name);
}); });
const cirle = createCircle(createVector(), 4); const cirle = createCircle(4);
process((ctx, _delta) => { process((ctx, _delta) => {
if (!pointer.isDown) { if (!pointer.isDown) {
cirle.position.x = pointer.position.x; strokeCircle(ctx, cirle, pointer.position.x, pointer.position.y);
cirle.position.y = pointer.position.y;
strokeCircle(ctx, cirle);
} }
}); });
main.ts
+26 -8
View File
@@ -9,18 +9,36 @@ import {
resizeCanvas, resizeCanvas,
viewport, viewport,
} from "#/engine/Viewport.ts"; } from "#/engine/Viewport.ts";
import type { Sprite } from "./engine/Sprite";
import type { Collider } from "./engine/system/physics"; import type { Collider } from "./engine/system/physics";
import type { Vector } from "./engine/Vector"; import type { Vector } from "./engine/Vector";
function updateAABBs() { function debug(ctx: CanvasRenderingContext2D) {
const colliders = $<Collider>("collider");
const positions = $<Vector>("position"); const positions = $<Vector>("position");
const colliders = $<Collider>("collider");
const sprites = $<Sprite>("sprite");
for (const [id, collider] of colliders.entries()) { for (const [id, collider] of colliders.entries()) {
const position = positions.get(id)!.value; const sprite = sprites.get(id)!.value;
const aabb = collider.value.aabb; const pos = positions.get(id)!.value;
aabb.position.x = position.x; const col = collider.value;
aabb.position.y = position.y;
ctx.beginPath();
ctx.fillStyle = "#ee459e";
ctx.strokeStyle = "#ee459e";
ctx.strokeRect(
pos.x + col.offset.x + 0.5,
pos.y + col.offset.y + 0.5,
col.width - 1,
col.height - 1,
);
ctx.fillRect(pos.x - 1, pos.y - 1, 2, 2);
ctx.fillRect(
pos.x - 1 + sprite.offset.x,
pos.y - 1 + sprite.offset.y,
2,
2,
);
} }
} }
@@ -32,13 +50,13 @@ function animate(timestamp: number): void {
resetCtx(); resetCtx();
updateAABBs();
currentScene.process(viewport.ctx, delta); currentScene.process(viewport.ctx, delta);
animateSprites(delta); animateSprites(delta);
drawSprites(viewport.ctx); drawSprites(viewport.ctx);
debug(viewport.ctx);
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }