darklithium
c4e7d4bd55
- Settings.qml mit Lautstärke-Slidern für Musik und Knack-Geräusch - Spruchlisten-Auswahl (classic, farmer_wisdom, unfortune) - StackLayout für Navigation zwischen Hauptseite und Einstellungen - Python: load_setting/save_setting für generische Einstellungen - Python: Volume-Einstellungen und Spruchlisten-Verwaltung - ASSET_REQUIREMENTS.md für Grafik-Spezifikationen - JSON-Dateien: classic.json, farmer_wisdom.json, unfortune.json Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
144 lines
4.3 KiB
Markdown
144 lines
4.3 KiB
Markdown
# 📁 FortuneCookie - Asset Anforderungen
|
||
|
||
**Version:** 1.0.1
|
||
**Datum:** 02.06.2026
|
||
**Zweck:** Spezifikationen für Grafik-Assets (Hintergründe, Logos, Icons)
|
||
|
||
---
|
||
|
||
## 🎨 Allgemeine Anforderungen
|
||
|
||
### Dateiformate
|
||
| Asset-Typ | Empfohlen | Alternative | Grund |
|
||
|-----------|-----------|-------------|-------|
|
||
| Hintergründe | `.png` | `.jpg` | Transparenz möglich, gute Qualität |
|
||
| Logos | `.png` | `.svg` | Transparenz, scharfe Kanten |
|
||
| Icons | `.png` | - | Konsistenz mit bestehenden Assets |
|
||
|
||
### Dateinamen-Konventionen
|
||
- **Nur Kleinbuchstaben** (z. B. `background_70s.png`, nicht `Background_70s.PNG`)
|
||
- **Bindestriche statt Leerzeichen** (z. B. `seventies-style.png`, nicht `seventies style.png`)
|
||
- **Keine Umlaute/Sonderzeichen** (z. B. `esoteric.png`, nicht `esoterisch.png`)
|
||
- **Keine Versionen in Dateinamen** (z. B. `logo.png`, nicht `logo_v2_final.png`)
|
||
|
||
---
|
||
|
||
## 📏 Größen & Auflösungen
|
||
|
||
### Hintergründe
|
||
- **Abmessungen:** **1080 × 1920 Pixel** (Full HD, 16:9)
|
||
- **QML-Einheit:** 45 GU (Breite) × 75 GU (Höhe) = 1080×1920 px
|
||
- **Dateigröße:** **Max. 500 KB pro Bild**
|
||
- **Farbraum:** RGB
|
||
- **Transparenz:** Optional (PNG unterstützt Alpha-Kanal)
|
||
|
||
**Benötigte Varianten:**
|
||
```
|
||
assets/backgrounds/
|
||
├── 70s.png # 70er-Jahre Stil (Disco, Retro)
|
||
├── esoteric.png # Esoterisch (Mystik, Tarot, spirituell)
|
||
└── heavenly.png # Himmelisch (Wolken, Engel, Licht)
|
||
```
|
||
|
||
### Logos
|
||
- **Haupt-Logo (Startseite):** **240 × 240 Pixel** (ca. 30 GU × 30 GU)
|
||
- **Button-Icon (Musik):** **80 × 80 Pixel** (ca. 10 GU × 10 GU)
|
||
- **Dateigröße:** Max. 200 KB pro Logo
|
||
- **Transparenz:** **Pflicht** (PNG mit Alpha-Kanal)
|
||
- **Farbraum:** RGB
|
||
|
||
**Benötigte Varianten:**
|
||
```
|
||
assets/logos/
|
||
├── default.png # Standard Logo (Glückskeks)
|
||
├── 70s.png # 70er-Jahre Stil (passend zu Hintergrund)
|
||
├── esoteric.png # Esoterisch (passend zu Hintergrund)
|
||
├── heavenly.png # Himmelisch (passend zu Hintergrund)
|
||
└── unfortune.png # Gothic/Dark (Totenköpfe, Lilafarben, Blitze)
|
||
```
|
||
|
||
### Icons
|
||
- **Musik-Button:** Emoji (🎵/🔇) oder PNG (80×80 px)
|
||
- **Dateigröße:** Max. 50 KB
|
||
- **Transparenz:** Pflicht
|
||
|
||
---
|
||
|
||
## 📂 Verzeichnis-Struktur
|
||
|
||
```
|
||
fortunecookie-neu/
|
||
└── testing/
|
||
└── assets/
|
||
│
|
||
├── ASSET_REQUIREMENTS.md # ← Diese Datei
|
||
│
|
||
├── backgrounds/ # Hintergrundbilder (Full HD)
|
||
│ ├── 70s.png
|
||
│ ├── esoteric.png
|
||
│ └── heavenly.png
|
||
│
|
||
├── logos/ # Logos (240×240 px, transparent)
|
||
│ ├── default.png
|
||
│ ├── 70s.png
|
||
│ ├── esoteric.png
|
||
│ ├── heavenly.png
|
||
│ └── unfortune.png
|
||
│
|
||
└── sounds/ # Bestehend
|
||
├── chinese_music.mp3
|
||
└── cookie_crack.mp3
|
||
```
|
||
|
||
---
|
||
|
||
## ⚠️ WICHTIGE HINWEISE für Ubuntu Touch
|
||
|
||
### 1. QML-Kompatibilität
|
||
- **SVG-Unterstützung:** Begrenzt in Lomiri/QML - **PNG bevorzugen**
|
||
- **Transparenz:** Funktioniert mit PNG (Alpha-Kanal)
|
||
- **Skalierung:** Bilder werden automatisch skaliert, aber native Auflösung empfohlen
|
||
|
||
### 2. QML-Integration
|
||
Hintergründe einbinden:
|
||
```qml
|
||
Image {
|
||
id: background
|
||
anchors.fill: parent
|
||
source: Qt.resolvedUrl("../assets/backgrounds/70s.png")
|
||
fillMode: Image.PreserveAspectCrop
|
||
}
|
||
```
|
||
|
||
Logos einbinden:
|
||
```qml
|
||
Image {
|
||
id: logo
|
||
width: units.gu(30)
|
||
height: units.gu(30)
|
||
source: Qt.resolvedUrl("../assets/logos/70s.png")
|
||
fillMode: Image.PreserveAspectFit
|
||
}
|
||
```
|
||
|
||
### 3. Performance
|
||
- **Maximale Dateigröße:** 1 MB pro Asset (Click-App Limit)
|
||
- **Optimierung:** Bilder vor dem Einbinden mit `optipng` oder `pngquant` komprimieren
|
||
- **Anzahl:** Max. 20-30 Assets pro App (für schnelles Laden)
|
||
|
||
---
|
||
|
||
## 🎯 Nächste Schritte (Phase 1)
|
||
|
||
1. **Erstelle die Bilder** according to den Spezifikationen
|
||
2. **Speichere sie** im richtigen Verzeichnis (`assets/backgrounds/` und `assets/logos/`)
|
||
3. **Benenne sie** nach der Konvention
|
||
4. **Informiere mich** - ich baue die Auswahl-Funktionalität in die Einstellungen ein
|
||
|
||
---
|
||
|
||
## 📞 Support
|
||
|
||
Fragen zu den Anforderungen?
|
||
→ einfach fragen oder in den entsprechenden Kanälen nachfragen.
|