Camera

client/systems/player_controls.ts

@@ -7,6 +7,7 @@ import { PlayerControls } from "../components/player_controls.ts";
 import { PlayerInventory } from "../components/inventory.ts";
 import { Camera } from "../components/camera.ts";
 import { Position } from "../../common/components/position.ts";
+import { canvas } from "../renderer.ts";
 
 export class PlayerControlsSystem extends System {
 	constructor() {
@@ -66,6 +67,8 @@ export class PlayerControlsSystem extends System {
 
 		camera.x = Math.round(position.x);
 		camera.y = Math.round(position.y);
+		camera.offset_x = Math.floor(canvas.width / 2);
+		camera.offset_y = Math.floor(canvas.height / 2);
 
 		const scroll = InputManager.get_wheel_delta();
 		if (scroll > 0) {
@@ -73,18 +76,5 @@ export class PlayerControlsSystem extends System {
 		} else if (scroll < 0) {
 			player_inventory.hotbar_selected = Math.max(0, player_inventory.hotbar_selected - 1);
 		}
-
-		// --- APPLY BOUNDS ---
-		/*if (camera.bounds) {
-			camera.x = Math.max(
-				camera.bounds.min_x,
-				Math.min(camera.x, camera.bounds.max_x),
-			);
-
-			camera.y = Math.max(
-				camera.bounds.min_y,
-				Math.min(camera.y, camera.bounds.max_y),
-			);
-		}*/
 	}
 }

client/systems/render_system.ts

@@ -9,6 +9,7 @@ import { Camera } from "$/client/components/camera.ts";
 import { render_animated_sprite, render_sprite } from "./rendering/sprites.ts";
 import { render_dimension } from "./rendering/dimension.ts";
 import { render_player_inventory } from "./rendering/player.ts";
+import { begin_mode_2d, end_mode_2d } from "../renderer.ts";
 
 export class RenderSystem extends System {
 	constructor() {
@@ -23,18 +24,20 @@ export class RenderSystem extends System {
 			return;
 		}
 
+		begin_mode_2d(camera);
+
 		for (const entity of world.get_entities()) {
 			const position = entity.get(Position);
 			const sprite = entity.get(Sprite);
 
 			if (sprite && position) {
-				render_sprite(sprite, position);
+				render_sprite(sprite, position, camera);
 			}
 
 			const animated_sprite = entity.get(AnimatedSprite);
 
 			if (animated_sprite && position) {
-				render_animated_sprite(animated_sprite, position);
+				render_animated_sprite(animated_sprite, position, camera);
 			}
 
 			const dimension = entity.get(Dimension);
@@ -42,7 +45,11 @@ export class RenderSystem extends System {
 			if (dimension) {
 				render_dimension(dimension, camera);
 			}
+		}
 
+		end_mode_2d();
+
+		for (const entity of world.get_entities()) {
 			const player_inventory = entity.get(PlayerInventory);
 
 			if (player_inventory && player_inventory.is_open) {

client/systems/rendering/dimension.ts

@@ -2,10 +2,10 @@ 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";
+import { canvas, draw_texture_region } from "$/client/renderer.ts";
 
-export function render_dimension(tilemap: Dimension, camera: Camera) {
-	for (const tile of tilemap.tiles) {
+export function render_dimension(dimension: Dimension, camera: Camera) {
+	for (const tile of dimension.tiles) {
 		const region = get_sprite_region(tile.id);
 
 		const x = tile.x * TILE_SIZE;
@@ -20,7 +20,7 @@ export function render_dimension(tilemap: Dimension, camera: Camera) {
 		}
 
 		draw_texture_region(
-			tilemap.image,
+			dimension.image,
 			region.x * TEXTURE_SIZE,
 			region.y * TEXTURE_SIZE,
 			TEXTURE_SIZE,

client/systems/rendering/sprites.ts

@@ -1,9 +1,12 @@
 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";
+import { draw_texture_region } from "$/client/renderer.ts";
+import { Camera } from "$/client/components/camera.ts";
 
-export function render_sprite(sprite: Sprite, position: Position) {
+// TODO: camera scale
+// TODO: only render if inside screen
+
+export function render_sprite(sprite: Sprite, position: Position, _camera: Camera) {
 	draw_texture_region(
 		sprite.image,
 		sprite.source_x,
@@ -22,6 +25,7 @@ export function render_sprite(sprite: Sprite, position: Position) {
 export function render_animated_sprite(
 	animated_sprite: AnimatedSprite,
 	position: Position,
+	_camera: Camera,
 ) {
 	const current_animation = animated_sprite.states[animated_sprite.current_state];
 	if (!current_animation) {
@@ -30,7 +34,7 @@ export function render_animated_sprite(
 	}
 
 	draw_texture_region(
-		AssetManager.instance.get("bworld:player"),
+		animated_sprite.image,
 		current_animation.source_x[animated_sprite.animation_frame],
 		current_animation.source_y[animated_sprite.animation_frame],
 		current_animation.source_width,