pixi-vn-minigames

Implements PixiJS minigames on dedicated canvas layers within Pixi'VN visual novels.

145|9|Updated Feb 14, 2024
One-click install
npx skills add https://github.com/DRincs-Productions/pixi-vn --skill pixi-vn-minigames-drincs-productions
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixi-vn-minigames
Source: https://github.com/DRincs-Productions/pixi-vn/tree/main/skills/minigames
Command: npx skills add https://github.com/DRincs-Productions/pixi-vn --skill pixi-vn-minigames-drincs-productions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @drincs/pixi-vn, pixi.js, @tanstack/react-router, @tanstack/react-hotkeys.

What problem does it solve? Pixi'VN has no dedicated minigame API, so developers must correctly wire PixiJS gameplay code into the engine's layers, routing, and lifecycle without corrupting the save-able narrative scene graph or losing minigame state on save/reload. ## Core Features & Use Cases - useMinigame lifecycle hook: Creates a dedicated non-save-able canvas layer, runs an async onStart, invokes your game(layer) function, and cleans up the layer and Ticker on unmount. - Routing structure: Gives each minigame its own route (e.g. /minigame/snake) with an optional shared pathless layout route for common hotkeys, pause behavior, and HUD wrappers. - Controls and HUD guidance: Uses hotkeys for keyboard input, plain framework UI for score/game-over overlays, and PixiJS Graphics/Sprite/Ticker for gameplay visuals. - Use Case: Add a snake minigame to a visual novel by creating src/routes/minigame/snake.tsx, building the game loop with a PixiJS Ticker on the minigame layer, and navigating back to the story when the round ends. ## Quick Start Add a snake minigame to my Pixi'VN visual novel using the useMinigame hook on its own route.

Frequently Asked Questions about pixi-vn-minigames

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a minigame to a Pixi'VN visual novel?

Create a route file like src/routes/minigame/snake.tsx, then use the useMinigame hook to create a dedicated canvas layer and run your PixiJS game logic on it. Build gameplay with Graphics, Sprite, and a Ticker, and use regular UI components for the score and game-over overlay.

How do I handle keyboard controls in a PixiJS minigame?

Use the hotkey system (e.g. useHotkey from @tanstack/react-hotkeys) instead of raw window keydown listeners. Gate hotkeys with enabled: !gameOver so input listeners do not outlive the round.

Should minigame content go on canvas.gameLayer in Pixi'VN?

No. gameLayer is the save-able narrative scene graph for backgrounds and characters. Use canvas.layers.add(name, new Container()) to create a separate non-save-able layer for transient minigame elements like snake segments or falling blocks.

Does Game.exportGameState() save minigame progress?

No. Game.exportGameState() has no knowledge of in-progress minigame state such as score or board position. If progress must survive a save/reload, persist it yourself through Pixi'VN game storage.

Why does my minigame restart on every render in React?

The game callback and options object passed to useMinigame are effect dependencies, so unstable identities tear down and restart the minigame. Wrap them in useCallback and useMemo with correct dependencies to keep references stable.