Graphics & Asset Guide

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

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

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

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

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

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

┌──────────────────────────────────┐
│            48×48px               │
│  ┌────────────────────────────┐  │
│  │                            │  │
│  │     ╭──────────────╮       │  │
│  │     │              │       │  │
│  │     │    UNIT      │       │  │
│  │     │   SPRITE     │       │  │
│  │     │              │       │  │
│  │     ╰──────────────╯       │  │
│  │          [HP]  ← Badge     │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

Small UI Elements

Element	Size	Use
Unit badges/icons	16×16px	Small indicators
Status icons	24×24px	Sleep, buff indicators

Recommended Format

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)

Better suited for:

• UI elements (buttons, icons, menus)
• Resolution-independent assets
• Assets that need extreme scaling

Note

SVG requires rasterization for Phaser, adding complexity. Use PNG for game sprites.

Spritesheet Format

For efficient loading, combine related assets into spritesheets:

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

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

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

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

The game uses a faction system. Each faction has distinct unit variants:

Alliance

Unit	Symbol	Role	Cost
Militia	M	Infantry	150
Battle Tank	B	Armor	300
Howitzer	H	Ranged (2-4 range)	300

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)

Unit	Symbol	Role	Cost
Infantry	I	Infantry	150
Vehicle	V	Armor	400

Asset Checklist

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

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

Hex Tile Tips

1. Fill the bounding box — the hex shape touches all four edges of the 64×64 canvas
2. Only corners are transparent — small triangular areas at the four corners outside the hex vertices
3. Consistent lighting — pick a light source direction and stick with it
4. Readable at zoom — ensure terrain is identifiable at 0.5× zoom (the minimum level)
5. Overlay height — for tiles needing perspective (mountains, buildings), extend 16px above into a 64×80 canvas

Unit Sprite Tips

1. Clear silhouettes — units should be instantly recognizable
2. Distinct by type — each unit role (Infantry, Armor, Ranged) should be obvious at a glance
3. Color-friendly — design works with different player color tints (8 colors)
4. Facing direction — consider creating multiple angles for movement

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.