pixi-vn-canvas

Manage sprites, images, text, video, and transitions on the Pixi'VN PixiJS canvas.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @drincs/pixi-vn, @drincs/pixi-vn-live2d, @drincs/pixi-vn-spine.

What problem does it solve? Developers building visual novels or story-driven games with Pixi'VN need to control what appears on screen—backgrounds, character sprites, text, and video—plus the transitions and animations between them, without writing raw PixiJS scene-graph code or breaking save/load state. ## Core Features & Use Cases - Canvas element management: Show, replace, and remove images, composite image containers, text, and video by alias using helpers like showImage, showImageContainer, showText, and showVideo from @drincs/pixi-vn. - Transitions and animations: Apply dissolve, fade, move, zoom, and push transitions, shake effects, and keyframe animations via canvas.animate, with optional manual ticker control for looping effects. - Live2D and Spine integration: Register and control Live2D models and Spine skeletal animations through the official plugin packages while keeping elements save-able. - Use Case: When a narration step changes scenes, call showWithDissolve("background", "bg-forest", { duration: 1 }) to cross-fade the background and moveIn("liam", "liam-neutral", { direction: "left" }) to slide a character sprite in from the edge. ## Quick Start Ask the AI to show a background image and slide a character sprite onto the Pixi'VN canvas with a dissolve transition using the canvas helpers from @drincs/pixi-vn.

Frequently Asked Questions about pixi-vn-canvas

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

FAQPage Schema
How do I show an image on the Pixi'VN canvas?

Call showImage(alias) from @drincs/pixi-vn, which creates an ImageSprite, loads its texture, and adds it to the canvas in one step. The alias must be registered in the PixiJS Assets manifest, or you can pass a URL as the second argument for prototyping.

How do I add transitions when changing backgrounds in Pixi'VN?

Use transition helpers like showWithDissolve, showWithFade, moveIn, zoomIn, or pushIn with the target alias and options such as duration and direction. They replace the existing element under that alias, transfer its position, and return ticker ids you can await.

Does Pixi'VN canvas support Live2D and Spine models?

Yes, through the separate @drincs/pixi-vn-live2d and @drincs/pixi-vn-spine packages. Live2D requires registering its PixiJS plugin before canvas initialization, while Spine requires importing the package so its serializable component registers for save/load.

Why does addImage not display anything in Pixi'VN?

addImage only constructs and registers the sprite; the texture is not loaded until you await element.load(). Use showImage instead, which loads automatically, and ensure the alias is registered in the Assets manifest or a PixiError is thrown.

What is the difference between canvas.animate and manual tickers in Pixi'VN?

canvas.animate runs keyframe animations with a fixed duration using the motion library and powers all built-in transitions. Manual tickers via canvas.tickers.add suit continuous looping effects or cases needing explicit pause, resume, and completion control.