
Game Art Principles
FreeMaster the fundamentals of game art design.
Free · Opens the source repo
What Game Art Principles does
Game Art Principles is a comprehensive guide designed for game developers and designers who want to enhance their understanding of visual design in games. This skill focuses on critical aspects such as art style selection, asset pipelines, animation workflows, and color theory, providing a structured approach to creating compelling game visuals. Whether you're an indie developer or part of a larger studio, this resource will help you navigate the complexities of game art creation.
The skill begins with a decision tree for art style selection, guiding users through various visual styles based on the emotions they wish to evoke in their games. It covers styles from nostalgic pixel art to realistic PBR 3D, comparing production speeds, skill requirements, and scalability. This framework aids in making informed choices that align with project goals and target audiences.
Additionally, the skill outlines detailed asset pipelines for both 2D and 3D art, specifying tools and outputs for each phase of production. Users can learn about the best practices for concepting, creating, and integrating assets into game engines, ensuring a smooth workflow from initial idea to final implementation.
Furthermore, the guide delves into color theory and animation principles, offering practical strategies for palette selection and applying the 12 principles of animation specifically for games. With a focus on organization and naming conventions, this skill also addresses common anti-patterns to avoid, helping users maintain clarity and efficiency throughout their projects.
When to use it
Use this skill when starting a new game project or when refining the visual aspects of an existing game.
When not to use it
This skill may not be suitable for projects that do not require a strong visual design component or for teams already experienced in game art principles.
What you can build with it
Choosing an Art Style
When starting a new game, use the decision tree to select an appropriate art style that aligns with the game's emotional goals.
Setting Up Asset Pipelines
Follow the outlined asset pipeline phases to streamline the creation and integration of game assets, ensuring efficiency in production.
Applying Animation Principles
Utilize the 12 principles of animation to enhance character movements and interactions, making gameplay more engaging.
How to install Game Art Principles
View source1. Install with the skills CLI
npx skills add davila7/claude-code-templates/game-art --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by davila7Game 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.
Frequently asked questions about Game Art Principles
Similar skills
Penpot UI/UX Design
Create professional UI/UX designs in Penpot with ease.
Legacy Circuit Mockups
Visualize and create retro circuit diagrams easily.
Excalidraw Diagram Generator
Transform natural language into Excalidraw diagrams.
Draw.io Diagram Generator
Easily create and validate draw.io diagrams.
UX Theming
Streamline your VS Code theming process with best practices.
Slack GIF Creator
Create optimized animated GIFs for Slack effortlessly.
