Unfinished webgl renderer

2026-03-06 17:35:22 -03:00
parent e5d2a3e7e2
commit caa4c39e71
17 changed files with 464 additions and 202 deletions
@@ -6,6 +6,7 @@ import { ClickableSprite } from "../components/clickable.ts";
 import { point_inside_rec } from "$/common/utils.ts";
 import { InputManager } from "../input_manager.ts";
 import { Camera, screen_to_world } from "../components/camera.ts";
+import { canvas } from "../renderer.ts";

 export class ClickableSystem extends System {
 	update(world: ClientWorld, _delta: number): void {
@@ -18,8 +19,8 @@ export class ClickableSystem extends System {
 			mouse.x,
 			mouse.y,
 			camera,
-			world.canvas.width,
-			world.canvas.height,
+			canvas.width,
+			canvas.height,
 		);

 		for (const entity of world.get_entities()) {
@@ -11,17 +11,11 @@ import { render_dimension } from "./rendering/dimension.ts";
 import { render_player_inventory } from "./rendering/player.ts";

 export class RenderSystem extends System {
-	ctx: CanvasRenderingContext2D;
-
-	constructor(ctx: CanvasRenderingContext2D) {
+	constructor() {
 		super();
-		this.ctx = ctx;
 	}

 	update(world: World, _delta: number): void {
-		this.ctx.save();
-		this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-
 		const camera_entity = world.get_entities().values().find((e) => e.get(Camera)?.active);
 		const camera = camera_entity?.get(Camera);

@@ -30,45 +24,29 @@ export class RenderSystem extends System {
 		}

 		for (const entity of world.get_entities()) {
-			this.ctx.save();
-			this.ctx.translate(
-				Math.floor(this.ctx.canvas.width / 2),
-				Math.floor(this.ctx.canvas.height / 2),
-			);
-
-			this.ctx.scale(camera.zoom, camera.zoom);
-
-			this.ctx.translate(
-				-Math.floor(camera.x),
-				-Math.floor(camera.y),
-			);
-
 			const position = entity.get(Position);
 			const sprite = entity.get(Sprite);

 			if (sprite && position) {
-				render_sprite(this.ctx, sprite, position);
+				render_sprite(sprite, position);
 			}

 			const animated_sprite = entity.get(AnimatedSprite);

 			if (animated_sprite && position) {
-				render_animated_sprite(this.ctx, animated_sprite, position);
+				render_animated_sprite(animated_sprite, position);
 			}

 			const dimension = entity.get(Dimension);

 			if (dimension) {
-				render_dimension(this.ctx, dimension, camera);
+				render_dimension(dimension, camera);
 			}

-			// Ui
-			this.ctx.restore();
-
 			const player_inventory = entity.get(PlayerInventory);

 			if (player_inventory && player_inventory.is_open) {
-				render_player_inventory(this.ctx, player_inventory);
+				render_player_inventory(player_inventory);
 			}
 		}
 	}
@@ -2,25 +2,24 @@ import { get_sprite_region } from "$/common/utils.ts";
 import { Dimension } from "$/client/components/dimension.ts";
 import { TEXTURE_SIZE, TILE_SIZE } from "$/common/constants.ts";
 import { Camera, world_to_screen } from "$/client/components/camera.ts";
+import { canvas, draw_texture_region } from "../../renderer.ts";

-export function render_dimension(ctx: CanvasRenderingContext2D, tilemap: Dimension, camera: Camera) {
-	ctx.save();
-
+export function render_dimension(tilemap: Dimension, camera: Camera) {
 	for (const tile of tilemap.tiles) {
 		const region = get_sprite_region(tile.id);

 		const x = tile.x * TILE_SIZE;
 		const y = tile.y * TILE_SIZE;

-		const screen_position = world_to_screen(x, y, camera, ctx.canvas.width, ctx.canvas.height);
+		const screen_position = world_to_screen(x, y, camera, canvas.width, canvas.height);
 		if (
-			screen_position.x + TILE_SIZE < 0 || screen_position.x > ctx.canvas.width ||
-			screen_position.y + TILE_SIZE < 0 || screen_position.y > ctx.canvas.height
+			screen_position.x + TILE_SIZE < 0 || screen_position.x > canvas.width ||
+			screen_position.y + TILE_SIZE < 0 || screen_position.y > canvas.height
 		) {
 			continue;
 		}

-		ctx.drawImage(
+		draw_texture_region(
 			tilemap.image,
 			region.x * TEXTURE_SIZE,
 			region.y * TEXTURE_SIZE,
@@ -32,6 +31,4 @@ export function render_dimension(ctx: CanvasRenderingContext2D, tilemap: Dimensi
 			TILE_SIZE,
 		);
 	}
-
-	ctx.restore();
 }
@@ -3,14 +3,14 @@ import { AssetManager } from "$/client/assets.ts";
 import { PlayerInventory } from "$/client/components/inventory.ts";
 import { InputManager } from "$/client/input_manager.ts";
 import { draw_item, draw_nine_slice } from "./render_utils.ts";
+import { Texture } from "$/client/renderer.ts";

-export function render_player_inventory(ctx: CanvasRenderingContext2D, player_inventory: PlayerInventory) {
+export function render_player_inventory(player_inventory: PlayerInventory) {
 	const PADDING = 10;
-	const ui = AssetManager.instance.get<HTMLImageElement>("bworld:ui");
+	const ui = AssetManager.instance.get<Texture>("bworld:ui");
 	const layout = player_inventory.layout.slots;

 	draw_nine_slice(
-		ctx,
 		ui,
 		160,
 		0,
@@ -30,7 +30,6 @@ export function render_player_inventory(ctx: CanvasRenderingContext2D, player_in
 		const x = slot.x + PADDING;
 		const y = slot.y + PADDING;
 		draw_nine_slice(
-			ctx,
 			ui,
 			player_inventory.hovering_slot === index ? 19 * 16 : 160 + 32,
 			player_inventory.hovering_slot === index ? 16 : 0,
@@ -51,12 +50,12 @@ export function render_player_inventory(ctx: CanvasRenderingContext2D, player_in
 		const y = slot.y + PADDING;
 		const item = player_inventory.container.get_item(index);
 		if (item) {
-			draw_item(ctx, item, x, y);
+			draw_item(item, x, y);
 		}
 	}

 	if (player_inventory.holding_item) {
 		const mouse = InputManager.get_mouse_position();
-		draw_item(ctx, player_inventory.holding_item, mouse.x, mouse.y);
+		draw_item(player_inventory.holding_item, mouse.x, mouse.y);
 	}
 }
@@ -2,11 +2,10 @@ import { SLOT_SIZE } from "$/common/constants.ts";
 import { get_sprite_region } from "$/common/utils.ts";
 import { AssetManager } from "$/client/assets.ts";
 import { ItemStack } from "$/client/components/inventory.ts";
-import { draw_text } from "$/client/text_rendering.ts";
+import { draw_text, draw_texture_region, Texture } from "$/client/renderer.ts";

 export function draw_nine_slice(
-	ctx: CanvasRenderingContext2D,
-	image: HTMLImageElement,
+	image: Texture,
 	source_x: number,
 	source_y: number,
 	source_width: number,
@@ -27,13 +26,13 @@ export function draw_nine_slice(
 	const dest_center_height = height - top - bottom;

 	// top left
-	ctx.drawImage(image, source_x, source_y, left, top, x, y, left, top);
+	draw_texture_region(image, source_x, source_y, left, top, x, y, left, top);

 	// top right
-	ctx.drawImage(image, source_x + source_width - right, source_y, right, top, x + width - right, y, right, top);
+	draw_texture_region(image, source_x + source_width - right, source_y, right, top, x + width - right, y, right, top);

 	// bottom left
-	ctx.drawImage(
+	draw_texture_region(
 		image,
 		source_x,
 		source_y + source_height - bottom,
@@ -46,7 +45,7 @@ export function draw_nine_slice(
 	);

 	// bottom right
-	ctx.drawImage(
+	draw_texture_region(
 		image,
 		source_x + source_width - right,
 		source_y + source_height - bottom,
@@ -59,10 +58,10 @@ export function draw_nine_slice(
 	);

 	// top
-	ctx.drawImage(image, source_x + left, source_y, center_width, top, x + left, y, dest_center_width, top);
+	draw_texture_region(image, source_x + left, source_y, center_width, top, x + left, y, dest_center_width, top);

 	// bottom
-	ctx.drawImage(
+	draw_texture_region(
 		image,
 		source_x + left,
 		source_y + source_height - bottom,
@@ -75,10 +74,10 @@ export function draw_nine_slice(
 	);

 	// left
-	ctx.drawImage(image, source_x, source_y + top, left, center_height, x, y + top, left, dest_center_height);
+	draw_texture_region(image, source_x, source_y + top, left, center_height, x, y + top, left, dest_center_height);

 	// right
-	ctx.drawImage(
+	draw_texture_region(
 		image,
 		source_x + source_width - right,
 		source_y + top,
@@ -91,7 +90,7 @@ export function draw_nine_slice(
 	);

 	// center !
-	ctx.drawImage(
+	draw_texture_region(
 		image,
 		source_x + left,
 		source_y + top,
@@ -104,9 +103,9 @@ export function draw_nine_slice(
 	);
 }

-export function draw_item(ctx: CanvasRenderingContext2D, item: ItemStack, x: number, y: number) {
+export function draw_item(item: ItemStack, x: number, y: number) {
 	const sprite_region = get_sprite_region(item.type_id);
-	ctx.drawImage(
+	draw_texture_region(
 		AssetManager.instance.get("bworld:textures"),
 		sprite_region.x * 16,
 		sprite_region.y * 16,
@@ -119,24 +118,22 @@ export function draw_item(ctx: CanvasRenderingContext2D, item: ItemStack, x: num
 	);
 	if (item.max_amount !== 1) {
 		draw_text(
-			ctx,
 			String(item.amount),
 			x + SLOT_SIZE + 2 - 4,
 			y + SLOT_SIZE + 2 - 4,
-			2,
-			"#3f3f3f",
-			"bottom",
-			"right",
+			//2,
+			//"#3f3f3f",
+			//"bottom",
+			//"right",
 		);
 		draw_text(
-			ctx,
 			String(item.amount),
 			x + SLOT_SIZE - 4,
 			y + SLOT_SIZE - 4,
-			2,
-			"white",
-			"bottom",
-			"right",
+			//2,
+			//"white",
+			//"bottom",
+			//"right",
 		);
 	}
 }
@@ -1,65 +1,46 @@
 import { Position } from "$/common/components/position.ts";
 import { AnimatedSprite, Sprite } from "$/client/components/sprite.ts";
+import { draw_texture_region } from "../../renderer.ts";
+import { AssetManager } from "../../assets.ts";

-export function render_sprite(ctx: CanvasRenderingContext2D, sprite: Sprite, position: Position) {
-	ctx.save();
-
-	ctx.translate(
-		Math.floor(sprite.flip_x ? position.x + sprite.width : position.x),
-		Math.floor(sprite.flip_y ? position.y + sprite.height : position.y),
-	);
-	ctx.scale(
-		sprite.flip_x ? -1 : 1,
-		sprite.flip_y ? -1 : 1,
-	);
-
-	ctx.drawImage(
+export function render_sprite(sprite: Sprite, position: Position) {
+	draw_texture_region(
 		sprite.image,
 		sprite.source_x,
 		sprite.source_y,
 		sprite.source_width,
 		sprite.source_height,
-		0,
-		0,
+		position.x,
+		position.y,
 		sprite.width,
 		sprite.height,
+		sprite.flip_x,
+		sprite.flip_y,
 	);
-	ctx.restore();
 }

 export function render_animated_sprite(
-	ctx: CanvasRenderingContext2D,
 	animated_sprite: AnimatedSprite,
 	position: Position,
 ) {
-	ctx.save();
-
 	const current_animation = animated_sprite.states[animated_sprite.current_state];
 	if (!current_animation) {
 		console.error(`Missing animation for state ${animated_sprite.current_state}`);
 		return;
 	}

-	ctx.translate(
-		Math.floor(animated_sprite.flip_x ? position.x + animated_sprite.width : position.x),
-		Math.floor(animated_sprite.flip_y ? position.y + animated_sprite.height : position.y),
-	);
-
-	ctx.scale(
-		animated_sprite.flip_x ? -1 : 1,
-		animated_sprite.flip_y ? -1 : 1,
-	);
-
-	ctx.drawImage(
-		animated_sprite.image,
+	draw_texture_region(
+		AssetManager.instance.get("bworld:player"),
 		current_animation.source_x[animated_sprite.animation_frame],
 		current_animation.source_y[animated_sprite.animation_frame],
 		current_animation.source_width,
 		current_animation.source_height,
-		0,
-		0,
+		position.x,
+		position.y,
 		animated_sprite.width,
 		animated_sprite.height,
+		animated_sprite.flip_x,
+		animated_sprite.flip_y,
 	);

 	animated_sprite.timer += 1;
@@ -71,6 +52,4 @@ export function render_animated_sprite(
 			animated_sprite.animation_frame = 0;
 		}
 	}
-
-	ctx.restore();
 }
@@ -2,9 +2,9 @@ import { System } from "$/common/ecs/mod.ts";
 import { Position } from "$/common/components/position.ts";
 import { ClientWorld } from "$/client/client_world.ts";
 import { UIButton } from "$/client/components/ui_components.ts";
-import { draw_text, measure_text } from "../text_rendering.ts";
 import { draw_nine_slice } from "./rendering/render_utils.ts";
 import { AssetManager } from "../assets.ts";
+import { draw_text, Texture } from "../renderer.ts";

 const SCALE = 4;

@@ -12,18 +12,7 @@ export class UIRenderSystem implements System {
 	constructor() {}

 	update(world: ClientWorld, _delta: number) {
-		const ctx = world.ctx;
-
-		ctx.save();
-		ctx.resetTransform();
-
-		ctx.scale(SCALE, SCALE);
-
-		// dark background
-		ctx.fillStyle = "rgba(0,0,0,0.6)";
-		ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
-		const ui = AssetManager.instance.get<HTMLImageElement>("bworld:ui");
+		const ui = AssetManager.instance.get<Texture>("bworld:ui");

 		for (const entity of world.get_entities()) {
 			const position = entity.get(Position);
@@ -31,7 +20,6 @@ export class UIRenderSystem implements System {

 			if (position && button) {
 				draw_nine_slice(
-					ctx,
 					ui,
 					16 * (button.hovered ? 14 : 11),
 					16 * (button.hovered ? 1 : 0),
@@ -46,18 +34,16 @@ export class UIRenderSystem implements System {
 					button.width / SCALE,
 					button.height / SCALE,
 				);
-				const measure = measure_text(ctx, button.text, 1.25);
+				// const measure = measure_text(ctx, button.text, 1.25);
 				draw_text(
-					ctx,
 					button.text,
-					(position.x / SCALE) + (button.width / SCALE / 2) - (measure / 2),
+					(position.x / SCALE) + (button.width / SCALE / 2) - (100 / 2),
 					position.y / SCALE + (button.height / SCALE / 2),
-					1.5,
-					"white",
-					"middle",
+					//1.5,
+					//"white",
+					//"middle",
 				);
 			}
 		}
-		ctx.restore();
 	}
 }