Minispiele
Leitfaden zur Integration von Minispielen in Pixi’VN, einschließlich bewährter Praktiken, Lifecycle-Management und Beispielimplementierungen mit PixiJS und React.
KI
Du kannst die Schaltfläche oben verwenden, um mit KI dein eigenes Minispiel zu erstellen.
Das Schöne an einer interaktiven Geschichte im Vergleich zu normalem Text ist, dass du eine Pause einlegen und mit Minispielen interagieren kannst, die mit der Geschichte zusammenhängen.
Minispiele in Visual-Novels werden normalerweise während der Erzählung gestartet. Um zwischen der Erzähl-UI und der Minispiel-UI zu wechseln, wird empfohlen, das Minispiel mit einer Route zu verknüpfen (z. B. "/minigame/snake") und von der Geschichte aus dorthin zu navigieren. Weitere Informationen sind hier verfügbar.
Hier sind einige Tipps:
- Verwende PixiJS direkt — entweder das Paket
pixi.jsselbst oder das Submodul@drincs/pixi-vn/pixi.js, das es reexportiert — mit Komponenten wieGraphics,SpriteundText, kombiniert mit PixiJS-Layern, um eine separate Ebene für dein Minispiel zu erstellen, die unabhängig von der Haupt-Visual-Novel-Oberfläche verwaltet wird. - Verwende Hotkeys, um die Tastatureingabe für die Steuerung deines Minispiels zu verarbeiten. Sieh dir Hotkeys an, um zu erfahren, wie du sie einrichtest.
- Es wird generell empfohlen, PixiJS nicht zum Erstellen der UI zu verwenden (Schaltflächen, Punkteanzeigen, Game-Over-Meldungen, ...); verwende stattdessen ein Framework wie React oder Vue.
- Das Speichern und Wiederherstellen des aktuellen Zustands des Minispiels liegt in der Verantwortung des Entwicklers.
- Da ein Minispiel eine eigene Route ist, landet ein Projekt meist bei mehreren davon unter demselben
/minigame-Pfad (z. B./minigame/snake,/minigame/quiz); verwende das dateibasierte Routing von TanStack Router, um Logik zwischen ihnen zu teilen, anstatt sie in jedem Minispiel zu duplizieren (siehe unten). - Ein Minispiel zu starten ist nichts anderes, als von der Geschichte aus zu seiner Route zu navigieren; falls es einen Parameter benötigt (einen Schwierigkeitsgrad, eine Level-ID, ...), übergib ihn über dieselbe Route (siehe unten).
Vorlagen
useMinigame ist ein benutzerdefinierter Hook, der dir hilft, den Lifecycle eines Minispiels zu verwalten, einschließlich Start, Aktualisierung und Bereinigung von Ressourcen. Er ist in allen Vorlagen vorhanden.
Zum Beispiel:
import { Layer } from "@drincs/pixi-vn";
import { Graphics, Ticker } from "@drincs/pixi-vn/pixi.js";
import { createFileRoute } from "@tanstack/react-router";
import { useCallback, useMemo, useState } from "react";
import { useHotkey } from "@tanstack/react-hotkeys";
import useMinigame from "@/lib/hooks/minigame-hooks";
export const Route = createFileRoute("/minigame/example")({
component: MiniGame,
});
function MiniGame() {
const [displayScore, setDisplayScore] = useState(0);
const [gameOver, setGameOver] = useState(false);
const ticker = useMemo(() => {
const ticker = new Ticker();
const endGame = () => {
ticker.stop();
setGameOver(true);
};
ticker.add(({ deltaMS }) => {
// Update game logic here
});
return ticker;
}, []);
useHotkey(
"ArrowUp",
() => {
// Handle key down events for game controls
},
{ enabled: !gameOver },
);
const game = useCallback(
(layer: Layer) => {
ticker.start();
},
[ticker], // They must not be changed during the game otherwise the game will restart
);
const options = useMemo(
() => ({
onExit() {
ticker.stop();
ticker.destroy();
},
}),
[ticker], // They must not be changed during the game otherwise the game will restart
);
const { loading } = useMinigame(game, options);
return (
<>
<div
style={{
position: "absolute",
top: 10,
left: 10,
color: "white",
fontSize: "24px",
background: "rgba(0,0,0,0.5)",
padding: "5px 10px",
borderRadius: "5px",
}}
>
Score: {displayScore}
</div>
{gameOver && (
<div
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
color: "red",
fontSize: "48px",
background: "rgba(0,0,0,0.7)",
padding: "20px 40px",
borderRadius: "10px",
}}
>
GAME OVER
</div>
)}
</>
);
}Beispiele
Das Pixi’VN-Team freut sich über neue Vorschläge und Beiträge, um diese Bibliothek noch vollständiger zu machen. Teile deine Minispiel-Implementierungen gerne im Chat unten oder schlage sie dort vor!