class Example extends Phaser.Scene { constructor () { super('Example'); this.grid = null; this.gridLines = null; this.gridRatio = 16; this.drawing = false; this.currentColor = 0x000000; this.currentTool = 'brush'; this.brushSize = 1; this.brushStyle = 'square'; this.gridState = []; this.showGrid = true; this.history = []; this.redoStack = []; this.maxHistoryLength = 20; this.frames = []; this.currentFrame = 0; this.isPlaying = false; this.playInterval = null; this.animationDuration = 0.5; this.onionSkinEnabled = false; this.onionSkinGraphics = null; this.pixelData = []; this.maxGridRatio = 64; this.zoomLevel = 0.8; this.maxZoom = 4; this.minZoom = 0.5; this.symmetryEnabled = false; this.showSceneActive = false; this.shapeStart = null; this.penStart = null; this.colorPalette = [ 0x000000, 0xFFFFFF, 0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0x808080, 0xC0C0C0 ]; } preload () { // No assets to preload } create () { this.cameras.main.setBackgroundColor('#333333'); this.grid = this.add.graphics(); this.gridLines = this.add.graphics(); this.onionSkinGraphics = this.add.graphics(); this.initializePixelData(); this.createGrid(); this.createTopBar(); this.createTimelineOptionsContainer(); this.input.on('pointerdown', this.startDrawing, this); this.input.on('pointermove', this.draw, this); this.input.on('pointerup', this.stopDrawing, this); this.initializeFirstFrame(); this.scale.on('enterfullscreen', this.updateTimelinePosition, this); this.scale.on('leavefullscreen', this.updateTimelinePosition, this); this.scale.on('resize', this.updateTimelinePosition, this); } update() { // No update logic needed for the grid } initializePixelData() { this.pixelData = Array(this.maxGridRatio).fill().map(() => Array(this.maxGridRatio).fill(0xFFFFFF)); } createGrid() { const screenWidth = this.sys.game.config.width; const screenHeight = this.sys.game.config.height; const gridSize = 400 * this.zoomLevel; const cellSize = gridSize / this.gridRatio; this.grid.clear(); this.gridLines.clear(); const startX = (screenWidth - gridSize) / 2; const startY = (screenHeight - gridSize) / 2; this.grid.fillStyle(0xFFFFFF); this.grid.fillRect(startX, startY, gridSize, gridSize); this.gridLines.lineStyle(1, 0x9B59B6, 1); for (let i = 0; i <= this.gridRatio; i++) { this.gridLines.moveTo(startX + i * cellSize, startY); this.gridLines.lineTo(startX + i * cellSize, startY + gridSize); } for (let j = 0; j <= this.gridRatio; j++) { this.gridLines.moveTo(startX, startY + j * cellSize); this.gridLines.lineTo(startX + gridSize, startY + j * cellSize); } this.gridLines.strokePath(); this.gridLines.setVisible(this.showGrid); this.gridProps = { startX, startY, gridSize, cellSize }; this.drawPixelDataToGrid(); this.drawOnionSkin(); } drawPixelDataToGrid() { const { startX, startY, cellSize } = this.gridProps; const scaleFactor = this.maxGridRatio / this.gridRatio; for (let y = 0; y < this.gridRatio; y++) { for (let x = 0; x < this.gridRatio; x++) { const pixelX = Math.floor(x * scaleFactor); const pixelY = Math.floor(y * scaleFactor); const color = this.pixelData[pixelY][pixelX]; this.grid.fillStyle(color); this.grid.fillRect(startX + x * cellSize, startY + y * cellSize, cellSize, cellSize); } } } redrawGrid() { const { startX, startY, gridSize } = this.gridProps; this.grid.clear(); this.grid.fillStyle(0xFFFFFF); this.grid.fillRect(startX, startY, gridSize, gridSize); this.drawPixelDataToGrid(); this.drawOnionSkin(); } createTopBar() { const topBar = document.createElement('div'); topBar.id = 'topBar'; topBar.style.position = 'fixed'; topBar.style.top = '0'; topBar.style.left = '0'; topBar.style.width = '100%'; topBar.style.backgroundColor = '#222222'; topBar.style.color = '#FFFFFF'; topBar.style.display = 'flex'; topBar.style.flexDirection = 'column'; topBar.style.alignItems = 'center'; topBar.style.padding = '10px'; topBar.style.boxSizing = 'border-box'; topBar.style.zIndex = '1000'; topBar.style.fontFamily = 'Arial, sans-serif'; // Added Arial font const title = document.createElement('h2'); title.textContent = 'Pixel Picasso'; title.style.margin = '0 0 10px 0'; title.style.color = '#FFFFFF'; title.style.fontFamily = 'Arial, sans-serif'; // Added Arial font topBar.appendChild(title); const buttonContainer = document.createElement('div'); buttonContainer.style.display = 'flex'; buttonContainer.style.alignItems = 'center'; buttonContainer.style.flexWrap = 'wrap'; buttonContainer.style.justifyContent = 'center'; this.createGridSizeDropdown(buttonContainer); this.createColorPicker(buttonContainer); this.createColorPalette(buttonContainer); this.createBrushSizeInput(buttonContainer); this.createBrushStyleDropdown(buttonContainer); // Tool buttons this.createBrushToolButton(buttonContainer); this.createPenToolButton(buttonContainer); this.createShapeToolButton(buttonContainer); this.createFillToolButton(buttonContainer); this.createEraseToolButton(buttonContainer); this.createClearAllButton(buttonContainer); // Toggle buttons this.createGridVisibilityToggle(buttonContainer); this.createSymmetryToggle(buttonContainer); this.createUndoButton(buttonContainer); this.createRedoButton(buttonContainer); this.createExportButton(buttonContainer); this.createOptionsButton(buttonContainer); topBar.appendChild(buttonContainer); document.body.appendChild(topBar); } createGridSizeDropdown(container) { const dropdown = document.createElement('select'); dropdown.style.marginRight = '10px'; dropdown.style.backgroundColor = '#444444'; dropdown.style.color = '#FFFFFF'; dropdown.style.border = '1px solid #666666'; let gridSize = 4; while (gridSize <= this.maxGridRatio) { const option = document.createElement('option'); option.value = gridSize; option.text = `${gridSize}x${gridSize}`; if (gridSize === 16) { option.selected = true; } dropdown.appendChild(option); gridSize *= 2; } dropdown.addEventListener('change', (e) => { this.gridRatio = parseInt(e.target.value); this.createGrid(); }); container.appendChild(dropdown); } createColorPicker(container) { const colorPicker = document.createElement('input'); colorPicker.type = 'color'; colorPicker.value = '#000000'; // Set initial color to black colorPicker.style.marginRight = '10px'; colorPicker.style.backgroundColor = '#444444'; colorPicker.style.border = '1px solid #666666'; colorPicker.addEventListener('input', (e) => { this.currentColor = Phaser.Display.Color.HexStringToColor(e.target.value).color; }); this.colorPicker = colorPicker; container.appendChild(colorPicker); } createColorPalette(container) { const paletteContainer = document.createElement('div'); paletteContainer.style.display = 'flex'; paletteContainer.style.marginRight = '10px'; this.colorPalette.forEach((color, index) => { const colorButton = document.createElement('button'); colorButton.style.width = '20px'; colorButton.style.height = '20px'; colorButton.style.backgroundColor = `#${color.toString(16).padStart(6, '0')}`; colorButton.style.margin = '0 2px'; colorButton.style.border = 'none'; colorButton.style.cursor = 'pointer'; colorButton.style.borderRadius = '50%'; // Make the button circular colorButton.style.padding = '0'; // Remove padding colorButton.addEventListener('click', () => { this.currentColor = color; this.updateColorPickerPreview(); }); paletteContainer.appendChild(colorButton); }); container.appendChild(paletteContainer); } updateColorPickerPreview() { const hexColor = '#' + this.currentColor.toString(16).padStart(6, '0'); this.colorPicker.value = hexColor; } createBrushSizeInput(container) { const brushSizeInput = document.createElement('input'); brushSizeInput.type = 'number'; brushSizeInput.min = '1'; brushSizeInput.max = '10'; brushSizeInput.value = this.brushSize; brushSizeInput.style.width = '40px'; brushSizeInput.style.marginRight = '10px'; brushSizeInput.style.backgroundColor = '#444444'; brushSizeInput.style.color = '#FFFFFF'; brushSizeInput.style.border = '1px solid #666666'; brushSizeInput.style.fontFamily = 'Arial, sans-serif'; // Added Arial font brushSizeInput.addEventListener('change', (e) => { this.brushSize = parseInt(e.target.value); }); const label = document.createElement('label'); label.textContent = 'Brush Size: '; label.style.color = '#FFFFFF'; label.style.fontFamily = 'Arial, sans-serif'; // Added Arial font label.appendChild(brushSizeInput); container.appendChild(label); } createBrushStyleDropdown(container) { const dropdown = document.createElement('select'); dropdown.style.marginRight = '10px'; dropdown.style.backgroundColor = '#444444'; dropdown.style.color = '#FFFFFF'; dropdown.style.border = '1px solid #666666'; dropdown.style.fontFamily = 'Arial, sans-serif'; // Added Arial font const styles = ['Square', 'Circle', 'Diamond']; styles.forEach(style => { const option = document.createElement('option'); option.value = style.toLowerCase(); option.text = style; if (style.toLowerCase() === this.brushStyle) { option.selected = true; } dropdown.appendChild(option); }); dropdown.addEventListener('change', (e) => { this.brushStyle = e.target.value; }); const label = document.createElement('label'); label.textContent = 'Brush Style: '; label.style.color = '#FFFFFF'; label.style.fontFamily = 'Arial, sans-serif'; // Added Arial font label.appendChild(dropdown); container.appendChild(label); } createButton(text, onClick, tooltipText) { const button = document.createElement('button'); button.textContent = text; button.style.marginRight = '10px'; button.style.backgroundColor = '#444444'; button.style.color = '#FFFFFF'; button.style.border = '1px solid #666666'; button.style.padding = '5px 10px'; button.style.cursor = 'pointer'; button.style.transition = 'all 0.1s'; button.style.fontFamily = 'Arial, sans-serif'; // Added Arial font button.addEventListener('click', onClick); button.addEventListener('mousedown', () => { button.style.transform = 'scale(0.95)'; }); button.addEventListener('mouseup', () => { button.style.transform = 'scale(1)'; }); button.addEventListener('mouseleave', () => { button.style.transform = 'scale(1)'; }); // Add tooltip functionality this.addTooltip(button, tooltipText); return button; } addTooltip(element, tooltipText) { const tooltip = document.createElement('div'); tooltip.textContent = tooltipText; tooltip.style.position = 'absolute'; tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; tooltip.style.color = '#FFFFFF'; tooltip.style.padding = '5px'; tooltip.style.borderRadius = '3px'; tooltip.style.fontSize = '12px'; tooltip.style.zIndex = '1001'; tooltip.style.display = 'none'; tooltip.style.fontFamily = 'Arial, sans-serif'; // Added Arial font element.addEventListener('mouseover', (e) => { tooltip.style.display = 'block'; tooltip.style.left = `${e.clientX + 10}px`; tooltip.style.top = `${e.clientY + 10}px`; document.body.appendChild(tooltip); }); element.addEventListener('mousemove', (e) => { tooltip.style.left = `${e.clientX + 10}px`; tooltip.style.top = `${e.clientY + 10}px`; }); element.addEventListener('mouseout', () => { document.body.removeChild(tooltip); }); } createBrushToolButton(container) { this.brushButton = this.createButton('🖌️', () => { this.currentTool = 'brush'; this.brushButton.style.backgroundColor = '#666666'; this.penButton.style.backgroundColor = '#444444'; this.shapeButton.style.backgroundColor = '#444444'; this.fillButton.style.backgroundColor = '#444444'; this.eraseButton.style.backgroundColor = '#444444'; }, 'Brush Tool'); container.appendChild(this.brushButton); } createPenToolButton(container) { this.penButton = this.createButton('✒️', () => { this.currentTool = 'pen'; this.penButton.style.backgroundColor = '#666666'; this.brushButton.style.backgroundColor = '#444444'; this.shapeButton.style.backgroundColor = '#444444'; this.fillButton.style.backgroundColor = '#444444'; this.eraseButton.style.backgroundColor = '#444444'; }, 'Pen Tool'); container.appendChild(this.penButton); } createShapeToolButton(container) { this.shapeButton = this.createButton('📐', () => { this.currentTool = 'shape'; this.shapeButton.style.backgroundColor = '#666666'; this.brushButton.style.backgroundColor = '#444444'; this.penButton.style.backgroundColor = '#444444'; this.fillButton.style.backgroundColor = '#444444'; this.eraseButton.style.backgroundColor = '#444444'; }, 'Shape Tool'); container.appendChild(this.shapeButton); } createFillToolButton(container) { this.fillButton = this.createButton('🪣', () => { this.currentTool = 'fill'; this.fillButton.style.backgroundColor = '#666666'; this.brushButton.style.backgroundColor = '#444444'; this.penButton.style.backgroundColor = '#444444'; this.shapeButton.style.backgroundColor = '#444444'; this.eraseButton.style.backgroundColor = '#444444'; }, 'Fill Tool'); container.appendChild(this.fillButton); } createEraseToolButton(container) { this.eraseButton = this.createButton('🧽', () => { this.currentTool = 'erase'; this.eraseButton.style.backgroundColor = '#666666'; this.brushButton.style.backgroundColor = '#444444'; this.penButton.style.backgroundColor = '#444444'; this.shapeButton.style.backgroundColor = '#444444'; this.fillButton.style.backgroundColor = '#444444'; }, 'Erase Tool'); container.appendChild(this.eraseButton); } createClearAllButton(container) { const clearAllButton = this.createButton('🗑️', () => { this.clearAllPixels(); }, 'Clear All'); container.appendChild(clearAllButton); } createGridVisibilityToggle(container) { const gridButton = this.createButton('🔲', () => { this.showGrid = !this.showGrid; this.gridLines.setVisible(this.showGrid); gridButton.textContent = this.showGrid ? '🔲' : '⬜'; gridButton.style.backgroundColor = this.showGrid ? '#4CAF50' : '#444444'; }, 'Toggle Grid'); container.appendChild(gridButton); } createUndoButton(container) { const undoButton = this.createButton('↩️', () => { this.undo(); }, 'Undo'); container.appendChild(undoButton); } createRedoButton(container) { const redoButton = this.createButton('↪️', () => { this.redo(); }, 'Redo'); container.appendChild(redoButton); } createSymmetryToggle(container) { const symmetryButton = this.createButton('↔️', () => { this.symmetryEnabled = !this.symmetryEnabled; symmetryButton.textContent = this.symmetryEnabled ? '↔️' : '↔️'; symmetryButton.style.backgroundColor = this.symmetryEnabled ? '#4CAF50' : '#444444'; }, 'Toggle Symmetry'); container.appendChild(symmetryButton); } createExportButton(container) { const exportButton = this.createButton('📤', () => { if (this.showSceneActive) { this.scene.stop('ShowScene'); this.scene.resume('Example'); this.showSceneActive = false; } else { this.scene.launch('ShowScene', { pixelData: this.pixelData, frames: this.frames, currentFrame: this.currentFrame }); this.scene.pause('Example'); this.showSceneActive = true; } }, 'Export'); container.appendChild(exportButton); } createOptionsButton(container) { const optionsButton = this.createButton('❓', () => { this.showOptionsModal(); }, 'Options'); container.appendChild(optionsButton); } showOptionsModal() { const modal = document.createElement('div'); modal.style.position = 'fixed'; modal.style.left = '0'; modal.style.top = '0'; modal.style.width = '100%'; modal.style.height = '100%'; modal.style.backgroundColor = 'rgba(0,0,0,0.5)'; modal.style.display = 'flex'; modal.style.justifyContent = 'center'; modal.style.alignItems = 'center'; modal.style.zIndex = '2000'; const content = document.createElement('div'); content.style.backgroundColor = '#333333'; content.style.color = '#FFFFFF'; content.style.padding = '20px'; content.style.borderRadius = '5px'; content.style.maxWidth = '80%'; content.style.maxHeight = '80%'; content.style.overflowY = 'auto'; content.style.fontFamily = 'Arial, sans-serif'; // Added Arial font const title = document.createElement('h2'); title.textContent = 'Pixel Art Editor Options'; title.style.fontFamily = 'Arial, sans-serif'; // Added Arial font content.appendChild(title); const explanation = document.createElement('div'); explanation.innerHTML = `

Grid Size: Change the resolution of your pixel art.

Color Picker: Choose the color for drawing.

Color Palette: Quick access to predefined colors.

Brush Size: Adjust the size of the brush tool.

Brush Style: Choose between Square, Circle, or Diamond brush shapes.

Brush Tool (🖌️): Draw individual pixels.

Pen Tool (✒️): Draw a line between two clicked pixels.

Shape Tool (📐): Draw straight lines between two points.

Fill Tool (🪣): Fill connected areas with the selected color.

Erase Tool (🧽): Erase pixels (set to white).

Clear All (🗑️): Reset the entire canvas to white.

Grid Visibility (🔲): Toggle the grid lines on/off.

Undo (↩️)/Redo (↪️): Step backward/forward through your actions.

Zoom In/Out: Adjust the view of your pixel art.

Symmetry (↔️): Mirror your drawing across the vertical axis.

Export (📤): Display your pixel art without the grid. To save your frames, right-click on the current export frame and select 'Save image as'. You can navigate through the frames using the left and right arrow keys. Press the Export button again to return to editing.

Timeline: Create and manage multiple frames for animation.

Play/Pause: Animate your frames.

Onion Skin: See a faint overlay of the previous frame while drawing.

`; explanation.style.lineHeight = '1.6'; explanation.style.fontFamily = 'Arial, sans-serif'; // Added Arial font content.appendChild(explanation); const closeButton = this.createButton('❌', () => { document.body.removeChild(modal); }, 'Close'); content.appendChild(closeButton); modal.appendChild(content); document.body.appendChild(modal); } zoomIn() { if (this.zoomLevel < this.maxZoom) { this.zoomLevel += 0.5; this.createGrid(); } } zoomOut() { if (this.zoomLevel > this.minZoom) { this.zoomLevel -= 0.5; this.createGrid(); } } createTimelineOptionsContainer() { const container = document.createElement('div'); container.id = 'timelineContainer'; container.style.position = 'fixed'; container.style.left = '0'; container.style.right = '0'; container.style.bottom = '0'; container.style.width = '100%'; container.style.padding = '10px'; container.style.backgroundColor = '#222222'; container.style.color = '#FFFFFF'; container.style.boxSizing = 'border-box'; container.style.zIndex = '1000'; container.style.fontFamily = 'Arial, sans-serif'; // Added Arial font this.createDeleteFrameButton(container); this.createDuplicateFrameButton(container); this.createInsertFrameButton(container); this.createPlayPauseButton(container); this.createFrameNavButtons(container); this.createTimeline(container); this.createAnimationDurationInput(container); const optionsContainer = document.createElement('div'); optionsContainer.style.display = 'flex'; optionsContainer.style.alignItems = 'center'; optionsContainer.style.marginTop = '10px'; this.createOnionSkinToggle(optionsContainer); this.createZoomInButton(optionsContainer); this.createZoomOutButton(optionsContainer); container.appendChild(optionsContainer); document.body.appendChild(container); } updateTimelinePosition() { const container = document.getElementById('timelineContainer'); if (container) { container.style.bottom = '0'; } } createDeleteFrameButton(container) { const deleteFrameButton = this.createButton('🗑️', () => { this.deleteFrame(); }, 'Delete Frame'); container.appendChild(deleteFrameButton); } createDuplicateFrameButton(container) { const duplicateFrameButton = this.createButton('📋', () => { this.duplicateFrame(); }, 'Duplicate Frame'); container.appendChild(duplicateFrameButton); } createInsertFrameButton(container) { const insertFrameButton = this.createButton('➕', () => { this.insertFrame(); }, 'Insert Frame'); container.appendChild(insertFrameButton); } createPlayPauseButton(container) { this.playPauseButton = this.createButton('▶️', () => { if (this.isPlaying) { this.pauseAnimation(); this.playPauseButton.textContent = '▶️'; } else { this.playAnimation(); this.playPauseButton.textContent = '⏸️'; } }, 'Play/Pause Animation'); container.appendChild(this.playPauseButton); } createFrameNavButtons(container) { const prevFrameButton = this.createButton('⬅️', () => { this.prevFrame(); }, 'Previous Frame'); container.appendChild(prevFrameButton); const nextFrameButton = this.createButton('➡️', () => { this.nextFrame(); }, 'Next Frame'); container.appendChild(nextFrameButton); } createTimeline(container) { const timeline = document.createElement('div'); timeline.style.height = '60px'; timeline.style.backgroundColor = '#333333'; timeline.style.overflowX = 'auto'; timeline.style.whiteSpace = 'nowrap'; timeline.style.marginTop = '10px'; this.timeline = timeline; container.appendChild(timeline); } createAnimationDurationInput(container) { const label = document.createElement('label'); label.textContent = 'Animation Duration (seconds): '; label.style.display = 'block'; label.style.marginTop = '10px'; label.style.color = '#FFFFFF'; label.style.fontFamily = 'Arial, sans-serif'; // Added Arial font const input = document.createElement('input'); input.type = 'number'; input.min = '0.1'; input.max = '10'; input.step = '0.1'; input.value = this.animationDuration; input.style.width = '60px'; input.style.backgroundColor = '#444444'; input.style.color = '#FFFFFF'; input.style.border = '1px solid #666666'; input.style.fontFamily = 'Arial, sans-serif'; // Added Arial font input.addEventListener('change', (e) => { const duration = parseFloat(e.target.value); if (duration >= 0.1 && duration <= 10) { this.animationDuration = duration; this.updateTimeline(); } }); label.appendChild(input); container.appendChild(label); } createOnionSkinToggle(container) { const onionSkinButton = this.createButton('🧅', () => { this.onionSkinEnabled = !this.onionSkinEnabled; onionSkinButton.textContent = this.onionSkinEnabled ? '🧅' : '⚪'; onionSkinButton.style.backgroundColor = this.onionSkinEnabled ? '#4CAF50' : '#444444'; this.redrawGrid(); }, 'Toggle Onion Skin'); container.appendChild(onionSkinButton); } createZoomInButton(container) { const zoomInButton = this.createButton('🔍+', () => { this.zoomIn(); }, 'Zoom In'); container.appendChild(zoomInButton); } createZoomOutButton(container) { const zoomOutButton = this.createButton('🔍-', () => { this.zoomOut(); }, 'Zoom Out'); container.appendChild(zoomOutButton); } updateTimeline() { this.timeline.innerHTML = ''; this.frames.forEach((frame, index) => { const frameElement = document.createElement('div'); frameElement.style.display = 'inline-block'; frameElement.style.width = '50px'; frameElement.style.height = '50px'; frameElement.style.margin = '5px'; frameElement.style.backgroundColor = index === this.currentFrame ? '#666666' : '#444444'; frameElement.style.border = '1px solid #888888'; frameElement.style.cursor = 'pointer'; frameElement.style.position = 'relative'; const canvas = document.createElement('canvas'); canvas.width = 50; canvas.height = 50; const ctx = canvas.getContext('2d'); this.drawFramePreview(ctx, frame); frameElement.appendChild(canvas); const frameNumber = document.createElement('div'); frameNumber.textContent = `${index + 1}`; frameNumber.style.position = 'absolute'; frameNumber.style.bottom = '2px'; frameNumber.style.right = '2px'; frameNumber.style.fontSize = '10px'; frameNumber.style.color = '#FFFFFF'; frameNumber.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; frameNumber.style.padding = '1px 3px'; frameNumber.style.borderRadius = '3px'; frameNumber.style.fontFamily = 'Arial, sans-serif'; // Added Arial font frameElement.appendChild(frameNumber); frameElement.addEventListener('click', () => { this.setCurrentFrame(index); }); this.timeline.appendChild(frameElement); }); } drawFramePreview(ctx, frame) { const previewSize = 50; const pixelSize = previewSize / this.maxGridRatio; for (let y = 0; y < this.maxGridRatio; y++) { for (let x = 0; x < this.maxGridRatio; x++) { const color = frame[y][x]; ctx.fillStyle = Phaser.Display.Color.IntegerToColor(color).rgba; ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize); } } } startDrawing(pointer) { this.drawing = true; if (this.currentTool === 'shape') { const { x, y } = this.getGridCoordinates(pointer); this.shapeStart = { x, y }; } else if (this.currentTool === 'pen') { const { x, y } = this.getGridCoordinates(pointer); if (this.penStart) { this.drawPenLine(this.penStart.x, this.penStart.y, x, y); this.penStart = null; } else { this.penStart = { x, y }; this.drawPixel(x, y, this.currentColor); } } else { this.draw(pointer); } } draw(pointer) { if (!this.drawing) return; const { x, y } = this.getGridCoordinates(pointer); if (x >= 0 && x < this.gridRatio && y >= 0 && y < this.gridRatio) { if (this.currentTool === 'brush' || this.currentTool === 'erase') { const color = this.currentTool === 'erase' ? 0xFFFFFF : this.currentColor; this.drawBrush(x, y, color); } else if (this.currentTool === 'fill') { this.floodFill(x, y); } else if (this.currentTool === 'shape' && this.shapeStart) { this.drawShape(this.shapeStart.x, this.shapeStart.y, x, y); } else if (this.currentTool === 'pen' && this.penStart) { this.drawPenLine(this.penStart.x, this.penStart.y, x, y); this.penStart = { x, y }; } } } getGridCoordinates(pointer) { const { startX, startY, cellSize } = this.gridProps; const x = Math.floor((pointer.x - startX) / cellSize); const y = Math.floor((pointer.y - startY) / cellSize); return { x, y }; } drawBrush(centerX, centerY, color) { const radius = Math.floor(this.brushSize / 2); for (let y = -radius; y <= radius; y++) { for (let x = -radius; x <= radius; x++) { if (this.isPixelInBrush(x, y, radius)) { this.drawPixel(centerX + x, centerY + y, color); if (this.symmetryEnabled) { const mirrorX = this.gridRatio - 1 - (centerX + x); this.drawPixel(mirrorX, centerY + y, color); } } } } } isPixelInBrush(x, y, radius) { switch (this.brushStyle) { case 'square': return true; case 'circle': return x*x + y*y <= radius*radius; case 'diamond': return Math.abs(x) + Math.abs(y) <= radius; default: return true; } } drawPixel(x, y, color) { if (x < 0 || x >= this.gridRatio || y < 0 || y >= this.gridRatio) return; const { startX, startY, cellSize } = this.gridProps; const scaleFactor = this.maxGridRatio / this.gridRatio; for (let dy = 0; dy < scaleFactor; dy++) { for (let dx = 0; dx < scaleFactor; dx++) { const pixelX = x * scaleFactor + dx; const pixelY = y * scaleFactor + dy; this.pixelData[pixelY][pixelX] = color; } } this.grid.fillStyle(color); this.grid.fillRect(startX + x * cellSize, startY + y * cellSize, cellSize, cellSize); } drawShape(x0, y0, x1, y1) { const dx = Math.abs(x1 - x0); const dy = Math.abs(y1 - y0); const sx = (x0 < x1) ? 1 : -1; const sy = (y0 < y1) ? 1 : -1; let err = dx - dy; while (true) { this.drawBrush(x0, y0, this.currentColor); if ((x0 === x1) && (y0 === y1)) break; const e2 = 2 * err; if (e2 > -dy) { err -= dy; x0 += sx; } if (e2 < dx) { err += dx; y0 += sy; } } } drawPenLine(x0, y0, x1, y1) { this.drawShape(x0, y0, x1, y1); this.saveState(); } floodFill(startX, startY) { const targetColor = this.getColorAt(startX, startY); const newColor = this.currentColor; if (targetColor === newColor) return; const stack = [[startX, startY]]; const visited = new Set(); while (stack.length > 0) { const [x, y] = stack.pop(); const key = `${x},${y}`; if (visited.has(key)) continue; visited.add(key); if (x < 0 || x >= this.gridRatio || y < 0 || y >= this.gridRatio) continue; if (this.getColorAt(x, y) !== targetColor) continue; this.drawPixel(x, y, newColor); if (this.symmetryEnabled) { const mirrorX = this.gridRatio - 1 - x; this.drawPixel(mirrorX, y, newColor); } stack.push([x - 1, y]); stack.push([x + 1, y]); stack.push([x, y - 1]); stack.push([x, y + 1]); } } getColorAt(x, y) { const scaleFactor = this.maxGridRatio / this.gridRatio; const pixelX = Math.floor(x * scaleFactor); const pixelY = Math.floor(y * scaleFactor); return this.pixelData[pixelY][pixelX]; } stopDrawing() { if (this.drawing) { this.drawing = false; this.shapeStart = null; if (this.currentTool !== 'pen') { this.saveState(); } } } saveState() { const stateCopy = JSON.parse(JSON.stringify(this.pixelData)); this.history.push(stateCopy); if (this.history.length > this.maxHistoryLength) { this.history.shift(); } this.redoStack = []; this.frames[this.currentFrame] = stateCopy; this.updateTimeline(); } undo() { if (this.history.length > 0) { const previousState = this.history.pop(); this.redoStack.push(JSON.parse(JSON.stringify(this.pixelData))); this.pixelData = JSON.parse(JSON.stringify(previousState)); this.frames[this.currentFrame] = this.pixelData; this.redrawGrid(); this.updateTimeline(); } } redo() { if (this.redoStack.length > 0) { const nextState = this.redoStack.pop(); this.history.push(JSON.parse(JSON.stringify(this.pixelData))); this.pixelData = JSON.parse(JSON.stringify(nextState)); this.frames[this.currentFrame] = this.pixelData; this.redrawGrid(); this.updateTimeline(); } } initializeFirstFrame() { const initialFrame = JSON.parse(JSON.stringify(this.pixelData)); this.frames.push(initialFrame); this.setCurrentFrame(0); } deleteFrame() { if (this.frames.length > 1) { this.frames.splice(this.currentFrame, 1); if (this.currentFrame >= this.frames.length) { this.currentFrame = this.frames.length - 1; } this.setCurrentFrame(this.currentFrame); } } duplicateFrame() { const duplicatedFrame = JSON.parse(JSON.stringify(this.frames[this.currentFrame])); this.frames.splice(this.currentFrame + 1, 0, duplicatedFrame); this.setCurrentFrame(this.currentFrame + 1); } insertFrame() { const newFrame = Array(this.maxGridRatio).fill().map(() => Array(this.maxGridRatio).fill(0xFFFFFF)); this.frames.splice(this.currentFrame + 1, 0, newFrame); this.setCurrentFrame(this.currentFrame + 1); } setCurrentFrame(index) { this.currentFrame = index; this.pixelData = JSON.parse(JSON.stringify(this.frames[this.currentFrame])); this.redrawGrid(); this.updateTimeline(); } prevFrame() { if (this.currentFrame > 0) { this.setCurrentFrame(this.currentFrame - 1); } } nextFrame() { if (this.currentFrame < this.frames.length - 1) { this.setCurrentFrame(this.currentFrame + 1); } } playAnimation() { this.isPlaying = true; this.playNextFrame(); } playNextFrame() { if (!this.isPlaying) return; this.setCurrentFrame(this.currentFrame); const frameDuration = (this.animationDuration * 1000) / this.frames.length; this.playInterval = setTimeout(() => { this.currentFrame = (this.currentFrame + 1) % this.frames.length; this.playNextFrame(); }, frameDuration); } pauseAnimation() { this.isPlaying = false; if (this.playInterval) { clearTimeout(this.playInterval); this.playInterval = null; } } drawOnionSkin() { this.onionSkinGraphics.clear(); if (!this.onionSkinEnabled || this.currentFrame === 0) return; const { startX, startY, gridSize } = this.gridProps; const previousFrame = this.frames[this.currentFrame - 1]; for (let y = 0; y < this.maxGridRatio; y++) { for (let x = 0; x < this.maxGridRatio; x++) { const color = previousFrame[y][x]; if (color !== 0xFFFFFF) { const alpha = 0.5; this.onionSkinGraphics.fillStyle(color, alpha); const pixelSize = gridSize / this.maxGridRatio; this.onionSkinGraphics.fillRect(startX + x * pixelSize, startY + y * pixelSize, pixelSize, pixelSize); } } } } clearAllPixels() { this.initializePixelData(); this.redrawGrid(); this.saveState(); } } class ShowScene extends Phaser.Scene { constructor() { super('ShowScene'); } init(data) { this.pixelData = data.pixelData; this.frames = data.frames; this.currentFrame = data.currentFrame; } create() { this.cameras.main.setBackgroundColor('#000000'); const screenWidth = this.sys.game.config.width; const screenHeight = this.sys.game.config.height; const gridSize = Math.min(screenWidth, screenHeight); const startX = (screenWidth - gridSize) / 2; const startY = (screenHeight - gridSize) / 2; const pixelSize = gridSize / this.pixelData.length; this.graphics = this.add.graphics(); this.drawFrame(this.currentFrame); this.input.keyboard.on('keydown-LEFT', this.prevFrame, this); this.input.keyboard.on('keydown-RIGHT', this.nextFrame, this); } drawFrame(frameIndex) { this.graphics.clear(); const screenWidth = this.sys.game.config.width; const screenHeight = this.sys.game.config.height; const gridSize = Math.min(screenWidth, screenHeight); const startX = (screenWidth - gridSize) / 2; const startY = (screenHeight - gridSize) / 2; const pixelSize = gridSize / this.frames[frameIndex].length; for (let y = 0; y < this.frames[frameIndex].length; y++) { for (let x = 0; x < this.frames[frameIndex][y].length; x++) { const color = this.frames[frameIndex][y][x]; this.graphics.fillStyle(color); this.graphics.fillRect(startX + x * pixelSize, startY + y * pixelSize, pixelSize, pixelSize); } } } prevFrame() { if (this.currentFrame > 0) { this.currentFrame--; this.drawFrame(this.currentFrame); } } nextFrame() { if (this.currentFrame < this.frames.length - 1) { this.currentFrame++; this.drawFrame(this.currentFrame); } } } const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 600, height: 600, pixelArt: true, crisp: true, scene: [Example, ShowScene] }; window.phaserGame = new Phaser.Game(config);