@musashishao/agent-kit 1.8.2 → 1.9.1

package/.agent/skills/game-development/ai-graphics-generator/SKILL.md

@@ -0,0 +1,463 @@
+---
+name: ai-graphics-generator
+description: Advanced AI image generation patterns for game graphics. DALL-E, Stable Diffusion, Midjourney, and ComfyUI workflows for 2D game art.
+---
+
+# AI Graphics Generator Skill 🎨
+
+> **Master AI image generation for game development.** Production-quality 2D graphics with the right prompts and workflows.
+
+---
+
+## AI Tool Selection Matrix
+
+| Tool | Best For | Quality | Consistency | Cost |
+|------|----------|---------|-------------|------|
+| **DALL-E 3** | General sprites, quick iteration | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | $0.04/img |
+| **Midjourney** | Concept art, backgrounds | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | $10/mo |
+| **Stable Diffusion** | Batch generation, custom models | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Free (local) |
+| **Leonardo.ai** | Game-ready assets, fine-tuned | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Free tier |
+| **Scenario.gg** | Trained game styles | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | $15/mo |
+| **ComfyUI** | Complex workflows, animation | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Free |
+
+---
+
+## Prompt Engineering Fundamentals
+
+### Prompt Structure
+
+```
+[MEDIUM] [SUBJECT] [STYLE] [DETAILS] [TECHNICAL] [NEGATIVE]
+```
+
+**Components:**
+- **MEDIUM**: 2D game sprite, pixel art, digital painting
+- **SUBJECT**: What you're generating (character, tileset, icon)
+- **STYLE**: Art style keywords (see style library below)
+- **DETAILS**: Specific characteristics (colors, pose, expression)
+- **TECHNICAL**: Size, format, requirements (transparent, tileable)
+- **NEGATIVE**: What to avoid (no text, no watermarks)
+
+### Golden Rules
+
+1. **Be Specific, Not Verbose**: "orange cat with chef hat" beats "a cute cat that is orange colored wearing a small hat like a chef would wear"
+
+2. **Front-Load Important Terms**: First 10 words matter most
+
+3. **Use Art Style Keywords**: AI recognizes style terms better than descriptions
+
+4. **Include Technical Requirements**: "transparent background" prevents cleanup work
+
+5. **Iterate with Variations**: Generate 4-8, pick the best
+
+---
+
+## Style Library
+
+### Pixel Art Styles
+
+```
+Keywords by Era:
+- "8-bit NES style" → 4-color limited palette, chunky pixels
+- "16-bit SNES style" → More colors, detailed sprites
+- "32-bit PS1 style" → Pre-rendered look, dithering
+- "modern pixel art" → HD pixels, smooth gradients allowed
+- "Celeste style" → Clean, expressive, limited palette
+- "Stardew Valley style" → Warm, cozy, detailed
+
+Technical Modifiers:
+- "clean pixel edges"
+- "no anti-aliasing"
+- "limited color palette"
+- "dithering for gradients"
+```
+
+### Cartoon Styles
+
+```
+Mobile Game Styles:
+- "Clash Royale style" → 3D-rendered look, bold outlines
+- "Brawl Stars style" → Chunky, colorful, energetic
+- "Candy Crush style" → Glossy, shiny, appealing
+- "Angry Birds style" → Round, expressive, simple shapes
+
+Classic Cartoon:
+- "Disney animation style"
+- "Pixar 3D render style"
+- "Studio Ghibli style"
+- "Adventure Time style"
+- "Cuphead 1930s cartoon style"
+```
+
+### Realistic/Painted Styles
+
+```
+Fantasy Art:
+- "fantasy illustration style"
+- "D&D character art style"
+- "Magic: The Gathering card art"
+- "oil painting medieval"
+
+Sci-Fi:
+- "concept art sci-fi"
+- "Mass Effect style"
+- "cyberpunk illustration"
+
+Nature:
+- "environmental concept art"
+- "matte painting style"
+- "nature illustration detailed"
+```
+
+### Minimalist/Vector
+
+```
+- "flat design"
+- "vector game art"
+- "geometric minimalist"
+- "low poly 2D"
+- "silhouette art"
+- "material design icons"
+```
+
+---
+
+## Asset-Specific Prompts
+
+### Character Sprites
+
+#### Base Template
+```
+2D game character sprite, [STYLE] style, [DESCRIPTION].
+Pose: [POSE], facing [DIRECTION].
+Expression: [EXPRESSION].
+Outfit: [CLOTHING/ARMOR].
+Colors: [PRIMARY], [SECONDARY], [ACCENT].
+Background: transparent (PNG with alpha).
+Requirements: clean edges, readable at [SIZE]px, no text.
+```
+
+#### Player Character Examples
+
+**Pixel Art Hero:**
+```
+2D game character sprite, 16-bit SNES pixel art style.
+Heroic knight with blue cape and silver armor.
+Idle pose, facing right.
+Confident expression.
+Primary colors: silver, blue, gold accents.
+Transparent background.
+Clean pixel edges, no anti-aliasing, suitable for 32x48 display.
+```
+
+**Cartoon Mobile Character:**
+```
+2D game character sprite, Brawl Stars cartoon style.
+Cute cat character with wizard hat and wand.
+Action pose, facing camera at 3/4 angle.
+Playful, mischievous expression.
+Colors: orange fur, purple wizard outfit, gold stars.
+Transparent background.
+High contrast, readable at small mobile sizes.
+```
+
+### Tilesets
+
+#### Ground Tileset
+```
+2D game tileset, [STYLE] style, [THEME] theme.
+Seamless tileable ground texture.
+Material: [MATERIAL] (grass, stone, dirt, etc).
+Lighting: consistent from top-left.
+Format: single tile or 4x4 variation grid.
+Size: 64x64 per tile, power-of-2 friendly.
+Details: [DETAILS] (cracks, moss, wear patterns).
+No text, no watermarks.
+```
+
+#### Platform Tileset
+```
+2D platformer tileset, [STYLE] style.
+Include: left edge, center (repeatX), right edge, single platform.
+Platform material: [MATERIAL].
+Consistent with [THEME] environment.
+Clean edges for easy character collision.
+```
+
+#### Auto-Tile Format (47-tile Blob)
+```
+Create complete auto-tile tileset, [STYLE] style, [THEME].
+47-tile blob format for seamless auto-tiling.
+Include all edge, corner, and transition combinations.
+Consistent lighting and style across all tiles.
+Single sprite sheet, organized grid layout.
+```
+
+### Backgrounds
+
+#### Parallax Layers (Generate Separately)
+```
+LAYER 1 - FAR BACKGROUND:
+2D game background layer, [STYLE] style.
+[DISTANT ELEMENTS]: mountains, sky, clouds.
+Atmospheric perspective: muted colors, low detail.
+Seamless horizontal tile.
+[TIME] lighting, [MOOD] mood.
+No foreground elements.
+
+LAYER 2 - MID BACKGROUND:
+2D game background layer, [STYLE] style.
+[MIDDLE ELEMENTS]: trees, buildings, hills.
+Medium detail level.
+Seamless horizontal tile.
+Same lighting as layer 1.
+Transparent bottom for layering.
+
+LAYER 3 - NEAR BACKGROUND:
+2D game background layer, [STYLE] style.
+[NEAR ELEMENTS]: grass, rocks, foliage.
+High detail, close to gameplay.
+Seamless horizontal tile.
+Transparent where needed for gameplay visibility.
+```
+
+### UI Elements
+
+#### Button Set
+```
+Game UI button sprite, [STYLE] style, [THEME] theme.
+States: normal, pressed (slightly darker/smaller), disabled (grayscale).
+Shape: [SHAPE] (rounded rectangle, pill, custom).
+Colors: [PRIMARY] with [HIGHLIGHT] edge.
+9-slice friendly with clear padding.
+Size: [WIDTH]x[HEIGHT] or proportional.
+No text (text added separately).
+```
+
+#### Panel/Frame
+```
+Game UI panel, [STYLE] style, [THEME] theme.
+Decorative frame for dialogs/inventory.
+9-slice compatible with clear center area.
+Border style: [BORDER] (ornate, simple, rounded).
+Background: [BG] (semi-transparent, solid, pattern).
+Size: flexible, demonstrate at 400x300.
+```
+
+### Icons
+
+#### Item Icon Template
+```
+Game icon, [ITEM], [STYLE] style.
+Square format, works at 64x64 and 32x32.
+Simple recognizable silhouette.
+Colors: [COLORS] color scheme.
+[TRANSPARENT/SOLID] background.
+High contrast for visibility.
+No text, no complex details.
+```
+
+#### Icon Set (Batch)
+```
+Game icon set, 4x4 grid, [STYLE] style, [THEME].
+16 [CATEGORY] icons: [LIST ITEMS].
+Consistent style across all icons.
+Each icon: 64x64, transparent background.
+Simple, recognizable silhouettes.
+Same color temperature and saturation.
+```
+
+### VFX Sprites
+
+#### Animated Effect Sheet
+```
+2D VFX sprite sheet, [EFFECT] effect, [STYLE] style.
+Animation: [FRAMES] frames, left-to-right sequence.
+Effect type: [TYPE] (explosion, magic, hit spark).
+Colors: [COLORS] energy/particles.
+Transparent background throughout.
+Each frame: [SIZE]x[SIZE] pixels.
+Loopable: [YES/NO].
+```
+
+---
+
+## Workflow: Stable Diffusion + ComfyUI
+
+### Character Animation Workflow
+
+```yaml
+# ComfyUI workflow for character sprite sheet
+workflow:
+  load_model:
+    model: "dreamshaper_8"
+    vae: "sd-vae-ft-mse"
+    
+  prompt_positive:
+    text: |
+      character sprite sheet, 4x2 grid, pixel art style,
+      [CHARACTER DESCRIPTION],
+      poses: idle, walk1, walk2, walk3, jump, fall, attack, hurt,
+      consistent character across all frames,
+      transparent background, clean edges
+      
+  prompt_negative:
+    text: |
+      blurry, distorted, extra limbs, text, watermark,
+      inconsistent style, 3D render, photo
+      
+  sampler:
+    steps: 30
+    cfg_scale: 7.5
+    sampler_name: "euler_ancestral"
+    
+  output:
+    format: png
+    size: 512x256  # 4 cols x 2 rows
+```
+
+### Consistent Character LoRA Training
+
+```yaml
+# For maximum consistency, train a LoRA
+lora_training:
+  base_model: "sd_xl_base_1.0"
+  training_images: 10-20  # Reference images of your character
+  steps: 1500
+  learning_rate: 1e-4
+  output: "my_character_lora.safetensors"
+  
+# Then use in generation
+prompt_with_lora:
+  text: "<lora:my_character_lora:0.8> my_character, idle pose, pixel art"
+```
+
+---
+
+## Workflow: Midjourney Game Assets
+
+### Character Design
+```
+/imagine prompt: 2D game character, [description], 
+[style] style, idle pose, transparent background, 
+clean edges, game sprite --ar 1:1 --v 6 --style raw
+
+# Variations
+/imagine prompt: [same] --seed [seed from v1]
+```
+
+### Background
+```
+/imagine prompt: 2D game background, [scene], 
+[style] style, [mood] mood, [time] lighting,
+parallax-ready, horizontal format --ar 16:9 --v 6
+```
+
+### Tileset (Manual Assembly)
+```
+/imagine prompt: seamless tile texture, [material], 
+[style] style, game tileset, 
+top-down lighting --tile --v 6
+```
+
+---
+
+## Post-Processing Pipeline
+
+### Python Scripts
+
+```python
+# 1. Background Removal
+from rembg import remove
+from PIL import Image
+
+def remove_bg(input_path, output_path):
+    img = Image.open(input_path)
+    result = remove(img)
+    result.save(output_path, "PNG")
+
+# 2. Pixel Art Scaling
+def pixelate(input_path, output_path, target_size=(64, 64)):
+    img = Image.open(input_path)
+    # Downscale
+    small = img.resize((target_size[0]//4, target_size[1]//4), Image.NEAREST)
+    # Upscale
+    result = small.resize(target_size, Image.NEAREST)
+    result.save(output_path, "PNG")
+
+# 3. Color Palette Reduction
+from sklearn.cluster import KMeans
+import numpy as np
+
+def reduce_colors(input_path, output_path, n_colors=16):
+    img = Image.open(input_path).convert('RGB')
+    data = np.array(img).reshape(-1, 3)
+    
+    kmeans = KMeans(n_clusters=n_colors, random_state=42)
+    labels = kmeans.fit_predict(data)
+    
+    palette = kmeans.cluster_centers_.astype(np.uint8)
+    result_data = palette[labels].reshape(img.size[1], img.size[0], 3)
+    
+    result = Image.fromarray(result_data)
+    result.save(output_path, "PNG")
+
+# 4. Sprite Sheet Slicer
+def slice_sheet(input_path, output_dir, frame_size=(64, 64)):
+    img = Image.open(input_path)
+    w, h = img.size
+    cols = w // frame_size[0]
+    rows = h // frame_size[1]
+    
+    for row in range(rows):
+        for col in range(cols):
+            x = col * frame_size[0]
+            y = row * frame_size[1]
+            frame = img.crop((x, y, x + frame_size[0], y + frame_size[1]))
+            frame.save(f"{output_dir}/frame_{row}_{col}.png", "PNG")
+```
+
+---
+
+## Quality Checklist
+
+| Check | Criteria | Fix If Failed |
+|-------|----------|---------------|
+| ✅ **Style Consistency** | Matches other assets | Regenerate with reference |
+| ✅ **Clean Edges** | No jagged/fuzzy borders | Post-process or regenerate |
+| ✅ **Transparency** | Clean alpha, no halos | Use rembg, manual cleanup |
+| ✅ **Color Coherence** | Limited, intentional palette | Apply palette reduction |
+| ✅ **Readability** | Clear at target size | Increase contrast/simplify |
+| ✅ **Animation Ready** | Consistent pivot/size | Standardize in editor |
+| ✅ **No Artifacts** | No AI glitches/extras | Regenerate with better prompt |
+| ✅ **Game Appropriate** | Fits genre/theme | Adjust style keywords |
+
+---
+
+## Troubleshooting
+
+| Problem | Cause | Solution |
+|---------|-------|----------|
+| **Inconsistent style** | Vague prompts | Add specific style keywords |
+| **Wrong proportions** | Missing size specs | Include "readable at Xpx" |
+| **Fuzzy edges** | AA bleeding | Request "clean edges, no AA" |
+| **Background artifacts** | Poor mask | Use rembg or manual cleanup |
+| **Too complex** | Over-detailed prompt | Simplify, focus on essentials |
+| **Wrong colors** | Color description vague | Specify hex codes or references |
+| **Missing elements** | Too many items listed | Generate in smaller batches |
+
+---
+
+## Cost Optimization
+
+| Strategy | Savings | Trade-off |
+|----------|---------|-----------|
+| **Stable Diffusion local** | 100% | Setup time, hardware |
+| **DALL-E standard vs HD** | 50% | Lower quality |
+| **Batch similar assets** | 30% | Less iteration per asset |
+| **Reuse with variations** | 50% | Less unique assets |
+| **Free tiers first** | 80% | Rate limits |
+
+---
+
+> **Master these prompts and workflows to generate professional game graphics with AI.** 🎨