jusemon/slime
1
0
Fork 0
Code Issues Pull requests Releases Packages 1 Activity Actions

feat: implement Camera system and component for improved viewport management and player tracking
All checks were successful
Build and Publish Docker Image / Build and Validate (pull_request) Successful in 14s
Details

Browse source
This commit is contained in:
Juan Sebastián Montoya 2026-01-07 01:25:56 -05:00
parent 62e58f77ae
commit c859e20ffc
13 changed files with 596 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

126
src/systems/RenderSystem.ts
View file

@ -18,6 +18,7 @@ import type { Combat } from '../components/Combat.ts';
import type { Stealth } from '../components/Stealth.ts';
import type { Evolution } from '../components/Evolution.ts';
import type { Absorbable } from '../components/Absorbable.ts';
import type { Camera } from '../components/Camera.ts';
import type { VFXSystem } from './VFXSystem.ts';
import type { SkillEffectSystem, SkillEffect } from './SkillEffectSystem.ts';
@ -26,6 +27,7 @@ import type { SkillEffectSystem, SkillEffect } from './SkillEffectSystem.ts';
*/
export class RenderSystem extends System {
ctx: CanvasRenderingContext2D;
private camera: Camera | null;
/**
* @param engine - The game engine instance
@ -36,6 +38,37 @@ export class RenderSystem extends System {
this.priority = 100;
this.engine = engine;
this.ctx = engine.ctx;
this.camera = null;
}
/**
* Get the active camera from the engine.
*/
private getCamera(): Camera | null {
if (this.camera) return this.camera;
const cameraEntity = this.engine.entities.find((e) => e.hasComponent(ComponentType.CAMERA));
if (cameraEntity) {
this.camera = cameraEntity.getComponent<Camera>(ComponentType.CAMERA);
}
return this.camera;
}
/**
* Transform world coordinates to screen coordinates using camera.
* @param worldX - World X coordinate
* @param worldY - World Y coordinate
* @returns Screen coordinates {x, y}
*/
private worldToScreen(worldX: number, worldY: number): { x: number; y: number } {
const camera = this.getCamera();
if (!camera) {
return { x: worldX, y: worldY };
}
const screenX = worldX - camera.x + camera.viewportWidth / 2;
const screenY = worldY - camera.y + camera.viewportHeight / 2;
return { x: screenX, y: screenY };
}
/**
@ -90,11 +123,14 @@ export class RenderSystem extends System {
ctx.fillStyle = Palette.DARKER_BLUE;
for (let i = 0; i < 20; i++) {
const x = Math.floor((i * 70 + Math.sin(i) * 30) % width);
const y = Math.floor((i * 50 + Math.cos(i) * 40) % height);
const worldX = (i * 70 + Math.sin(i) * 30) % 2000;
const worldY = (i * 50 + Math.cos(i) * 40) % 1500;
const screen = this.worldToScreen(worldX, worldY);
const size = Math.floor(25 + (i % 4) * 15);
ctx.fillRect(x, y, size, size);
if (screen.x + size > 0 && screen.x < width && screen.y + size > 0 && screen.y < height) {
ctx.fillRect(screen.x, screen.y, size, size);
}
}
}
@ -105,18 +141,35 @@ export class RenderSystem extends System {
const tileMap = this.engine.tileMap;
if (!tileMap) return;
const camera = this.getCamera();
const ctx = this.ctx;
const tileSize = tileMap.tileSize;
const viewportLeft = camera ? camera.x - camera.viewportWidth / 2 : 0;
const viewportRight = camera ? camera.x + camera.viewportWidth / 2 : this.engine.canvas.width;
const viewportTop = camera ? camera.y - camera.viewportHeight / 2 : 0;
const viewportBottom = camera
? camera.y + camera.viewportHeight / 2
: this.engine.canvas.height;
const startCol = Math.max(0, Math.floor(viewportLeft / tileSize) - 1);
const endCol = Math.min(tileMap.cols, Math.ceil(viewportRight / tileSize) + 1);
const startRow = Math.max(0, Math.floor(viewportTop / tileSize) - 1);
const endRow = Math.min(tileMap.rows, Math.ceil(viewportBottom / tileSize) + 1);
ctx.fillStyle = Palette.DARK_BLUE;
for (let r = 0; r < tileMap.rows; r++) {
for (let c = 0; c < tileMap.cols; c++) {
for (let r = startRow; r < endRow; r++) {
for (let c = startCol; c < endCol; c++) {
if (tileMap.getTile(c, r) === 1) {
ctx.fillRect(c * tileSize, r * tileSize, tileSize, tileSize);
const worldX = c * tileSize;
const worldY = r * tileSize;
const screen = this.worldToScreen(worldX, worldY);
ctx.fillRect(screen.x, screen.y, tileSize, tileSize);
ctx.fillStyle = Palette.ROYAL_BLUE;
ctx.fillRect(c * tileSize, r * tileSize, tileSize, 2);
ctx.fillRect(screen.x, screen.y, tileSize, 2);
ctx.fillStyle = Palette.DARK_BLUE;
}
}
@ -138,8 +191,9 @@ export class RenderSystem extends System {
this.ctx.save();
const drawX = Math.floor(position.x);
const drawY = Math.floor(position.y);
const screen = this.worldToScreen(position.x, position.y);
const drawX = Math.floor(screen.x);
const drawY = Math.floor(screen.y);
let alpha = sprite.alpha;
if (isDeadFade && health && health.isDead()) {
@ -155,13 +209,21 @@ export class RenderSystem extends System {
this.ctx.translate(drawX, drawY + (sprite.yOffset || 0));
this.ctx.scale(sprite.scale, sprite.scale);
if (sprite.shape === EntityType.SLIME) {
const stealth = entity.getComponent<Stealth>(ComponentType.STEALTH);
let effectiveShape = sprite.shape;
if (stealth && stealth.isStealthed && stealth.formAppearance) {
effectiveShape = stealth.formAppearance;
}
if (effectiveShape === EntityType.SLIME) {
sprite.animationTime += deltaTime;
sprite.morphAmount = Math.sin(sprite.animationTime * 3) * 0.2 + 0.8;
}
let drawColor = sprite.color;
if (sprite.shape === EntityType.SLIME) drawColor = Palette.CYAN;
if (effectiveShape === EntityType.SLIME && (!stealth || !stealth.isStealthed)) {
drawColor = Palette.CYAN;
}
this.ctx.fillStyle = drawColor;
@ -171,7 +233,7 @@ export class RenderSystem extends System {
sprite.animationState = isMoving ? AnimationState.WALK : AnimationState.IDLE;
}
let spriteData = SpriteLibrary[sprite.shape as string];
let spriteData = SpriteLibrary[effectiveShape as string];
if (!spriteData) {
spriteData = SpriteLibrary[EntityType.SLIME];
}
@ -245,7 +307,6 @@ export class RenderSystem extends System {
this.ctx.restore();
}
const stealth = entity.getComponent<Stealth>(ComponentType.STEALTH);
if (stealth && stealth.isStealthed) {
this.drawStealthIndicator(stealth, sprite);
}
@ -284,8 +345,9 @@ export class RenderSystem extends System {
ctx.fillStyle = p.color;
ctx.globalAlpha = p.type === VFXType.IMPACT ? Math.min(1, p.lifetime / 0.3) : 0.8;
const x = Math.floor(p.x);
const y = Math.floor(p.y);
const screen = this.worldToScreen(p.x, p.y);
const x = Math.floor(screen.x);
const y = Math.floor(screen.y);
const size = Math.floor(p.size);
ctx.fillRect(x - size / 2, y - size / 2, size, size);
@ -337,7 +399,13 @@ export class RenderSystem extends System {
ctx.save();
if (sprite.shape === EntityType.SLIME) {
const stealth = entity.getComponent<Stealth>(ComponentType.STEALTH);
let effectiveShape = sprite.shape;
if (stealth && stealth.isStealthed && stealth.formAppearance) {
effectiveShape = stealth.formAppearance;
}
if (effectiveShape === EntityType.SLIME) {
ctx.strokeStyle = Palette.CYAN;
ctx.lineWidth = 3;
ctx.lineCap = 'round';
@ -353,7 +421,7 @@ export class RenderSystem extends System {
ctx.beginPath();
ctx.arc(length, 0, 2, 0, Math.PI * 2);
ctx.fill();
} else if (sprite.shape === EntityType.BEAST) {
} else if (effectiveShape === EntityType.BEAST) {
ctx.strokeStyle = Palette.WHITE;
ctx.lineWidth = 2;
ctx.globalAlpha = alpha;
@ -365,7 +433,7 @@ export class RenderSystem extends System {
ctx.beginPath();
ctx.arc(0, 0, radius, start - 0.5, start + 0.5);
ctx.stroke();
} else if (sprite.shape === EntityType.HUMANOID) {
} else if (effectiveShape === EntityType.HUMANOID) {
ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`;
ctx.lineWidth = 4;
@ -481,7 +549,8 @@ export class RenderSystem extends System {
const progress = Math.min(1.0, effect.time / effect.lifetime);
const alpha = Math.max(0, 1.0 - progress);
ctx.translate(effect.x, effect.y);
const screen = this.worldToScreen(effect.x, effect.y);
ctx.translate(screen.x, screen.y);
ctx.rotate(effect.angle);
const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, effect.range);
@ -531,10 +600,13 @@ export class RenderSystem extends System {
currentY = effect.startY + Math.sin(effect.angle) * (effect.speed || 400) * effect.time;
}
const startScreen = this.worldToScreen(effect.startX, effect.startY);
const currentScreen = this.worldToScreen(currentX, currentY);
ctx.globalAlpha = Math.max(0, 0.3 * (1 - progress));
ctx.fillStyle = Palette.VOID;
ctx.beginPath();
ctx.ellipse(effect.startX, effect.startY, 10, 5, 0, 0, Math.PI * 2);
ctx.ellipse(startScreen.x, startScreen.y, 10, 5, 0, 0, Math.PI * 2);
ctx.fill();
const alpha = Math.max(0, 0.8 * (1.0 - progress));
@ -542,15 +614,15 @@ export class RenderSystem extends System {
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(effect.startX, effect.startY);
ctx.lineTo(currentX, currentY);
ctx.moveTo(startScreen.x, startScreen.y);
ctx.lineTo(currentScreen.x, currentScreen.y);
ctx.stroke();
const ringSize = progress * 40;
ctx.strokeStyle = `rgba(255, 255, 255, ${0.4 * (1 - progress)})`;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(effect.startX, effect.startY, ringSize, 0, Math.PI * 2);
ctx.arc(startScreen.x, startScreen.y, ringSize, 0, Math.PI * 2);
ctx.stroke();
}
@ -563,18 +635,20 @@ export class RenderSystem extends System {
const alpha = Math.max(0, 1.0 - progress);
const size = Math.max(0, 30 * (1 - progress));
const screen = this.worldToScreen(effect.x, effect.y);
if (size > 0 && alpha > 0) {
ctx.strokeStyle = `rgba(255, 200, 0, ${alpha})`;
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(effect.x, effect.y, size, 0, Math.PI * 2);
ctx.arc(screen.x, screen.y, size, 0, Math.PI * 2);
ctx.stroke();
for (let i = 0; i < 8; i++) {
const angle = (i / 8) * Math.PI * 2;
const dist = size * 0.7;
const x = effect.x + Math.cos(angle) * dist;
const y = effect.y + Math.sin(angle) * dist;
const x = screen.x + Math.cos(angle) * dist;
const y = screen.y + Math.sin(angle) * dist;
ctx.fillStyle = `rgba(255, 150, 0, ${alpha})`;
ctx.beginPath();