Radio Check - Visual Assets Guide¶

This document outlines all visual assets needed for the gamification expansion. Currently, the app uses emoji placeholders that should be replaced with custom artwork.

Asset Specifications¶

General Guidelines¶

Format: PNG with transparency or SVG for UI elements
Resolution: Provide @1x, @2x, @3x for iOS / mdpi, hdpi, xhdpi, xxhdpi for Android
Style: Military-inspired but friendly/approachable, not combat-oriented
Colors: Match the app's dark theme (navy background, gold accents)

Dog Assets¶

Dog Sprites (by breed)¶

Each breed needs a sprite sheet or individual frames for different states.

Breed	File Prefix	Emoji Placeholder
German Shepherd	`dog_shepherd_`	🐕
Labrador	`dog_labrador_`	🦮
Husky	`dog_husky_`	🐺
Bulldog	`dog_bulldog_`	🐶
Beagle	`dog_beagle_`	🐕‍🦺
Corgi	`dog_corgi_`	🦊

Animation States (per breed)¶

Each breed needs these animation states:

State	Description	Frames	Duration
`idle`	Gentle breathing, standing	3-4	2s loop
`happy`	Wagging tail, jumping	4-5	1s
`sad`	Droopy ears, slow movement	3	1.5s loop
`eating`	Chomping motion	5	1.5s
`traveling`	Walking/running	4	300ms loop
`arriving`	Landing/stopping	2	500ms
`waving`	Paw wave greeting	4	1.5s
`sitting`	Sit transition	2	500ms
`sleeping`	Breathing while lying	3	3s loop

File naming convention: {breed}_{state}_{frame}.png Example: shepherd_happy_1.png, shepherd_happy_2.png, etc.

Dog Gear Assets¶

Collars¶

Asset Key	Name	Rarity
`collar_basic`	Basic Collar	Common
`collar_tactical`	Tactical Collar	Uncommon
`collar_golden`	Golden Collar	Rare
`collar_command`	Command Collar	Epic

Vests¶

Asset Key	Name	Rarity
`vest_basic`	Basic Vest	Common
`vest_tactical`	Tactical Vest	Uncommon
`vest_medic`	Medic Vest	Rare
`vest_officer`	Officer Vest	Epic

Hats¶

Asset Key	Name	Rarity
`hat_patrol`	Patrol Cap	Common
`hat_beret`	Beret	Uncommon
`hat_aviator`	Aviator Goggles	Rare
`hat_general`	General Cap	Legendary

Accessories¶

Asset Key	Name	Rarity
`acc_dogtags`	Dog Tags	Common
`acc_medal`	Medal of Honor	Epic
`acc_wings`	Wings Badge	Rare
`acc_ribbon`	Command Ribbon	Legendary

Note: Gear should be designed as overlays that can be composited on top of dog sprites.

Kennel Assets¶

Kennel Themes¶

Each theme needs: - Background image (full scene) - Interior elements (optional separate layers for parallax) - Day/night variants (optional)

Theme	Asset Key	Description
Basic	`kennel_basic`	Simple wooden doghouse
Barracks	`kennel_barracks`	Military barracks style
Cabin	`kennel_cabin`	Rustic log cabin
Tactical	`kennel_tactical`	High-tech command center
Luxury	`kennel_luxury`	Premium mansion-style
Beach	`kennel_beach`	Coastal cabana

Dimensions: 375x300px @1x (maintain aspect ratio for larger sizes)

UI Assets¶

Military Figure Sprites¶

The SQUAD roster and ME > Identity military figure picker should use transparent WebP/PNG toy-soldier sprites, not shape-drawn placeholders.

Directory: assets/figures/

Format: - Preferred: WebP with alpha (.webp) - Acceptable: PNG with alpha (.png) - Transparent background - Square canvas, centered full-body toy soldier - Recommended source size: 512x512 - Minimum usable size: 256x256 - Style: monochrome plastic toy soldier figurines with a base/stand, like classic green army men

Color variants: - olive - navy - tan - charcoal

MOS / figure type variants: | Type key | Display label | Visual pose | |----------|---------------|-------------| | rifleman | Rifleman | Standing or kneeling with rifle | | squad_leader | Squad Leader | Saluting or command pose | | radio_operator | Radio Operator | Radio pack / handset / antenna | | corpsman | Corpsman | Medic bag or cross marker | | machine_gunner | Machine Gunner | Heavy weapon pose | | grenadier | Grenadier | Launcher / grenade pose | | scout | Scout | Low / recon pose | | engineer | Engineer | Tool / demolition kit | | pilot | Pilot/Crew | Goggles or flight crew pose |

File naming convention: {type}_{color}.webp

Examples: - rifleman_olive.webp - squad_leader_olive.webp - radio_operator_navy.webp - corpsman_tan.webp - pilot_charcoal.webp

For a complete set, provide 9 types x 4 colors = 36 sprite files.

Code registry: After files are added, wire them in lib/militaryFigureSprites.ts using static require() calls so Metro includes them in the iOS/Android bundle.

Example:

export const MILITARY_FIGURE_SPRITES = {
  rifleman_olive: require('../assets/figures/rifleman_olive.webp'),
  squad_leader_olive: require('../assets/figures/squad_leader_olive.webp'),
};

Military Branch Icons¶

Branch	Asset Key	Color
Army	`branch_army`	#4B5320 (OD Green)
Navy	`branch_navy`	#000080 (Navy Blue)
Air Force	`branch_air_force`	#00308F (AF Blue)
Marines	`branch_marines`	#7C0A02 (Marine Red)
Coast Guard	`branch_coast_guard`	#E35205 (CG Orange)
Space Force	`branch_space_force`	#1C1C1C (Space Black)

Size: 32x32px @1x

Rank Badges¶

Update existing rank badges with more military flair: - Boot (E-1 style) - Fireteam (E-3 style) - Squad Lead (E-5 style) - Sergeant (E-7 style) - Warrant (W-2 style) - Chief (E-9 style)

Currency Icons¶

Currency	Asset Key	Description
XP	`icon_xp`	Star or chevron
RC Points	`icon_rc`	Diamond or coin

Challenge Icons¶

Goal Type	Asset Key
check_ins	`challenge_checkin`
responses	`challenge_response`
streak	`challenge_streak`
first_responder	`challenge_firstresponder`

Rarity Frames¶

Frame/border styles for different item rarities: - Common (gray) - Uncommon (green) - Rare (blue) - Epic (purple) - Legendary (gold/orange gradient)

Animation Assets (Lottie/Rive)¶

For smooth animations, consider using Lottie or Rive:

Recommended Lottie Animations¶

dog_travel.json - Dog running animation for check-in visits
confetti.json - Celebration effect for completions
xp_gain.json - XP earning effect
level_up.json - Level up celebration
heart_burst.json - Happy dog effect

Rive Alternatives¶

Rive allows more interactive animations with state machines: - Dog character with all emotion states - Interactive kennel scene - Gear equipping preview

Asset Loading Strategy¶

Lazy Loading¶

Large assets (kennels, animations) should be lazy loaded:

// Example lazy loading for kennel backgrounds
const kennelImages = {
  basic: require('./assets/kennels/basic.png'),
  barracks: () => import('./assets/kennels/barracks.png'),
  cabin: () => import('./assets/kennels/cabin.png'),
  // etc.
};

Sprite Sheets¶

For dog animations, use sprite sheets with metadata:

{
  "frames": {
    "shepherd_idle_1": { "frame": { "x": 0, "y": 0, "w": 64, "h": 64 } },
    "shepherd_idle_2": { "frame": { "x": 64, "y": 0, "w": 64, "h": 64 } }
  },
  "meta": {
    "image": "shepherd_sprites.png",
    "size": { "w": 512, "h": 512 }
  }
}

Placeholder Emoji Mapping¶

Current emoji placeholders in the codebase:

Use Case	Emoji	Replace With
Dogs	🐕 🦮 🐺 🐶 🐕‍🦺 🦊	Breed sprites
Kennels	🏠 🏗️ 🏡 🎯 🏰 🏖️	Theme backgrounds
Collars	📿 ⚙️ 👑 🎖️	Gear overlays
Vests	👕 🦺 🏥	Gear overlays
Hats	🧢 🪖 🥽 👨‍✈️	Gear overlays
Effects	❤️ 💕 ✨ ⭐ 💤	Particle animations
Branches	🪖 ⚓ ✈️ 🦅 ⛵ 🚀	Branch icons

Implementation Notes¶

Adding Custom Assets¶

Place assets in /assets/images/ directory
Update the emoji mapping functions in:
/constants/dogs.ts
/components/AnimatedDog.tsx
/app/(app)/shop.tsx
/app/(app)/dog/customize.tsx
For Lottie animations:
```
npm install lottie-react-native
```
For Rive animations:
```
npm install rive-react-native
```

Asset Optimization¶

Before adding to the app: 1. Optimize PNGs with tools like TinyPNG or ImageOptim 2. Use WebP format where supported 3. Consider using vector graphics (SVG) for UI elements 4. Compress Lottie JSON files

Asset Creation Resources¶

Design Tools¶

Figma (UI elements, icons)
Procreate/Photoshop (character sprites)
After Effects + Bodymovin (Lottie export)
Rive (interactive animations)

Asset Sources (ensure licensing)¶

LottieFiles.com (free Lottie animations)
Kenney.nl (game assets)
OpenGameArt.org (sprites)

Style References¶

Friendly military mascots (like military working dog programs)
Casual mobile games with pet mechanics
Tamagotchi-style pixel art (if going retro)

Future Enhancements¶

Phase 2 Assets (Future)¶

Custom dog name tags (personalized)
Unit insignia creator
Seasonal gear (holiday themes)
Achievement badges gallery
Battle damage effects (for escalated check-ins)
Weather effects for kennels