# 🎨 UNIT VISUAL SHAPES - Guide des formes d'unités **Date:** 3 Octobre 2025 **Fichier:** web/static/game.js (lignes 511-616) **Objectif:** Différencier visuellement chaque type d'unité --- ## 📐 FORMES DES UNITÉS ### 🟦 **Infantry (Infanterie)** ``` ┌────────┐ │ ▪️ │ Petit carré (0.8x size) │ 👤 │ Représente un soldat └────────┘ ``` - **Forme:** Petit carré (80% de la taille normale) - **Raison:** Simple et compact, comme un soldat vu de haut - **Code:** `fillRect` avec 0.8x size --- ### 🔵 **Tank (Char d'assaut)** ``` ▄▄▄ ╱ ╲ │ 🎯 │ Cercle + Canon rectangulaire │ │ Représente la tourelle vue de haut ╲___╱ ║ ║ Canon pointant vers le haut ``` - **Forme:** Cercle (tourelle) + Rectangle (canon) - **Raison:** Tourelle circulaire avec canon est iconique pour un tank - **Code:** `arc` (cercle 0.8x size) + `fillRect` (canon 0.3x0.12 size vers le haut) --- ### 🔺 **Harvester (Récolteur)** ``` 🔺 ╱ ╲ ╱ ╲ Triangle pointant vers le haut ╱ 💰 ╲ Avec indicateur de cargo doré ╱───────╲ ``` - **Forme:** Triangle équilatéral pointant vers le haut - **Raison:** Forme de pelle/foreuse pour véhicule minier - **Particularité:** - Cercle doré au centre si `cargo > 0` (porte des ressources) - Cercle devient plus gros si `cargo >= 180` (presque plein) - **Code:** Chemin avec 3 points + `arc` conditionnel pour cargo --- ### 💎 **Helicopter (Hélicoptère)** ``` ◆ ╱ ╲ ───◆─────◆─── Losange avec rotors ╲ ╱ Vue de dessus ◆ ``` - **Forme:** Losange (diamant) + Ligne horizontale (rotors) - **Raison:** Vue de dessus avec rotors visibles - **Code:** Chemin avec 4 points (losange) + ligne horizontale épaisse --- ### ⬠ **Artillery (Artillerie)** ``` ▲ ╱ ╲ ╱ ║ ╲ Pentagone + Canon long │ ║ │ Plateforme d'artillerie ╲ ╱ ╲_╱ ``` - **Forme:** Pentagone (5 côtés) + Rectangle vertical (canon long) - **Raison:** Plateforme stable avec canon de longue portée - **Code:** Chemin avec 5 points (rotation -90°) + `fillRect` (canon 0.2x1.5 size) --- ## 🎨 SYSTÈME DE COULEURS ### Joueur 0 (Allié) - **Couleur principale:** `#4A90E2` (Bleu) - **Utilisation:** Toutes les unités du joueur ### Joueur 1+ (Ennemi) - **Couleur principale:** `#E74C3C` (Rouge) - **Utilisation:** Toutes les unités ennemies ### Indicateurs spéciaux **Harvester Cargo:** - `cargo > 0` → Cercle orange `#FFA500` - `cargo >= 180` (90% plein) → Cercle doré `#FFD700` **Barre de santé:** - `health > 50%` → Vert `#2ECC71` - `health 25-50%` → Orange `#F39C12` - `health < 25%` → Rouge `#E74C3C` --- ## 📊 TAILLES RELATIVES ``` Base size = TILE_SIZE / 2 = 40 / 2 = 20px Infantry: 16px x 16px (0.8x size) Tank: 16px radius (0.8x size) + canon 6x24px Harvester: 32px base (1.6x size triangle) Helicopter: 40px diag (2x size diamond) Artillery: 20px radius (1x size pentagon) + canon 4x30px ``` --- ## 🔍 VISUALISATION COMPARATIVE ``` ┌─────────────────────────────────────────────────────────────────┐ │ VUE DE DESSUS (TOP-DOWN) │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ Infantry Tank Harvester Helicopter Artillery│ │ │ │ ┌──┐ ● ▲ ◆ ⬠ │ │ │ │ ╱│╲ ╱ ╲ ╱ ╲ ╱│╲ │ │ └──┘ │ ● │ ╱💰 ╲ ◆ ◆ │ │ │ │ │ │ │ │ └─────┘ ╲ ╱ │ ⬠ │ │ │ ║ ◆ │ │ │ │ │ ║ ╲│╱ │ │ │ │ Bleu = Joueur │ │ Rouge = Ennemi │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## 💻 CODE STRUCTURE ### Fonction principale: `drawUnits()` ```javascript drawUnits() { for (const [id, unit] of Object.entries(this.gameState.units)) { const color = unit.player_id === 0 ? BLUE : RED; const size = TILE_SIZE / 2; // 20px switch(unit.type) { case 'infantry': // Petit carré fillRect(x, y, size*0.8, size*0.8); case 'tank': // Cercle + canon arc(x, y, size*0.8); fillRect(canon); case 'harvester': // Triangle + cargo moveTo/lineTo (triangle); if (cargo > 0) arc(cargo_indicator); case 'helicopter': // Losange + rotors moveTo/lineTo (diamond); moveTo/lineTo (rotor_line); case 'artillery': // Pentagone + canon for (5 sides) moveTo/lineTo; fillRect(barrel); } drawHealthBar(unit); } } ``` --- ## 🎯 AVANTAGES DU SYSTÈME ### 1. **Identification rapide** - Chaque unité a une silhouette unique - Reconnaissance instantanée même à petite échelle - Pas de confusion entre types ### 2. **Clarté tactique** - Infantry (carré) = Unité de base - Tank (cercle) = Unité blindée - Harvester (triangle) = Unité économique - Helicopter (losange) = Unité aérienne - Artillery (pentagone) = Unité de support ### 3. **Information visuelle** - Harvester montre son cargo (cercle doré) - Barres de santé colorées selon état - Couleur joueur/ennemi claire ### 4. **Performance** - Formes simples (primitives Canvas) - Pas de sprites/images nécessaires - Rendu rapide même avec beaucoup d'unités --- ## 🎮 COMPARAISON AVEC RED ALERT ORIGINAL ### Red Alert (1996) - Sprites bitmap 2D pré-rendus - 8 directions de rotation - Animations frame-by-frame ### Notre version (2025) - Formes géométriques vectorielles - Rotation continue possible - Rendu procédural en temps réel - Style minimaliste moderne --- ## 🔧 PERSONNALISATION Pour modifier les formes, éditer `web/static/game.js` lignes 511-616 : ### Exemple: Changer la forme du Tank ```javascript case 'tank': // Version actuelle: Cercle + canon this.ctx.arc(x, y, size*0.8, 0, Math.PI*2); this.ctx.fillRect(x-size*0.15, y-size*1.2, size*0.3, size*1.2); // Variante: Carré arrondi + canon this.ctx.roundRect(x-size, y-size, size*2, size*2, size*0.3); this.ctx.fill(); this.ctx.fillRect(x-size*0.15, y-size*1.2, size*0.3, size*1.2); ``` --- ## 📊 STATISTIQUES VISUELLES | Type | Forme | Taille | Éléments additionnels | |------|-------|--------|----------------------| | **Infantry** | Carré | 16x16px | Aucun | | **Tank** | Cercle | Ø32px | Canon (6x24px) | | **Harvester** | Triangle | 32px base | Cargo indicator | | **Helicopter** | Losange | 40px diag | Ligne rotors | | **Artillery** | Pentagone | Ø40px | Canon long (4x30px) | --- ## 🧪 TEST DE LISIBILITÉ Pour vérifier la lisibilité des formes : 1. **Test à 100% zoom** - Toutes les formes doivent être clairement distinctes - Détails (canon, rotors, cargo) visibles 2. **Test à 50% zoom (minimap)** - Silhouettes reconnaissables - Couleurs joueur/ennemi claires 3. **Test avec 50+ unités** - Pas de confusion visuelle - Performance stable (60 FPS) --- ## 🎨 PALETTE DE COULEURS COMPLÈTE ```javascript PLAYER: #4A90E2 (Bleu vif) ENEMY: #E74C3C (Rouge vif) SELECTION: #00FF00 (Vert fluo) HEALTH_HI: #2ECC71 (Vert) HEALTH_MID: #F39C12 (Orange) HEALTH_LOW: #E74C3C (Rouge) CARGO_PART: #FFA500 (Orange) CARGO_FULL: #FFD700 (Or) ``` --- ## ✅ CHECKLIST D'IMPLÉMENTATION - [x] Infantry → Petit carré - [x] Tank → Cercle + canon - [x] Harvester → Triangle + cargo indicator - [x] Helicopter → Losange + rotors - [x] Artillery → Pentagone + canon long - [x] Couleurs joueur/ennemi - [x] Barres de santé colorées - [x] Indicateur cargo Harvester - [x] Formes évolutives (tailles) - [x] Performance optimisée --- ## 🚀 PROCHAINES AMÉLIORATIONS POSSIBLES 1. **Rotation des unités** - Orienter selon direction de déplacement - Canvas `rotate()` avant dessin 2. **Animations** - Rotors d'hélicoptère qui tournent - Canon qui recule au tir - Harvester qui "creuse" 3. **Effets visuels** - Ombre portée - Outline au survol - Particules au mouvement 4. **États visuels** - Attaque (flash rouge) - En production (aura bleue) - Endommagé (fumée) --- **Status:** ✅ IMPLÉMENTÉ ET FONCTIONNEL **Fichier:** web/static/game.js **Lignes:** 511-616 **Compatibilité:** Tous navigateurs modernes (Canvas 2D)