game-assets-team

安装量: 45
排名: #16522

安装

npx skills add https://github.com/ccalebcarter/purria-skills --skill game-assets-team

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"

  1. Asset Categories & Specs 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
  2. 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 element or CSS image-set() for delivery.

Implementation Patterns React Integration // Optimized image component pattern const GameAsset = ({ src, alt, priority = false }) => ( {alt} );

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

返回排行榜