game-assets-team
43
总安装量
42
周安装量
#4941
全站排名
安装命令
npx skills add https://github.com/ccalebcarter/purria-skills --skill game-assets-team
Agent 安装分布
codex
28
opencode
28
gemini-cli
26
antigravity
22
github-copilot
22
Skill 文档
Game Assets Team
A virtual SME team for game asset design, creation, implementation, and optimization. Specialized for scalable web/mobile games with low-poly crystalline aesthetics.
Team Roles & Expertise
| 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 |
Asset Creation Workflow
1. AI Image Generation (Primary Tool)
Use the gemini-image-generator skill for rapid asset creation:
# From the gemini-image-generator scripts directory:
python generate.py --prompt "[DETAILED PROMPT]" --output [filename].png
Prompt Engineering for Game Assets:
Structure: [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"
2. Asset Categories & Specs
| Category | Formats | Sizes | Notes |
|---|---|---|---|
| UI Icons | PNG-24, SVG | 64×64, 128×128 | Transparent BG, 2px padding |
| Sprites | PNG-24, WebP | Power of 2 | Sprite sheets preferred |
| Backgrounds | WebP, AVIF | 1920×1080, 2560×1440 | Layered for parallax |
| Simulins | PNG-24 | 128/192/256px by phase | 3 evolution phases |
| Cards | PNG-24, SVG | 180×252 (2.5:3.5) | Print-ready at 300dpi |
| Particles | PNG-24 | 32×32, 64×64 | Additive blend ready |
3. Style Guide: Farming in Purria
Visual Pillars:
- Low-Poly Geometric – Faceted shapes, clean edges, visible polygons
- Crystalline Accents – Translucent gem-like wings, prismatic reflections
- Kawaii Charm – Big expressive eyes, cute proportions, personality
- Bold Colors – Vibrant palettes with subtle gradients
Color Palette (Simulins):
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)
Typography:
- Headers: Rounded, friendly sans-serif
- Body: Clean readability
- Numbers: Roboto Mono (Tabular for scores/currency)
Optimization Standards
Web/Mobile Performance
| 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 |
Sprite Sheet Guidelines
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
Responsive Asset Strategy
/assets
/1x (base - mobile)
/2x (retina - tablet/desktop)
/3x (high-DPI - optional)
Use <picture> element or CSS image-set() for delivery.
Implementation Patterns
React Integration
// 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
/>
);
CSS for Game Assets
/* 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;
}
Troubleshooting Guide
| 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 |
Quality Checklist
Before shipping any asset:
- Correct dimensions and format
- Optimized file size (within limits above)
- Transparent background where needed
- Consistent with low-poly crystalline style
- Tested on 1x and 2x displays
- Named according to convention
- Metadata/atlas generated if sprite
Reference Documents
- Art Direction Deep Dive – Extended style guide, Simulin specs
- Optimization Techniques – Compression, formats, tools
- Animation Specs – Timing, easing, Lottie workflows