Minijeux
Guide d'intégration des minijeux dans Pixi’VN, incluant les bonnes pratiques, la gestion du cycle de vie et des exemples d'implémentation utilisant PixiJS et React.
IA
Vous pouvez utiliser le bouton ci-dessus pour créer votre propre minijeu, avec l'IA.
La beauté d'une histoire interactive par rapport à un texte normal est que vous pouvez faire une pause et interagir avec des minijeux liés à l'histoire.
Les minijeux dans les visual novels sont généralement lancés pendant la narration. Pour basculer entre l'UI narrative et l'UI du minijeu, il est recommandé de lier le minijeu à une route (par ex. "/minigame/snake") et d'y naviguer depuis l'histoire. Plus d'informations sont disponibles ici.
Voici quelques conseils :
- Utilisez directement PixiJS — soit le package
pixi.jslui-même, soit le sous-module@drincs/pixi-vn/pixi.jsqui le réexporte — avec des composants tels queGraphics,SpriteetText, combinés avec les Couches PixiJS pour créer une couche séparée pour votre minijeu, gérée indépendamment de l'interface principale du visual novel. - Utilisez les hotkeys pour gérer la saisie clavier des contrôles de votre minijeu. Consultez Hotkeys pour apprendre à les configurer.
- Il est toujours recommandé de ne pas utiliser PixiJS pour construire l'UI (boutons, affichages du score, messages de fin de partie, ...) ; utilisez plutôt un framework tel que React ou Vue.
- La sauvegarde et la restauration de l'état actuel du minijeu sont de la responsabilité du développeur.
- Puisqu'un minijeu est sa propre route, un projet finit généralement par en avoir plusieurs sous le même chemin
/minigame(par ex./minigame/snake,/minigame/quiz) ; utilisez le routage basé sur les fichiers de TanStack Router pour partager la logique entre eux au lieu de la dupliquer dans chaque minijeu (voir ci-dessous). - Démarrer un minijeu n'est rien de plus que naviguer vers sa route depuis l'histoire ; s'il a besoin d'un paramètre (une difficulté, un identifiant de niveau, ...), passez-le via cette même route (voir ci-dessous).
Modèles
useMinigame est un hook personnalisé qui vous aide à gérer le cycle de vie d'un minijeu, notamment son démarrage, sa mise à jour et le nettoyage des ressources. Il est présent dans tous les modèles.
Par exemple :
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>
)}
</>
);
}Exemples
L'équipe Pixi’VN accueille avec plaisir les nouvelles propositions et contributions pour rendre cette bibliothèque encore plus complète. N'hésitez pas à partager ou proposer vos implémentations de minijeux dans le chat ci-dessous !