game-assets-team
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseGame 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.
一个专注于游戏资产设计、创建、实现与优化的虚拟专家团队，专为具有低多边形晶体美学风格的可扩展Web/移动端游戏服务。
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 |
| 角色 | 职责 |
|---|---|
| 美术指导 | 视觉风格把控、一致性维护、品牌标识塑造 |
| 概念设计师 | 初始设计、情绪板制作、风格探索 |
| UI/UX设计师 | 界面元素设计、图标系统、HUD组件开发 |
| 技术美术 | 资产优化、格式适配、性能调优、流水线搭建 |
| 动效设计师 | 动画规范制定、过渡效果设计、微交互实现 |
| 音频设计师 | 声音指导、音效规范、音乐需求概要 |
Asset Creation Workflow
资产创建工作流
1. AI Image Generation (Primary Tool)
1. AI图像生成（主要工具）
Use the skill for rapid asset creation:
gemini-image-generatorbash
undefined使用技能快速创建资产：
gemini-image-generatorbash
undefinedFrom the gemini-image-generator scripts directory:
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"
undefinedpython generate.py --prompt "[DETAILED PROMPT]" --output [filename].png
**游戏资产提示词工程：**
结构：[主体] + [风格] + [构图] + [技术要求] + [氛围]
《Purria Simulins》农场主题示例：
"可爱的低多边形几何蜜蜂游戏角色，多面晶体翅膀，
大大的萌系眼睛，鲜明的黄金色调搭配微妙渐变，
3/4视角，透明背景，第二阶段进化形态，
正在发育的特征，部分晶体翅膀"
undefined2. Asset Categories & Specs
2. 资产分类与规范
| 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 |
| 资产分类 | 格式 | 尺寸 | 说明 |
|---|---|---|---|
| UI图标 | PNG-24, SVG | 64x64, 128x128 | 透明背景，2px内边距 |
| 精灵图 | PNG-24, WebP | 2的幂次 | 优先使用精灵图集 |
| 背景图 | WebP, AVIF | 1920x1080, 2560x1440 | 分层设计以支持视差效果 |
| Simulins角色 | PNG-24 | 128/192/256px（按进化阶段） | 3个进化阶段 |
| 卡牌 | PNG-24, SVG | 180x252（2.5:3.5比例） | 300dpi印刷分辨率 |
| 粒子效果 | PNG-24 | 32x32, 64x64 | 支持additive blend（ additive混合模式） |
3. Style Guide: Farming in Purria
3. 风格指南：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)
视觉核心：
- 低多边形几何风格 - 多面形状、清晰边缘、可见多边形结构
- 晶体装饰元素 - 半透明宝石状翅膀、棱镜反射效果
- 萌系风格 - 大而传神的眼睛、可爱比例、鲜明个性
- 鲜明色彩 - 充满活力的调色板搭配微妙渐变
Simulins角色调色板：
蜘蛛: #8B5CF6（紫色） #A78BFA（浅紫色）
蜜蜂: #F59E0B（琥珀色） #FBBF24（黄色）
瓢虫: #EF4444（红色） #1F2937（黑色）
蝴蝶: #EC4899（粉色） #8B5CF6（紫色）
蚱蜢: #22C55E（绿色） #84CC16（ lime绿）
鼹鼠: #92400E（棕色） #D97706（橙色）排版规范：
- 标题：圆润友好的无衬线字体
- 正文：清晰易读的字体
- 数字：Roboto Mono（等宽字体，适用于分数/货币等对齐场景）
Optimization Standards
优化标准
Web/Mobile Performance
Web/移动端性能
| 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 |
| 资产类型 | 最大尺寸 | 格式优先级 | 懒加载 |
|---|---|---|---|
| 主视觉图 | 200KB | AVIF > WebP > PNG | 否 |
| UI精灵图 | 100KB | WebP > PNG | 否 |
| 背景图 | 300KB | AVIF > WebP | 是 |
| 图标 | 单个10KB | SVG > WebP | 否 |
| 动画 | 500KB | Lottie > GIF | 是 |
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布局：基于网格，尺寸为2的幂次
内边距：帧之间留2px（防止边缘溢出）
命名规则：[simulin]_phase[1-3].[扩展名]
图集：生成JSON元数据以支持程序化访问Responsive Asset Strategy
响应式资产策略
/assets
/1x (base - mobile)
/2x (retina - tablet/desktop)
/3x (high-DPI - optional)Use element or CSS image-set() for delivery.
<picture>/assets
/1x (基础版 - 移动端)
/2x (视网膜版 - 平板/桌面端)
/3x (高DPI版 - 可选)使用元素或CSS image-set()方法进行资源交付。
<picture>Implementation Patterns
实现模式
React Integration
React集成
tsx
// 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
/>
);tsx
// 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
游戏资产CSS实现
css
/* 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;
}css
/* 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 |
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 资产模糊 | 分辨率错误 | 使用2x资产，检查devicePixelRatio |
| 色彩断层 | 8位色深限制 | 使用PNG-24格式，添加微妙抖动效果 |
| 边缘锯齿 | 未启用抗锯齿 | 在源文件中启用抗锯齿，或使用SVG格式 |
| 文件过大 | 未优化 | 使用squoosh.app处理，或改用WebP格式 |
| 动画卡顿 | 帧数过多 | 减少至12-24fps，使用CSS变换实现 |
| 风格不一致 | 无风格指南参考 | 查阅art-direction.md文档，保持AI生成的一致性 |
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
在交付任何资产前，请确认：
- 尺寸与格式正确
- 文件大小已优化（符合上述限制）
- 按需使用透明背景
- 符合低多边形晶体风格
- 已在1x和2x显示屏上测试
- 命名符合规范
- 若为精灵图，已生成元数据/图集
Reference Documents
参考文档
- Art Direction Deep Dive - Extended style guide, Simulin specs
- Optimization Techniques - Compression, formats, tools
- Animation Specs - Timing, easing, Lottie workflows
- 美术指导深度解析 - 扩展风格指南、Simulin详细规范
- 优化技术指南 - 压缩、格式、工具相关内容
- 动画规范文档 - 时序、缓动、Lottie工作流