Camera and outline rect functions

builtins.ts

@@ -2,6 +2,7 @@ import {
 	setPixelsInRect,
 	clearScreen,
 	fillRect,
+cameraPos,
 } from "./window.ts";
 import { Font, font } from "./font.ts";
 import { keyDown, keyPressed, keyReleased } from "./keyboard.ts";
@@ -10,6 +11,7 @@ import { resetRepl } from "./repl.ts";
 import { COLOR } from "./colors.ts";
 import { getSheet, getCodeSheet, getMapSheet } from "./sheet.ts";
 import { saveCart, loadCart } from "./cart.ts";
+import { outlineRect } from "./util.ts";
 
 let spritesheet: number | null = null;
 
@@ -73,16 +75,23 @@ export const measureText = (text: string) => {
 	return measureTextFont(text, font);
 }
 
+export const camera = (x: number, y: number) => {
+	cameraPos.x = x;
+	cameraPos.y = y;
+};
+
 const faux = {
 	// Graphics
 	cls: () => {
 		resetRepl();
 		clearScreen();
 	},
+	camera,
 	sprsht: useSpritesheet,
 	spr: drawSprite,
 	txt: drawText,
-	rect: fillRect,
+	rectfill: fillRect,
+	rect: outlineRect,
 	map: (mapSheet: number, tileX: number, tileY: number, screenX: number, screenY: number, tileW: number, tileH: number) => {
 		const originalSpritesheet = getSpritesheet() ?? 0;
 		getMapSheet(mapSheet).forEach(([sprSheet, spr], i) => {

index.ts

@@ -10,6 +10,7 @@ import { repl, resetRepl } from "./repl.ts";
 import { addToContext } from "./runcode.ts";
 import { editmode } from "./editmode.ts";
 import { refreshMouse } from "./mouse.ts";
+import { camera } from "./builtins.ts";
 
 // deno-lint-ignore no-explicit-any
 let game: any = null;
@@ -48,10 +49,12 @@ await mainloop(async (_t) => {
 			frame();
 		} else if (mode === "repl") {
 			repl.update();
+			camera(0, 0);
 			repl.draw();
 			frame();
 		} else if (mode === "edit") {
 			await editmode.update();
+			camera(0, 0);
 			editmode.draw();
 			frame();
 		}

pico8_builtins.txt

@@ -26,13 +26,13 @@
 - [ ] cursor
 - [ ] color
 - [x] cls
-- [ ] camera
+- [x] camera
 - [ ] circ
 - [ ] circfill
 - [ ] oval
 - [ ] ovalfill
 - [ ] line
-- [ ] rect
+- [x] rect
 - [x] rectfill
 - [ ] pal
 - [ ] palt

spritetab.ts

@@ -1,9 +1,9 @@
-import { clearScreen, fillRect, setPixelColor } from "./window.ts";
+import { clearScreen, fillRect } from "./window.ts";
 import { drawSprite, drawText } from "./builtins.ts";
 import { COLOR } from "./colors.ts";
 import { getSpriteSheet, setSheet } from "./sheet.ts";
 import { mouseClick, mouseHeld, mousePos } from "./mouse.ts";
-import { inRect, reGrid } from "./util.ts";
+import { drawTransparentRect, inRect, outlineRect, reGrid } from "./util.ts";
 import { page } from "./viewsheets.ts";
 import { useSpritesheet } from "./builtins.ts";
 
@@ -83,21 +83,6 @@ const update = () => {
 	}
 }
 
-const outlineRect = (x: number, y: number, w: number, h: number, color: number) => {
-	fillRect(x, y, w, 1, color);
-	fillRect(x, y, 1, h, color);
-	fillRect(x+w-1, y, 1, h, color);
-	fillRect(x, y+h-1, w, 1, color);
-}
-
-const drawTransparentRect = (x: number, y: number, w: number, h: number) => {
-	Array(w*h).fill(0).map((_z, j) => {
-		const jx = j%w;
-		const jy = Math.floor(j/w);
-		setPixelColor(x+jx, y+jy, (jx+jy)%2 ? COLOR.BLACK : COLOR.DARKGRAY);
-	})
-}
-
 const draw = () => {
 	const {sprites, selectedSprite, selectedColor} = state;
 	clearScreen();

util.ts

@@ -1,3 +1,6 @@
+import { COLOR } from "./colors.ts";
+import { fillRect, setPixelColor } from "./window.ts";
+
 export const inRect = (x: number, y: number, rectX: number, rectY: number, rectW: number, rectH: number) => {
 	return (
 		x >= rectX &&
@@ -27,3 +30,18 @@ export function reGrid (x: number, y: number, gridX: number, gridY: number, cell
 		y: gy,
 	}
 }
+
+export const outlineRect = (x: number, y: number, w: number, h: number, color: number) => {
+	fillRect(x, y, w, 1, color);
+	fillRect(x, y, 1, h, color);
+	fillRect(x+w-1, y, 1, h, color);
+	fillRect(x, y+h-1, w, 1, color);
+}
+
+export const drawTransparentRect = (x: number, y: number, w: number, h: number) => {
+	Array(w*h).fill(0).map((_z, j) => {
+		const jx = j%w;
+		const jy = Math.floor(j/w);
+		setPixelColor(x+jx, y+jy, (jx+jy)%2 ? COLOR.BLACK : COLOR.DARKGRAY);
+	})
+}

window.ts

@@ -4,7 +4,7 @@ import {
 	gl,
 } from "./deps.ts";
 export {mainloop} from "./deps.ts";
-import { palette } from "./colors.ts";
+import { COLOR, palette } from "./colors.ts";
 
 export const gameWindow = createWindow({
 	title: "Faux",
@@ -128,7 +128,12 @@ const allPixelColors = new Float32Array(
 	Array(pixelsPerRow*pixelsPerRow).fill(null).flatMap(() => c(1))
 )
 
-export const setPixelColor = (x: number, y: number, color: number) => {
+export const cameraPos = {
+	x: 0,
+	y: 0,
+}
+
+export const setPixelColorRaw = (x: number, y: number, color: number) => {
 	if (x < 0 || y < 0 || x > 127 || y > 127) {
 		return;
 	}
@@ -138,18 +143,33 @@ export const setPixelColor = (x: number, y: number, color: number) => {
 	}
 }
 
+export const setPixelColor = (x: number, y: number, color: number) => {
+	return setPixelColorRaw(x - cameraPos.x, y - cameraPos.y, color);
+}
+
 export const setPixelsInRect = (x: number, y: number, w: number, pixels: Array<number>) => {
 	for (let i = 0; i < pixels.length; i++) {
 		setPixelColor(x+i%w, y+Math.floor(i/w), pixels[i]);
 	}
 }
 
+export const setPixelsInRectRaw = (x: number, y: number, w: number, pixels: Array<number>) => {
+	for (let i = 0; i < pixels.length; i++) {
+		setPixelColorRaw(x+i%w, y+Math.floor(i/w), pixels[i]);
+	}
+}
+
 export const fillRect = (x: number, y: number, w: number, h: number, color: number) => {
 	setPixelsInRect(x, y, w, Array(w*h).fill(color));
 }
 
-export const clearScreen = () => {
+export const fillRectRaw = (x: number, y: number, w: number, h: number, color: number) => {
-	allPixelColors.fill(0);
+	setPixelsInRectRaw(x, y, w, Array(w*h).fill(color));
+}
+
+export const clearScreen = (color?: number) => {
+	fillRectRaw(0, 0, 128, 128, color ?? COLOR.BLACK);
+	// allPixelColors.fill(0);
 }
 
 export const frame = () => {