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 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

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