Warum graphbasierte Navigation?

Jeder Funktion in PanelWave liegt eine Entscheidung zugrunde, die schon vor der ersten Codezeile fiel: Ein Kapitel ist keine Abfolge von Seiten, sondern ein gerichteter Graph. Panels sind Knoten. Kanten legen fest, welches Panel auf welches folgen darf, unter welcher Bedingung und mit welchem Übergang. Alles, was Lesende und Creators später sehen, vom einfachen Weiter-Button bis zum verzweigten Krimi, folgt aus dieser Wahl. Hier erklären wir, warum wir sie getroffen haben, was die Alternativen gekostet hätten und warum ein schlichter linearer Comic nichts dafür bezahlt. Die Mechanik selbst beschreibt die Doku unter Graph Navigation; hier geht es um das Warum.

Was kommt als Nächstes? Drei Antworten

Digitale Comics übernehmen meist eines von zwei Modellen. Das erste ist das Print-Modell: Ein Comic ist eine geordnete Liste von Seiten, und Lesen heißt Umblättern. Artwork und Komposition bleiben erhalten, aber auf dem Smartphone heißt das Zoomen mit zwei Fingern. Für Entscheidungen hat dieses Modell keine Sprache – die Lesenden können nur vor oder zurück. Das zweite ist das Video-Modell, der Motion-Comic: Panels werden zu Einstellungen auf einer Timeline, mit Ton und Bewegung, und dann läuft die Datei ab. Bewegung und Stimmung kommen dazu, die Lesenden gehen dabei komplett verloren. Jemand anderes bestimmt das Tempo, das Artwork konkurriert mit der Animation, und es gibt keine Tür, die man öffnen könnte.

Das dritte Modell ist der Graph. Jedes Panel ist ein Knoten mit Kanten zu den Panels, die darauf folgen dürfen. Eine lineare Geschichte ist eine Kette von Kanten ohne Bedingung. Eine Entscheidung ist ein Knoten mit zwei oder mehr ausgehenden Kanten, deren Bedingungen sich unterscheiden. Das Modell bevorzugt keine der beiden Formen, und genau darum geht es: Das Format kennt keinen Normalmodus und keinen interaktiven Sondermodus. Es hat ein einziges Grundelement, das beides beschreibt.

Was der Graph den Lesenden bringt

Das Leseerlebnis ergibt sich direkter aus dem Modell, als man denkt.

• Tempo. Ein Knoten ist ein Halt. Die Lesenden blättern weiter, wann sie wollen, oder überlassen das Autoplay – mit einer Dauer, die das Panel oder sie selbst festlegen. Anders als eine Einstellung auf einer Timeline steht das Artwork still, solange sie es betrachten.
• Weg. Ein Umweg ist eine Kante, die die Hauptlinie verlässt, und eine zweite, die zu ihr zurückführt. Optionale Szenen, Seitengassen und geheime Räume brauchen keine besondere Maschinerie, und die Lesenden finden immer zurück zum Handlungsbogen.
• Rückkehr. Weil jeder Schritt eine Kante ist, heißt Zurückgehen: dieselbe Kante rückwärts, samt Übergang. Verlauf und Zurückblättern funktionieren in linearen und verzweigten Geschichten gleich.
• Entscheidung. Ein Hotspot auf einer Tür speichert in einer Variablen, was die Lesenden getan haben, und die ausgehenden Kanten des nächsten Knotens fragen diese Variable ab. Die Entscheidung treffen die Lesenden, das Format merkt sie sich.
• Ansicht. Derselbe Graph erscheint auf dem Smartphone Panel für Panel und auf dem großen Bildschirm als komponierte Seite. Die Seitenansicht zeigt die Anordnung, die der Creator gestaltet hat; die Panelansicht geht die Knoten einzeln durch. Die Lesenden wechseln nach Belieben, und die Doku zur Leseoberfläche beschreibt, was Weiter und Zurück in jeder Ansicht tun.

Was der Graph Creators bringt

Für alle, die ein Werk erschaffen, ersetzt der Graph Sonderfälle durch Daten. Eine Verzweigung ist kein Skript, sondern eine Kante mit einer Bedingung in JSON Logic – einer kleinen Regel, die sich wie ein Satz liest. Entscheidungen sind Hotspots, die typisierte Variablen mit festgelegtem Gültigkeitsbereich setzen. Dieselbe Bedingungssprache, die Kanten steuert, kann über eine Variante auch den Inhalt eines Panels austauschen oder eine einzelne Sprechblase ausblenden. Einmal gelernt, überall nutzbar.

Seiten gibt es trotzdem weiter. Ein Kapitel kann nach wie vor Seitenlayouts mit Platzierungen und Lesereihenfolge definieren. Die Druckkomposition bleibt also erhalten, und der Druckexport funktioniert weiter. Neu ist die Arbeitsteilung: Die Seite beschreibt, wie Panels angeordnet sind, der Graph, wie sich die Geschichte bewegt. Beides halten wir bewusst getrennt; wie es nebeneinander funktioniert, erklärt die Formatreferenz unter Seitenansicht versus Panelansicht. Wer Panels auf einer Seite umsortiert, ändert ihre Lesereihenfolge – aber nie den Graphen.

Und weil der Graph aus Daten in einem JSON-Manifest besteht und nicht aus Programmlogik, lässt er sich validieren. Unerreichbare Panels, Sackgassen, fehlende Einstiegspunkte und Zyklen sind strukturelle Fragen. Ein Werkzeug kann sie beantworten, bevor Lesende je darauf stoßen. Der Graph Editor im CMS zeichnet den Graphen als Karte, markiert diese Probleme und lässt dich jeden Pfad simulieren. Vor dem Veröffentlichen wiederholt die Preflight-Prüfung den Erreichbarkeitstest.

Warum keine Seitenreihenfolge mit Sprüngen?

Die naheliegende, billigere Alternative: Seiten behalten und eine Sprunganweisung ergänzen. Geh zu Seite 14, wenn die Lesenden den Schlüssel genommen haben. Werkzeuge für interaktive Fiktion arbeiten seit Jahrzehnten so, und für Text klappt das gut. Bei Comics hakt es an zwei Stellen. Erstens ist ein Sprung eine Ausnahme von der Reihenfolge und kein Teil des Modells. Jedes Werkzeug, das Seiten versteht, muss Sprünge also extra lernen, und das Zurückblättern braucht eine eigene Buchführung. Zweitens sind Sprünge meist Code. Damit liegt das Verzweigen hinter einer Schwelle, über die die meisten Zeichnerinnen und Zeichner nicht gehen wollen. In einem Graphen ist die Kante die Reihenfolge. Es muss nichts dazukommen, und ein visueller Editor kann sie zeichnen, ohne dass jemand ein Skript schreibt.

Warum keine Timeline?

Die Timeline ist verlockend, weil sie Ton und Bewegung gleich mitbringt. PanelWave nutzt Timelines auch – innerhalb eines Panels, für Animation und Audio. Der Fehler wäre, die Timeline zum Rückgrat der Geschichte zu machen. Eine Timeline hat eine Richtung und ein Tempo. Handlungsfreiheit lässt sich dann nur als Pausen und Menüs nachträglich anschrauben, und das Artwork steht nie still. Ein Graph setzt die Timeline dorthin, wo sie hingehört: Ein Knoten kann Bewegung, Ton, sogar Video enthalten und trotzdem ein Ort bleiben, an dem die Lesenden anhalten, sich umsehen und weitergehen, wenn sie so weit sind. Die Bewegung dient dem Panel, statt es zu ersetzen.

Was kostet das lineare Geschichten?

Nichts. Diesen Test musste das Design bestehen. Ein klassischer Comic ist in PanelWave eine Kette von Kanten ohne Bedingungen, die das CMS automatisch anlegt, während du Panels hinzufügst. Der Player durchläuft sie genau wie eine verzweigte Geschichte: ausgehende Kanten sammeln, Bedingungen auswerten, den Gewinner nehmen. Bei einer Kante ohne Bedingung pro Panel ist die Auswertung trivial, und die Lesenden sehen einen Comic, der sich von vorn bis hinten liest. Komplexität kostet nur dort etwas, wo du sie nutzt. Du kannst Kapitel drei eine erste Verzweigung geben, ohne die Kapitel eins und zwei umzubauen.

Ein Graph, drei Schichten

Dank des Graphen kann sich ein offenes Ökosystem außerdem eine einzige Definition einer Geschichte teilen. Das Format beschreibt den Graphen als Daten, der Player wertet ihn beim Lesen aus, und das CMS zeichnet und validiert ihn. Keine der drei Schichten muss sich über mehr einigen als das Manifest. Und jede Leseanwendung von Dritten, die dieselben Regeln umsetzt, zeigt dieselbe Geschichte. Genau das meinen wir, wenn wir das Format den Vertrag nennen (mehr dazu unter Architecture). Das Manifest selbst ist so kompakt, dass man es lesen kann; das kommentierte Beispiel zeigt ein vollständiges Werk auf einer Seite.

Das Modell ist auch der Grund, warum wir gelassen auf das schauen, was noch kommt. Panel-Varianten, die Inhalte je nach Zustand austauschen, Hotspots, die etwas auslösen, Paywall-Grenzen an genau definierten Stellen der Geschichte und eine Leseansicht, in der der Raum zwischen den Panels sichtbar wird: All das lässt sich einem Graphen hinzufügen, ohne zu ändern, was ein Graph ist. Mit einer Seitenreihenfolge oder einer Timeline hätte jedes davon ein neues Modell gebraucht.

Weiterlesen

• Graph Navigation: wie ein Graph aufgebaut ist, dazu Bedingungen, Übergänge und Mutationen.
• Graph: alle Eigenschaften der Objekte Graph, Kante und Mutation.
• Chapters and Pages: wie Seitenlayouts und der Graph nebeneinander bestehen.
• Variables: der Zustand, den Kantenbedingungen lesen.
• Graph Editor: den Graphen im CMS zeichnen, validieren und simulieren.