fantasy-console/spritetab.ts

121 lines
3.6 KiB
TypeScript
Raw Normal View History

2023-05-05 14:59:52 -07:00
import { clearScreen, fillRect, setPixelColor } from "./window.ts";
2023-05-05 16:17:55 -07:00
import { drawSprite } from "./builtins.ts";
2023-05-05 14:59:52 -07:00
import { COLOR } from "./colors.ts";
2023-05-06 14:49:46 -07:00
import { getSpriteSheet, setSheet } from "./sheet.ts";
2023-05-05 16:17:55 -07:00
import { mouseHeld, mousePos } from "./mouse.ts";
2023-05-06 14:49:46 -07:00
import { inRect, reGrid } from "./util.ts";
import { page } from "./viewsheets.ts";
import { useSpritesheet } from "./builtins.ts";
2023-05-05 14:59:52 -07:00
const state = {
2023-05-05 16:02:23 -07:00
selectedSprite: 0,
selectedColor: 0,
2023-05-05 14:59:52 -07:00
get sprites() {
2023-05-06 14:49:46 -07:00
return getSpriteSheet(page.activeSheet);
2023-05-05 14:59:52 -07:00
},
set sprites(val) {
2023-05-06 14:49:46 -07:00
setSheet(page.activeSheet, "spritesheet", val);
2023-05-05 14:59:52 -07:00
}
}
2023-05-05 16:02:23 -07:00
const paletteX = 88;
const paletteY = 12;
const swatchW = 8;
const swatchH = 8;
const paletteW = 4;
const paletteH = 4;
const spriteX = 8;
const spriteY = 12;
const pixelW = 8;
const pixelH = 8;
const spriteW = 8;
const spriteH = 8;
const sheetX = 0;
const sheetY = 88;
const sheetW = 16;
const sheetH = 4;
2023-05-05 14:59:52 -07:00
const update = () => {
2023-05-05 16:02:23 -07:00
if (mouseHeld()) {
const {x: mouseX, y: mouseY} = mousePos();
const inPalette = inRect(mouseX, mouseY, paletteX, paletteY, paletteW*swatchW, paletteH*swatchH);
const inSprite = inRect(mouseX, mouseY, spriteX, spriteY, spriteW*pixelW, spriteH*pixelH);
const inSheet = inRect(mouseX, mouseY, sheetX, sheetY, sheetW*spriteW, sheetH*spriteH);
if (inPalette) {
const {x, y} = reGrid(mouseX, mouseY, paletteX, paletteY, swatchW, swatchH);
state.selectedColor = paletteW*y+x;
}
if (inSprite) {
const {x, y} = reGrid(mouseX, mouseY, spriteX, spriteY, pixelW, pixelH);
const pixelNumber = spriteW*y+x;
state.sprites[state.selectedSprite][pixelNumber] = state.selectedColor;
}
if (inSheet) {
const {x, y} = reGrid(mouseX, mouseY, sheetX, sheetY, spriteW, spriteH);
state.selectedSprite = sheetW*y+x;
}
}
2023-05-05 14:59:52 -07:00
}
2023-05-05 16:17:55 -07:00
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.DARKBLUE);
})
}
2023-05-05 14:59:52 -07:00
const draw = () => {
2023-05-05 16:02:23 -07:00
const {sprites, selectedSprite, selectedColor} = state;
2023-05-05 14:59:52 -07:00
clearScreen();
2023-05-06 14:49:46 -07:00
useSpritesheet(page.activeSheet);
2023-05-05 14:59:52 -07:00
fillRect(0, 8, 128, 112, COLOR.BROWN);
2023-05-05 16:02:23 -07:00
2023-05-05 14:59:52 -07:00
// Draw the palette
2023-05-05 16:02:23 -07:00
fillRect(paletteX-1, paletteY-1, (paletteW*swatchW)+2, (paletteH*swatchH)+2, COLOR.BLACK);
2023-05-05 14:59:52 -07:00
Object.keys(COLOR).forEach((name, i) => {
2023-05-05 16:02:23 -07:00
const swatchX = paletteX+swatchW*(i%paletteW);
const swatchY = paletteY+swatchH*Math.floor(i/paletteW);
fillRect(swatchX, swatchY, swatchW, swatchH, COLOR[name as keyof typeof COLOR]);
2023-05-05 14:59:52 -07:00
if (i === 0) {
// transparent
2023-05-05 16:17:55 -07:00
drawTransparentRect(swatchX, swatchY, swatchW, swatchH);
2023-05-05 14:59:52 -07:00
}
2023-05-05 16:02:23 -07:00
if (i === selectedColor) {
2023-05-05 16:17:55 -07:00
outlineRect(swatchX, swatchY, swatchW, swatchH, COLOR.WHITE);
2023-05-05 16:02:23 -07:00
}
2023-05-05 14:59:52 -07:00
});
2023-05-05 16:02:23 -07:00
2023-05-05 14:59:52 -07:00
// Draw the current sprite
2023-05-05 16:02:23 -07:00
fillRect(spriteX-1, spriteY-1, (spriteW*pixelW)+2, (spriteH*pixelH)+2, COLOR.BLACK);
2023-05-05 16:17:55 -07:00
drawTransparentRect(spriteX, spriteY, (spriteW*pixelW), (spriteH*pixelH));
2023-05-05 16:02:23 -07:00
sprites[selectedSprite].forEach((pix, i) => {
fillRect(spriteX+pixelW*(i%spriteW), spriteY+pixelH*Math.floor(i/spriteW), pixelW, pixelH, pix);
2023-05-05 14:59:52 -07:00
});
2023-05-05 16:02:23 -07:00
2023-05-05 14:59:52 -07:00
// Draw the spritesheet
2023-05-05 16:02:23 -07:00
fillRect(sheetX, sheetY-1, (sheetW*spriteW), (sheetH*spriteH)+1, COLOR.BLACK);
2023-05-05 14:59:52 -07:00
sprites.forEach((_sprite, i) => {
2023-05-05 16:17:55 -07:00
const sprX = sheetX+spriteW*(i%sheetW);
const sprY = sheetY+spriteH*Math.floor(i/sheetW);
drawSprite(sprX, sprY, i);
if (i === selectedSprite) {
outlineRect(sprX, sprY, spriteW, spriteH, COLOR.WHITE);
}
2023-05-05 14:59:52 -07:00
});
}
export const spritetab = {
update,
draw,
}