engine.scope( ({ start, cls, rect, rectfill, circ, circfill, text, textSize, spr, mouse, mdown, click, dragging, cursor, }) => { // prettier-ignore const sprites = { pen: [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 13, 13, -1, -1, -1, -1, -1, 13, 13, 13, 13, -1, -1, -1, 13, 13, 13, 13, 13, -1, -1, 13, -1, 13, 13, 13, -1, -1, 13, -1, -1, -1, 13, -1, -1, -1, 13, 13, -1, 13, -1, -1, -1, -1, 13, 13, 13, -1, -1, -1, -1, -1, ], eraser: [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 13, -1, -1, -1, -1, -1, -1, 13, 13, 13, -1, -1, -1, -1, 13, 13, 13, 13, 13, -1, -1, 13, -1, 13, 13, 13, -1, -1, 13, -1, -1, -1, 13, -1, -1, -1, -1, 13, -1, 13, -1, -1, -1, -1, 13, 13, 13, 13, 13, 13, 13, ], fill: [ -1, -1, -1, 13, -1, -1, -1, -1, -1, -1, 13, -1, 13, -1, -1, -1, -1, 13, -1, -1, 13, 13, -1, -1, 13, -1, -1, -1, -1, 13, 13, -1, -1, 13, -1, -1, -1, 13, 13, -1, -1, -1, 13, -1, 13, -1, 13, -1, -1, -1, -1, 13, -1, -1, 13, -1, -1, -1, -1, -1, -1, 13, 13, 13, ], flipX: [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 13, -1, -1, 13, -1, -1, 13, -1, 13, 13, -1, 13, -1, 13, 13, -1, 13, 13, 13, 13, 13, 13, 13, -1, 13, 13, -1, 13, -1, 13, 13, -1, 13, -1, -1, 13, -1, -1, 13, -1, -1, -1, -1, -1, -1, -1, -1, ], flipY: [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 13, 13, 13, 13, 13, -1, -1, -1, -1, 13, 13, 13, -1, -1, -1, -1, -1, -1, 13, -1, -1, -1, -1, -1, 13, 13, 13, 13, 13, -1, -1, -1, -1, -1, 13, -1, -1, -1, -1, -1, -1, 13, 13, 13, -1, -1, -1, -1, 13, 13, 13, 13, 13, -1, ], cursor: [ 7, 0, -1, -1, -1, -1, -1, -1, 7, 7, 0, -1, -1, -1, -1, -1, 7, 7, 7, 0, -1, -1, -1, -1, 7, 7, 7, 7, 0, -1, -1, -1, 7, 7, 7, 7, 7, 0, -1, -1, 7, 7, 0, 0, 0, 0, -1, -1, 7, 0, 0, -1, -1, -1, -1, -1, 0, 0, -1, -1, -1, -1, -1, -1, ], }; const sounds = {}; class Canvas { constructor() { this.x1 = 5; this.y1 = 5; this.pixelSize = 10; this.gridSize = 8; this.size = this.pixelSize * this.gridSize; this.x2 = this.x1 + this.size; this.y2 = this.y1 + this.size; } getPixelAt(mx, my) { const relX = mx - this.x1; const relY = my - this.y1; if (relX < 0 || relY < 0 || relX >= this.size || relY >= this.size) { return null; } const col = Math.floor(relX / this.pixelSize); const row = Math.floor(relY / this.pixelSize); return { col, row, index: row * this.gridSize + col }; } draw(pixels) { const checkerSize = 2; for (let py = 0; py < this.size; py += checkerSize) { for (let px = 0; px < this.size; px += checkerSize) { const checkX = Math.floor(px / checkerSize); const checkY = Math.floor(py / checkerSize); const isLight = (checkX + checkY) % 2 === 0; const color = isLight ? 7 : 6; const cx1 = this.x1 + px; const cy1 = this.y1 + py; const cx2 = cx1 + checkerSize; const cy2 = cy1 + checkerSize; rectfill(cx1, cy1, cx2, cy2, color); } } for (let row = 0; row < this.gridSize; row++) { for (let col = 0; col < this.gridSize; col++) { const index = row * this.gridSize + col; const pixelColor = pixels[index]; if (pixelColor !== -1) { const px1 = this.x1 + col * this.pixelSize; const py1 = this.y1 + row * this.pixelSize; const px2 = px1 + this.pixelSize; const py2 = py1 + this.pixelSize; rectfill(px1, py1, px2, py2, pixelColor); } } } rect(this.x1 - 1, this.y1 - 1, this.x2 + 1, this.y2 + 1, 13); } } class Button { constructor(x, y, content, isText = false) { this.x = x; this.y = y; this.content = content; this.isText = isText; this.padding = 3; this.sizeCalculated = false; this.fixedHeight = 8 + this.padding * 2; if (isText) { this.width = 0; this.height = this.fixedHeight; } else { this.spriteSize = 8; this.width = this.spriteSize + this.padding * 2; this.height = this.spriteSize + this.padding * 2; } } _calculateSize() { if (this.isText && !this.sizeCalculated) { const size = textSize(this.content); this.width = size.x + this.padding * 2; this.sizeCalculated = true; } } contains(mx, my) { this._calculateSize(); return ( mx >= this.x && mx < this.x + this.width && my >= this.y && my < this.y + this.height ); } draw(isSelected) { this._calculateSize(); const x1 = this.x; const y1 = this.y; const x2 = x1 + this.width; const y2 = y1 + this.height; rectfill(x1, y1, x2, y2, 6); const borderColor = isSelected ? 7 : 13; rect(x1, y1, x2, y2, borderColor); if (this.isText) { const textX = x1 + this.padding; const textY = y1 + 2; text(this.content, textX, textY, 13); } else { const spriteX = x1 + this.padding; const spriteY = y1 + this.padding; spr(this.content, spriteX, spriteY); } } } class Tools { constructor() { this.buttons = { pen: new Button(4, 90, 'pen'), eraser: new Button(17, 90, 'eraser'), fill: new Button(30, 90, 'fill'), }; } getToolAt(mx, my) { if (this.buttons.pen.contains(mx, my)) return 'pen'; if (this.buttons.eraser.contains(mx, my)) return 'eraser'; if (this.buttons.fill.contains(mx, my)) return 'fill'; return null; } draw(selectedTool) { if (selectedTool !== 'pen') this.buttons.pen.draw(false); if (selectedTool !== 'eraser') this.buttons.eraser.draw(false); if (selectedTool !== 'fill') this.buttons.fill.draw(false); if (selectedTool === 'pen') this.buttons.pen.draw(true); if (selectedTool === 'eraser') this.buttons.eraser.draw(true); if (selectedTool === 'fill') this.buttons.fill.draw(true); } } class Actions { constructor() { this.buttons = { flipX: new Button(58, 90, 'flipX'), flipY: new Button(71, 90, 'flipY'), }; } getActionAt(mx, my) { if (this.buttons.flipX.contains(mx, my)) return 'flipX'; if (this.buttons.flipY.contains(mx, my)) return 'flipY'; return null; } draw() { this.buttons.flipX.draw(false); this.buttons.flipY.draw(false); } } class StatusText { constructor(placeholder = '') { this.x = 5; this.y = 128 - 5 - 6; this.message = ''; this.timeout = false; this.showTime = 0; this.placeholder = placeholder; } show(message, timeout = 2) { this.message = message; this.timeout = timeout; this.showTime = Date.now() / 1000; } draw() { let displayText = this.message; let isPlaceholder = false; if (this.message && this.timeout !== false) { const elapsed = Date.now() / 1000 - this.showTime; if (elapsed >= this.timeout) { this.message = ''; displayText = ''; } } if (!displayText && this.placeholder) { displayText = this.placeholder; isPlaceholder = true; } if (displayText) { const color = isPlaceholder ? 13 : 7; text(displayText, this.x, this.y, color); } } } class Palette { constructor() { this.size = 32; this.x1 = 128 - this.size - 5; this.y1 = 5; this.x2 = 128 - 5; this.y2 = 5 + this.size; this.swatchSize = 8; } getColorAt(mx, my) { const relX = mx - this.x1; const relY = my - this.y1; if (relX < 0 || relY < 0 || relX >= this.size || relY >= this.size) { return null; } const col = Math.floor(relX / this.swatchSize); const row = Math.floor(relY / this.swatchSize); return row * 4 + col; } draw() { for (let i = 0; i < 16; i++) { const row = Math.floor(i / 4); const col = i % 4; const sx1 = this.x1 + col * this.swatchSize; const sy1 = this.y1 + row * this.swatchSize; const sx2 = sx1 + this.swatchSize; const sy2 = sy1 + this.swatchSize; rectfill(sx1, sy1, sx2, sy2, i); } rect(this.x1 - 1, this.y1 - 1, this.x2 + 1, this.y2 + 1, 13); } drawSelection(selectedColor) { const row = Math.floor(selectedColor / 4); const col = selectedColor % 4; const sx1 = this.x1 + col * this.swatchSize; const sy1 = this.y1 + row * this.swatchSize; const sx2 = sx1 + this.swatchSize; const sy2 = sy1 + this.swatchSize; rect(sx1 - 1, sy1 - 1, sx2 + 1, sy2 + 1, 7); } } class Flags { constructor() { this.x1 = 128 - 32 - 5 - 1; // 1px left of palette alignment (90) this.labelY = 5 + 32 + 3; // Label starts 3px below palette (40) this.y1 = this.labelY + 12; // Checkboxes start 12px below label (6px text + 6px gap = 52) this.cols = 4; this.rows = 2; this.checkboxSize = 6; this.gap = 2; // Width: 4 checkboxes with 3 gaps between = 4*6 + 3*2 = 30 this.width = this.cols * this.checkboxSize + (this.cols - 1) * this.gap; // Height: 2 rows with 1 gap between = 2*6 + 1*2 = 14 this.height = this.rows * this.checkboxSize + (this.rows - 1) * this.gap; this.x2 = this.x1 + this.width; this.y2 = this.y1 + this.height; } getFlagAt(mx, my) { const relX = mx - this.x1; const relY = my - this.y1; if (relX < 0 || relY < 0 || relX >= this.width || relY >= this.height) { return null; } // Account for gaps - find which checkbox we're in for (let row = 0; row < this.rows; row++) { for (let col = 0; col < this.cols; col++) { const fx1 = col * (this.checkboxSize + this.gap); const fy1 = row * (this.checkboxSize + this.gap); const fx2 = fx1 + this.checkboxSize; const fy2 = fy1 + this.checkboxSize; if (relX >= fx1 && relX < fx2 && relY >= fy1 && relY < fy2) { const flagIndex = row * this.cols + col; return flagIndex < 8 ? flagIndex : null; } } } return null; } draw(flags) { text('Flags', this.x1, this.labelY, 13); for (let i = 0; i < 8; i++) { const row = Math.floor(i / this.cols); const col = i % this.cols; const fx1 = this.x1 + col * (this.checkboxSize + this.gap); const fy1 = this.y1 + row * (this.checkboxSize + this.gap); const cx = fx1 + 3; const cy = fy1 + 3; if (flags[i]) { circfill(cx, cy, 2, 13, 1); } else { circ(cx, cy, 2, 13, 1); } } } } const state = { pixels: new Array(64).fill(-1), flags: new Array(8).fill(false), selectedColor: 0, currentTool: 'pen', showGrid: true, lastPaintX: -1, lastPaintY: -1, }; const palette = new Palette(); const canvas = new Canvas(); const tools = new Tools(); const actions = new Actions(); const flags = new Flags(); const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; const shortcutKey = isMac ? 'Cmd' : 'Ctrl'; const statusText = new StatusText(`${shortcutKey}+C/${shortcutKey}+V to save/load`); function init() { cursor(false); state.pixels = new Array(64).fill(-1); state.flags = new Array(8).fill(false); document.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'c') { e.preventDefault(); copyToClipboard(); } if ((e.ctrlKey || e.metaKey) && e.key === 'v') { e.preventDefault(); navigator.clipboard .readText() .then((text) => { loadFromText(text); }) .catch((err) => { statusText.show('Paste failed'); }); } }); } function copyToClipboard() { const hasFlags = state.flags.some((f) => f === true); let formatted = ''; if (hasFlags) { formatted = '// prettier-ignore\n[\n [\n'; for (let row = 0; row < 8; row++) { formatted += ' '; for (let col = 0; col < 8; col++) { const index = row * 8 + col; const value = state.pixels[index]; const padded = value.toString().padStart(2, ' '); formatted += padded; formatted += ','; if (col < 7) { formatted += ' '; } } formatted += '\n'; } formatted += ' ],\n ['; formatted += state.flags.map((f) => f.toString()).join(', '); formatted += ']\n]'; } else { formatted = '// prettier-ignore\n[\n'; for (let row = 0; row < 8; row++) { formatted += ' '; for (let col = 0; col < 8; col++) { const index = row * 8 + col; const value = state.pixels[index]; const padded = value.toString().padStart(2, ' '); formatted += padded; formatted += ','; if (col < 7) { formatted += ' '; } } formatted += '\n'; } formatted += ']'; } navigator.clipboard .writeText(formatted) .then(() => { statusText.show('Copied to clipboard'); }) .catch(() => { statusText.show('Copy failed'); }); } function loadFromText(text) { const nestedMatch = text.match(/\[\s*\[([\s\S]*?)\]\s*,\s*\[([\s\S]*?)\]\s*\]/); if (nestedMatch) { const pixelContent = nestedMatch[1]; const pixelNumbers = pixelContent.match(/-?\d+/g); if (!pixelNumbers || pixelNumbers.length !== 64) { statusText.show('Paste failed: need 64 pixels'); return; } const pixels = pixelNumbers.map((n) => parseInt(n, 10)); const allPixelsValid = pixels.every((v) => v >= -1 && v <= 15); if (!allPixelsValid) { statusText.show('Paste failed: invalid pixel values'); return; } const flagContent = nestedMatch[2]; const flagMatches = flagContent.match(/true|false/g); if (!flagMatches || flagMatches.length !== 8) { statusText.show('Paste failed: need 8 flags'); return; } const flagsArray = flagMatches.map((f) => f === 'true'); state.pixels = pixels; state.flags = flagsArray; statusText.show('Pasted sprite with flags'); } else { const match = text.match(/\[([\s\S]*)\]/); if (!match) { statusText.show('Paste failed: no array'); return; } const content = match[1]; const numbers = content.match(/-?\d+/g); if (!numbers || numbers.length !== 64) { statusText.show('Paste failed: need 64 values'); return; } const pixels = numbers.map((n) => parseInt(n, 10)); const allValid = pixels.every((v) => v >= -1 && v <= 15); if (!allValid) { statusText.show('Paste failed: invalid values'); return; } state.pixels = pixels; state.flags = new Array(8).fill(false); statusText.show('Pasted from clipboard'); } } function update(time, frame) { const pos = mouse(); const isClicked = click(); const isMouseDown = mdown(); const isDragging = dragging(); if (isClicked) { const color = palette.getColorAt(pos.x, pos.y); if (color !== null && color >= 0 && color < 16) { state.selectedColor = color; return; } const tool = tools.getToolAt(pos.x, pos.y); if (tool !== null) { state.currentTool = tool; const capitalizedTool = tool.charAt(0).toUpperCase() + tool.slice(1); statusText.show(capitalizedTool + ' tool selected'); return; } const action = actions.getActionAt(pos.x, pos.y); if (action !== null) { if (action === 'flipX') { flipX(); statusText.show('Flipped horizontally'); } else if (action === 'flipY') { flipY(); statusText.show('Flipped vertically'); } return; } const flagIndex = flags.getFlagAt(pos.x, pos.y); if (flagIndex !== null) { state.flags[flagIndex] = !state.flags[flagIndex]; statusText.show(`Flag ${flagIndex} ${state.flags[flagIndex] ? 'on' : 'off'}`); return; } } if (state.currentTool === 'fill' && isClicked) { const pixel = canvas.getPixelAt(pos.x, pos.y); if (pixel !== null) { floodFill(pixel.col, pixel.row, state.selectedColor); } } if ( (state.currentTool === 'pen' || state.currentTool === 'eraser') && (isMouseDown || isDragging) ) { const pixel = canvas.getPixelAt(pos.x, pos.y); if (pixel !== null) { if (pixel.col !== state.lastPaintX || pixel.row !== state.lastPaintY) { if (state.currentTool === 'pen') { state.pixels[pixel.index] = state.selectedColor; } else if (state.currentTool === 'eraser') { state.pixels[pixel.index] = -1; } state.lastPaintX = pixel.col; state.lastPaintY = pixel.row; } } } else { state.lastPaintX = -1; state.lastPaintY = -1; } } function floodFill(startX, startY, fillColor) { const startIndex = startY * 8 + startX; const targetColor = state.pixels[startIndex]; if (targetColor === fillColor) { return; } const queue = [[startX, startY]]; const visited = new Set(); visited.add(startIndex); while (queue.length > 0) { const [x, y] = queue.shift(); const index = y * 8 + x; state.pixels[index] = fillColor; const neighbors = [ [x, y - 1], [x, y + 1], [x - 1, y], [x + 1, y], ]; for (const [nx, ny] of neighbors) { if (nx < 0 || nx >= 8 || ny < 0 || ny >= 8) { continue; } const nIndex = ny * 8 + nx; if (visited.has(nIndex)) { continue; } if (state.pixels[nIndex] === targetColor) { visited.add(nIndex); queue.push([nx, ny]); } } } } function flipX() { const newPixels = new Array(64); for (let y = 0; y < 8; y++) { for (let x = 0; x < 8; x++) { const oldIndex = y * 8 + x; const newX = 7 - x; const newIndex = y * 8 + newX; newPixels[newIndex] = state.pixels[oldIndex]; } } state.pixels = newPixels; } function flipY() { const newPixels = new Array(64); for (let y = 0; y < 8; y++) { for (let x = 0; x < 8; x++) { const oldIndex = y * 8 + x; const newY = 7 - y; const newIndex = newY * 8 + x; newPixels[newIndex] = state.pixels[oldIndex]; } } state.pixels = newPixels; } function draw() { cls(0); canvas.draw(state.pixels); palette.draw(); flags.draw(state.flags); tools.draw(state.currentTool); actions.draw(); palette.drawSelection(state.selectedColor); statusText.draw(); const pos = mouse(); spr('cursor', pos.x, pos.y); } start({ sprites, sounds, init, update, draw, target, }); } );

Editing: Sprite Editor

Recent Edits

Plugins