# Pixi'VN

- [Quick Start](/start): Getting Started with Pixi’VN
- [Assets management](/start/assets-management): Organization, referencing, and loading of assets (images, sounds, videos) in Pixi’VN using aliases and manifests.
- [Assets](/start/assets): Overview of asset types and storage options (local or online) in Pixi’VN, with usage examples.
- [Canvas component aliases](/start/canvas-alias): Aliases for canvas components in Pixi’VN, covering inheritance, editing, and special game layer usage.
- [Animations and transitions](/start/canvas-animations-effects): Learn how to create animations and transitions in Pixi’VN using the animate function and tickers.
- [Articulated animations](/start/canvas-articulated-animations-effects)
- [Canvas components](/start/canvas-components): Overview of built-in and custom canvas components in Pixi’VN, including extension and memory features.
- [Filters](/start/canvas-filters)
- [Components functions](/start/canvas-functions): Functions for adding, finding, removing, and handling events on canvas components in Pixi’VN.
- [ImageContainer](/start/canvas-image-container): Usage and features of the ImageContainer component in Pixi’VN for grouping and manipulating multiple images as a single canvas component.
- [ImageSprite](/start/canvas-image): Guide to using the ImageSprite component in Pixi’VN, including initialization, loading, adding, showing, and removing images on the canvas.
- [Lights](/start/canvas-lights)
- [Animate (motion)](/start/canvas-motion): Learn how to animate Pixi’VN canvas components using the canvas.animate function, including examples of movement, rotation, fading, zooming, and mirroring.
- [Properties for positioning](/start/canvas-position): Overview of positioning properties in Pixi’VN, including pixel, percentage, anchor, pivot, and align.
- [Spine 2D](/start/canvas-spine2d)
- [Text](/start/canvas-text): How to display and style text on the canvas using the `Text` component. Covers `showText`, `TextStyle`, removal, and positioning features.
- [Three.js](/start/canvas-threejs)
- [Tickers functions](/start/canvas-tickers-functions)
- [Ticker](/start/canvas-tickers): Overview of Pixi’VN tickers, which are used to animate canvas components and perform transitions. Learn how to create custom tickers and use them effectively in your Pixi’VN projects.
- [Transitions](/start/canvas-transition): Learn about the built-in transition effects in Pixi’VN for showing and removing canvas components, including dissolve, fade, move, push, and zoom transitions. Discover how to customize or create your own transitions for advanced visual effects in your game's flow.
- [VideoSprite](/start/canvas-video): How to show, add, control and manage video assets on the canvas using the `VideoSprite` component (`play`, `pause`, `loop`, `restart`, and lifecycle helpers like `showVideo` / `addVideo`).
- [Canvas (WebGL/WebGPU)](/start/canvas): Overview of how Pixi’VN uses PixiJS for rendering, differences between Pixi’VN and PixiJS, and how to interact with the canvas and debugging tools.
- [Characters](/start/character): How to define, use, and customize characters in Pixi’VN, including storage, emotions, and custom properties.
- [Choice menus](/start/choices): Explains how to implement and customize interactive choice menus in Pixi’VN, allowing players to make decisions that affect the story.
- [Dialogue](/start/dialogue): How to use, customize, and manage dialogue objects in Pixi’VN, including glue and UI integration.
- [Desktop & mobile devices](/start/distribution-desktop-mobile): Learn how to distribute your game for desktop and mobile platforms using Tauri and GitHub Actions.
- [itch.io](/start/distribution-itchio)
- [Website](/start/distribution-website): This page explains how to distribute your Pixi’VN game as a website, including hosting options, deployment steps, and enabling PWA features for installation.
- [Distribution](/start/distribution)
- [Flags management](/start/flags): Explains how to use boolean flags in Pixi’VN to control game flow.
- [History](/start/history): Describes how Pixi’VN tracks and manages narrative history, including dialogue, choices, step counters, and save limits.
- [Input prompt](/start/input): Explains how to prompt the player for input in Pixi’VN, including usage, retrieval, and removal of input requests.
- [Connect the UI components with the game variables](/start/interface-connect-storage): Explains how to connect UI components to the game's persistent storage using TanStack Query, with example hooks (useQueryText1, useQueryText2), cache invalidation on step/label/save-load events, and a UI input example.
- [UI screen examples](/start/interface-examples): Provides UI screen examples for Pixi’VN, showing React and Vue components, and demonstrating hooks (e.g. useQueryDialogue, useQueryChoiceMenuOptions, useQueryCanGoNext) and integration with narration for choices, next/back, input prompts, and history.
- [Change UI font and text size](/start/interface-font): How to change the UI font-family and text sizes in Pixi’VN projects.
- [Navigate/switch between UI screens](/start/interface-navigate): Learn how to navigate between different UI screens in Pixi’VN using routing systems.
- [PixiJS UI](/start/interface-pixijs): How to use PixiJS layers and components to build custom UI screens in Pixi’VN, and combine them with HTML UI.
- [React UI](/start/interface-react): How to integrate Pixi’VN with React, including setup, templates, and best UI libraries. Create a React visual novel or 2D game.
- [Vue UI](/start/interface-vue): How to integrate Pixi’VN with Vue, including setup, templates, and UI examples. Create a Vue visual novel or 2D game.
- [User Interface (UI) with JavaScript Framework](/start/interface): How to build and integrate UI screens in Pixi’VN using external JavaScript frameworks like React, Vue, and PixiJS.
- [Advanced label features](/start/labels-advanced): Explains advanced label options in Pixi’VN, such as onLoadingLabel, onStepStart, onStepEnd, and dynamic step lists.
- [Manage narration flow with labels](/start/labels-flow): Describes how to control the narrative flow in Pixi’VN using labels, including call, jump, and close labels function.
- [Labels and steps](/start/labels): Explains the core concepts of labels and steps in Pixi’VN, detailing how narrative flow is structured and managed within the engine.
- [Make your game engine](/start/make-game-engine): Guide for advanced users on customizing and replacing Pixi’VN engine modules to build a custom game engine.
- [Make your VN builder or web-game editor](/start/make-ide): Guide for VN builder and web-game editor authors: How to export a JSON file to integrate tools with Pixi’VN.
- [Make your first RPG game](/start/make-rpg)
- [Make your first Visual Novel](/start/make-visual-novel): Step-by-step guide to creating a visual novel with Pixi’VN, covering project setup, narrative, assets, and interactivity.
- [Markdown](/start/markup-markdown): Overview of using Markdown and its integrations in Pixi’VN, with examples for React, Vue, Svelte, and Angular.
- [Tailwind CSS](/start/markup-tailwindcss): How to add Tailwind CSS to a Pixi’VN project, recommended plugins, and examples of using to style dialogue and UI.
- [Markup language and CSS](/start/markup): Overview of markup languages in Pixi’VN and recommendations for using Markdown and CSS frameworks.
- [Minigames](/start/minigames): Guide to integrating minigames into Pixi’VN, including best practices, lifecycle management, and example implementations using PixiJS and React.
- [Narration](/start/narration): Overview of narrative languages in Pixi’VN and how to structure interactive stories using dialogues, choices, and input prompts.
- [Other narrative features](/start/other-narrative-features): Covers additional narrative features in Pixi’VN, including end-of-game handling, error management, and random number generation.
- [Save and load](/start/save): This page explains how to implement saving and loading game progress in Pixi’VN, including file export, IndexedDB usage, and auto-save strategies for browser games.
- [Sounds and music](/start/sound)
- [Storage](/start/storage): How to store, retrieve, and manage persistent and temporary variables in Pixi’VN, including Keyv integration.
- [Storage classes](/start/stored-classes): How to create classes whose properties are stored using `StoredClassModel`.
- [Temporary storage](/start/temp-storage): Explains how to use temporary storage in Pixi’VN for variables that are only needed during a specific narrative period.
- [Templates](/start/templates): Overview of available Pixi’VN templates for different game genres and frameworks, including links and live previews. Visual Novel for React, Text-based Story for React, Point & Click Adventure for React, and more.
- [Internalization](/start/translate): This page explains how to add multi-language support to your Pixi’VN game using i18next, including UI and narration translation strategies. How to translate the visual novel?
- [Ren'Py vs Pixi’VN](/start/versus-renpy): Comparison between Ren'Py and Pixi’VN engines for visual novel development, covering language, UI, performance, and flexibility.
- [Why?](/start/why): Overview of Pixi’VN's purpose, features, and advantages as a modern, flexible 2D game engine.

## ink language integration

- [ink language integration](/ink): Write interactive narratives using ink, a scripting language designed for branching stories, integrated with Pixi’VN.
- [Assets](/ink/assets): Describes how to define, initialize and load assets in Pixi’VN (ink), including asset matrix setup, ink load/lazyload commands, manifest examples, and asset aliases.
- [Canvas (WebGL/WebGPU)](/ink/canvas): How to control Pixi’VN canvas components from ink scripts using hashtag commands such as `# show`, `# edit`, `# remove`, `# pause`, `# resume` and `# animate`. Explains syntax, parameters and examples.
- [Characters](/ink/character): Learn how to define, use, and customize characters in Pixi’VN ink scripts, including dialogue association, name replacement, renaming, and emotions.
- [Choice menus](/ink/choices): How to present and control choice menus in native ink, including once-only, sticky, conditional and fallback choices. Compatible with the Pixi’VN integration.
- [Custom hashtag command](/ink/hashtag)
- [Inky](/ink/inky): Use Inky, the official editor for ink scripts, to write and test your narrative.
- [Input prompt](/ink/input): How to request text or numeric input from the player in ink using the Pixi’VN "# script" and access the result inside your narrative.
- [Knots](/ink/labels): Learn how knots and labels work in Pixi’VN, how to run them from ink scripts or JavaScript, and the differences between native ink and Pixi’VN integration.
- [Markup language and CSS](/ink/markup)
- [Other narrative features](/ink/other-narrative-features): Explains features such as `pause` and `continue` and how they affect `steps` and dialogue flow.
- [Text replacement](/ink/replacement)
- [Sounds and music](/ink/sound)
- [Storage](/ink/storage)
- [Temporary storage](/ink/temp-storage)
- [Internalization](/ink/translate)
- [VS Code Extension](/ink/vscode-extension): Unofficial VS Code extension for editing and live-testing ink scripts with Pixi’VN. Provides syntax highlighting, engine selection, and real-time preview for your narratives.

## Ren'py language integration

- [Ren'Py Language Integration](/renpy)

## NQTR

- [Navigation Quest Time Routine (NQTR)](/nqtr)
- [Activity](/nqtr/activity)
- [Make your first Point & Click Adventure](/nqtr/make-point-and-click)
- [Navigation and map](/nqtr/navigation): How to define, organize, and navigate rooms, locations, and maps in Pixi’VN, including custom classes and usage examples.
- [Quests](/nqtr/quest)
- [Routine](/nqtr/routine)
- [Time system](/nqtr/time)

## Pixi'VN Json

- [Pixi’VN + Json Integration](/json)
- [PixiVNJson Model](/json/PixiVNJson)
- [PixiVNJsonChoices Model](/json/PixiVNJsonChoices)
- [PixiVNJsonConditionalStatements Model](/json/PixiVNJsonConditionalStatements)
- [PixiVNJsonLabelToOpen Model](/json/PixiVNJsonLabelToOpen)
- [PixiVNJsonOperation Model](/json/PixiVNJsonOperation)

## FAQ

- [FAQ](/faq): Frequently Asked Questions about Pixi’VN
- [Migration guide](/faq/migration)