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