Spaces:

Luigi
/

rts-commander

Sleeping

App Files Files Community

rts-commander / docs /UNIT_VISUAL_SHAPES.md

Luigi

deploy(web): full clean snapshot with app code and assets

12d64f8 about 2 months ago

preview code

raw

history blame

9.72 kB

🎨 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()`

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

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 :

Test à 100% zoom
- Toutes les formes doivent être clairement distinctes
- Détails (canon, rotors, cargo) visibles
Test à 50% zoom (minimap)
- Silhouettes reconnaissables
- Couleurs joueur/ennemi claires
Test avec 50+ unités
- Pas de confusion visuelle
- Performance stable (60 FPS)

🎨 PALETTE DE COULEURS COMPLÈTE

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

Infantry → Petit carré
Tank → Cercle + canon
Harvester → Triangle + cargo indicator
Helicopter → Losange + rotors
Artillery → Pentagone + canon long
Couleurs joueur/ennemi
Barres de santé colorées
Indicateur cargo Harvester
Formes évolutives (tailles)
Performance optimisée

🚀 PROCHAINES AMÉLIORATIONS POSSIBLES

Rotation des unités
- Orienter selon direction de déplacement
- Canvas rotate() avant dessin
Animations
- Rotors d'hélicoptère qui tournent
- Canon qui recule au tir
- Harvester qui "creuse"
Effets visuels
- Ombre portée
- Outline au survol
- Particules au mouvement
É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)