Modèles

Vous pouvez générer un nouveau projet à partir d'un template en exécutant :

npm create pixi-vn@latest

Démo interactive

Comment utiliser un template

Si vous lisez cette page, vous avez probablement déjà un projet généré à partir d'un template. Les sections suivantes vous guideront à travers les premières étapes pour le faire fonctionner.

Configuration initiale

Ouvrez le dossier du projet avec votre IDE. Les exemples ci-dessous utilisent Visual Studio Code.

Une fois le projet ouvert, VS Code va automatiquement suggérer quelques actions :

• Installer les extensions recommandées — une notification apparaîtra vous demandant d'installer les extensions recommandées pour l'espace de travail. Il est fortement conseillé d'accepter. Si la notification n'apparaît pas, vous pouvez les installer manuellement depuis le panneau Extensions en filtrant sur extensions recommandées.
• Exécuter les tâches de démarrage — VS Code peut vous proposer d'exécuter les tâches de démarrage configurées, qui installeront toutes les dépendances du projet. Si vous préférez le faire manuellement, exécutez :

npm install

Exécuter le projet

Le template inclut un ensemble de configurations de lancement préconfigurées pour VS Code. Si vous n'êtes pas familier avec elles : les configurations de lancement sont des raccourcis qui indiquent à VS Code comment démarrer votre projet (et éventuellement attacher un débogueur), afin que vous n'ayez pas besoin de taper de commandes dans le terminal à chaque fois. Vous pouvez y accéder depuis le panneau Run and Debug (l'icône en forme de bouton play dans la barre latérale gauche, ou en appuyant sur F5). Sélectionnez la configuration que vous souhaitez dans la liste déroulante en haut du panneau puis appuyez sur le bouton play vert.

Les configurations suivantes sont disponibles :

• Debug Game : c'est la configuration que vous utiliserez le plus souvent pendant le développement — chaque fois que vous enregistrez un fichier, le navigateur se rafraîchit automatiquement. Gardez à l'esprit que dans ce mode les animations peuvent ne pas être parfaitement fluides et le chargement des assets peut être plus lent que dans la version finale publiée.
• Debug Game Preview : simule fidèlement le comportement du jeu une fois publié : les animations sont fluides, les temps de chargement sont réalistes, et les optimisations sont actives. Utilisez cette configuration lorsque vous voulez vérifier que tout est correct avant la publication.
• Run as Desktop App (Dev) : elle compile le backend Rust/Tauri et lance le jeu comme une fenêtre desktop native. Si votre template ne cible pas les plateformes desktop ou mobile, cette configuration ne sera pas présente.

Personnaliser le style

L'UI du template est entièrement construite avec shadcn/ui, ce qui signifie que vous pouvez personnaliser le thème de couleurs sans toucher au code des composants.

Ouvrez le générateur de thème shadcn/ui, ajustez les couleurs selon vos goûts, puis rendez-vous dans la section Copy de la page pour copier la commande CSS générée. Exécutez cette commande depuis la racine de votre projet :

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

Une fois appliquée, il est recommandé de reformater les fichiers source :

npm run format

Pour davantage de personnalisation — polices, styles globaux, et plus encore — voir Styles & font.

Structure du projet

Écrans du template

Le template est livré avec un ensemble d'écrans préconstruits couvrant les parties essentielles d'un visual novel. Chaque écran est un composant React relié à une route gérée par TanStack Router.

• Menu principal (/) — le premier écran que le joueur voit lorsqu'il lance le jeu. Il fournit le point d'entrée pour démarrer une nouvelle partie, continuer une partie sauvegardée, et ouvrir les paramètres.
• Écran de narration (/game/narration) — l'écran central du gameplay où l'histoire est affichée. Il affiche les dialogues, les sprites des personnages, les arrière-plans et les choix.
• Paramètres — le panneau des paramètres n'a pas de route dédiée. Il utilise plutôt les Search Params pour se superposer à l'écran actuellement actif. Cette approche garde l'URL propre tout en permettant au joueur d'ouvrir les paramètres depuis n'importe où dans le jeu, et de naviguer entre les sections des paramètres (audio, affichage, langue, etc.) sans perdre le fil de l'endroit où il se trouvait.
• Écran de navigation (/game/navigation) — Point & Click uniquement. Il permet au joueur de naviguer entre les pièces et d'effectuer les différentes actions disponibles dans le lieu actuel.
• Écran de carte (/game/map) — Point & Click uniquement. Il affiche la carte et permet au joueur de se déplacer d'un lieu à un autre. Il prend également en charge la gestion de plusieurs cartes.