Spritesheets get 2 pages

This commit is contained in:
dylan 2023-05-09 20:29:25 -07:00
parent 90b97a30bd
commit 38eabd380a
4 changed files with 80 additions and 21 deletions

View File

@ -1,8 +1,8 @@
import { clearScreen, fillRect } from "./window.ts"; import { clearScreen, fillRect } from "./window.ts";
import { drawSprite, drawText } from "./builtins.ts"; import { drawSprite, drawText } from "./builtins.ts";
import { COLOR } from "./colors.ts"; import { COLOR } from "./colors.ts";
import { getMapSheet, getSheet, getSpriteSheet, setSheet } from "./sheet.ts"; import { getMapSheet, getSheet, setSheet } from "./sheet.ts";
import { mouseHeld, mousePos } from "./mouse.ts"; import { mouseClick, mouseHeld, mousePos } from "./mouse.ts";
import { inRect, reGrid } from "./util.ts"; import { inRect, reGrid } from "./util.ts";
import { page } from "./viewsheets.ts"; import { page } from "./viewsheets.ts";
import { useSpritesheet } from "./builtins.ts"; import { useSpritesheet } from "./builtins.ts";
@ -11,6 +11,18 @@ const state = {
selectedSpriteSheet: 0, selectedSpriteSheet: 0,
selectedSprite: 0, selectedSprite: 0,
selectedPatch: 0, selectedPatch: 0,
get spriteSheetPage() {
return Math.floor(this.selectedSprite/64);
},
set spriteSheetPage(val) {
this.selectedSprite = 64*val+this.spriteWithinPage;
},
get spriteWithinPage() {
return this.selectedSprite%64;
},
set spriteWithinPage(val) {
this.selectedSprite = 64*this.spriteSheetPage+val;
},
get map() { get map() {
return getMapSheet(page.activeSheet); return getMapSheet(page.activeSheet);
}, },
@ -40,7 +52,7 @@ const miniPatchH = 4;
const overviewW = 8; const overviewW = 8;
const overviewH = 8; const overviewH = 8;
const patchX = 8; const patchX = 4;
const patchY = 12; const patchY = 12;
const patchW = 8; const patchW = 8;
const patchH = 8; const patchH = 8;
@ -54,11 +66,16 @@ const spriteSheetW = 16;
const spriteSheetH = 4; const spriteSheetH = 4;
const spriteSheetPickerX = 0; const spriteSheetPickerX = 0;
const spriteSheetPickerY = 79; const spriteSheetPickerY = 80;
const spriteSheetPickerW = 16; const spriteSheetPickerW = 16;
const spriteSheetPickerH = 1; const spriteSheetPickerH = 1;
const spriteSheetPickerTabW = 8; const spriteSheetPickerTabW = 7;
const spriteSheetPickerTabH = 8; const spriteSheetPickerTabH = 7;
const spriteSheetPageSwapX = 121;
const spriteSheetPageSwapY = 80;
const spriteSheetPageSwapW = 7;
const spriteSheetPageSwapH = 7;
const update = () => { const update = () => {
if (mouseHeld()) { if (mouseHeld()) {
@ -82,7 +99,13 @@ const update = () => {
} }
if (inSpriteSheet) { if (inSpriteSheet) {
const {x, y} = reGrid(mouseX, mouseY, spriteSheetX, spriteSheetY, spriteW, spriteH); const {x, y} = reGrid(mouseX, mouseY, spriteSheetX, spriteSheetY, spriteW, spriteH);
state.selectedSprite = spriteSheetW*y+x; state.spriteWithinPage = spriteSheetW*y+x;
}
} else if (mouseClick()) {
const {x: mouseX, y: mouseY} = mousePos();
const inSpriteSheetPageSwap = inRect(mouseX, mouseY, spriteSheetPageSwapX, spriteSheetPageSwapY, spriteSheetPageSwapW, spriteSheetPageSwapH);
if (inSpriteSheetPageSwap) {
state.spriteSheetPage = (1+state.spriteSheetPage)%2;
} }
} }
} }
@ -97,7 +120,8 @@ const outlineRect = (x: number, y: number, w: number, h: number, color: number)
const draw = () => { const draw = () => {
const { const {
selectedSpriteSheet, selectedSpriteSheet,
selectedSprite, spriteWithinPage,
spriteSheetPage,
selectedPatch selectedPatch
} = state; } = state;
clearScreen(); clearScreen();
@ -146,16 +170,21 @@ const draw = () => {
fillRect(tabX, tabY, spriteSheetPickerTabW, spriteSheetPickerTabH, color); fillRect(tabX, tabY, spriteSheetPickerTabW, spriteSheetPickerTabH, color);
drawText(tabX+2, tabY+1, ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"][i]); drawText(tabX+2, tabY+1, ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"][i]);
}); });
// Draw the spritesheet page swap button
fillRect(spriteSheetPageSwapX, spriteSheetPageSwapY, spriteSheetPageSwapW, spriteSheetPageSwapH, COLOR.BLUE);
drawText(spriteSheetPageSwapX+2, spriteSheetPageSwapY+1, state.spriteSheetPage.toString());
// Draw the spritesheet // Draw the spritesheet
fillRect(spriteSheetX, spriteSheetY-1, (spriteSheetW*spriteW), (spriteSheetH*spriteH)+1, COLOR.BLACK); fillRect(spriteSheetX, spriteSheetY-1, (spriteSheetW*spriteW), (spriteSheetH*spriteH)+1, COLOR.BLACK);
if (getSheet(selectedSpriteSheet).sheet_type === "spritesheet") { if (getSheet(selectedSpriteSheet).sheet_type === "spritesheet") {
useSpritesheet(selectedSpriteSheet); useSpritesheet(selectedSpriteSheet);
getSpriteSheet(selectedSpriteSheet).forEach((_sprite, i) => { Array(64).fill(0).forEach((_, i) => {
const sprI = i+64*spriteSheetPage;
const sprX = spriteSheetX+spriteW*(i%spriteSheetW); const sprX = spriteSheetX+spriteW*(i%spriteSheetW);
const sprY = spriteSheetY+spriteH*Math.floor(i/spriteSheetW); const sprY = spriteSheetY+spriteH*Math.floor(i/spriteSheetW);
drawSprite(sprX, sprY, i); drawSprite(sprX, sprY, sprI);
if (i === selectedSprite) { if (i === spriteWithinPage) {
outlineRect(sprX, sprY, spriteW, spriteH, COLOR.WHITE); outlineRect(sprX, sprY, spriteW, spriteH, COLOR.WHITE);
} }
}); });

View File

@ -18,7 +18,7 @@ const gapY = 8;
const sheetTypes = ["code", "spritesheet", "map"] as const; const sheetTypes = ["code", "spritesheet", "map"] as const;
const defaultSheetVal = { const defaultSheetVal = {
code: () => "", code: () => "",
spritesheet: () => Array(64).fill(0).map(() => Array(64).fill(0)), spritesheet: () => Array(128).fill(0).map(() => Array(64).fill(0)),
map: () => Array(64*64).fill(0).map(() => [0, 0]), map: () => Array(64*64).fill(0).map(() => [0, 0]),
none: () =>null, none: () =>null,
} }

View File

@ -39,6 +39,9 @@ export const getSpriteSheet = (sheet: number) => {
if (sheet_type !== "spritesheet") { if (sheet_type !== "spritesheet") {
throw Error("Trying to use a non-sprite sheet as a spritesheet."); throw Error("Trying to use a non-sprite sheet as a spritesheet.");
} }
while (value.length < 128) {
value.push(Array(64).fill(0));
}
return value; return value;
} }
@ -48,6 +51,4 @@ export const getMapSheet = (sheet: number) => {
throw "Trying to use a non-map sheet as a map." throw "Trying to use a non-map sheet as a map."
} }
return value; return value;
} }
// addToContext("code", codeSheet);

View File

@ -1,8 +1,8 @@
import { clearScreen, fillRect, setPixelColor } from "./window.ts"; import { clearScreen, fillRect, setPixelColor } from "./window.ts";
import { drawSprite } from "./builtins.ts"; import { drawSprite, drawText } from "./builtins.ts";
import { COLOR } from "./colors.ts"; import { COLOR } from "./colors.ts";
import { getSpriteSheet, setSheet } from "./sheet.ts"; import { getSpriteSheet, setSheet } from "./sheet.ts";
import { mouseHeld, mousePos } from "./mouse.ts"; import { mouseClick, mouseHeld, mousePos } from "./mouse.ts";
import { inRect, reGrid } from "./util.ts"; import { inRect, reGrid } from "./util.ts";
import { page } from "./viewsheets.ts"; import { page } from "./viewsheets.ts";
import { useSpritesheet } from "./builtins.ts"; import { useSpritesheet } from "./builtins.ts";
@ -10,6 +10,18 @@ import { useSpritesheet } from "./builtins.ts";
const state = { const state = {
selectedSprite: 0, selectedSprite: 0,
selectedColor: 0, selectedColor: 0,
get spriteSheetPage() {
return Math.floor(this.selectedSprite/64);
},
set spriteSheetPage(val) {
this.selectedSprite = 64*val+this.spriteWithinPage;
},
get spriteWithinPage() {
return this.selectedSprite%64;
},
set spriteWithinPage(val) {
this.selectedSprite = 64*this.spriteSheetPage+val;
},
get sprites() { get sprites() {
return getSpriteSheet(page.activeSheet); return getSpriteSheet(page.activeSheet);
}, },
@ -38,6 +50,11 @@ const sheetY = 88;
const sheetW = 16; const sheetW = 16;
const sheetH = 4; const sheetH = 4;
const spriteSheetPageSwapX = 121;
const spriteSheetPageSwapY = 80;
const spriteSheetPageSwapW = 7;
const spriteSheetPageSwapH = 7;
const update = () => { const update = () => {
if (mouseHeld()) { if (mouseHeld()) {
const {x: mouseX, y: mouseY} = mousePos(); const {x: mouseX, y: mouseY} = mousePos();
@ -55,7 +72,13 @@ const update = () => {
} }
if (inSheet) { if (inSheet) {
const {x, y} = reGrid(mouseX, mouseY, sheetX, sheetY, spriteW, spriteH); const {x, y} = reGrid(mouseX, mouseY, sheetX, sheetY, spriteW, spriteH);
state.selectedSprite = sheetW*y+x; state.spriteWithinPage = sheetW*y+x;
}
} else if (mouseClick()) {
const {x: mouseX, y: mouseY} = mousePos();
const inSpriteSheetPageSwap = inRect(mouseX, mouseY, spriteSheetPageSwapX, spriteSheetPageSwapY, spriteSheetPageSwapW, spriteSheetPageSwapH);
if (inSpriteSheetPageSwap) {
state.spriteSheetPage = (1+state.spriteSheetPage)%2;
} }
} }
} }
@ -103,13 +126,19 @@ const draw = () => {
fillRect(spriteX+pixelW*(i%spriteW), spriteY+pixelH*Math.floor(i/spriteW), pixelW, pixelH, pix); fillRect(spriteX+pixelW*(i%spriteW), spriteY+pixelH*Math.floor(i/spriteW), pixelW, pixelH, pix);
}); });
// Draw the spritesheet page swap button
fillRect(spriteSheetPageSwapX, spriteSheetPageSwapY, spriteSheetPageSwapW, spriteSheetPageSwapH, COLOR.BLUE);
drawText(spriteSheetPageSwapX+2, spriteSheetPageSwapY+1, state.spriteSheetPage.toString());
// Draw the spritesheet // Draw the spritesheet
fillRect(sheetX, sheetY-1, (sheetW*spriteW), (sheetH*spriteH)+1, COLOR.BLACK); fillRect(sheetX, sheetY-1, (sheetW*spriteW), (sheetH*spriteH)+1, COLOR.BLACK);
sprites.forEach((_sprite, i) => { Array(64).fill(0).forEach((_, i) => {
const sprI = i+64*state.spriteSheetPage;
const sprX = sheetX+spriteW*(i%sheetW); const sprX = sheetX+spriteW*(i%sheetW);
const sprY = sheetY+spriteH*Math.floor(i/sheetW); const sprY = sheetY+spriteH*Math.floor(i/sheetW);
drawSprite(sprX, sprY, i); console.log(sprI, getSpriteSheet(page.activeSheet).length);
if (i === selectedSprite) { drawSprite(sprX, sprY, sprI);
if (i === state.spriteWithinPage) {
outlineRect(sprX, sprY, spriteW, spriteH, COLOR.WHITE); outlineRect(sprX, sprY, spriteW, spriteH, COLOR.WHITE);
} }
}); });