← Back to game

Sprite Sheet Specification

Designer reference for atsignhandle.xyz -- all sprite positions, dimensions, and game usage

Sprite Region Map (1x)

All 1x sheets are 1233 x 68 px. Regions below are color-coded. The 2x sheet (UFO only) is 2441 x 130 px with doubled coordinates.

sprite sheet

Region Reference Table

Extracted Sprites

Each sprite shown at 3x zoom. Checkerboard background shows transparency.

UI Elements

Environment

Obstacles (Ground)

Flying Obstacle

This region changes per theme: pterodactyls / UFOs / birds

Character

Banny (banana) for UFO/Pterodactyl/Birds themes; Steamboat Willie for Legal theme

Ground / Horizon

Theme Comparison

Only two sprite regions differ between themes: the flying obstacle and the character. All other regions (restart, cloud, ground obstacles, moon, stars, text, horizon) are shared.

Character Frame Layout

The TREX region contains all character animation frames as a horizontal strip. Frame x-offsets are relative to the TREX sprite position (848, 2) in 1x.

Design Guidelines

Sheet dimensions: 1x = 1233 x 68 px; 2x = 2441 x 130 px (all positions and sizes doubled).

Pixel alignment: All sprites must be pixel-aligned. No anti-aliasing at 1x. The game uses image-rendering: pixelated.

Transparency: Sprites use transparent backgrounds. The sheet background should be fully transparent (PNG-24 with alpha).

Character width consistency: Standing frames are 44px wide. Ducking frames are 59px wide. These values are hardcoded in Trex.config.

Collision boxes: Collision detection uses predefined boxes, not sprite edges. Changing sprite art does not change hitboxes unless Trex.collisionBoxes and Obstacle.types[].collisionBoxes are also updated.

Adding a new theme: Duplicate an existing 1x sheet, replace only the TREX region (x:848) and/or PTERODACTYL region (x:134). Keep all other regions identical. Register in THEME_SPRITES in index.html.

Steamboat Willie notes: The Willie character is wider than Banny in some frames, which can cause visual clipping at the 44px boundary. Consider adjusting frame positioning for better centering.