@jjlmoya/utils-games-development 1.64.0 → 1.65.0

package/src/tool/gameDeltaTimeFixedTimestepLab/game-delta-time-fixed-timestep-lab.css

@@ -0,0 +1,491 @@
+.game-loop-lab {
+  --n-ink: #19251f;
+  --n-muted: #52645a;
+  --n-paper: #f8f5ec;
+  --n-panel: #fffdf7;
+  --n-line: #d9dfd2;
+  --n-variable: #cc5c3e;
+  --n-fixed: #276c70;
+  --n-accent: #c58a32;
+  --n-success: #2f754d;
+  --n-warning: #9e4c26;
+  --n-primary: #276c70;
+
+  color: var(--n-ink);
+  background-color: var(--n-paper);
+  border: 1px solid var(--n-line);
+  border-radius: 1.25rem;
+  overflow: hidden;
+}
+
+.theme-dark .game-loop-lab {
+  --n-ink: #f2f0e7;
+  --n-muted: #b5c3b8;
+  --n-paper: #202622;
+  --n-panel: #29312b;
+  --n-line: #4a574d;
+  --n-variable: #f08a63;
+  --n-fixed: #78c8c0;
+  --n-accent: #e2b75d;
+  --n-success: #8ed39c;
+  --n-warning: #f4a274;
+  --n-primary: #78c8c0;
+}
+
+.gll-stage-heading p,
+.gll-timeline-heading p,
+.gll-model-note,
+.gll-privacy {
+  color: var(--n-muted);
+  line-height: 1.6;
+}
+
+.gll-kicker {
+  margin: 0 0 .35rem;
+  color: var(--n-accent);
+  font-size: .76rem;
+  font-weight: 800;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+
+.gll-shell {
+  display: grid;
+  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
+  gap: 1px;
+  background-color: var(--n-line);
+}
+
+.gll-controls,
+.gll-stage {
+  background-color: var(--n-panel);
+}
+
+.gll-controls {
+  display: flex;
+  flex-direction: column;
+  gap: .8rem;
+  padding: 1.35rem;
+}
+
+.gll-control-heading {
+  padding-bottom: .35rem;
+  border-bottom: 1px solid var(--n-line);
+}
+
+.gll-range-field,
+.gll-number-field {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: .45rem .65rem;
+}
+
+.gll-range-field span,
+.gll-number-field span {
+  font-size: .88rem;
+  font-weight: 700;
+}
+
+.gll-range-field output {
+  min-width: 4.7rem;
+  padding: .28rem .45rem;
+  border: 1px solid var(--n-line);
+  border-radius: .4rem;
+  color: var(--n-fixed);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.gll-range-field input[type='range'] {
+  grid-column: 1 / -1;
+  width: 100%;
+  accent-color: var(--n-fixed);
+}
+
+.gll-number-field input {
+  width: 5.5rem;
+  padding: .38rem .45rem;
+  border: 1px solid var(--n-line);
+  border-radius: .4rem;
+  background-color: var(--n-paper);
+  color: var(--n-ink);
+  font: inherit;
+  text-align: right;
+}
+
+.gll-field-hint {
+  margin: -.35rem 0 .1rem;
+  color: var(--n-muted);
+  font-size: .75rem;
+  line-height: 1.4;
+}
+
+.gll-clamp {
+  padding-top: .8rem;
+  border-top: 1px solid var(--n-line);
+}
+
+.gll-check-field {
+  display: flex;
+  align-items: center;
+  gap: .55rem;
+  font-size: .88rem;
+  font-weight: 700;
+}
+
+.gll-check-field input {
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--n-fixed);
+}
+
+.gll-clamp[data-disabled='true'] {
+  opacity: .55;
+}
+
+.gll-actions {
+  display: flex;
+  gap: .6rem;
+  padding-top: .5rem;
+}
+
+.gll-actions button {
+  flex: 1;
+  min-height: 2.5rem;
+  padding: .5rem .7rem;
+  border-radius: .5rem;
+  font: inherit;
+  font-size: .84rem;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.gll-primary {
+  border: 1px solid var(--n-fixed);
+  background-color: var(--n-fixed);
+  color: var(--n-panel);
+}
+
+.gll-secondary {
+  border: 1px solid var(--n-line);
+  background-color: var(--n-paper);
+  color: var(--n-ink);
+}
+
+.gll-actions button:focus-visible,
+.gll-range-field input:focus-visible,
+.gll-number-field input:focus-visible,
+.gll-check-field input:focus-visible {
+  outline: 3px solid var(--n-accent);
+  outline-offset: 2px;
+}
+
+.gll-stage {
+  min-width: 0;
+  padding: 1.35rem;
+}
+
+.gll-stage-heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: start;
+}
+
+.gll-stage-heading h2 {
+  margin: 0;
+  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+}
+
+.gll-stage-heading p {
+  margin: .35rem 0 0;
+  font-size: .9rem;
+}
+
+.gll-live-badge {
+  display: inline-flex;
+  padding: .35rem .55rem;
+  border: 1px solid var(--n-line);
+  border-radius: 99rem;
+  color: var(--n-success);
+  font-size: .76rem;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.gll-stage-visual {
+  margin-top: 1.1rem;
+  border: 1px solid var(--n-line);
+  border-radius: .95rem;
+  overflow: hidden;
+}
+
+.gll-stage-svg,
+.gll-chart-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.gll-paper {
+  fill: var(--n-paper);
+}
+
+.gll-base-line,
+.gll-grid-line,
+.gll-zero-line {
+  stroke: var(--n-line);
+  stroke-width: 1.5;
+}
+
+.gll-frame-bar {
+  fill: var(--n-line);
+}
+
+.gll-spike-bar {
+  fill: var(--n-variable);
+}
+
+.gll-plot-title,
+.gll-plot-label,
+.gll-plot-axis {
+  fill: var(--n-muted);
+  font-size: 11px;
+}
+
+.gll-plot-title,
+.gll-plot-label {
+  font-weight: 800;
+}
+
+.gll-difference-line {
+  fill: none;
+  stroke: var(--n-accent);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.gll-divider,
+.gll-track {
+  fill: none;
+  stroke: var(--n-line);
+  stroke-width: 1.5;
+}
+
+.gll-variable-token {
+  fill: var(--n-variable);
+  stroke: var(--n-paper);
+  stroke-width: 4;
+}
+
+.gll-fixed-token {
+  fill: var(--n-fixed);
+  stroke: var(--n-paper);
+  stroke-width: 4;
+}
+
+.gll-lane-label,
+.gll-marker-value,
+.gll-stage-axis,
+.gll-chart-label {
+  fill: var(--n-muted);
+  font-size: 11px;
+}
+
+.gll-marker-value {
+  fill: var(--n-ink);
+  font-weight: 800;
+}
+
+.gll-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: .65rem;
+  margin-top: 1rem;
+}
+
+.gll-summary-grid div {
+  padding: .72rem;
+  border-top: 2px solid var(--n-line);
+}
+
+.gll-summary-grid span {
+  display: block;
+  color: var(--n-muted);
+  font-size: .75rem;
+  line-height: 1.3;
+}
+
+.gll-summary-grid strong {
+  display: block;
+  margin-top: .25rem;
+  font-size: 1rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.gll-diagnostic {
+  margin: .9rem 0 0;
+  padding: .65rem .8rem;
+  border-left: 3px solid var(--n-success);
+  background-color: var(--n-paper);
+  color: var(--n-ink);
+  font-size: .84rem;
+  line-height: 1.45;
+}
+
+.gll-diagnostic-notice {
+  border-color: var(--n-accent);
+}
+
+.gll-diagnostic-warning {
+  border-color: var(--n-warning);
+}
+
+.gll-timeline-heading {
+  margin-top: 1.35rem;
+}
+
+.gll-timeline-heading h3 {
+  margin: 0;
+  font-size: 1.05rem;
+}
+
+.gll-timeline-heading p {
+  margin: .3rem 0 .6rem;
+  font-size: .84rem;
+}
+
+.gll-chart-axis {
+  stroke: var(--n-line);
+  stroke-width: 1.5;
+}
+
+.gll-variable-line,
+.gll-fixed-line {
+  fill: none;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.gll-variable-line {
+  stroke: var(--n-variable);
+}
+
+.gll-fixed-line {
+  stroke: var(--n-fixed);
+  stroke-dasharray: 7 5;
+}
+
+.gll-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  color: var(--n-muted);
+  font-size: .78rem;
+}
+
+.gll-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: .4rem;
+}
+
+.gll-legend-dot {
+  width: .65rem;
+  height: .65rem;
+  border-radius: 50%;
+}
+
+.gll-variable-dot {
+  background-color: var(--n-variable);
+}
+
+.gll-fixed-dot {
+  background-color: var(--n-fixed);
+}
+
+.gll-table {
+  margin-top: 1.1rem;
+  overflow-x: auto;
+}
+
+.gll-table h3 {
+  margin: 0 0 .55rem;
+  font-size: .95rem;
+}
+
+.gll-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: .76rem;
+}
+
+.gll-table th,
+.gll-table td {
+  padding: .48rem .55rem;
+  border-bottom: 1px solid var(--n-line);
+  text-align: right;
+  white-space: nowrap;
+}
+
+.gll-table th {
+  color: var(--n-muted);
+  font-size: .75rem;
+  text-align: right;
+}
+
+.gll-table th:first-child,
+.gll-table td:first-child {
+  text-align: left;
+}
+
+.gll-model-note,
+.gll-privacy {
+  margin: 1rem 0 0;
+  font-size: .78rem;
+}
+
+.gll-privacy {
+  padding-top: .8rem;
+  border-top: 1px solid var(--n-line);
+}
+
+@media (max-width: 760px) {
+  .gll-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .gll-controls {
+    border-bottom: 1px solid var(--n-line);
+  }
+
+  .gll-summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  .gll-controls,
+  .gll-stage {
+    padding: 1rem;
+  }
+
+  .gll-stage-heading {
+    display: block;
+  }
+
+  .gll-live-badge {
+    margin-top: .75rem;
+  }
+
+  .gll-summary-grid {
+    gap: .45rem;
+  }
+
+  .gll-summary-grid div {
+    padding: .55rem;
+  }
+}

package/src/tool/gameDeltaTimeFixedTimestepLab/i18n/de.ts

@@ -0,0 +1,56 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { GameDeltaTimeFixedTimestepLabUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+const faq = [
+  { question: 'Was zeigt dieses Labor für feste Zeitschritte?', answer: 'Es führt dasselbe bewegte Objekt durch eine Schleife mit variablem Delta und durch einen Akkumulator mit festem Zeitschritt. Wiederholbare Frame-Spitzen machen Simulationszeit, Positionsdrift und Nachholschritte sichtbar, ohne eine Game-Engine auszuführen.' },
+  { question: 'Was ist der Unterschied zwischen variablem und festem Delta?', answer: 'Das variable Modell aktualisiert einmal pro gerendertem Frame und verwendet dessen Dauer. Das feste Modell arbeitet in gleich großen Simulationsschritten und verarbeitet per Akkumulator so viele Schritte, wie die vergangene Echtzeit verlangt. Dadurch hängt das feste Modell weniger von der Bildrate ab, kann nach einem langen Frame aber zusätzliche Arbeit benötigen.' },
+  { question: 'Was bedeutet die Eingabe für eine Frame-Spitze?', answer: 'Sie addiert zusätzliche Millisekunden zu jedem ausgewählten Spitzen-Frame. Mit dem Abstand legst du fest, wie oft die Spitze erscheint. So entsteht ein wiederholbares Stottermuster statt einer zufälligen Messung.' },
+  { question: 'Was ändert die Delta-Begrenzung?', answer: 'Die Begrenzung beschränkt die Dauer, die das variable Modell bei einem langen Frame verwendet. Das kann einen zu großen Sprung verhindern, lässt diese Simulationsuhr aber hinter der Echtzeit zurückfallen. Der feste Akkumulator berücksichtigt weiterhin die gesamte Frame-Dauer.' },
+  { question: 'Ist dies ein Profiler oder ein Ersatz für Spieltests?', answer: 'Nein. Es ist ein deterministisches Lehr- und Designlabor mit vorgegebenen Zahlen. Es misst kein Gerät, diagnostiziert keine Engine, modelliert keine Renderkosten und beweist nicht, dass eine Schleife für jedes Spiel richtig ist.' },
+];
+
+const howTo = [
+  { name: 'Den Frame-Rhythmus wählen', text: 'Lege eine Zielbildrate fest und füge eine wiederholbare Spitze in Millisekunden hinzu. Mit dem Abstand bestimmst du, in welchem Frame sie erscheint.' },
+  { name: 'Den Simulationsschritt festlegen', text: 'Wähle die Dauer des festen Zeitschritts. Ein Wert nahe 16,667 Millisekunden entspricht ungefähr 60 Simulationsupdates pro Sekunde.' },
+  { name: 'Beiden Welten dieselbe Bewegung geben', text: 'Setze Geschwindigkeit und Laufzeit. Beide Modelle bewegen dasselbe Objekt, daher entsteht der Positionsunterschied durch den Umgang mit der verstrichenen Zeit.' },
+  { name: 'Eine Begrenzung bewusst testen', text: 'Aktiviere die Delta-Begrenzung und vergleiche die Simulationszeit des variablen Modells mit dem festen Akkumulator. Eine Begrenzung ist eine Entscheidung mit Kosten, keine kostenlose Korrektur.' },
+  { name: 'Die Hinweise lesen', text: 'Prüfe die beiden Spuren, die Drift-Zusammenfassung, die Zeitleiste, das Nachholverhalten und die zugängliche Frame-Tabelle. Ändere beim Erklären oder Debuggen jeweils nur eine Eingabe.' },
+];
+
+const softwareApplication: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: 'Labor für Game Delta-Zeit und feste Zeitschritte', applicationCategory: 'DeveloperApplication', operatingSystem: 'Any' };
+const faqPage: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: 'Variable Delta-Zeit mit einem festen Zeitschritt vergleichen', step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })) };
+
+export const content: ToolLocaleContent<GameDeltaTimeFixedTimestepLabUI> = {
+  slug: 'delta-zeit-und-fester-timestep-spielelabor',
+  title: 'Game Delta Zeit und festes Zeitschritt Labor',
+  description: 'Vergleiche variable und feste Game-Loops mit wiederholbaren Frame-Spitzen, Bewegung, Nachholschritten und sichtbarer Zeitdrift.',
+  ui: {
+    controlsTitle: 'Frame-Muster erstellen', fpsLabel: 'Zielbildrate', fpsHint: 'Gerenderte Frames pro Sekunde', spikeLabel: 'Frame-Spitze', spikeHint: 'Zusätzliche Zeit für Spitzen-Frames', spikeEveryLabel: 'Spitze alle Frames', fixedDtLabel: 'Fester Zeitschritt', fixedDtHint: 'Gleich große Simulationsschritte', velocityLabel: 'Objektgeschwindigkeit', durationLabel: 'Laufzeit', clampLabel: 'Delta-Obergrenze', clampToggle: 'Variables Delta begrenzen', runLabel: 'Experiment starten', resetLabel: 'Werte zurücksetzen', stageKicker: 'Das Versuchsfeld', stageTitle: 'Zwei Uhren, ein bewegtes Objekt', stageCaption: 'Balken zeigen die Ruckler, Linien verfolgen beide Positionen und die untere Spur isoliert die Drift, die Endwerte verbergen können.', frameTraceLabel: 'Frame-Dauern', positionPlotLabel: 'Objektposition', differencePlotLabel: 'Positionsunterschied zum festen Pfad', variableLane: 'Variables Delta', fixedLane: 'Fester Akkumulator', frameCountLabel: 'Gerenderte Frames', wallTimeLabel: 'Echtzeit', variableTimeLabel: 'Variable Simulationszeit', fixedTimeLabel: 'Feste Simulationszeit', divergenceLabel: 'Positionsunterschied', stepsLabel: 'Feste Simulationsschritte', diagnosticsTitle: 'Frame-Lesung', stableStatus: 'Die beiden Pfade bleiben bei diesem Muster ausgerichtet.', variableStatus: 'Der variable Pfad läuft voraus, weil seine Frame-Dauern die Spitzen enthalten.', fixedStatus: 'Der feste Pfad holt nach einem langen Frame mit mehreren Simulationsschritten auf.', clampStatus: 'Die Begrenzung verkleinert den Sprung des variablen Pfads und lässt ihn hinter der verstrichenen Echtzeit zurück.', timelineTitle: 'Das Bewegungsprotokoll', timelineCaption: 'Position über der verstrichenen Echtzeit. Eine gestrichelte Linie markiert gleiche feste Schritte.', frameAxis: 'Verstrichene Echtzeit', positionAxis: 'Objektposition', legendVariable: 'Variabler Delta-Pfad', legendFixed: 'Pfad mit festem Zeitschritt', legendSpike: 'Frame-Spitze', tableTitle: 'Zugängliches Frame-Protokoll', tableFrame: 'Frame', tableWall: 'Echtzeit', tableVariable: 'Variable Position', tableFixed: 'Feste Position', tableDelta: 'Unterschied', modelNote: 'Das variable Modell verwendet die aktuelle Frame-Dauer einmal mit der Geschwindigkeit. Das feste Modell sammelt die gesamte Echtzeit und bewegt sich in gleichen Schritten. Kein Pfad ist eine Leistungsmessung.', privacyDisclosure: 'Deine Werte werden nur in diesem Browser gespeichert, damit das Experiment bei der Rückkehr bereitsteht. Es werden keine Spieldaten oder Telemetrie gesendet.', unitMs: 'ms', unitSeconds: 's', unitPixels: 'Einheiten', statusReady: 'Experiment aktualisiert',
+  },
+  seo: [
+    { type: 'title', level: 2, text: 'Die Uhr im Game-Loop verstehen' },
+    { type: 'paragraph', html: 'Jeder gerenderte Frame liefert dem Spiel eine neue verstrichene Zeit. In einer Schleife mit variablem Delta wird Bewegung oft als <code>position += velocity × frameTime</code> aktualisiert. Bei gleichmäßigen Frames bleibt die Durchschnittsgeschwindigkeit passend, aber ein einzelnes Update wird so groß wie der Frame, der es ausgelöst hat. Ein Hitch ist deshalb nicht nur eine kurze Bildpause: Er verändert die Spielzeit dieses Updates.' },
+    { type: 'title', level: 2, text: 'Variable Integration mit einem festen Akkumulator vergleichen' },
+    { type: 'paragraph', html: 'Eine Schleife mit festem Zeitschritt addiert jede Frame-Dauer zu einem Akkumulator und verbraucht dann wiederholt einen gewählten Schritt wie <code>16,667 ms</code>. Die Simulation sieht gleich große Updates, während der Renderer in einem anderen Rhythmus arbeiten darf. Der Rest bleibt im Akkumulator für den nächsten Frame. Bei einem langen Frame führt die feste Schleife mehrere kleine Updates aus, um die verstrichene Zeit abzubilden. Die Schrittgröße bleibt stabil, aber es kann ein Nachholstoß entstehen.' },
+    { type: 'table', headers: ['Situation', 'Variabler Delta-Pfad', 'Pfad mit festem Zeitschritt', 'Zu treffende Entscheidung'], rows: [['Gleichmäßiges Rendering', 'Ein Update verwendet jede normale Frame-Dauer', 'Gleiche Schritte verbrauchen die angesammelte Zeit', 'Beide Pfade sollten der Bewegung eng folgen.'], ['Langer Frame', 'Ein großes Update kann ein Objekt zu weit bewegen', 'Mehrere feste Updates holen die Echtzeit ein', 'Drift und Nachholzahl gemeinsam prüfen.'], ['Andere Bildrate', 'Die Updategröße ändert sich mit der Bildrate', 'Der Simulationsschritt bleibt gleich', 'Feste Schritte verringern die Abhängigkeit vom Rendering.'], ['Delta-Obergrenze', 'Zeit über der Grenze wird ignoriert', 'Der Akkumulator erhält weiterhin die volle Frame-Dauer', 'Nur begrenzen, wenn verlorene Zeit akzeptabel ist.']] },
+    { type: 'title', level: 2, text: 'Erkennen, was eine Frame-Spitze bewirkt' },
+    { type: 'paragraph', html: 'Bei 60 Frames pro Sekunde dauert ein regelmäßiger Frame etwa <code>16,667 ms</code>. Mit einer zusätzlichen Spitze von <code>80 ms</code> wird ein Frame ungefähr <code>96,667 ms</code> lang. Das variable Modell verarbeitet diese Dauer in einem einzigen Update. Das feste Modell verarbeitet stattdessen ungefähr sechs Schritte zu je <code>16,667 ms</code>. Die gesamte verstrichene Zeit kann gleich sein, während der Weg durch die Simulation anders verläuft.' },
+    { type: 'title', level: 2, text: 'Positionsdrift und Nachholen gemeinsam lesen' },
+    { type: 'paragraph', html: 'Der Positionsunterschied ist der variable Pfad minus der feste Pfad. Er zeigt, wie weit sich die beiden Integrationsregeln trennen, nicht automatisch, welche Regel richtig ist. Die Nachholzahl zeigt, wie viel feste Arbeit in einem gerenderten Frame nötig war. Ein großer Unterschied deutet auf sichtbare Bewegungsabweichung hin; eine große Nachholzahl deutet auf ein mögliches CPU-Budgetproblem hin. Beides hängt zusammen, ist aber nicht dieselbe Diagnose.' },
+    { type: 'title', level: 2, text: 'Delta-Begrenzung als Richtlinie behandeln' },
+    { type: 'paragraph', html: 'Eine Begrenzung kann verhindern, dass ein pausierter Tab, ein Breakpoint oder ein starker Hitch eine Figur teleportiert oder einen Physikkörper durch Geometrie schickt. Der Preis ist, dass die variable Uhr hinter der echten verstrichenen Zeit zurückbleibt. Wenn das Spiel Zeit bewahren muss, eignet sich ein fester Akkumulator oder eine andere Wiederherstellungsregel. Wenn das Spiel Sprünge begrenzen und reaktionsfähig bleiben muss, kann ein Clamp passen, aber die verlorene Zeit muss beabsichtigt sein.' },
+    { type: 'title', level: 2, text: 'Die Schleife nach der Aufgabe wählen' },
+    { type: 'table', headers: ['Aufgabe im Game-Loop', 'Sinnvoller Standard', 'Grund'], rows: [['Physik, Kollisionen oder deterministisches Gameplay', 'Fester Zeitschritt', 'Gleiche Schritte machen die Simulation weniger abhängig vom Render-Rhythmus.'], ['Einfache visuelle Bewegung ohne Zustandsaufbau', 'Variables Delta', 'Das Update ist klein und braucht meist keine Nachholwarteschlange.'], ['Gameplay-Simulation mit glatter Darstellung', 'Fester Update-Schritt mit Interpolation', 'Die Simulation behält ihren Schritt, während die Darstellung Zwischenbewegung verbirgt.'], ['Erholung nach einem schweren Stillstand', 'Begrenzte Nachholregel', 'Ein schlechter Frame soll keine unbegrenzte Simulationsarbeit erzeugen.']] },
+    { type: 'title', level: 2, text: 'Einen wiederholbaren Tuning-Ablauf nutzen' },
+    { type: 'paragraph', html: 'Beginne ohne Spitzen und prüfe, ob beide Pfade übereinstimmen. Füge einen wiederholbaren Hitch hinzu und ändere danach seinen Abstand, um zu sehen, ob der sichtbare Fehler anwächst oder sich beruhigt. Passe den festen Schritt an und beobachte die Nachholzahl, bevor du die Geschwindigkeit änderst. Aktiviere zuletzt die Begrenzung und vergleiche die variable Simulationszeit mit der Echtzeit. So trennst du die Ursache einer Abweichung von der Regel, die sie begrenzen soll.' },
+    { type: 'tip', title: 'Was dieses Experiment nicht beweisen kann', html: 'Das Labor verwendet festgelegte Frame-Dauern und eine konstante Geschwindigkeit. Es erklärt daher Timing-Verhalten, misst aber kein Gerät und bestätigt keine Engine. Echte Physik, Eingabeabtastung, Netzwerk, Interpolation und ein begrenztes Frame-Budget können die beste Lösung verändern. Nutze das Ergebnis als Hypothese und überprüfe sie im tatsächlichen Spiel.' },
+  ],
+  faq,
+  bibliographyTitle: 'Referenzen zu Game-Loops',
+  bibliography: bibliographyEntries,
+  howTo,
+  schemas: [softwareApplication, faqPage, howToSchema],
+};