Pixel Art Creator
Overview
This Skill enables creation of new pixel art sprites with full control over canvas properties, layers, and basic drawing operations. It's the foundational Skill for all pixel art workflows.
When to Use
Use this Skill when the user:
- Wants to "create a sprite" or "make pixel art"
- Mentions sprite dimensions (e.g., "64x64", "32 by 32", "128 pixels wide")
- Asks to "draw" basic shapes (pixels, lines, rectangles, circles)
- Needs to set up a canvas or layers
- Mentions color modes (RGB, Grayscale, Indexed)
Trigger Keywords: create, sprite, canvas, draw, pixel art, dimensions, layer, new sprite
Instructions
1. Creating a Canvas
When the user requests a sprite, create the canvas first:
Color Modes:
- RGB: Full color (24-bit), best for modern pixel art
- Grayscale: Shades of gray only, for monochrome art
- Indexed: Limited palette (1-256 colors), for retro game art
Recommended Sizes:
- Icons: 16x16, 24x24, 32x32
- Characters: 32x32, 48x48, 64x64
- Tiles: 16x16, 32x32, 64x64
- Scenes: 128x128, 256x256, 320x240 (retro resolution)
Use mcp__aseprite__create_canvas with parameters:
width: 1-65535 pixelsheight: 1-65535 pixelscolor_mode: "RGB", "Grayscale", or "Indexed"
2. Managing Layers
Adding Layers:
Use mcp__aseprite__add_layer to organize sprite elements:
- Background layer for solid colors or backgrounds
- Character layer for main subject
- Effects layer for highlights, shadows, outlines
- Detail layer for accessories or fine details
Layer Workflow:
- Create canvas
- Add named layers (e.g., "Background", "Character", "Effects")
- Draw on specific layers
- Use layers for organization and editing flexibility
Important: Cannot delete the last layer in a sprite.
3. Drawing Primitives
Draw Individual Pixels:
Use mcp__aseprite__draw_pixels for precise pixel placement:
- Supports batch operations (multiple pixels at once)
- Accepts colors in hex format (#RRGGBB) or palette indices
- Can snap to nearest palette color (for Indexed mode)
Example:
Draw pixels at coordinates:
- (10, 10) in red (#FF0000)
- (11, 10) in red (#FF0000)
- (12, 10) in red (#FF0000)
Draw Lines:
Use mcp__aseprite__draw_line:
- Straight lines between two points
- Useful for outlines, edges, connecting points
Draw Rectangles:
Use mcp__aseprite__draw_rectangle:
- Filled or outline mode
- Perfect for backgrounds, UI elements, platforms
Draw Circles/Ellipses:
Use mcp__aseprite__draw_circle:
- Filled or outline mode
- For round objects, planets, effects
Draw Contours (Polylines/Polygons):
Use mcp__aseprite__draw_contour:
- Connect multiple points
- Useful for complex shapes, terrain, irregular outlines
Flood Fill:
Use mcp__aseprite__fill_area:
- Fill connected pixels of the same color
- Like a paint bucket tool
- Great for filling large areas quickly
4. Working with Colors
Setting Colors:
- Hex Format: #RRGGBB (e.g., #FF0000 for red)
- RGB: Specify red, green, blue values (0-255)
- Palette Index: For Indexed mode (0-255)
Common Colors:
- Red: #FF0000
- Green: #00FF00
- Blue: #0000FF
- Yellow: #FFFF00
- Cyan: #00FFFF
- Magenta: #FF00FF
- Black: #000000
- White: #FFFFFF
Color Palettes:
For Indexed color mode, set the palette first:
- Use
mcp__aseprite__set_palette with array of hex colors
- Example: ["#000000", "#FFFFFF", "#FF0000", "#00FF00"]
5. Workflow Best Practices
Typical Creation Workflow:
-
Understand Requirements
- What size sprite?
- What color mode?
- What style (modern vs retro)?
-
Create Canvas
- Choose appropriate dimensions
- Select color mode (RGB for modern, Indexed for retro)
-
Set Up Layers (optional but recommended)
- Add layers for organization
- Name layers descriptively
-
Set Palette (for Indexed mode)
- Define limited color palette
- Use retro-appropriate palettes (NES: 16 colors, Game Boy: 4 colors)
-
Draw Basic Shapes
- Start with outline
- Fill with colors
- Add details
-
Verify Result
- Use
mcp__aseprite__get_sprite_info to check properties
- Describe what was created to user
-
Prepare for Export (if requested)
- Hand off to pixel-art-exporter Skill
Examples
Example 1: Simple Sprite
User Request: "Create a 32x32 sprite with a red circle"
Approach:
- Create 32x32 RGB canvas
- Draw filled circle in center (radius 12) in red
- Confirm creation
Example 2: Layered Sprite
User Request: "Make a 64x64 sprite with a blue background and a yellow character"
Approach:
- Create 64x64 RGB canvas
- Add layer "Background"
- Fill entire canvas with blue (#0000FF) on Background layer
- Add layer "Character"
- Draw yellow (#FFFF00) rectangle or shape on Character layer
- Confirm layers and contents
Example 3: Indexed Color Sprite
User Request: "Create a 48x48 Game Boy style sprite"
Approach:
- Create 48x48 Indexed canvas
- Set Game Boy palette: ["#0F380F", "#306230", "#8BAC0F", "#9BBC0F"]
- Draw using 4-color palette
- Use pixel-perfect drawing
Example 4: Complex Shape
User Request: "Draw a pixelated tree on a 64x64 canvas"
Approach:
- Create 64x64 RGB canvas
- Draw brown (#8B4513) rectangle for trunk (using draw_rectangle)
- Draw green (#228B22) irregular shape for foliage (using draw_contour or multiple rectangles)
- Add details with individual pixels
- Describe the tree to user
Technical Details
Canvas Properties
- Width/Height: 1-65535 pixels (practical limit usually <1024)
- Color Modes:
- RGB: 24-bit color (16.7 million colors)
- Grayscale: 8-bit (256 shades of gray)
- Indexed: 1-256 colors from palette
Drawing Coordinates
- Origin (0, 0) is top-left corner
- X increases rightward
- Y increases downward
Performance
- Batch pixel operations when possible
- Drawing operations complete in <100ms typically
- Large canvases (>512x512) may take slightly longer
Limitations
- Cannot create canvas smaller than 1x1
- Cannot create canvas larger than 65535x65535 (practical limit much lower)
- Cannot delete last layer
- Indexed mode palette limited to 256 colors maximum
Common Patterns
Pattern: Quick Sprite
For simple requests like "create a sprite":
- Default to 64x64 RGB canvas
- Add basic shape or placeholder
- Ask user for refinements
Pattern: Retro Game Sprite
For retro-style requests:
- Use Indexed color mode
- Set appropriate palette (NES, Game Boy, C64, etc.)
- Use limited colors and pixel-perfect drawing
Pattern: Icon Creation
For icon requests:
- Use 16x16, 24x24, or 32x32 dimensions
- RGB mode for modern icons
- Simple, recognizable shapes
- High contrast colors
Integration with Other Skills
- Hand off to pixel-art-animator when user mentions "animation", "frames", or "movement"
- Hand off to pixel-art-professional when user asks for "dithering", "shading", or "palette refinement"
- Hand off to pixel-art-exporter when user asks to "export", "save", or mentions file formats
Error Handling
If canvas creation fails:
- Check dimensions are valid (1-65535)
- Verify color mode is spelled correctly
- Suggest alternative dimensions if too large
If drawing fails:
- Verify coordinates are within canvas bounds
- Check color format is valid hex (#RRGGBB)
- For Indexed mode, ensure palette is set first
If layer operations fail:
- Cannot delete last layer (inform user)
- Layer names should be descriptive strings
Success Indicators
You've successfully used this Skill when:
- Canvas created with correct dimensions and color mode
- Drawing operations complete without errors
- User can see or understand what was created
- Sprite is ready for next steps (animation, export, refinement)