diff --git a/maptab.ts b/maptab.ts index 6b0cdd0..b99bb77 100644 --- a/maptab.ts +++ b/maptab.ts @@ -1,8 +1,8 @@ import { clearScreen, fillRect } from "./window.ts"; import { drawSprite, drawText } from "./builtins.ts"; import { COLOR } from "./colors.ts"; -import { getMapSheet, getSheet, getSpriteSheet, setSheet } from "./sheet.ts"; -import { mouseHeld, mousePos } from "./mouse.ts"; +import { getMapSheet, getSheet, setSheet } from "./sheet.ts"; +import { mouseClick, mouseHeld, mousePos } from "./mouse.ts"; import { inRect, reGrid } from "./util.ts"; import { page } from "./viewsheets.ts"; import { useSpritesheet } from "./builtins.ts"; @@ -11,6 +11,18 @@ const state = { selectedSpriteSheet: 0, selectedSprite: 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() { return getMapSheet(page.activeSheet); }, @@ -40,7 +52,7 @@ const miniPatchH = 4; const overviewW = 8; const overviewH = 8; -const patchX = 8; +const patchX = 4; const patchY = 12; const patchW = 8; const patchH = 8; @@ -54,11 +66,16 @@ const spriteSheetW = 16; const spriteSheetH = 4; const spriteSheetPickerX = 0; -const spriteSheetPickerY = 79; +const spriteSheetPickerY = 80; const spriteSheetPickerW = 16; const spriteSheetPickerH = 1; -const spriteSheetPickerTabW = 8; -const spriteSheetPickerTabH = 8; +const spriteSheetPickerTabW = 7; +const spriteSheetPickerTabH = 7; + +const spriteSheetPageSwapX = 121; +const spriteSheetPageSwapY = 80; +const spriteSheetPageSwapW = 7; +const spriteSheetPageSwapH = 7; const update = () => { if (mouseHeld()) { @@ -82,7 +99,13 @@ const update = () => { } if (inSpriteSheet) { 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 { selectedSpriteSheet, - selectedSprite, + spriteWithinPage, + spriteSheetPage, selectedPatch } = state; clearScreen(); @@ -146,16 +170,21 @@ const draw = () => { 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]); }); + + // Draw the spritesheet page swap button + fillRect(spriteSheetPageSwapX, spriteSheetPageSwapY, spriteSheetPageSwapW, spriteSheetPageSwapH, COLOR.BLUE); + drawText(spriteSheetPageSwapX+2, spriteSheetPageSwapY+1, state.spriteSheetPage.toString()); // Draw the spritesheet fillRect(spriteSheetX, spriteSheetY-1, (spriteSheetW*spriteW), (spriteSheetH*spriteH)+1, COLOR.BLACK); if (getSheet(selectedSpriteSheet).sheet_type === "spritesheet") { 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 sprY = spriteSheetY+spriteH*Math.floor(i/spriteSheetW); - drawSprite(sprX, sprY, i); - if (i === selectedSprite) { + drawSprite(sprX, sprY, sprI); + if (i === spriteWithinPage) { outlineRect(sprX, sprY, spriteW, spriteH, COLOR.WHITE); } }); diff --git a/nonetab.ts b/nonetab.ts index 8505e61..3a77520 100644 --- a/nonetab.ts +++ b/nonetab.ts @@ -18,7 +18,7 @@ const gapY = 8; const sheetTypes = ["code", "spritesheet", "map"] as const; const defaultSheetVal = { 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]), none: () =>null, } diff --git a/sheet.ts b/sheet.ts index 622d250..bc0096d 100644 --- a/sheet.ts +++ b/sheet.ts @@ -39,6 +39,9 @@ export const getSpriteSheet = (sheet: number) => { if (sheet_type !== "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; } @@ -48,6 +51,4 @@ export const getMapSheet = (sheet: number) => { throw "Trying to use a non-map sheet as a map." } return value; -} - -// addToContext("code", codeSheet); \ No newline at end of file +} \ No newline at end of file diff --git a/spritetab.ts b/spritetab.ts index a220c51..c200cf9 100644 --- a/spritetab.ts +++ b/spritetab.ts @@ -1,8 +1,8 @@ import { clearScreen, fillRect, setPixelColor } from "./window.ts"; -import { drawSprite } from "./builtins.ts"; +import { drawSprite, drawText } from "./builtins.ts"; import { COLOR } from "./colors.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 { page } from "./viewsheets.ts"; import { useSpritesheet } from "./builtins.ts"; @@ -10,6 +10,18 @@ import { useSpritesheet } from "./builtins.ts"; const state = { selectedSprite: 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() { return getSpriteSheet(page.activeSheet); }, @@ -38,6 +50,11 @@ const sheetY = 88; const sheetW = 16; const sheetH = 4; +const spriteSheetPageSwapX = 121; +const spriteSheetPageSwapY = 80; +const spriteSheetPageSwapW = 7; +const spriteSheetPageSwapH = 7; + const update = () => { if (mouseHeld()) { const {x: mouseX, y: mouseY} = mousePos(); @@ -55,7 +72,13 @@ const update = () => { } if (inSheet) { 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); }); + // Draw the spritesheet page swap button + fillRect(spriteSheetPageSwapX, spriteSheetPageSwapY, spriteSheetPageSwapW, spriteSheetPageSwapH, COLOR.BLUE); + drawText(spriteSheetPageSwapX+2, spriteSheetPageSwapY+1, state.spriteSheetPage.toString()); + // Draw the spritesheet 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 sprY = sheetY+spriteH*Math.floor(i/sheetW); - drawSprite(sprX, sprY, i); - if (i === selectedSprite) { + console.log(sprI, getSpriteSheet(page.activeSheet).length); + drawSprite(sprX, sprY, sprI); + if (i === state.spriteWithinPage) { outlineRect(sprX, sprY, spriteW, spriteH, COLOR.WHITE); } });