Pixel2Bytes is an advanced online pixel art and animation suite designed specifically for embedded systems developers. It simplifies the process of creating, animating, and converting pixel art into memory-efficient bitmap array data for monochrome displays and microcontrollers.
Try it here: https://raisback.github.io/pixel2bytes/
- Frame Management: Create complex sequences by adding blank frames or duplicating existing ones to maintain consistency.
- Animation Player: Integrated real-time preview tab with adjustable playback speed (ms per frame) to test animations before exporting.
- Onion Skinning: View faint overlays of previous/next frames to ensure smooth motion and precise positioning during the animation process.
- Independent Layers: Organize your artwork using a professional layer stack. Edit, hide, or clear specific layers without affecting the rest of your composition.
- Layer Manipulation: Use the move tool to shift entire layers across the canvas, making it easy to adjust the positioning of specific elements within a frame.
- Pixel Pen: For standard pixel-by-pixel drafting.
- Line Tool: Draw perfectly straight lines for UI borders and geometric shapes.
- Eraser: Precision removal of pixel data on the active layer.
- Paint Fill (Bucket): Rapidly fill enclosed areas with pixel data.
- Clear Active Layer: Instantly wipe the current layer while preserving your other layers and frames.
- C Array Import: Reverse-engineer existing code by pasting
const uint8_tarrays back into the tool for editing. - Live Preview: Visualize imported data on a preview canvas before committing it to your workspace.
- Flexible Resolution: Custom width and height settings (optimized for 128x64 or smaller monochrome displays).
The output generated by Pixel2Bytes Studio is optimized for common monochrome display controllers (SSD1306, SH1106, etc.) and popular graphics libraries.
The tool is specifically designed to work seamlessly with the U8g2 (Universal Graphics Library).
- Data Format: The exporter generates a Row-Major format (Page-based), where 8 vertical pixels are packed into a single byte.
- XBM Compatibility: Output can be used directly with
u8g2.drawXBM()or standard bitmap drawing functions.
- Single Frame: Generate an array for a static sprite.
- Animation Array: Generate a contiguous memory block containing all frames in the sequence, perfect for looping animations in your firmware.
Copy the generated output and paste it into your C/C++ project:
// Example: Generated 16x16 icon
const uint8_t my_sprite[] = {
0x00, 0x7E, 0x42, 0x42, 0x42, 0x42, 0x7E, 0x00,
0x00, 0x7E, 0x42, 0x42, 0x42, 0x42, 0x7E, 0x00
};
// Drawing to a U8g2 display
u8g2.drawXBM(0, 0, 16, 16, my_sprite);