Graphics & Asset Guide
Current Game Configuration
Section titled “Current Game Configuration”The game uses Phaser 3 for rendering with the following base configuration:
| Setting | Value |
|---|---|
| Hex Orientation | Pointy-top |
| Hex Bounding Box | 64×64 pixels (perfect square) |
| Sprite Height (with overlay) | 80 pixels |
| Rendering | WebGL with antialiasing |
Hex Tile Specifications
Section titled “Hex Tile Specifications”Dimensions
Section titled “Dimensions”All hex grid math is based on a 64×64 pixel square bounding box — power-of-2, all integer math, no fractional overlap needed.
| Measurement | Value | Notes |
|---|---|---|
| HEX_SIZE | 64px | Bounding box side length |
| TILE_WIDTH | 64px | Same as HEX_SIZE |
| TILE_HEIGHT | 64px | Same as HEX_SIZE |
| OVERLAY_HEIGHT | 16px | Extra height above hex for perspective art |
| SPRITE_HEIGHT | 80px | HEX_SIZE + OVERLAY_HEIGHT |
| HEX_HALF_W | 32px | Half-width (TILE_WIDTH / 2) |
| HEX_HALF_H | 32px | Half-height (TILE_HEIGHT / 2) |
| Vertical Spacing | 48px | TILE_HEIGHT × 0.75 |
| Horizontal Spacing | 64px | Same as TILE_WIDTH |
Hex Shape
Section titled “Hex Shape”The hex is a pointy-top hexagon inscribed in the 64×64 square, filling it edge-to-edge. The vertices (clockwise from top) are:
| Vertex | Offset (from center) | Absolute (in 64×64 canvas) |
|---|---|---|
| Top | (0, −32) | (32, 0) |
| Upper-right | (+32, −16) | (64, 16) |
| Lower-right | (+32, +16) | (64, 48) |
| Bottom | (0, +32) | (32, 64) |
| Lower-left | (−32, +16) | (0, 48) |
| Upper-left | (−32, −16) | (0, 16) |
64px ┌─────────────────────────┐ │ ▲ (32, 0) │ │ ╱ ╲ │ │ ╱ ╲ │ │(0, 16) ╱ ╲ (64,16)│ │ │ │ │ │ 64px │ HEX │ 64px │ │ │ TILE │ │ │(0, 48) │ │(64,48) │ │ ╲ ╱ │ │ ╲ ╱ │ │ ╲ ╱ │ │ ▼ (32, 64) │ └─────────────────────────┘The hex fills the entire bounding box — top and bottom vertices touch the top and bottom edges, left and right edges meet the hex at 1/4 and 3/4 height.
Terrain Tile Canvas
Section titled “Terrain Tile Canvas”For terrain tile assets, use 64×64 pixels for the base hex art:
- The hex shape fills the full 64×64 canvas end-to-end
- Power-of-2 dimensions are optimal for GPU texture memory
- Only the small triangular corners outside the hex vertices are transparent
- Works efficiently with Phaser’s sprite batching
For tiles with perspective/height detail (e.g., mountains, tall buildings), use 64×80 pixels — the extra 16px overlay sits above the hex and is drawn on top of the row above.
High-DPI / Retina Support
Section titled “High-DPI / Retina Support”For high-resolution displays, create @2x versions:
| Asset Type | Standard | @2x (Retina) |
|---|---|---|
| Hex Tiles | 64×64px | 128×128px |
| Hex Tiles + Overlay | 64×80px | 128×160px |
| Unit Sprites | 48×48px | 96×96px |
Unit Sprite Specifications
Section titled “Unit Sprite Specifications”Dimensions
Section titled “Dimensions”Units are displayed within hex tiles and should be sized appropriately:
| Measurement | Value | Notes |
|---|---|---|
| Container Size | 48×48px | Interactive hit area |
| Circle Radius | 14px | Used for programmatic rendering |
| Symbol Font Size | 16px | Unit letter symbol |
| HP Font Size | 12px | Health badge text |
Unit Sprite Layout
Section titled “Unit Sprite Layout”┌──────────────────────────────────┐│ 48×48px ││ ┌────────────────────────────┐ ││ │ │ ││ │ ╭──────────────╮ │ ││ │ │ │ │ ││ │ │ UNIT │ │ ││ │ │ SPRITE │ │ ││ │ │ │ │ ││ │ ╰──────────────╯ │ ││ │ [HP] ← Badge │ ││ └────────────────────────────┘ │└──────────────────────────────────┘Small UI Elements
Section titled “Small UI Elements”| Element | Size | Use |
|---|---|---|
| Unit badges/icons | 16×16px | Small indicators |
| Status icons | 24×24px | Sleep, buff indicators |
Recommended Format
Section titled “Recommended Format”Pixel Art (PNG) – Recommended
Section titled “Pixel Art (PNG) – Recommended”For this game’s aesthetic (inspired by WeeWar and classic hex strategy games):
- Format: PNG with transparency
- Style: Pixel art at native resolution
- Color Depth: 32-bit RGBA (for transparency)
- Compression: Maximum (lossless)
Why Pixel Art?
- Matches the retro tactical game aesthetic
- Clean scaling at integer multiples
- Smaller file sizes than vector alternatives
- Efficient sprite batching in Phaser
SVG (Vector)
Section titled “SVG (Vector)”Better suited for:
- UI elements (buttons, icons, menus)
- Resolution-independent assets
- Assets that need extreme scaling
Spritesheet Format
Section titled “Spritesheet Format”For efficient loading, combine related assets into spritesheets:
Terrain Spritesheet
Section titled “Terrain Spritesheet”Organize terrain tiles in a grid layout:
Terrain Spritesheet: 512×128px (8 columns × 2 rows)┌────────┬────────┬────────┬────────┬────────┬────────┬────────┬────────┐│ GRASS │ FOREST │MOUNTAIN│SHALLOW │ DEEP │ BASE │ ROAD │ EMPTY ││ 64×64 │ 64×64 │ 64×64 │ WATER │ WATER │ 64×64 │ 64×64 │ 64×64 ││ │ │ │ 64×64 │ 64×64 │ │ │ │├────────┼────────┼────────┼────────┼────────┼────────┼────────┼────────┤│ BASE │ BASE │ BASE │ BASE │ BASE │ BASE │ BASE │ BASE ││ (P1) │ (P2) │ (P3) │ (P4) │ (P5) │ (P6) │ (P7) │ (P8) ││ 64×64 │ 64×64 │ 64×64 │ 64×64 │ 64×64 │ 64×64 │ 64×64 │ 64×64 │└────────┴────────┴────────┴────────┴────────┴────────┴────────┴────────┘Unit Spritesheet
Section titled “Unit Spritesheet”Per-faction spritesheets, one row per unit type:
Alliance Spritesheet: 144×48px (3 columns × 1 row)┌────────┬────────┬────────┐│MILITIA │BATTLE │HOWITZER││ (M) │ TANK │ (H) ││ 48×48 │ (B) │ 48×48 ││ │ 48×48 │ │└────────┴────────┴────────┘
Federation Spritesheet: 192×48px (4 columns × 1 row)┌────────┬────────┬────────┬────────┐│TROOPER │ SHOCK │ASSAULT │ROCKET ││ (T) │TROOPER │ TANK │BATTERY ││ 48×48 │ (S) │ (A) │ (RT) ││ │ 48×48 │ 48×48 │ 48×48 │└────────┴────────┴────────┴────────┘Current Terrain Types
Section titled “Current Terrain Types”Create sprites for each terrain type:
| Terrain | Color (Current) | Description |
|---|---|---|
| Grass | #4a7c59 |
Open grassland, basic terrain |
| Forest | #2d5016 |
Dense trees, slows movement |
| Mountain | #8b7355 |
Rocky peaks, infantry only |
| Shallow Water | #5dade2 |
Fordable water, infantry only |
| Deep Water | #2874a6 |
Impassable for land units |
| Base | #808080 |
Capturable structure (+ player colors) |
| Road | #7f8c8d |
Fast travel path (overlay) |
| Empty | #0a0a0a |
Void / off-map |
Player Colors
Section titled “Player Colors”For player-owned bases and units (supports up to 8 players):
| Player | Color | Hex Code |
|---|---|---|
| Player 1 | Blue | #3498db |
| Player 2 | Red | #e74c3c |
| Player 3 | Green | #2ecc71 |
| Player 4 | Orange | #f39c12 |
| Player 5 | Purple | #9b59b6 |
| Player 6 | Teal | #1abc9c |
| Player 7 | Brown | #e67e22 |
| Player 8 | Silver | #95a5a6 |
Current Unit Types
Section titled “Current Unit Types”The game uses a faction system. Each faction has distinct unit variants:
Alliance
Section titled “Alliance”| Unit | Symbol | Role | Cost |
|---|---|---|---|
| Militia | M | Infantry | 150 |
| Battle Tank | B | Armor | 300 |
| Howitzer | H | Ranged (2-4 range) | 300 |
Federation
Section titled “Federation”| Unit | Symbol | Role | Cost |
|---|---|---|---|
| Trooper | T | Infantry | 140 |
| Shock Trooper | S | Infantry (elite, move-after-attack) | 175 |
| Assault Tank | A | Armor | 240 |
| Rocket Battery | RT | Ranged (2-3 range) | 280 |
Shared (non-faction games)
Section titled “Shared (non-faction games)”| Unit | Symbol | Role | Cost |
|---|---|---|---|
| Infantry | I | Infantry | 150 |
| Vehicle | V | Armor | 400 |
Asset Checklist
Section titled “Asset Checklist”Minimum Required Assets
Section titled “Minimum Required Assets”Terrain Tiles (64×64px each):
- Grass
- Forest
- Mountain
- Shallow Water
- Deep Water
- Base (neutral)
- Base (per player color — up to 8)
- Road
- Empty
Unit Sprites (48×48px each):
- Alliance: Militia, Battle Tank, Howitzer
- Federation: Trooper, Shock Trooper, Assault Tank, Rocket Battery
- Shared: Infantry, Vehicle (for non-faction games)
Optional/Future:
- Additional terrain types (Desert, Snow, etc.)
- Additional unit types per faction
- Building sprites (HQ, City, Factory, Airfield, Seaport, Outpost, Depot)
- Effect animations (explosions, movement trails)
- Perspective overlay tiles (64×80px for mountains, tall buildings)
File Organization
Section titled “File Organization”Place graphics in the project’s assets/ directory:
assets/├── sprites/│ ├── terrain-tiles.png # Terrain spritesheet│ ├── units-alliance.png # Alliance unit spritesheet│ ├── units-federation.png # Federation unit spritesheet│ ├── units-shared.png # Shared unit spritesheet│ └── effects.png # Visual effects├── ui/│ ├── buttons.png # UI button spritesheet│ └── icons.png # Status icons└── themes/ └── default/ └── theme.json # Theme configuration (hex_size: 64)Tips for Creating Assets
Section titled “Tips for Creating Assets”Hex Tile Tips
Section titled “Hex Tile Tips”- Fill the bounding box — the hex shape touches all four edges of the 64×64 canvas
- Only corners are transparent — small triangular areas at the four corners outside the hex vertices
- Consistent lighting — pick a light source direction and stick with it
- Readable at zoom — ensure terrain is identifiable at 0.5× zoom (the minimum level)
- Overlay height — for tiles needing perspective (mountains, buildings), extend 16px above into a 64×80 canvas
Unit Sprite Tips
Section titled “Unit Sprite Tips”- Clear silhouettes — units should be instantly recognizable
- Distinct by type — each unit role (Infantry, Armor, Ranged) should be obvious at a glance
- Color-friendly — design works with different player color tints (8 colors)
- Facing direction — consider creating multiple angles for movement
Color Palette Tips
Section titled “Color Palette Tips”- Use the existing colors as a base palette
- Ensure sufficient contrast between terrain types
- Test visibility with fog of war overlay (50-90% black)
- Consider colorblind-friendly alternatives
This guide will be updated as the game graphics system evolves.