Ruffleshop UltraLow – Entwicklerdokumentation
Der UltraLow-Modus ist ein automatischer Leistungsmodus des Ruffleshop-Systems, der Geräte mit extrem schwacher Grafikleistung erkennt und auf eine speziell optimierte Shop-Version umschaltet.
Der gesamte Autostart-Code befindet sich direkt in jeder Startdatei — es gibt keine separate Autostart.js mehr.
In folgenden Mustershops ist die UltraLow-Version bereits verbaut worden und zugleich auch in der Firmware Downloadbar. (Es sind beide Editionen (Edition Classic sowie Webdesigner Edition in diesen Farben in Germany Gold und Himmelblau mit UltraLow-Version ausgerüstet. Hier zeigen wir die Webdesigner Edition in Germany Gold und Himmelblau mit dem Technology Modus).
Art-Nr. 055 (Package with 2 Kernels)
USD USD Art-Nr. 055 USD Germany Gold
EUR EUR Art-Nr. 055 EUR Germany Gold
CHF CHF Art-Nr. 055 CHF Germany Gold
Art-Nr. 065 (Package with 2 Kernels)
USD USD Art-Nr. 065 USD Himmelblau
EUR EUR Art-Nr. 065 EUR Himmelblau
CHF CHF Art-Nr. 065 CHF Himmelblau
1) Aufbau jeder Startdatei
Jede Startdatei enthält:
• den vollständigen Autostart-Code
• die GPU-Erkennung
• die automatische Weiterleitung (nur in normalen Startdateien)
• die Engine-Einstellungen
• den Kernel-Start
Die UltraLow-Version ist eine Duplikation der normalen Startdatei — aber mit zwei Änderungen:
1. Punkt 3 (Weiterleitung) wird entfernt
2. Ruffle-Qualität wird auf „low“ gesetzt
2) Wie erkennt der Ruffleshop ein UltraLow-Gerät?
Beim Laden der Seite führt der Autostart-Code einen Mini-Benchmark aus:
• Canvas-Test
• Renderzeit messen
• GPU-Klasse bestimmen
Wenn die Renderzeit über 0.30 ms liegt, wird das Gerät als:
ultra-low-end
klassifiziert.
3) GPU-Klassifizierung
function classifyGPU(avgFrame) {
if (avgFrame < 0.12) return "high-end";
if (avgFrame < 0.20) return "mid-range";
if (avgFrame < 0.30) return "low-end";
return "ultra-low-end";
}
Damit sind vier Leistungsstufen definiert:
• high-end
• mid-range
• low-end
• ultra-low-end
4) Wie wird die UltraLow-Version geladen?
In normalen Startdateien steht:
if (mode === "ultra-low-end") {
self.location.href = "ScarlettWebdesignerUltraLow.php";
return;
}
Das bedeutet:
• Der normale Ruffleshop wird nicht gestartet
• Stattdessen wird die UltraLow-Version geladen
• Der Webdesigner muss nichts tun
• Die Qualität des Ruffle-Players wird automatisch auf “low” gesetzt
5) Wichtiger Hinweis für Entwickler
In der UltraLow-Startdatei selbst muss Punkt 3 entfernt werden:
// 3) HTML-Version starten (sofort, ohne Kernel)
// Dieser Block wird in der UltraLow-Version GELÖSCHT
Warum?
• Die UltraLow-Version ist bereits die richtige Datei
• Sie darf sich nicht erneut weiterleiten
• Sonst entsteht eine Endlosschleife
6) Engine-Optimierung im UltraLow-Modus
Die Engine-Settings für UltraLow:
resolution: 0.60,
shadows: "off",
blur: false,
particles: "none",
shaderPasses: 1,
animations: "minimal"
Diese Einstellungen reduzieren:
• Renderauflösung
• Schattenberechnung
• Shader-Komplexität
• Partikel-Effekte
• Animationslast
Das ist die Engine-Ebene.
7) Rendering-Optimierung im UltraLow-Modus
Zusätzlich wird die Rendering-Qualität auf „low“ gesetzt:
Classic Edition
quality="low"
Webdesigner Edition
quality: "low"
Effekte:
• grobe Schrift
• kantige Linien
• vereinfachte Vektoren
• extrem schnelle Darstellung
Das ist die Rendering-Ebene.
8) Der Doppelschlag
UltraLow kombiniert:
• Engine-Low (GPU-Storm-Optimierung)
• Rendering-Low (Flash/Ruffle-Qualität)
Dieser Doppelschlag sorgt dafür, dass selbst sehr alte Android-Geräte den Shop wieder bewältigen können.
9) Vollständiger Autostart-Code (direkt in jeder Startdatei)
// ===============================
// RUFFLESHOP AUTO GPU START
// ===============================
(async function RuffleshopAutoStart() {
// 1) Mini-Benchmark
const avgFrame = await ruffleshopMiniBenchmark();
// 2) GPU-Klasse bestimmen
const mode = classifyGPU(avgFrame);
// 3) HTML-Version starten (sofort, ohne Kernel)
if (mode === "ultra-low-end") {
self.location.href = "ScarlettWebdesignerUltraLow.php";
return;
// WICHTIG: Kernel darf NICHT mehr starten
}
// 4) Modus anwenden
applyRuffleshopMode(mode);
// 5) Log für Entwickler
console.log("Ruffleshop GPU-Modus:", mode, "FrameTime:", avgFrame.toFixed(2), "ms");
// 6) Kernel starten
RuffleshopKernel.init();
})();
const RuffleshopKernel = {
init() {
const cfg = window.RUFFLESHOP_SETTINGS;
// Auflösung setzen
RuffleshopDisplay.setResolution(cfg.resolution);
// Shader konfigurieren
RuffleshopShaders.setPasses(cfg.shaderPasses);
// Schatten
RuffleshopEffects.setShadows(cfg.shadows);
// Blur
RuffleshopEffects.setBlur(cfg.blur);
// Partikel
RuffleshopParticles.setLevel(cfg.particles);
// Batching
if (cfg.batching) {
RuffleshopGPU.enableBatching();
}
// Animationen
RuffleshopAnimations.setMode(cfg.animations);
// UI laden
RuffleshopUI.init();
// App starten
RuffleshopApp.start();
}
};
async function ruffleshopMiniBenchmark() {
const frames = [];
const start = performance.now();
while (performance.now() - start < 100) {
const frameStart = performance.now();
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 50, 50);
frames.push(performance.now() - frameStart);
}
return frames.reduce((a, b) => a + b, 0) / frames.length;
}
function classifyGPU(avgFrame) {
if (avgFrame < 0.12) return "high-end";
if (avgFrame < 0.20) return "mid-range";
if (avgFrame < 0.30) return "low-end";
return "ultra-low-end";
}
function applyRuffleshopMode(mode) {
switch (mode) {
case "high-end":
window.RUFFLESHOP_SETTINGS = {
resolution: 1.0,
shadows: "dynamic",
blur: true,
particles: "high",
shaderPasses: 2
};
break;
case "mid-range":
window.RUFFLESHOP_SETTINGS = {
resolution: 0.85,
shadows: "static",
blur: "reduced",
particles: "medium",
shaderPasses: 1
};
break;
case "low-end":
window.RUFFLESHOP_SETTINGS = {
resolution: 0.70,
shadows: "off",
blur: false,
particles: "low",
shaderPasses: 1,
batching: true
};
break;
case "ultra-low-end":
window.RUFFLESHOP_SETTINGS = {
resolution: 0.60,
shadows: "off",
blur: false,
particles: "none",
shaderPasses: 1,
animations: "minimal"
};
break;
}
}
//=========================================================
Die UltraLow-Version enthält denselben Code — aber ohne Punkt 3. Und mit Quality = "low".
10) Fazit
Der UltraLow-Modus ist die technisch sauberste Lösung, um den Ruffleshop auf extrem schwacher Hardware nutzbar zu machen. Durch die Kombination aus Engine-Optimierung und Rendering-Optimierung entsteht ein Modus, der selbst alte Android-Geräte wieder voll funktionsfähig macht.