/* Main card container */ .maker-container background: rgba(30, 40, 50, 0.75); backdrop-filter: blur(2px); border-radius: 2.5rem; padding: 1.5rem; box-shadow: 0 20px 35px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); border: 1px solid rgba(255,215,150,0.3);
/* export area */ .export-area display: flex; justify-content: center; gap: 12px; margin-top: 0.5rem; flex-wrap: wrap;
/* tool panel */ .tools-panel display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; align-items: center; background: #202433cc; padding: 0.8rem 1.2rem; border-radius: 60px; backdrop-filter: blur(4px);
.sub text-align: center; font-size: 0.8rem; color: #bbccdd; margin-bottom: 1.2rem; border-bottom: 1px dashed #ffb34755; display: inline-block; width: 100%; font-family: monospace; pixel art maker for melon playground
// right-click prevention on canvas function disableContextMenu(e) e.preventDefault(); return false;
.color-well display: flex; align-items: center; gap: 10px; background: #171c26; padding: 5px 15px; border-radius: 40px;
<!-- export & melon tools --> <div class="export-area"> <button id="exportPNG" class="btn btn-primary">📸 EXPORT PNG (Melon Ready)</button> <button id="exportSpriteData" class="btn">📋 COPY as GRID (JSON)</button> </div> <div class="melon-badge"> 🍉 TIP: Draw your pixel character / item, then export PNG → import into Melon Playground as custom sprite!<br> 🖱️ Click + drag to paint | Right-click (or alt+click) to erase with background color. </div> <footer> Pixel perfect | Melon Playground friendly | Resizable grid | Color picker & fill </footer> </div> </div> /* Main card container */
@media (max-width: 650px) .tools-panel gap: 0.6rem; .btn padding: 5px 12px; font-size: 0.8rem; .size-control padding: 3px 10px; #currentColorPicker width: 38px; height: 38px; </style> </head> <body> <div class="maker-container"> <div class="pixel-art-studio"> <h1>🎨 PIXEL ART MAKER</h1> <div class="sub">⚙️ for MELON PLAYGROUND · Sprite Designer</div>
// ---- change grid size ---- function changeGridSize() const newSize = parseInt(gridSizeSelect.value, 10); if(newSize === currentGridSize) return; // backup old colors? but we can optionally preserve? but resize resets canvas better to keep new fresh matrix. // but user might want to keep old drawing? To be friendly, we can attempt to map old drawing into new grid? // That could be messy (scale). For simplicity and clarity, we reset matrix with default bg, but we show warning? We'll just reinit. currentGridSize = newSize; pixelMatrix = initMatrix(currentGridSize, DEFAULT_BG); resizeAndRedraw();
.color-label font-weight: bold; color: #ffdd99; font-size: 0.85rem; but resize resets canvas better to keep new fresh matrix
select, input background: #0e111b; border: 1px solid #ffb347; color: #ffe6c7; padding: 6px 10px; border-radius: 28px; font-family: monospace; font-weight: bold;
// draw entire pixel matrix onto canvas function drawFullMatrix() if(!pixelMatrix.length) return; const size = currentGridSize; for(let row = 0; row < size; row++) for(let col = 0; col < size; col++) const color = pixelMatrix[row][col]; ctx.fillStyle = color; ctx.fillRect(col * cellW, row * cellH, cellW, cellH); // optional: draw subtle grid lines ctx.save(); ctx.beginPath(); ctx.strokeStyle = "#2c3e4e"; ctx.lineWidth = 0.5; for(let i = 0; i <= size; i++) ctx.beginPath(); ctx.moveTo(i * cellW, 0); ctx.lineTo(i * cellW, canvas.height); ctx.stroke(); ctx.moveTo(0, i * cellH); ctx.lineTo(canvas.width, i * cellH); ctx.stroke(); ctx.restore();
// resize canvas and redraw from matrix function resizeAndRedraw() const size = currentGridSize; // physical canvas resolution: 400x400 gives nice pixel blocks // We'll use 400x400 to have integer cell sizes: 400 / size must be integer. // But for 48x48, 400/48 = 8.33 not integer => we'll adjust canvas resolution dynamically to keep crisp pixels. // better approach: set canvas size to a multiple of grid size to avoid subpixel artifacts. // Let's set canvas width/height = gridSize * 10 (or gridSize * 12) .. but we need crisp squares. // I'll compute canvas size as gridSize * 12 -> max 48*12=576 still fine, min 16*12=192. // But user expects 32x32 cell size around 10px each => 320px. // For consistency, we set canvas.width = gridSize * 10 (max 480 for 48, still crisp). // But for 48, 480/48 = 10px exactly. For 24, 240px. Good. const pixelSize = 10; // each cell is exactly 10px const newCanvasWidth = size * pixelSize; const newCanvasHeight = size * pixelSize; canvas.width = newCanvasWidth; canvas.height = newCanvasHeight; canvas.style.width = `$newCanvasWidthpx`; canvas.style.height = `$newCanvasHeightpx`; cellW = pixelSize; cellH = pixelSize; // redraw full matrix drawFullMatrix();