Vorlagen

Sie können mit folgendem Befehl ein neues Projekt aus einer Vorlage generieren:

npm create pixi-vn@latest

Interaktive Demo

So verwenden Sie eine Vorlage

Wenn Sie diese Seite lesen, haben Sie wahrscheinlich bereits ein Projekt aus einer Vorlage generiert. Die folgenden Abschnitte führen Sie durch die ersten Schritte, um es zum Laufen zu bringen.

Erste Einrichtung

Öffnen Sie den Projektordner mit Ihrer IDE. Die folgenden Beispiele verwenden Visual Studio Code.

Sobald das Projekt geöffnet ist, schlägt VS Code automatisch einige Dinge vor:

• Empfohlene Erweiterungen installieren — es erscheint eine Benachrichtigung, die Sie auffordert, die für den Workspace empfohlenen Erweiterungen zu installieren. Es wird dringend empfohlen, dies zu akzeptieren. Falls die Benachrichtigung nicht erscheint, können Sie sie manuell über das Erweiterungen-Panel installieren, indem Sie nach empfohlenen Erweiterungen filtern.
• Startaufgaben ausführen — VS Code fordert Sie möglicherweise auf, die konfigurierten Startaufgaben auszuführen, wodurch alle Projektabhängigkeiten installiert werden. Wenn Sie dies lieber manuell tun möchten, führen Sie Folgendes aus:

npm install

Projekt ausführen

Die Vorlage enthält eine Reihe vorkonfigurierter Launch-Konfigurationen für VS Code. Falls Sie damit nicht vertraut sind: Launch-Konfigurationen sind Verknüpfungen, die VS Code mitteilen, wie Ihr Projekt gestartet werden soll (und optional einen Debugger anhängen), sodass Sie nicht jedes Mal Befehle in das Terminal eingeben müssen. Sie können darauf über das Panel Ausführen und Debuggen zugreifen (das Play-Symbol in der linken Seitenleiste oder durch Drücken von F5). Wählen Sie die gewünschte Konfiguration aus dem Dropdown-Menü oben im Panel und drücken Sie die grüne Play-Schaltfläche.

Folgende Konfigurationen sind verfügbar:

• Debug Game: Dies ist die Konfiguration, die Sie während der Entwicklung am häufigsten verwenden werden — jedes Mal, wenn Sie eine Datei speichern, wird der Browser automatisch aktualisiert. Beachten Sie, dass in diesem Modus Animationen möglicherweise nicht perfekt flüssig sind und das Laden von Assets langsamer sein kann als im endgültigen veröffentlichten Build.
• Debug Game Preview: simuliert genau, wie sich das Spiel nach der Veröffentlichung verhalten wird: Animationen sind flüssig, Ladezeiten sind realistisch, und Optimierungen sind aktiv. Verwenden Sie diese Konfiguration, wenn Sie überprüfen möchten, dass alles korrekt aussieht und sich korrekt anfühlt, bevor Sie veröffentlichen.
• Run as Desktop App (Dev): kompiliert das Rust/Tauri-Backend und startet das Spiel als natives Desktop-Fenster. Wenn Ihre Vorlage nicht auf Desktop- oder Mobile-Plattformen abzielt, ist diese Konfiguration nicht vorhanden.

Stil anpassen

Die UI der Vorlage basiert vollständig auf shadcn/ui, was bedeutet, dass Sie das Farbschema anpassen können, ohne den Code einer Komponente zu berühren.

Öffnen Sie den shadcn/ui-Theme-Builder, passen Sie die Farben nach Ihrem Geschmack an und navigieren Sie dann zum Abschnitt Copy der Seite, um den generierten CSS-Befehl zu kopieren. Führen Sie diesen Befehl im Stammverzeichnis Ihres Projekts aus:

npx shadcn@latest add <paste-the-generated-command-here>

Nach der Anwendung wird empfohlen, die Quelldateien neu zu formatieren:

npm run format

Für weitere Anpassungen — Schriftarten, globale Stile und mehr — siehe Stile & Schriftart.

Projektstruktur

Vorlagen-Screens

Die Vorlage enthält eine Reihe vorgefertigter Screens, die die wesentlichen Teile eines Visual Novels abdecken. Jeder Screen ist eine React-Komponente, die mit einer von TanStack Router verwalteten Route verbunden ist.

• Hauptmenü (/) — der erste Screen, den der Spieler sieht, wenn er das Spiel startet. Er bietet den Einstiegspunkt, um ein neues Spiel zu starten, ein gespeichertes fortzusetzen und die Einstellungen zu öffnen.
• Erzählungs-Screen (/game/narration) — der zentrale Gameplay-Screen, auf dem die Geschichte angezeigt wird. Er stellt Dialoge, Charaktersprites, Hintergründe und Auswahlmöglichkeiten dar.
• Einstellungen — das Einstellungspanel besitzt keine eigene dedizierte Route. Stattdessen verwendet es Search Params, um sich über den jeweils aktiven Screen zu legen. Dieser Ansatz hält die URL sauber und erlaubt es dem Spieler trotzdem, die Einstellungen von überall im Spiel aus zu öffnen und zwischen den Einstellungsabschnitten (Audio, Anzeige, Sprache usw.) zu navigieren, ohne den Überblick darüber zu verlieren, wo er sich befand.
• Navigations-Screen (/game/navigation) — nur für Point & Click. Er ermöglicht es dem Spieler, zwischen Räumen zu navigieren und die verschiedenen am aktuellen Ort verfügbaren Aktionen auszuführen.
• Karten-Screen (/game/map) — nur für Point & Click. Er zeigt die Karte an und ermöglicht es dem Spieler, sich von einem Ort zu einem anderen zu bewegen. Zudem unterstützt er die Verwaltung mehrerer Karten.