Loading...
Loading...
Complete game asset design, creation, implementation, and optimization team. Use when creating visual assets, art direction, sprites, UI elements, icons, textures, animations specs, audio design, or any game visuals. Covers AI image generation (Gemini), asset pipelines, optimization for web/mobile, style guides, and performance tuning. Triggers on requests for game art, icons, backgrounds, character designs, UI assets, promotional materials, or asset troubleshooting.
npx skill4agent add ccalebcarter/purria-skills game-assets-team| Role | Responsibilities |
|---|---|
| Art Director | Visual style, consistency, brand identity |
| Concept Artist | Initial designs, mood boards, style exploration |
| UI/UX Designer | Interface elements, iconography, HUD components |
| Technical Artist | Optimization, formats, performance, pipelines |
| Motion Designer | Animation specs, transitions, micro-interactions |
| Audio Designer | Sound direction, SFX specs, music briefs |
gemini-image-generator# From the gemini-image-generator scripts directory:
python generate.py --prompt "[DETAILED PROMPT]" --output [filename].pngStructure: [Subject] + [Style] + [Composition] + [Technical] + [Mood]
Example for Farming in Purria Simulins:
"cute low-poly geometric bee game character, faceted crystalline wings,
big adorable eyes, bold yellow and gold with subtle gradients,
3/4 angle view, transparent background, phase 2 evolution,
developing features, partial crystalline wings"| Category | Formats | Sizes | Notes |
|---|---|---|---|
| UI Icons | PNG-24, SVG | 64x64, 128x128 | Transparent BG, 2px padding |
| Sprites | PNG-24, WebP | Power of 2 | Sprite sheets preferred |
| Backgrounds | WebP, AVIF | 1920x1080, 2560x1440 | Layered for parallax |
| Simulins | PNG-24 | 128/192/256px by phase | 3 evolution phases |
| Cards | PNG-24, SVG | 180x252 (2.5:3.5) | Print-ready at 300dpi |
| Particles | PNG-24 | 32x32, 64x64 | Additive blend ready |
Spider: #8B5CF6 (Purple) #A78BFA (Light Purple)
Bee: #F59E0B (Amber) #FBBF24 (Yellow)
Ladybug: #EF4444 (Red) #1F2937 (Black)
Butterfly: #EC4899 (Pink) #8B5CF6 (Purple)
Grasshopper: #22C55E (Green) #84CC16 (Lime)
Mole: #92400E (Brown) #D97706 (Orange)| Asset Type | Max Size | Format Priority | Lazy Load |
|---|---|---|---|
| Hero Images | 200KB | AVIF > WebP > PNG | No |
| UI Sprites | 100KB | WebP > PNG | No |
| Backgrounds | 300KB | AVIF > WebP | Yes |
| Icons | 10KB each | SVG > WebP | No |
| Animations | 500KB | Lottie > GIF | Yes |
Layout: Grid-based, power-of-2 dimensions
Padding: 2px between frames (prevents bleeding)
Naming: [simulin]_phase[1-3].[ext]
Atlas: Generate JSON metadata for programmatic access/assets
/1x (base - mobile)
/2x (retina - tablet/desktop)
/3x (high-DPI - optional)<picture>// Optimized image component pattern
const GameAsset = ({ src, alt, priority = false }) => (
<img
src={src}
alt={alt}
loading={priority ? "eager" : "lazy"}
decoding="async"
className="crisp" // for low-poly art
/>
);/* Crisp rendering for low-poly assets */
.crisp {
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
}
/* Smooth scaling for gradients */
.smooth {
image-rendering: smooth;
image-rendering: high-quality;
}
/* Sprite animation */
.sprite-animate {
animation: sprite-play 0.8s steps(8) infinite;
}| Issue | Cause | Solution |
|---|---|---|
| Blurry assets | Wrong resolution | Use 2x assets, check devicePixelRatio |
| Color banding | 8-bit limitation | Use PNG-24, add subtle dithering |
| Jagged edges | No anti-aliasing | Enable AA in source, or use SVG |
| Large file size | Unoptimized | Run through squoosh.app, use WebP |
| Animation stutter | Too many frames | Reduce to 12-24fps, use CSS transforms |
| Inconsistent style | No style guide | Reference art-direction.md, use AI consistently |