Game Art Pipeline

Game art

by davila7 · MIT license · ★ 32,299 on GitHub

Game art cover

Game art principles. Visual style selection, asset pipeline, animation workflow.

---
name: game-art
description: Game art principles. Visual style selection, asset pipeline, animation workflow.
allowed-tools: Read, Glob, Grep
---

# Game Art Principles

> Visual design thinking for games - style selection, asset pipelines, and art direction.

---

## 1. Art Style Selection

### Decision Tree

```
What feeling should the game evoke?

Overview

Choose a base unit and stick to it: - Pixel art: Work at 1x, scale up (never down) - HD art: Define DPI, maintain ratio - 3D: 1 unit = 1 meter (industry standard)

Manual install (npx, ZIP)
Claude Codenpx skills add davila7/claude-code-templates --skill game-art -g -a claude-code
Claude Code (degit)npx degit davila7/claude-code-templates/cli-tool/components/skills/creative-design/game-development/game-art#main ~/.claude/skills/game-art
Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.
Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

  • SKILL.md4.9 KB
Read SKILL.md here
davila7/main1 file shown
SKILL.md
Show the full text186 lines

Game Art Principles

Visual design thinking for games - style selection, asset pipelines, and art direction.


1. Art Style Selection

Decision Tree
What feeling should the game evoke?
│
├── Nostalgic / Retro
│   ├── Limited palette? → Pixel Art
│   └── Hand-drawn feel? → Vector / Flash style
│
├── Realistic / Immersive
│   ├── High budget? → PBR 3D
│   └── Stylized realism? → Hand-painted textures
│
├── Approachable / Casual
│   ├── Clean shapes? → Flat / Minimalist
│   └── Soft feel? → Gradient / Soft shadows
│
└── Unique / Experimental
    └── Define custom style guide
Style Comparison Matrix
Style Production Speed Skill Floor Scalability Best For
Pixel Art Medium Medium Hard to hire Indie, retro
Vector/Flat Fast Low Easy Mobile, casual
Hand-painted Slow High Medium Fantasy, stylized
PBR 3D Slow High AAA pipeline Realistic games
Low-poly Fast Medium Easy Indie 3D
Cel-shaded Medium Medium Medium Anime, cartoon

2. Asset Pipeline Decisions

2D Pipeline
Phase Tool Options Output
Concept Paper, Procreate, Photoshop Reference sheet
Creation Aseprite, Photoshop, Krita Individual sprites
Atlas TexturePacker, Aseprite Spritesheet
Animation Spine, DragonBones, Frame-by-frame Animation data
Integration Engine import Game-ready assets
3D Pipeline
Phase Tool Options Output
Concept 2D art, Blockout Reference
Modeling Blender, Maya, 3ds Max High-poly mesh
Retopology Blender, ZBrush Game-ready mesh
UV/Texturing Substance Painter, Blender Texture maps
Rigging Blender, Maya Skeletal rig
Animation Blender, Maya, Mixamo Animation clips
Export FBX, glTF Engine-ready

3. Color Theory Decisions

Palette Selection
Goal Strategy Example
Harmony Complementary or analogous Nature games
Contrast High saturation differences Action games
Mood Warm/cool temperature Horror, cozy
Readability Value contrast over hue Gameplay clarity
Color Principles
  • Hierarchy: Important elements should pop
  • Consistency: Same object = same color family
  • Context: Colors read differently on backgrounds
  • Accessibility: Don't rely only on color

4. Animation Principles

The 12 Principles (Applied to Games)
Principle Game Application
Squash & Stretch Jump arcs, impacts
Anticipation Wind-up before attack
Staging Clear silhouettes
Follow-through Hair, capes after movement
Slow in/out Easing on transitions
Arcs Natural movement paths
Secondary Action Breathing, blinking
Timing Frame count = weight/speed
Exaggeration Readable from distance
Appeal Memorable design
Frame Count Guidelines
Action Type Typical Frames Feel
Idle breathing 4-8 Subtle
Walk cycle 6-12 Smooth
Run cycle 4-8 Energetic
Attack 3-6 Snappy
Death 8-16 Dramatic

5. Resolution & Scale Decisions

2D Resolution by Platform
Platform Base Resolution Sprite Scale
Mobile 1080p 64-128px characters
Desktop 1080p-4K 128-256px characters
Pixel art 320x180 to 640x360 16-32px characters
Consistency Rule

Choose a base unit and stick to it:

  • Pixel art: Work at 1x, scale up (never down)
  • HD art: Define DPI, maintain ratio
  • 3D: 1 unit = 1 meter (industry standard)

6. Asset Organization

Naming Convention
[type]_[object]_[variant]_[state].[ext]

Examples:
spr_player_idle_01.png
tex_stone_wall_normal.png
mesh_tree_oak_lod2.fbx
Folder Structure Principle
assets/
├── characters/
│   ├── player/
│   └── enemies/
├── environment/
│   ├── props/
│   └── tiles/
├── ui/
├── effects/
└── audio/

7. Anti-Patterns

Don't Do
Mix art styles randomly Define and follow style guide
Work at final resolution only Create at source resolution
Ignore silhouette readability Test at gameplay distance
Over-detail background Focus detail on player area
Skip color testing Test on target display

Remember: Art serves gameplay. If it doesn't help the player, it's decoration.

1---
2name: game-art
3description: Game art principles. Visual style selection, asset pipeline, animation workflow.
4allowed-tools: Read, Glob, Grep
5---
6 
7# Game Art Principles
8 
9> Visual design thinking for games - style selection, asset pipelines, and art direction.
10 
11---
12 
13## 1. Art Style Selection
14 
15### Decision Tree
16 
17```
18What feeling should the game evoke?
19│
20├── Nostalgic / Retro
21│ ├── Limited palette? → Pixel Art
22│ └── Hand-drawn feel? → Vector / Flash style
23│
24├── Realistic / Immersive
25│ ├── High budget? → PBR 3D
26│ └── Stylized realism? → Hand-painted textures
27│
28├── Approachable / Casual
29│ ├── Clean shapes? → Flat / Minimalist
30│ └── Soft feel? → Gradient / Soft shadows
31│
32└── Unique / Experimental
33 └── Define custom style guide
34```
35 
36### Style Comparison Matrix
37 
38| Style | Production Speed | Skill Floor | Scalability | Best For |
39|-------|------------------|-------------|-------------|----------|
40| **Pixel Art** | Medium | Medium | Hard to hire | Indie, retro |
41| **Vector/Flat** | Fast | Low | Easy | Mobile, casual |
42| **Hand-painted** | Slow | High | Medium | Fantasy, stylized |
43| **PBR 3D** | Slow | High | AAA pipeline | Realistic games |
44| **Low-poly** | Fast | Medium | Easy | Indie 3D |
45| **Cel-shaded** | Medium | Medium | Medium | Anime, cartoon |
46 
47---
48 
49## 2. Asset Pipeline Decisions
50 
51### 2D Pipeline
52 
53| Phase | Tool Options | Output |
54|-------|--------------|--------|
55| **Concept** | Paper, Procreate, Photoshop | Reference sheet |
56| **Creation** | Aseprite, Photoshop, Krita | Individual sprites |
57| **Atlas** | TexturePacker, Aseprite | Spritesheet |
58| **Animation** | Spine, DragonBones, Frame-by-frame | Animation data |
59| **Integration** | Engine import | Game-ready assets |
60 
61### 3D Pipeline
62 
63| Phase | Tool Options | Output |
64|-------|--------------|--------|
65| **Concept** | 2D art, Blockout | Reference |
66| **Modeling** | Blender, Maya, 3ds Max | High-poly mesh |
67| **Retopology** | Blender, ZBrush | Game-ready mesh |
68| **UV/Texturing** | Substance Painter, Blender | Texture maps |
69| **Rigging** | Blender, Maya | Skeletal rig |
70| **Animation** | Blender, Maya, Mixamo | Animation clips |
71| **Export** | FBX, glTF | Engine-ready |
72 
73---
74 
75## 3. Color Theory Decisions
76 
77### Palette Selection
78 
79| Goal | Strategy | Example |
80|------|----------|---------|
81| **Harmony** | Complementary or analogous | Nature games |
82| **Contrast** | High saturation differences | Action games |
83| **Mood** | Warm/cool temperature | Horror, cozy |
84| **Readability** | Value contrast over hue | Gameplay clarity |
85 
86### Color Principles
87 
88- **Hierarchy:** Important elements should pop
89- **Consistency:** Same object = same color family
90- **Context:** Colors read differently on backgrounds
91- **Accessibility:** Don't rely only on color
92 
93---
94 
95## 4. Animation Principles
96 
97### The 12 Principles (Applied to Games)
98 
99| Principle | Game Application |
100|-----------|------------------|
101| **Squash & Stretch** | Jump arcs, impacts |
102| **Anticipation** | Wind-up before attack |
103| **Staging** | Clear silhouettes |
104| **Follow-through** | Hair, capes after movement |
105| **Slow in/out** | Easing on transitions |
106| **Arcs** | Natural movement paths |
107| **Secondary Action** | Breathing, blinking |
108| **Timing** | Frame count = weight/speed |
109| **Exaggeration** | Readable from distance |
110| **Appeal** | Memorable design |
111 
112### Frame Count Guidelines
113 
114| Action Type | Typical Frames | Feel |
115|-------------|----------------|------|
116| Idle breathing | 4-8 | Subtle |
117| Walk cycle | 6-12 | Smooth |
118| Run cycle | 4-8 | Energetic |
119| Attack | 3-6 | Snappy |
120| Death | 8-16 | Dramatic |
121 
122---
123 
124## 5. Resolution & Scale Decisions
125 
126### 2D Resolution by Platform
127 
128| Platform | Base Resolution | Sprite Scale |
129|----------|-----------------|--------------|
130| Mobile | 1080p | 64-128px characters |
131| Desktop | 1080p-4K | 128-256px characters |
132| Pixel art | 320x180 to 640x360 | 16-32px characters |
133 
134### Consistency Rule
135 
136Choose a base unit and stick to it:
137- Pixel art: Work at 1x, scale up (never down)
138- HD art: Define DPI, maintain ratio
139- 3D: 1 unit = 1 meter (industry standard)
140 
141---
142 
143## 6. Asset Organization
144 
145### Naming Convention
146 
147```
148[type]_[object]_[variant]_[state].[ext]
149 
150Examples:
151spr_player_idle_01.png
152tex_stone_wall_normal.png
153mesh_tree_oak_lod2.fbx
154```
155 
156### Folder Structure Principle
157 
158```
159assets/
160├── characters/
161│ ├── player/
162│ └── enemies/
163├── environment/
164│ ├── props/
165│ └── tiles/
166├── ui/
167├── effects/
168└── audio/
169```
170 
171---
172 
173## 7. Anti-Patterns
174 
175| Don't | Do |
176|-------|-----|
177| Mix art styles randomly | Define and follow style guide |
178| Work at final resolution only | Create at source resolution |
179| Ignore silhouette readability | Test at gameplay distance |
180| Over-detail background | Focus detail on player area |
181| Skip color testing | Test on target display |
182 
183---
184 
185> **Remember:** Art serves gameplay. If it doesn't help the player, it's decoration.
186 
View all files on GitHub →

Details

License
MIT
Stars on the repo
★ 32,299
Checked
Source
davila7/claude-code-templates ↗
Creator
davila7 · 212 listings
View creator

Similar skills

See all →

More from davila7

Skill2D Game Developmentdavila7/claude-code-templates · by davila72D game development principles. Sprites, tilemaps, physics, camera.★ 32.3k GitHub starsSkill3D Game Development Principlesdavila7/claude-code-templates · by davila73D game development principles. Rendering, shaders, physics, cameras.★ 32.3k GitHub starsSkill3D Web Experience Builderdavila7/claude-code-templates · by davila7Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.★ 32.3k GitHub starsSkillSplit Test Setupdavila7/claude-code-templates · by davila7When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," or "hypothesis." For tracking implementation, see analytics-tracking.★ 32.3k GitHub starsAgentResearch Literature Synthesizerdavila7/claude-code-templates · by davila7Academic research synthesis specialist. Use PROACTIVELY for comprehensive research on academic topics, literature reviews, technical investigations, and well-cited analysis combining multiple sources. <example>Context: A podcast episode needs a segment grounded in peer-reviewed evidence with formal citations. user: "Research the current state of transformer efficiency techniques for the episode, with proper academic citations." assistant: "I'll use the academic-research-synthesizer agent to search arXiv and Semantic Scholar, extract full-text findings via WebFetch, and produce a cited literature synthesis with confidence levels." <commentary>Use academic-research-synthesizer (not comprehensive-researcher) when the episode segment needs peer-reviewed sourcing, formal citation format, and explicit confidence tagging rather than general-purpose multi-source coverage.</commentary></example> <example>Context: The episode-orchestrator has routed a "literature review" request for a technical deep-dive segment. user: "Summarize the research landscape on federated learning privacy guarantees." assistant: "I'll invoke academic-research-synthesizer to systematically search academic sources, note peer-review status per source, and synthesize consensus vs. open debates."</example>★ 32.3k GitHub starsAgentAcademic Research Specialistdavila7/claude-code-templates · by davila7Academic research specialist for scholarly sources, peer-reviewed papers, and academic literature. Use PROACTIVELY for research paper analysis, literature reviews, citation tracking, and academic methodology evaluation. <example>Context: The research-orchestrator has kicked off Phase 4 parallel research on 'efficacy of intermittent fasting' and needs peer-reviewed evidence. user: "Find the academic evidence on intermittent fasting outcomes." assistant: "I'll use the academic-researcher agent to search Semantic Scholar, PubMed, and OpenAlex for peer-reviewed studies and write structured findings to academic-research.md." <commentary>The request is specifically for scholarly/peer-reviewed evidence rather than general web coverage or code, so academic-researcher (not web-researcher or technical-researcher) is the right specialist.</commentary></example> <example>Context: The user wants a literature review comparing methodologies across studies on a topic. user: "Can you review the literature on transformer model interpretability and identify research gaps?" assistant: "Let me invoke the academic-researcher agent to pull foundational and recent papers, extract methodologies, and surface open research gaps." <commentary>Literature review, methodology extraction, and research-gap identification are core academic-researcher capabilities, distinct from technical-researcher's focus on code repositories and implementations.</commentary></example>★ 32.3k GitHub stars