---
von: atlas
an: heli
datum: 2026-04-19 23:45
status: neu
betrifft: Mission-Bilder generieren — Anleitung + Stil-Konventionen
---

# Mission-Bilder pro Einsatz — DALL-E-Pipeline

Thomas hat gesehen, dass alle Einsatz-Karten das gleiche Alpen-Bild
zeigen. Richtig: aktuell gibt es nur **drei Bilder**, und die sind
identisch. Er will pro Einsatz ein eigenes Bild, passend zu Art und
Einsatzort.

Dazu zwei Sachen in dieser Nachricht:

1. Wie du die Bilder generierst (DALL-E-Pipeline)
2. Wie die Hubschrauber-Zuweisung pro Mission geregelt ist (Thomas
   wollte das klarstellen)

---

## 1. Bild-Generierung

### Stil (streng einhalten — Konsistenz zwischen allen Modulen)

**„Flat Scandinavian Alpine"** — gleiche Stilrichtung wie die
Glossar-Repräsentationsbilder und `App/assets/img/card-heli.png`:

- Farbpalette:
  - Dunkelgrün: `#1f4b37` (Forest)
  - Mittelgrün: `#4a7c4e` (Sage)
  - Beige/Sand: `#e8e4d8`, Akzente `#e8c547` (Gelb/Senf)
  - Weiß für Schnee/Highlights
  - Türkis `#5a9e9e` für Wasser
- **Flat illustration, keine Fotorealismus**, klare Konturen,
  stilisierte Berge
- **Runde Bildkomposition** mit dekorativem Hubschrauber im oberen
  Drittel (als grafisches Element, nicht fotorealistisch)
- **Kein Text**, keine Wasserzeichen, keine Logos
- Querformat 16:9

### Größe & Format

- **DALL-E 3**, Größe `1792x1024` (landscape)
- Nach Download: per `sips` oder `magick` auf `1024x576` verkleinern
  (kleinere Dateigröße, iPad-freundlich)
- Format: PNG (Transparenz nicht nötig, aber PNG für Qualität)

### Ablageort

```
App/sims/heli/assets/missions/
├── m1.png   ← Skiunfall Sölden
├── m2.png   ← Verkehrsunfall A14
├── m3.png   ← Kletterunfall Brand
├── m4.png   ← Skiunfall Soelden-Berg
├── m5.png   ← Seerettung Bregenz
├── m6.png   ← Canyoning Mellau
├── m7.png   ← Wanderunfall Kufstein
├── m8.png   ← Medizinischer Notfall Gaschurn
├── m9.png   ← Lawinenunglück Mayrhofen
└── ...
```

**Dateiname = Mission-ID**, nicht `skiunfall_soelden.png` o.ä. — ID ist
stabiler, Titel ändert sich.

Im Code dann einfach:
```js
html += '<div class="mission-img"><img src="assets/missions/'+m.id+'.png"></div>';
```

### Prompt-Vorlage pro Mission

```
Flat Scandinavian alpine illustration, circular composition,
painted style with clean vector shapes, dark forest green and sage
green mountains, yellow-mustard sun accents, beige foreground.
Scene: {SPEZIFISCHE SZENE}.
Small rescue helicopter silhouette in upper third of image as
decorative element. No text, no watermark, no logos.
Style consistent with Scandinavian flat vector illustration.
Landscape format 16:9.
```

`{SPEZIFISCHE SZENE}` je nach Mission-Theme:

| Theme | Szenen-Baustein |
|-------|-----------------|
| `ski` | snowy ski slopes with ski tracks, ski lift in background, alpine village in valley |
| `traffic` | mountain highway with tunnels, cars visible as stylized shapes |
| `cliff` | steep rocky cliff face, climbing route visible, alpine meadow at base |
| `water` | alpine lake (Lake Constance / Bodensee), boats, shoreline with villages |
| `canyon` | narrow gorge with river, green cliffs, waterfall detail |
| `hike` | forested trails, hikers as small figures, mountain summit |
| `medical` | alpine village in valley, rooftops, small church tower, landing pad |
| `avalanche` | snowy ridge with visible avalanche debris, winter atmosphere |

### Region berücksichtigen

Pflichtangabe im Prompt:
- **Vorarlberg**: erwähne „Rhätikon mountains, Lake Constance in distance"
- **Tirol**: erwähne „Karwendel or Zillertal alps, Inn valley"

### Pipeline-Skript (Vanilla, wie bei Glossar)

Leg dir `App/sims/heli/scripts/generate-mission-images.sh` an (NEUE
Unterordner-Struktur für Heli-eigene Dev-Scripts, damit sie nicht mit
`App/scripts/` kollidieren):

```bash
#!/usr/bin/env bash
set -e
: "${OPENAI_API_KEY:?Env-Variable OPENAI_API_KEY muss gesetzt sein}"
cd "$(dirname "$0")/../assets/missions"

generate() {
  local id="$1"
  local prompt="$2"
  if [ -f "${id}.png" ]; then
    echo "✓ ${id}.png schon da, überspringe"
    return
  fi
  echo "→ ${id}: generiere..."
  resp=$(curl -s https://api.openai.com/v1/images/generations \
    -H "Authorization: Bearer $OPENAI_API_KEY" \
    -H "Content-Type: application/json" \
    -d "$(jq -n --arg p "$prompt" '{model:"dall-e-3",prompt:$p,n:1,size:"1792x1024",quality:"standard"}')")
  url=$(echo "$resp" | jq -r '.data[0].url // empty')
  if [ -z "$url" ]; then
    echo "✗ ${id}: Fehler — $(echo "$resp" | jq -r '.error.message // .')"
    return 1
  fi
  curl -s "$url" -o "${id}.png"
  echo "✓ ${id}.png gespeichert"
  sleep 2
}

PROMPT_BASE="Flat Scandinavian alpine illustration, circular composition, painted style with clean vector shapes, dark forest green and sage green mountains, yellow-mustard sun accents, beige foreground. Small rescue helicopter silhouette in upper third. No text, no watermark. Landscape 16:9."

generate "m1" "$PROMPT_BASE Scene: snowy ski slopes in Sölden area, Tyrolean Alps, Ötztal valley, ski tracks visible, stylized ski lift, medical evacuation context."
generate "m2" "$PROMPT_BASE Scene: Vorarlberg A14 highway, Rheintal valley, mountain tunnels, vehicles as stylized shapes, Rhätikon mountains in background."
generate "m3" "$PROMPT_BASE Scene: steep rocky cliff in Brandnertal, Vorarlberg, climbing route visible, alpine meadow at base, Rhätikon mountain peaks."
# ... weitere Missionen analog
```

Danach:
```bash
cd App/sims/heli/scripts
chmod +x generate-mission-images.sh
OPENAI_API_KEY="sk-..." ./generate-mission-images.sh
```

Thomas hat den API-Key. Frage ihn, wenn du soweit bist — er setzt die
Env-Variable, oder schickt dir den Key für die Shell-Session.

### Nach-Verarbeitung (Größe reduzieren)

DALL-E liefert 1792×1024, das ist für unsere Zwecke zu groß.
Verkleinere nach Download:

```bash
# macOS/Linux mit ImageMagick
for f in *.png; do
  magick "$f" -resize 1024x576 -strip "$f"
done

# Alternative mit sips (macOS)
for f in *.png; do
  sips -Z 1024 "$f"
done
```

Zielgröße pro Bild: **unter 200 KB**.

### Freigabe-Prozess

1. Generiere 2-3 Bilder als Proof-of-Concept
2. Baue sie temporär in eine Mission-Card ein und öffne im Browser
3. Vergleiche mit `App/assets/img/card-heli.png` (Referenz)
4. Schicke Thomas einen Browser-Link zur Ansicht — er gibt Stil-Freigabe
5. **Dann erst** generierst du die restlichen Missionen im Batch

Nicht 20 Bilder auf einmal generieren ohne Stil-Check.

---

## 2. Hubschrauber-Zuweisung — Thomas' Klarstellung

> „Die Hubschrauber sind übrigens nicht frei, so wie beim Start jetzt,
> sondern die werden je nach Mission gewählt."

**Soll-Verhalten:**
- Jede Mission hat einen **fest zugewiesenen Hubschrauber** (abhängig
  von Einsatzort und Art)
- Schüler*in wählt nicht mehr frei
- Der Hubschrauber wird in der Mission-Card angezeigt (ÖAMTC Christophorus 1
  Tirol, ÖAMTC Christophorus 8 Vorarlberg etc. — siehe aktuelle Daten)

### Zuordnung aus den bestehenden Daten

Aus `game.html` Zeile ~225ff. siehst du bei jeder Mission das Feld
`base:` (z.B. `base:'hohenems'`, `base:'innsbruck'`). Daraus lässt sich
der Hubschrauber ableiten:

| Base | Hubschrauber | Modell |
|------|--------------|--------|
| `nenzing` | ÖAMTC Christophorus 8 | EC135 |
| `hohenems` | ARA Flugrettung RK-1 | H145 |
| `innsbruck` | ÖAMTC Christophorus 1 | AW169 |
| `zams` | ÖAMTC Christophorus 5 | EC135 |
| `kitzbuehel` | ÖAMTC Martin 3 | EC135 |
| `lienz` | ÖAMTC Christophorus 7 | EC135 |

(Falls die Zuordnung anders sein soll: Thomas hat Domänenwissen,
frag nach.)

### Technische Änderung

In `game.html` bei `phase-select` (Hubschrauber-Auswahl): 
- Vorher: Schüler*in sieht 4 Helis und wählt
- Nachher: Heli ist fix aus Mission, Phase „select" entfällt
  oder zeigt nur Info + Weiter-Button

Ob du die Auswahl-Phase komplett entfernst oder als „Briefing"-Bildschirm
umdeutest (Heli vorgestellt, Basis erklärt), ist dir überlassen — bitte
in `_status.md` dokumentieren.

---

## 3. Reihenfolge

1. Zuerst **2-3 Bilder generieren**, Stil-Freigabe von Thomas holen
2. Parallel: **Hubschrauber-Auswahl-Phase** umbauen (Fix-Zuweisung)
3. Dann: **restliche Mission-Bilder** im Batch generieren
4. Schließlich: **Mission-Card-Markup** anpassen, dass `assets/missions/<id>.png`
   statt Emoji/Hintergrund-Gradient geladen wird

## 4. Falls du Fragen hast

Atlas (ich) kann dir helfen bei:
- Stil-Entscheidungen (Farben, Komposition)
- DALL-E-API-Tricks (wir haben's schon 5× für Glossar gemacht)
- ImageMagick / Verkleinerungs-Kommandos
- CSS für Mission-Cards (Design-System-Klassen)

Schreib an `_inbox/zentrale/` mit konkreter Frage.

## Bestätigen

- status: gelesen
- Nach dem 1. Test-Bild: Freigabe-Anfrage an Thomas (direkt im Browser)
- Atlas wird durch die `_status.md`-Updates auf dem Laufenden gehalten