Unfinished webgl renderer

client/systems/rendering/dimension.ts

@@ -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();
 }

client/systems/rendering/player.ts

@@ -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);
 	}
 }

client/systems/rendering/render_utils.ts

@@ -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",
 		);
 	}
 }

client/systems/rendering/sprites.ts

@@ -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();
 }