PixelCraft

PixelCraft includes several helper tools:

• Undo/Redo: Corrects small mistakes by undoing or redoing one pixel at a time.
• Clear Window: Clears the entire current canvas.
• Import Image: Converts an existing image into pixel art based on your chosen canvas dimensions.

Once your work is complete, you can export it using the dropdown menu:

• Save Image: Downloads the current canvas as a canvas.png file. The output dimensions are scaled by 10 (e.g., a 16x16 canvas results in a 160x160 image).
• Save GIF: Exports the current Frame Stack as a GIF file. The GIF dimensions will match the canvas dimensions.

PixelCraft is a Progressive Web App (PWA) for pixel art and animation creation. You can access it at the following URLs:

• https://rgab1508.github.io/PixelCraft
• https://pixelcraft.web.app

It is mobile-friendly and supports offline compatibility via PWA installation.

If you need full control over the underlying build tools (webpack, Babel, ESLint, etc.), you can run yarn eject.

Warning: This is a one-way operation. Once you eject, you cannot undo it.

Running this command removes the single build dependency and copies all configuration files and transitive dependencies directly into your project. While all other commands will still work by pointing to these new local scripts, you will be responsible for managing the configuration yourself.

Since PixelCraft is a fully compatible Progressive Web App (PWA), you can install it for offline use:

1. Open the app in your browser.
2. Use the option in the top-left dropdown menu to install, OR
3. Use the "Add to Home Screen" button from your browser's options.

Use the color palette to select colors for your art:

• Select Color: Click on any color in the palette.
• Set Transparency: Right-click on a color to set its transparency value between 0 and 1. This allows for creating translucent colors and complex patterns.

PixelCraft provides several tools for creating art:

• Pencil: Draws pixels freehand.
• Eraser: Erases a single pixel (fixed 1x1 dimension).
• Paint Tool: Performs a flood fill to change a color area to a new color (works best under 128x128).
• Line Tool: Draws a line segment between two points using the Bresenham algorithm. Click the tool, then click two points on the canvas.
• Circle Tool: Draws a circle with a given center and radius using the Midpoint Circle Algorithm.
• Ellipse Tool: Draws an ellipse with a given center and specific radii along the x and y axes.

To create animations, use the GIF Tools to manage a stack of frames:

• Add Frame: Captures the current canvas state and adds it to the Frame Stack. Each frame is added with a default delay of 100 ms. To increase the duration of a specific frame in the final GIF, add the same frame multiple times.
• View Frame: Opens a popup displaying all current frames in the stack.
  • Load a Frame: Click on a frame in the popup to load it back onto the canvas.
  • Delete a Frame: Right-click (or long-press on mobile) a frame in the popup to remove it.

When starting a new project, you can choose any dimensions for your canvas.

• Default: 16 x 16
• Recommendation: Use dimensions below 128 x 128 for smoother operation and better performance during GIF creation.