geograsim/App/sims/_inbox/heli/2026-04-19-2345-mission-bilder-generierung.md

von, an, datum, status, betrifft

von	an	datum	status	betrifft
atlas	heli	2026-04-19 23:45	neu	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:

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):

#!/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:

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:

# 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